Cheat sheet Overlay Toolkit - Lailloken/Lailloken-UI GitHub Wiki

Feature Overview

  • customizable overlays with single-hotkey access and seemless switching

  • high customizability: size, position, segmentation

  • easy management: create, import, and edit cheat-sheets without additional software

  • create advanced, tooltip-like overlays for almost any mechanic in the game

  • access 3rd-party web resources or apps without alt-tabbing and managing windows

User Interface & Settings

  • this feature has its own section in the settings menu, with UI and sub-feature options as well as interfaces for managing cheat-sheets

  • feature-specific hotkeys:

    • arrow keys: move image-based overlays across the screen

    • F1/F2/F3: reduce/increase/reset overlay-size

    • space: reset segmented image-overlay, reset advanced-overlay highlighting

    • TAB: show the complete segmented image-overlay

Setup: General

Using Sanctum and Betrayal as examples, the following sections will show the different overlay types, how to set them up, and how to use them. These steps can be used for other mechanics as well, simply by replacing the league-specific elements.

  • this feature has to be enabled in the settings menu
    image

  • the default method of activation is ALT + omni-key, but it can be changed to CTRL + omni-key or SHIFT + omni-key

    • adding a modifier-key to the omni-key is a precautionary measure to keep the regular omni-key and this cheat-sheet hotkey as responsive as possible

  • in the settings menu, there is a section to create new cheat-sheets

    • enter a preferred name, select a type (images, app, advanced) and click 'add'

  • a new section will appear as soon as at least one sheet has been added
    image

    • red highlighting on a button indicates that additional calibration has to be done (the same as with screen-checks)

  • each sheet has its own screen-check that needs to be calibrated, which enables a single-hotkey user-experience

    • in essence, this is where you "tell" the script which cheat-sheet to activate when you press the hotkey while something specific is on screen

    • clicking cal will open the Windows snipping tool with which an area of the screen has to be captured

    • in this example, a cheat-sheet for Sanctum will be set up, so the screen-check has to be calibrated with something from the Sanctum UI
      image

    • click 'test' to see if the screen-capped image can be found on screen

    • the button in the list will remain red until a test has returned a positive result

  • after successful calibration, pressing the cheat-sheet hotkey-combination while the Sanctum map is open should show this tooltip near the cursor
    image

    • this means the cheat-sheet can generally be accessed and is merely missing content

Setup: Image-based Overlays

  • click the edit button of an image-based overlay in the list of available sheets

  • the section under manage image-files: shows a list of numbers starting from 00

    • these are 'slots' into which images can be imported

    • slot 00 is reserved for 'segmented' cheat-sheets, which will be explained further below

    • the lowest free slot will be highlighted green

    • clicking paste will import an image file or raw image-data from the clipboard into the slot

    • clicking snip will open the Windows snipping tool with which screen-caps can be imported directly

    • long-clicking preview will activate the overlay in order to show what the current configuration looks like

  • this image will be used to create an example cheat-sheet

    • you can either right-click the image in your browser and select "copy image", then paste it into slot 01

    • or you can copy it from your local storage (if you have downloaded it), then paste it into slot 01

    • or you can click 'snip' and screen-cap a smaller area if you don't want to use the whole image

  • after importing the image, slot 01 will show additional options, and slot 02 will be highlighted as the new lowest free slot
    image

  • if you now press the hotkey-combination while the sanctum map is open, the image will be overlaid in the center of the screen
    image

    • while the overlay is active, you can use the arrow keys to change its position, F1/F2 to resize it, and F3 to reset the size

    • size and position settings are saved and persist across sessions

  • if multiple slots have images loaded into them, there are different ways to access and switch between them while the overlay is active:

    • pressing a number-key that corresponds to a given slot (or a letter-key that can optionally be assigned)

    • right-clicks will switch to the next slot, long right-clicks to the previous one

