Gauge

Example

Use a gauge to monitor factory environmental conditions, as shown in the following figure.

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the web application editor, click the component icon on the far left.

3. Above the component list on the left of the canvas, enter gauge to find the component, then drag the component onto the canvas.

   For more information about adding components, see Add a component.

   The Components panel is divided into two categories: basic component and industrial component. The gauge component is available in two types: Multi-color Gauge and Single-color Gauge. After you drag the component to the canvas, you can configure its properties, such as its name, visibility, and value range, in the Style panel on the right.

Step 2: Configure the data source

1. In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.

2. On the Data Source Configuration page, select a data source type and complete the configuration.
   The available data source types are device, API, and App Push.

   Note An API or device data source must return a single-precision number, double-precision number, or integer.

   Take the device data source as an example. In the Select Data Source panel, configure the following parameters in order: select a product, select a device (supports specified device, dynamic device, and empty device), select a Data Item type (for example, device property), and select a specific property. After you complete the configuration, you can click Format Reference to view an example or click Validate Data Format to validate the data format. After you confirm the configuration, click OK.
3. Click OK.

Step 3: Configure styles

1. In the Style panel on the right, configure the display settings for the component.

   Parameter	Description
   Value range	Sets the minimum value and maximum value for the gauge scale.
   Global Style	Sets the global theme color and display effects.
   Display Data	Sets the font size and weight for the displayed device property value.
   Unit	After you bind a device property, the system automatically reads and displays the property's unit. You can modify the unit of measurement and its font size.
   Title	Sets the display title and its style for the gauge component. For example, for a gauge that displays temperature, you can set the title to Temperature.
   Tick label	Configures whether to display tick labels on the gauge and their appearance. If you select the Hide checkbox, the gauge displays only the minimum and maximum values.

2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

3. Click Preview in the upper-right corner of the page to view and debug the component's data and style.