Monochrome gauge
The monochrome gauge component displays a device property or a numeric value from an API. This topic describes how to configure the component.
Step 1: Add the 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 of the canvas, enter Monochrome Gauge. Find the component and drag it to the canvas.
For more information about adding components, see Add a component.
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 configure its settings.
The available data source types are Device, API, and Application Push.Note The data returned from a device or an API data source must be an integer, single-precision number, or double-precision number.
- Click OK.
Step 3: Configure the style
- On the Style tab in the right-side panel, configure the component's display settings.
Configuration Item Description Gauge reading Set the gauge type. - 90 degrees.
- 180 degrees (default).
- 270 degrees.
Value Range Set the minimum and maximum values for the monochrome gauge. Show Scale Configure whether to display the gauge scale, unit, reading, and border, and set their styles. Unit Reading Border Background Color Set the background color of the component. Adjust the position of the component on the page. For more information about common component style configurations, see Style configuration.
Step 4: Configure interactive actions
On the Interaction tab in the right-side pane of the web application editor, click Add Interaction to configure the Event and Action.
This component supports the Mouseover event. For example, you can execute the Show/Hide action on mouseover to display a hidden component that provides more information about the data.
For more information, see Interaction configuration.
Click Preview in the upper-right corner of the page to preview and test the component's data and style.