Step button allows users to increment and decrement values of a number or clock by using the (-) and (+) buttons.

You can also define values for the incremental step and the limits.


Step Button Types

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

1. Number

If Number is selected, a Unit can be add to the variable, and the step, minimum, 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"
}

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 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 data bucket.  The value starts to blink after the user releases the button.


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 an 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)"
  }
}


Also check out:

  • Embedding widgets