Ignition 8.1
Ignition 7.9
Ignition 7.8
Sepasoft - MES Modules
Cirrus Link - MQTT Modules
Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples
You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.
This example takes a Tag value and translates it to a color that ranges from white to blue as the Tag value increases.
// binding on the Fill Color property
color(255,255,255-({tag value}/100*255)) // fades from white to blue when Tag value goes from 0 to 100 %
If you have multiple properties or Tags, you can use the logic Expression Functions to select between a few colors.
if({Tag1}>50,
if({Tag2},
3, // if tag1>50 and tag2 is true
1), // if tag1>50 and tag2 is false
if({Tag3},
2, // if tag1<=50 and tag3 is true
0)) // if tag1<=50 and tag3 is false
This example takes one integer value and selects from several options.
// binding on the fill color property
switch({HOA tag},
0,1,2, // off, on, hand
color(255,0,0), color(0,255,0), color(255,255,0), // red, green, yellow
color(0,0,0)) // black (fallback color)
The Number-to-Color Translation, commonly known as Color Mapping is where you map a value to a color within a binding. When selecting a binding type where producing a color won't be possible, the Number-to-Color Translator will appear at the bottom of the binding window. This includes Property Bindings, Tag Bindings, and Indirect Tag Bindings. The way the Number-to-Color Translator works is that for every number range there is a set color. The binding then translates the numeric value into a color based on the mapping table. 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 values, simply use the add row (
) or remove row icons (
) on the right side of the Number-to-Color Translation table. There is a Low Fallback Color option so when a value falls below your lowest value, a default color can be set.
Many Vision components support the Style Customizer, which lets you define a set of visual styles that change based on a single Driving Property. Typically, you'll have a property on your component that you want to use as a driving property (like a discrete state), which then drives multiple visual properties, like the font, border, and foreground color, to change to a specific style that was setup per state beforehand. Style Customizer lets you define these relationships all at once, and lets you preview them too! Without styles, you would have to go to every property and bind them all individually.
The Style Customizer window has multiple parts to it.
You can bind a property that is already being used by a style, but a warning icon will appear on the property, and the property name turns red in the In the Property Editor. This means there is a conflict between the binding on the property, and the style on the component. As a general practice, only the style or binding should write to the property, not both.
The best example of the Style Customizer in action is the Multi-State Indicator, as this component uses the style customizer to work properly and switch between different states, so it can be used as an example already built in. However, the many other components can use the Style Customizer, so this example will set up styles for a Cylindrical Tank.
