Push Button Widget

Push Button Widget

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:

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

Here's a 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)"

    • Related Articles

    • Step Button Widget

      Step button allows users to increase and decrease values of a number or clock by using the (-) and (+) buttons. You can also define values for the incremental step and the limits. Creating your own To add it to your dashboard, choose the Step button ...
    • Widget Header

      The widget header enables you to add customized buttons in the header of your widget in order to improve the flow of your dashboard. The widget header is enabled for all widgets. You can configure it by selecting the Header tab in your widget ...
    • Map Widget

      Add the location of your variable to visualize your devices on the Map. You can also edit the icon and color of the pins, add images, create links, add geofences & filters, and more! The variable data should look like the following payload. Note that ...
    • Keypad Widget

      Keypad allows the user to submit a pin code along with an optional action string. This widget is ideal to represent an alarm or to request a PIN code to unlock a resource. Creating your own To add it to your dashboard, choose the Keypad widget from ...
    • Compose Widget

      The compose widget allows you to add pins to different images and videos. You can manipulate the colors, values, and icons for each pin. This widget also accepts features like metadata and series, that can be set in your variable data. Creating your ...