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 the incremental step value and the allowed limits.

Creating your own

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

Data Sources Field

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

• Normal Dashboards – Select one device from your list of devices and choose the variable that contains the data.
• Blueprint Dashboards – Add the Blueprint device and input the name of the variable. When using a Blueprint dashboard, the Variable field will suggest a list of variables to be picked using the currently selected blueprint device.

Step Button Types

The widget can control either a numeric value or a clock (time).

Number

When Number is selected:

• A unit can be added to the variable.
• The step, minimum, and maximum limits should be defined in the Data Range & Format tab.
• In the User Control tab you can define how many times the value will blink before posting the data to the variable.

The widget will POST using this format:

{
  "variable": "set_point",
  "value": 2.5,
  "unit": "°C"
}

Color from Metadata

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

1. In the Visualization tab, set Override colors with the conditions defined here to False.

2. Inside the metadata, include the following fields:

   {
     "text_color": "white",
     "button_color": "blue"
   }

3. Example using HEX or RGB values instead of color names:

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

tip

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