Number-to-Color Translation Table
The Fill Paint property uses the Number-to-Color Translation table in Ignition, commonly known as Color Mapping. This is where you map a value to a color. For every number range there is a set color. You can choose a different color for each value, and even make it blink between two different colors. If you need to add or remove a value, simply use the add rowand remove row icons on the right side of the Number-to-Color Translation table. In this SVG example, value '0' is set to red, value '1' is set to green, and value '2' is set to blink between yellow and orange. If you are using this as a tint overlay, make sure each color is semi-transparent so you can see the actual symbol behind it. There is a Low Fallback Color option so when a value falls below your lowest value, a default color can be set.
A Tag Binding is a very straight-forward binding type. It simply binds a single property directly to a Tag. For this example, every time the Tag binding is evaluated, the Fill Paint property changes, pushing the new color to the component of the SVG. To learn more about tags, refer to the section on Understanding Tags.
Bind the Fill Paint property to any numeric Tag. If you are not familiar with numeric, it's any number value. Integers are the best, but you can also use a boolean, float, etc. In this example, ‘WriteableInteger5’ was selected. Set the values in the Number-to-Color Transition table to drive the color of a component of an SVG.
- On Value 0, make the component red by double clicking on the first row. Under Color, select red and press OK.
- On Value 1, make the component green. Double click the second row and under Color, select green and press OK.
- Add a row by clicking the Add Row icon .
- On Value 2, make the square component blink between yellow and orange. Double click the third row and check the Blink box, and select the colors yellow and orange.
- Press OK.
Once you press OK button, you’ll notice that the component of the SVG changed color based on the current value of the Tag. The Value is set to '0' and the color is red. To change the Tag value, go to the Tag Browser, double click on your tag value, and change the value from '0' to '1'. Press Enter. The component of the SVG will change from red to green. Now, change the Value from '1' to '2', and the color will blink yellow and orange.
You can use the same number to color translation table with a property binding. Custom properties are extremely useful because they can turn your plain component into one customized for your particular use. Adding Custom properties like Status or Level can transform your SVGs into more than just an image. Refer to sections on Property Binding and Component Customizers to learn more.
Drag in a Motor SVG and create a custom property on the Motor called 'Status.' In this example, right click on the Motor and select Customizers > Custom Properties. Enter the name 'Status' and use the default 'Integer' type. Press OK.
Click the Fill Property icon, and select the Property binding type. Under the Motor object, select your new 'Status (Integer)' property. Choose your colors and values. Press OK.
Once you press OK, you’ll notice that the square component of the SVG changed color based on the value of the tag. An Integer value defaults to '0' and in this case the color is purple. To change the tag value, go to the Property Editor, double click on the Status property value, and change the value from '0' to '1'. Press Enter. The component of the SVG will change from purple to whatever color you set '1' too.
You can also use the Style Customizer to achieve the same result as with the Property Binding. Like the previous example, we will need a Status property to drive the style. Let's create that same Status property on the inner component of the SVG. Select the component of the SVG, right click and scroll down to Customizers > Custom Properties. Enter the name 'Status' and use the default 'Integer.' Press OK.
With the inner component still selected, right-click and select Customizers > Style Customizers. Select the Status property as the driving property, select Fill Paint from the list of Styled Properties, and then choose your colors for each value, adding values if needed. Press OK.
To change the Tag value, go to the Property Editor, double click on the Status property value, and change the value from '0' to '1'. Press Enter. The component of the SVG will change from purple to whatever color you set it too.
In the event you see the Fill Paint property highlighted in red, this is a warning message that you have two competing property bindings that should be resolved. In this case, this warning message popped up because the Fill Paint property has both a Binding, and a Style applied to it.
There are several types of Bindings that can be used to set colors directly, without using a mapping table.
You can use the expression language to calculate a value. If you have a color that depends on multiple properties, then using an express is recommended to evaluate correctly. Here are a few examples. The first example returns a static color using the Fill Color property.
This example takes a Tag value and translates it to a color that ranges from white to blue as the Tag value increases.
If you have multiple properties or Tags, you can use the logic Expression Functions to select between a few colors.
This example takes one integer value and selects from several options.
SQL Query bindings only have to return a string that can be translated to a color. Any set of RGB values can be listed using an integer representation ie: "255,0,255" or HEX "FF00FF".
In most cases you will be using a table in the database. Assuming the following table (where background and foreground are strings):