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

3. Step Button Types

Step button can be used for the user to set a value as number or clock (time).

3.1. Number

If Number is selected, a Unit can be added to the variable, and the step, minimum, and maximum limits should be defined in the Data Range & Format tab.

Under the tab User Control, you can define how many times the value will blink before posting the data to the variable. 

The widget will do a POST using this format:

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

3.2. Clock

If the Clock type is selected, choose the  visualization format 24-Hour or 12-Hour (AM/PM),  the time step, and apply the inferior and superior limits for the settings in the Data Range & Format tab.

The output of the variable and the configuration in the widget will always be in the 24-Hour format, even if you choose to show in a 12-Hour format for the user.

For example, if the user selects 2:15pm for the variable timer_off, the widget will POST this:

{
  "variable": "timer_off",
  "value": "14:15"
}

You can customize colors for the button and text based on certain conditions defined in the Visualization tab. Input the time in the format HH:MM (24-Hour format).

Here is an example of conditions set to change the color of the text around 10:30am.

Under the tab User Control, you can define how many times the value will blink before posting the data to the device's data storage. The value starts to blink after the user releases the button.

4. 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)"
  }
}