Custom Control: Toggle

A toggle is a button with two states. When the user clicks the button, the state changes. Examples of toggling can be found in the following figures.

Custom Control: Toggle id = 'gOFF'

Custom Control: Toggle id = 'gON'

CS3

Binding type: BOOLEAN
When a user clicks on the button, a new state is set via the connection channel to the PLC.

SVG Element

id = "gOFF"

  • An element (preferably a group) that should be visible when the value of the bound variable is false must have the ID "gOFF".

id = "gON"

  • Conversely, the element that should be visible when the value is true must have the ID "gON".

Example

You can find a complete SVG example here.

Conclusion

The SVG drawing of the switcher can contain any graphics. The principle is that the elements nested under the group "gOFF" are displayed if the value of the bound variable is false, and elements under the group "gON" are displayed if the value is true.