Push button allows users to select options for different status similar to a mechanical switch. Developers can configure a text or an icon for each status, and associate colors to it.

You can also define an Analysis (scripts) to run when users change each state.


Push Button Type

The Push button can be configured in two different behaviors. 

1. Mono-Stable

If this mode, the button will be presented in the default state all the time unless the user clicks on it. When a user clicks on the button, it will change to the temporary state for a couple of seconds, and then, it will return to the default state.

You can select the colors, texts or icons for each state, and define an analysis to run in the temporary state [optional].

2. Bi-Stable

On the other hand, the Bi-stable type keeps the state that the user selected indefinitely. 

You can select the colors, texts or icons for the buttons, and define an analysis to run in each state [optional].


Color from Metadata

You can control the colors of the Button widget by using information stored in the metadata of the variable. 

For this, you need to switch the option present on the Visualization tab, 'Override colors with the conditions define here' to False.

Inside the metadata, the following fields can be used to define the color of each component:

"text_color"color for the text (value)
"button_color"color for the button


Here's an JSON example:

{
  "variable": "set_point",
  "value": 5.3,
  "unit": "°C",
  "metadata": {
    "text_color": "white",
    "button_color": "blue"
  }
}

TIPYou can always enter colors using #HEX or RGB values instead of a color name.  

{
  "variable": "set_point",
  "value": 5.3,
  "unit": "°C",
  "metadata": {
    "text_color": "#FFFFFF",
    "button_color": "rgb(44, 144, 223)"
  }
}

Also, check out:

  • Step Buttons