Setup: Segmented Image-based Overlays

  • as mentioned earlier, slot 00 has a specific function because it alters how an image-overlay behaves

    • slot 00 is 'anchored' to the overlay, i.e. it will always be displayed (not matter which slot is active)

    • it is reserved for headers of a table or similar illustration and can be moved to the very left or very top of the overlay

    • so this means: instead of accessing an image and displaying in the overlay by itself, you access images and add them to the overlay

  • to illustrate this, slot 01 from the previous setup section will be deleted in order to create a segmented Sanctum cheat-sheet instead

    • clicking snip on slot 00 has a different effect: it opens a snipping widget instead of the Windows snipping tool
      image

    • this widget has a help-icon which shows additional instructions when hovered

    • this widget can be moved and resized, and it serves as a more accurate way of doing screen-capping
      image

  • the widget was moved over the header of the Sanctum table in order to screen-cap it as image 00 (as mentioned earlier: 00 is reserved exclusively for headers)

    • clicking snip on slot 00 again will now screen-cap the area underneath the teal part of the widget and import that as image 00
      image
    • there is now a dropdown-list with the options "top" and "left" to determine where to anchor that part of the image

  • while the snipping widget is active/focused, the arrow-keys can be used to move and resize it

    • arrow-keys move it by 1 pixel, CTRL + arrow-keys by 10 pixels

    • ALT + arrow-keys resizes the widget by 1 pixel, CTRL + ALT + arrow-keys by 10 pixels

  • this process was repeated four times (once for each floor) to screen-cap images 01 - 04
    image

  • these are all the imported images:
    Untitled 3

    • if you now press the hotkey-combination while the sanctum map is open, the overlay will activate but only show the header (image 00)

    • pressing the number-keys 1 to 4 will add the corresponding images to the overlay, which means that only the most relevant information will be on display (thus making the overlay more compact)
      image image

    • pressing space will reset the overlay to only show the header

    • holding TAB will temporarily show the whole image (until released, then revert to the previous selection)

Setup: App-based Overlays

  • "overlay" is used very liberally because this type is not an overlay in the narrower sense

    • rather, the script uses an open window on your system an activates it on demand, putting it in front of the game-client

    • I implemented this more as an after-thought – one could call it "glorified alt-tabbing" – but it could still be useful in some situations

  • click the edit button of an app-based overlay in the list of available sheets

  • the lower half of the configuration window looks different for app-based overlays
    image

    • you have to specify the window title of a window you want the script to activate

  • for this example, this syndicate web-app is used

    • when opened, the window title of your browser is "Syndicate Cheat Sheet - Path of Exile Tools"

    • it's sufficient to only copy the first half of the title, but it is case-sensitive, so make sure to copy the text 1:1

    • you can click 'test' to see if the script activates the correct window

    • NOTE: the window title of browsers changes depending on which tab is active, so it's best to open these websites in a separate window, or to create 'browser apps' that are launched in separate windows

    • optionally, you can specify an .exe or shortcut file that will be launched if the window isn't already open

  • pressing the hotkey-combination while the syndicate board is open activates the browser window with the web app
    image

Setup: Advanced Overlays

  • if at least one advanced cheat-sheet has been created, a new set of options will be displayed in the settings menu
    image

  • advanced overlays rely on additional screen-checks because they are specific to individual elements in the game

    • instead of displaying, for example, a whole table of information, these only show information for one specific entry (Sanctum example: one specific room)

    • these entries have to be compiled in a list

  • click the edit button of an advanced overlay in the list of available sheets

  • the lower part of the configuration window for advanced overlays contains an edit-field into which these entries have to be added
    image

    • in the case of Sanctum league, these entries are the individual room types

    • you don't have to copy the in-game names of the objects 1:1, but it's often better to not abbreviate too much since the list is sorted alphabetically

  • added entries will appear in a list below, and the these can be clicked to edit the actual overlay-texts
    image

    • an entry can have up to four individual text-panels which will be displayed below the cursor when the overlay is activated

    • you don't have to use all four panels, the overlay will skip empty boxes

  • long-clicking 'preview' will activate the overlay and show what it looks like with the current settings and texts
    image

    • text-panels can be highlighted by hovering over them with the cursor and pressing 1 to 4 (the colors can be customized in the settings)

  • pressing the hotkey-combination while the Sanctum map is open will show a tooltip "no match" near the cursor

    • this is because the script only 'knows' about the entry but doesn't 'know' what it looks like on screen

    • to calibrate an entry's screen-check, hold right-click and press the hotkey-combination while hovering over a 'chambers of inscription' room on the Sanctum map

    • this will activate the Windows snipping tool with which to screen-cap the name plate of the room
      image

    • if snipping was successful, a small window will open, asking you to link the screen-cap to an object
      image

    • this window can also be used to add new objects to the list as you progress in game, so it's not strictly necessary to go to the settings menu all the time

  • after selecting the corresponding entry and clicking 'save', the hotkey-combination should activate the sheet and also recognize the entry that is being hovered over
    image

General Usage

  • pressing the hotkey-combination while a specific in-game UI is on screen will activate overlays

  • overlays activated this way can be customized in specific ways, depending on the type of overlay

    • refer to the 'user interface' and 'setup' sections above, as well as to help tooltips in the tool itself