Push button allows users to select options for different states, similar to a mechanical switch. Developers can configure 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.

This widget also accepts features like metadata,  that can be set in your variable data.

Creating your own

To add it to your dashboard, choose the Push button widget from the list and customize it to your preference. You can edit it by using the options located on the right side of the widget.

This widget works for both dashboards, Normal and Blueprint.

1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

This field is dependent on the type of dashboard you are using; the difference is explained below.

1.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the data.

1.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the information.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.

2. Push Button Type

The Push button can be configured in two different modes. 

2.1. Mono-Stable

In this mode, the button will be presented in the default state at all times 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, text, and icons for each state, and define an analysis to run in the temporary state [optional].

2.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].

3. 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:

Here's a JSON example:

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

TIP: You 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)"
  }
}