Buttons
webHMI supports several types of button behaviors. To specify the behavior, add the appropriate class to the HTML element.
Set Buttons
Set buttons write a value to a variable when they are pressed.
Class name: webhmi-btn-set
| Attribute | Description | Default Value |
|---|---|---|
| data-set-value | Value to write when pressed | true |
Momentary Buttons
Momentary buttons write one value to a variable when they are pressed and another value when they are released (like a jog button).
Class name: webhmi-btn-momentary
| Attribute | Description | Default Value |
|---|---|---|
| data-set-value | Value to write when pressed | true |
| data-reset-value | Value to write when released | false |
Toggle Buttons
Toggle buttons toggle a variable value between two possible values. The value written depends on the current value of the variable as read from the machine. When the value is equal to data-set-value, the toggle-active class is added to the element.
Class name: webhmi-btn-toggle
| Attribute | Description | Default Value |
|---|---|---|
| data-set-value | Value to write when the current value is not equal to data-set-value | true |
| data-reset-value | Value to write when the current value is equal to data-set-value | false |
Button Modifiers
Modify the behavior of the set, momentary, and toggle buttons by adding additional webHMI classes.
| Class Name | Description |
|---|---|
| webhmi-confirm | Produce an on-click modal prompt asking the user for confirmation prior to execution |
| webhmi-ignore-bubbling | Respond only to clicks of which button is the sole target (use case: nested webHMI buttons) |