Indicator light
The indicator light component displays device status, alarms, and other states. This topic explains how to configure the component.
Step 1: Add the component
Create a mobile application. For more information, see Create a mobile application.
In the mobile application editor, click the Components icon
on the far left.(Optional) Add a column component to set the page layout. For more information, see Horizontal Column and Vertical Column.
Above the component list on the left of the canvas, enter indicator light in the search box to find the component, and then drag the component to the canvas.
For more information about adding components, see Add a component.
Step 2: Configure the data source
In the Style panel on the right, click Configure Data Source next to Display Data.
On the data source configuration page, select a data source type and complete the configuration.
The available data source types are Device, API, Static Data, and App Push.
ImportantThe device data source must return data of the enum, boolean, or numeric type (integer, single-precision, or double-precision). The API data source must return data of the boolean or numeric type (integer, single-precision, or double-precision).
Enum: Different enum values map to different states and colors. You can configure the colors based on the enum properties defined in the product's thing model.
Boolean: The on/off states of the indicator light correspond to
trueandfalsevalues. The specific behavior is determined by the configuration of the device's thing model properties or the API's return values.Integer: Converts integer data returned by the device into a boolean or enum type.
Single-precision and double-precision numbers: Converts single-precision or double-precision data returned by the device into an enum type.
Numeric type: Uses a data filter script to convert numeric data returned by an API into boolean or enum types.
-
When using this component in a Repeat List, to configure its display for when the device is offline, you must associate its data source with a device. The configuration is as follows:
If the data source is Device:
If the data source of the Repeat List is a device, this component's data source can be set to parent component data source or device.
If the data source of the Repeat List is a non-device type, this component's data source must be device.
The component parses the corresponding state from the value of the bound property and displays the relevant configuration options in the Style panel.
Click OK.
Step 3: Configure styles
In the Style panel on the right, configure the display style of the indicator light.
Color: The indicator light displays the default color corresponding to the data source's state value. You can modify this color.
Image: After you upload an image, the indicator light displays the image corresponding to the data source's state value.
Adjust the component's visibility, dimensions, and position on the page. For more information, see General Styles.
Step 4: Configure interactions
In the Interaction panel on the right, click Add Interaction to set an Event and an Action.
This component supports Click or Double Click events. For example, you can configure the Double Click event to execute the Refresh Component action, which refreshes the content of a specified component.
For more information, see Interaction Configuration.
Preview and debug the component's data and appearance. For more information, see Preview and Debug.