Other Elements
webHMI supports a few other supporting behaviors typical for machine HMIs.
LEDs
LED elements toggle state based on the value of a machine variable. The state toggle is accomplished by adding and removing classes to the element. If the machine value does not match a defined state, then no class will be added to the element. This allows for a total of three states for each LED element, on, off, and undefined. The webHMI library also provides default implementations of LED classes in webhmi.css.
Class name: webhmi-led
| Attribute | Description | Default Value |
|---|---|---|
| data-set-value | Value corresponding to LED on state | true |
| data-reset-value | Value corresponding to LED off state | false |
| data-led-true | Class to add if the machine value is equal to data-set-value | led-on |
| data-led-false | Class to add if the machine value is equal to data-reset-value | led-off |
Checkboxes
Checkboxes function similarly to toggle buttons. They will set the value of a machine variable to one of two values and update their display based on the current machine value.
Class name: webhmi-checkbox
| Attribute | Description | Default Value |
|---|---|---|
| data-set-value | Value to write when checkbox is clicked while unchecked. If the machine value changes to data-set-value, the checkbox will update to display as checked. | true |
| data-reset-value | Value to write when checkbox is clicked while checked. If the machine value changes to data-reset-value, the checkbox will update to display as unchecked. | false |
Dropdowns
webHMI dropdowns connect HTML select elements to a machine variable. When a new option is selected from the drop down, the index of that option is written to the machine variable. If the machine variable changes, then the select element will update its index accordingly.
Class name: webhmi-dropdown
Tabs
webHMI tabs connect Bootstrap (https://getbootstrap.com/docs/3.3/) tab navigation elements to machine data. This is an effective way to display different content based on machine mode, for example. A tab navigation element consists of two sections, the tab section with selectable tabs, and the tab pane section with content specific to the selected tab. The webhmi-tab-pane class should be applied to each possible tab pane. The id of each tab pane should be linked to the href of the associated tab anchor, as shown in the example on 2 - Getting Started.
Class name: webhmi-tab-pane
| Attribute | Description | Default Value |
|---|---|---|
| data-set-value | Value corresponding to this tab pane. If the machine value changes to data-set-value, this pane will be shown and the associated tab will be set as active. | true |