Skip to content

How to create a new System Preset

Jump to bottom
Jos Demmers edited this page Mar 26, 2024 · 42 revisions

The settings menu allows you to switch between System presets matching your resolution. Follow the steps on this page to create your own.

Naming convention

To keep all system presets organized the folder name should contain the resolution and relevant in-game settings, including the language. For example:

2160p_HLF_en : HDR Large Font, English
1400p_SMF_en : SDR Medium Font, English
1080p_HSF_en : HDR Small Font, English

Languages

Language code
English en
Brazilian Portuguese pt-br
Chinese (Simplified) zh-CN
Chinese (Traditional) zh-CHT
French fr
German de
Italian it
Japanese ja
Korean ko
Polish pl
Russian ru
Spanish (EU) es-ES
Spanish (LA) es-US
Turkish tr

Folder structure

See 1440p_SMF_en for an example:

\---D4Companion:.
    \---Tooltips
        |    tooltip_gc_square.png (optional)
        |    tooltip_gc_x.png (optional)
        |    tooltip_kb_all.png
    |   dot-affixes_normal.png
    |   dot-affixes_reroll.png
    |   dot-aspects_legendary.png
    |   dot-aspects_unique.png
    |   dot-socket_1.png
    |   dot-socket_1_mask.png
    |   dot-splitter_1.png
    |   dot-splitter_top_1.png

Tooltips

This folder contains images to recognize the item tooltip. Make sure to use the file names as shown in the example.

  • For keyboard/mouse: tooltip_kb_all.png
  • For game controllers: tooltip_gc_*. e.g. tooltip_gc_square.png or tooltip_gc_x.png

Capture images

You can easily capture the required images by pressing Shift + Windows Key + S. Then use the snipping tool to draw a rectangle around the part you want to capture.

  1. Save the affix location as dot-affixes_normal.png.
  2. Save the enchanted affix location as dot-affixes_reroll.png.
  3. Save the aspect location as dot-aspects_legendary.png and for unique items as dot-aspects_unique.png.
  4. Save the socket location as dot-socket_1.png and dot-socket_1_mask.png.
  5. Save the top splitter location as dot-splitter_top_1.png.
  6. Save the other splitter location as dot-splitter_1.png.
  7. Save the Shift image as tooltip_kb_all.png in the Tooltips folder.

Socket images

To be able to detect sockets two images are required. The first one from an empty socket (dot-socket_1.png). The second one is a mask (dot-socket_1_mask.png). The mask is used so we can ignore socketed gems.

  1. This is the empty socket image. Name this one dot-socket_1.png.
  2. This is an example on how to create the mask image. Open the dot-socket_1.pngand edit it in for example Gimp. Select a rectangle as shown in the example so that only the corners are outside. Now make everything inside the rectangle white and the outside black. Save this new image as dot-socket_1_mask.png.
  3. This is the resulting dot-socket_1_mask.png image.

Testing

Start by creating the tooltip image tooltip_kb_all.png and save it in your Tooltips folder.

  • Now start the app, go to Settings, and choose your System preset.
  • Go to Affixes and enable the Affix Overlay.
  • Go to Debug and check if the tooltip is detected. You should see a red rectangle like in the image below.

If the width does not match the tooltip you can adjust it using the Tooltip width setting.

  • Next step is to collect all the other required images. You can use the debug tab to test those images as well.

Sharing

You can share your created preset with others by sending me zip file containing all the images.

  • Create a new GitHub issue and add your zip file as attachment.
  • Or post the zip file on Discord.

Another option is to create a pull request. This requires the following steps:

  1. Add your images in: tree/master/downloads/systempresets-v3/images
  2. Add your zip file in: tree/master/downloads/systempresets-v3
  3. Update blob/master/downloads/systempresets-v3/systempresets.json

systempresets.json

  • FileName: Name of the zip file.
  • Resolution: In-game setting.
  • Config: In-game setting.
  • Language: In-game setting. (See languages)
  • TooltipWidth: App setting. (See debug)
  • BrightnessThreshold: App setting. (See debug)
  • Affix Area Height Offset (Top): App setting. (See debug)
  • Affix Area Height Offset (Bottom): App setting. (See debug)
  • Affix/Aspect Area Width Offset: App setting. (See debug)
  • Aspect Area Height Offset (Top): App setting. (See debug)
Clone this wiki locally