Different approaches for a simple or multi-state indicators / buttons for TcHmi

Two demonstrations of a simple "led indicator" element, using user control and a css-styled TcHmi button.

Functionality

TcHmiUserControl with a code to reflect multiple states

The LED_indicator.usercontrol has an additional property, which is used in a case structure to change background of its circle element.

Custom button for 2-state indicator

Elements can be styled from the Themes->%theme name%->%theme name.theme% file. For the purpose of this demo, an additional css is used to style a button. Depicted are all 4 states: enabled, disabled, normal and active. Create a custom style LED and add it to ClassNames attribute of the selected button element.

Tested

Tested on 1.12.760.59