Control widgets allow easy remote device control right from Ubidots' Dashboards. These widgets include the Switch, the Slider, and the Manual Input.
Learn how to create each of these widget.
1. Create a Switch widget
The Switch is a simple ON/OFF function that remotely controls a device using variable settings of "1" or "0". For example, you have connected a device to your garage door: by setting a variable to "1" a user can open the garage door; conversely, a "0" command will close the door.
Following the below steps you will be able to create a Switch widget to shift a variable between defined states:
Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Once the widget's drawer opens, click on the "Switch" button.
Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Switch widget by logging the user's information in the context of the variable, like this:
"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Add the variables to be controlled.
Step 5: Enter the minimum/maximum values, which correspond to the OFF and ON states accordingly.
Step 6: Enter messages to be displayed on the widget for the ON and OFF states.
Step 5: Choose a color for the ON state with the color picker.
Step 6: Define the appearance of your widget by naming it, using a custom style, or adding a background image.
Step 7: Save the configuration.
2. Create a Slider widget
The Slider widget lets users enter data in a given range, whether to control devices remotely or simply log values manually.
Following the below steps you will be able to create a Slider widget to enter values to a variable in a range or fixed steps:
Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Once the widget's drawer opens, click on the "Slider" button.
Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Slider widget by logging the user's information in the context of the variable, like this:
"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Add the variables to be controlled.
Step 5: Select one out of these two operating options:
1st option: Value ranges defined by:
Maximum value
Minimum value
Step of value increments
2nd option: Set Custom steps:
Define fixed positional values with optional text labels and colors. Enter at least two steps.
Distribute steps evenly toggle: displays steps at the same distance when the steps are not sequential.
Step 6: Choose a color for your Slider using the color picker. This color is overwritten if custom steps were created in the previous point.
Step 7: Define the appearance of your widget by:
Naming it.
Choosing whether the slider will be displayed vertically or horizontally.
Using a custom style
Or even adding a background image.
Step 8: Save the configuration.
3. Create a Manual input Widget
The Manual Input widget allows users to send context, values, or dates in a dot to a variable. It also allows them to add a device property to the selected device:
Following the below steps you will be able to create a Manual Input widget to enter values to a variable:
Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Once the widget's drawer opens, click on the "Manual Input" button.
Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Manual Input widget by logging the user's information in the context of the variable, like this:
"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Select the type of input you want to log with the widget out of these 4 options:
– Context
– Variable.
– Device.
– Date/Time picker.
If you select "context" or "variable", add the variables to be controlled.
If you select "device", choose the device you want to add a property to.
If you select "date/time picker", choose the style (whether "date and time" or "date" only) and the name of the input.
Step 5: Define the appearance of your widget.
