Knob Switch-IoT Studio(IoT Studio)-阿里云帮助中心

The Knob Switch is a skeuomorphic component that displays and controls a device property, such as a power switch, or shows the status of a data value from an API.

Step 1: Add component

Create a web application. For more information, see Create a web application.
In the Web application editor, click the component icon on the left.
Above the component list on the left, enter Knob Switch to find the component, then drag it to the canvas in the center.

For more information about adding components, see Add a component.
In the Style panel on the right, you can set properties such as the component's position, size, visibility, opacity, and knob color. You can also click the Configure Data Source button to associate a data source with the knob's state.

Step 2: Configure the data source

In the right-side pane of the web application editor, on the Style tab, click Data Source and then Configure Data Source.
On the Data Source Configuration page, select a data source type and complete the configuration.
The available data source types are Device, API, and Application Push.
Note Device data sources support Boolean (bool) and integer (int) data types. API data sources support Boolean (bool) and numeric data types, such as single-precision numbers, double-precision numbers, and integers.
- Boolean: Maps a Boolean value to the on/off state. By default, False corresponds to off, and True corresponds to on.
- Integer: Transforms integer data returned by a device into a Boolean value. You can set the integer values that correspond to True and False.
- Numeric: Uses a data filtering script to transform numeric data returned by an API into a Boolean value.
Click OK.

Step 3: Configure style

In the Style panel, set the knob handle color.
Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

Select the Interaction tab and configure events and actions. For more information, see Configure interactions.
For example, when the component's value changes, you can trigger the Set Device Property action to send a command to a device and modify a property value.
Click Preview in the upper-right corner of the page to preview and debug the component's data and appearance.