How to create a custom Indicator Light

The app allows you to create custom Indicator Lights that show up if a certain Car- or Truck Status is active (e.g. Headlights on/off, Pit Limiter active/inactive, Oil Pressure Warning active or others). The number and type of available status values dependes on the specific game.

Default Icons for Headlights, High Beam, Blinker left and right


If you want to specify your own icon for one of the Status values, read on.


Add the Widget to your Design

  • Enter the Edit mode on one of your Designs, by clicking the Pen Icon in the upper red bar.
  • Then click on the red Plus Icon and then on Add widget/design
  • If your Design is currently empty, click on Create new Design
  • In the Widget Browser choose:
    • the Category Vehicle on the left side
    • and the Group Lamps on the right side
    • Then add the Custom smart SVG Icon to your Design (If it's not there, your game does not support status indicators)

Customize the Widget

By default the widget just shows an Warning Light and is not connected to any status value.

Preconditions

  1. Make sure that your are in the Edit Mode
  2. Select the Widget on your Design
  3. Click on the green Customize Icon

Select the Data Values

  • Select the Data Values that should trigger this Widget. In this Option you have to specify at least one Data Value, e.g. Headlight
    • You can also specify more than one Data Value, if your Icon should light up if any of these status values is on
    • Certain Status Values like DRS have two states (e.g. available and active). You can specify a different color for each of these states


Look of your Icon

Now the most important Part, the look of your Icon!

  • You need a SVG (Scaleable Vector Graphic) Icon, you can find them on the Web or create your own if you are familar with the SVG Path Syntax
  • Resources to find SVG Icons:

If you got your SVG Icon, like this:

Either copy the whole SVG Contents of the Icon into the Path Parameter of the widget like in these two examples:

Inline SVG for HTML can be used

<svg style="width:24px;height:24px" viewBox="0 0 24 24>
    <path fill="#000000" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" />
</svg>

SVG File Contents can be used

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="24" height="24" viewBox="0 0 24 24">
   <path fill="#000000" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" />
</svg>

or copy just the Path value to the Path Parameter of the Widget:

M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z

Inline SVG in the Path Parameter of the Widget


Colors

  • You can now specify the Active color that is used if the selected Status from the Data Value is on.
  • As well as the Inactive color that is used if the Status of the Data Value is off.
  • For special Data Values like DRS there is also the Intermediate color if its available, but not activated.
  • If you like to simulate a Dashboard Indicator that is invisible if the in-game Dashboard is off and your Game sends the Backlight Brightness Parameter (like ETS2 and ATS) you can also
    • Enable React on Game Tachometer Brightness and specify the corresponding Inactive color.
    • For example choose a color with #00000000 the two first numbers as zero to hide it, if the backlight of the in-game Screen is off
    • Or set the color to the same color as your Dashboard, to achieve a similar effect

Scaling

  • Specify the Scaletype to either Scale (default) or Stretch. Scale will fit the Icon in the bounds of your Widget, Stretch will maximize it to the bounds of your Widget, but will not keep the aspect ratio of your Icon.
  • Choose the Aspect Ratio of your Widget. If you have Stretch selected as the Scaletype you can use the Aspect Ratio of the Widget to select the desired Proportions of Width and Height

Example for a stretched Image with non matching Aspect Ratio