Skip to main content

State indicator

Indicator

The state indicator component shows a circle/rectangle/square indicator which changes its look based on a runtime variable value.

Features​

Configuration​

This section controls the behavior of the component:

Target page - if multiple pages are defined, the indicator can act as a navigation item. Selecting a page here will cause the browser to navigate to the selected page at runtime whem it is clicked.

Placeholders - allows defining placeholder values to be sent to the selected target page when navigating. See HMI navigation for more information about navigation and placeholder handling.

Style​

The style properties define the default look and feel of the component (i.e. no state is active or defined).

Background color - the background color of the component. A hex value can be input in one the formats:

  • #RRGGBB
  • #RRGGBBAA
  • #RGB
  • #RGBA

Where:

  • R=red color component
  • G=green color component
  • B=blue color component
  • A=alpha (transparency) component

Alternatively, the integrated color picker can be used to visually pick a color:

Color picker

Border color - the color used for the component border.

Icon color - the color of the icon displayed inside the indicator (if an icon is selected).

Shadow - allows specifying a component shadow using the built-in shadow editor:

Shadow editor

  • X offset - the shadow horizontal offset in pixels (can be negative)
  • Y offset - the shadow vertical offset in pixels (can be negative)
  • Blur - the shadow blur radius. A higher value results in a blurrier shadow, while a lower value will result in a more sharp shadow.
  • Color picker - the shadow color

Opacity - controls the transparency of the component.

States​

This section allows defining condition-based visual states. These can be used to alter the look based on external factors.

States variable - the runtime variable which is used to evaluate the state. The value of this variable is compared against the value of each state to decide which is the active state. If no match is found, the component will be displayed using its default values.

Test value - this is a test value that can be used to change the active state at design time. It simulates receiving the test value as the state variable value.

States - the list of defined states. Use the green button to add a new state:

Add state

State properties​

Trigger - Chooses the trigger value for the state. If set to Value, the HMI will compare the value received through the States variable against the provided numeric value. If set to Variable, it will evaluate the variable value and compare it against the States variable value. If the two values are equal, the compoent will switch to this state.

Background color - the background color of the component. A hex value can be input in one the formats:

  • #RRGGBB
  • #RRGGBBAA
  • #RGB
  • #RGBA

Where:

  • R=red color component
  • G=green color component
  • B=blue color component
  • A=alpha (transparency) component

Alternatively, the integrated color picker can be used to visually pick a color:

Color picker

Text color - the color used for the icon.

Border color - the color used for the component border.

Opacity - controls the transparency of the component.

note

The opacity and background alpha component both affect the transparency of the component, but have different behaviors. The opacity affects the whole component, while the background alpha affects only the background transparency.

Behavior - allows special behavior in the specified state:

  • none - no special behavior (component is rendered normally)
  • blink - the component will blink periodically
  • disabled - the component is rendered as disabled and will not respond to mouse or keyboard interaction
  • hide - the component is completely hidden
note

The hide behavior is different than using an opacity of 0. A hidden component will not receive any mouse or keyboard interaction, instead any component below it will receive them. On the contrary, a component with 0 opacity (fully transparent) still exists on the layout and will receive mouse or keyboard interactions.

Typography​

The typography section contains properties that affect the text-related properties of the component:

Icon - if set, it will display an icon inside the indicator.

Icon size - the size of the icon.

Layout​

Shape - allows choosing the shape of the indicator:

  • Ellipse
  • Square
  • Rectangle

Border width - controls the width of the border on each side. Values can be manually input as:

  • <top>px <right>px <bottom>px <left>px
  • <top_bottom>px <left_right>px
  • <all>px

Alternatively, the built-in border editor can be used for a visual input:

Border width

Position​

The position section contains properties which affect the position and size of the component. These can be changed by dragging and resizing the component with the mouse, or directly, by manually entering the values:

Left - distance from the left edge in pixels

Top - distance from the top edge in pixels

Width - component width in pixels

Height - component height in pixels

Last updated on