Step Button Widget

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

"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

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