DocsICP FilingConsole
官方文档
首页

Digital display

更新时间：
复制 MD 格式
我的收藏

The digital display component shows numbers with a configurable lit color. This topic explains how to add and configure the component.

Usage

The digital display component supports real-time updates from the following topics:
Parameter Topic Description
Submit device properties /${productKey}/${deviceName}/thing/event/property/post Use this topic to get the properties reported by a device. For more information, see Submit device properties.
Submit device events /${productKey}/${deviceName}/thing/event/${tsl.event.identifier}/post Use this topic to get the events reported by a device. For more information, see Submit device events.
Submit multiple device properties at a time /${productKey}/${deviceName}/thing/property/batch/post Use this topic to get the properties reported by a device in a batch. For more information, see Submit multiple device properties at a time.
Submit multiple device events at a time /${productKey}/${deviceName}/thing/event/batch/post Use this topic to get the events reported by a device in a batch. For more information, see Submit multiple device events at a time.

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 left.

  3. In the component list on the left, search for digital display and drag the component to the canvas.

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

    For example, search for digital display in the component panel on the left and drag it onto the canvas. After you select the component, you can configure properties such as lit color, unlit color, digits, Screen color, Background color, and Border in the Style panel on the right. You can also set the data source and Opacity.

Step 2: Configure the data source

  1. In the right-side pane of the web application editor, on the Style tab, click Data Source and then Configure Data Source.
  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
    lit color Sets the color for the lit digits, which show the current value from the data source.
    unlit color Sets the color of the segments that are not illuminated.
    digits Sets the number of digits the display can show.
    Note The number of digits must be greater than or equal to the number of digits in the value from the data source. Otherwise, the component may render incorrectly. You can customize this value based on your needs.
    Screen or background color Sets the color of the display screen or the component's background.
    Border Configures the visibility and style of the border.

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

Step 4: Configure interactions

  1. In the Interaction panel on the right side of the web application editor, click Add Interaction, and then set an event and an action.

    This component supports the Mouse In event. For example, you can set the Mouse In event to trigger a Show/Hide action that reveals a hidden component with additional information.

    For more information, see Interaction configuration.

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

Previous：FanNext：Boiler