Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: small edits

 

Using Color on Components

Using color on components is an important part of creating effective HMIs. While static colors can help identify specific features on the screen, dynamic colors can help draw the users attention to certain areas. Making color type properties such as Fill Paint dynamic works a little bit differently than other properties with simple types. There typically aren't Tags of type color, so the way we set up bindings on these types of properties works a little bit differently, and we have a few options available to us.

Using Expression Bindings

You can use the expression language to calculate a color using the color() function.  If you have a color that depends on multiple properties, then using an express is recommended to evaluate correctly. This first example returns a static color using the Fill Color property.

Code Block
languageactionscript3
titleExpression
// binding on the Fill Color property
color(255,0,0) // static red color



On_this_page



This example takes a Tag value and translates it to a color that ranges from white to blue as the Tag value increases.

Code Block
languageactionscript3
titleExpression
// 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.

Code Block
languageactionscript3
titleCustom Properties
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.

Code Block
languageactionscript3
titleExpression Referencing a Tag
 // 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 Translator

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, use the Add New Translation  icon or Delete Selected Translation  icon 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.

In this example, the fill color two parts of the conveyor symbol has been bound to the Ramp1 tag, enabled value.  When the Ramp is enabled (value = 1), the symbol displays parts in the norma, yellow color. When the Ramp is disabled (value = 0), the fill color on those two parts is red, indicating the conveyor belt is not running. For more information on how this was applied to a symbol, see Images and SVGs and Images in Vision.



Style Customizer

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.


Scroll HTML Exporter Ignore


Iulink
Description
URLhttps://www.inductiveuniversity.com/video/component-styles?r=/course/components-property-binding
NameComponent Styles

 



Style Customizer Window

The Style Customizer window has multiple parts to it.

  • Driving Property - The value of the selected property will be used to determine the style used. Only certain properties on the component can be used as driving properties, but the most common are discrete state properties. Custom Properties can also be used here.
  • Styled Properties - Here you can select which properties will be used in the styles. Any properties that are in the left panel are available to be used in the styles, while properties in the right panel are already being used in the style. Properties can be moved between the panels by selecting it and clicking the appropriate arrow button.
  • Styles - The list of styles that will be available for this component. Each style has a Value property on the left. When the value of the Driving Property is greater than or equal to the value of a style, that style will be applied to the component. Each style gives a preview of what it looks like, and can be expanded to edit the properties within that style. You will notice in the example below that the properties being used in the Styled Properties are the Background Color, Border, Foreground Color, and Text, which corresponds to the properties we have available within each style in the Styles area. Each style can also be animated by clicking the animation checkbox. This allows you to add different steps to the style, where each step of the style can have its own unique style. Each step also gains a Step Duration (ms) property that is used to determine how long the step is active for. This is typically used to create a flashing effect, where the component will flash between two different colors.

Value Conflict

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. 
 

Style Customizer Example

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.

  1. Add a Cylindrical Tank component to the window, and right click on it and go to Customizers > Style Customizer.
  2. Select a Driving Property. Here, the Value is a good choice as we can change the tank to flash when the contents get too high.
  3. In the Styled Properties select he select the Border, Liquid Color, and Show Value.



  4. Lastly, we need to set up the different styles. Click the Add icon three times to add three styles.
  5. Leave the first style set to Value 0.00, and don't change any of the other settings.  
  6. Set the second style Value 45. 
    1. Click the Expand  icon. 
    2. Click the Border Chooser  icon. 
    3. In the Border Chooser, select the Line Border style, set the width to 5px, and the color to Yellow. This way, it is obvious the tank is filling up. 
    4. Click OK.

       

  7. For the third style, we're going to animate it and and create two steps to alert the user that the tank is almost full. Set the third style Value to 90, then click the Expand  icon. Set the following options:
    • Animate checkbox checked.
    • Step Duration 500 ms. 
    • Border Line Border
    • Liquid Color orange
    • Show Value checkbox checked
  8. Click the Add icon to add another step. Set the following options for the second step:
    • Step Duration 1000
    • Border Line Border
    • Border Color orange
    • Liquid Color red
    • Show Value checkbox checked


  9. Click OK to save the style.
  10. In the Vision Property Editor, change the Value to 95.  You'll see the Tank component change to reflect the style settings. 





Next_link