DocsICP FilingConsole
官方文档
首页

Industrial button

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

The industrial button is a skeuomorphic component with three styles: round, square, and luminous. You can use this component to display and control a device property, such as a power switch, or to show the status of a data value from an API. This topic describes how to configure the industrial button.

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. Above the component list on the left, enter industrial button to find the component, and then drag it onto the canvas.

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

    In the search box of the component pane on the left, enter industrial button and drag the component from the industrial components category onto the canvas. On the style tab of the properties pane on the right, you can set the component's position, size, visibility, and style type. You can also bind data by clicking Configure Data Source.

Step 2: Configure a 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.
    Available data source types include device, API, and application push.
    Note A device data source supports boolean (bool) and integer (int) return types. An API data source supports boolean (bool) and numeric (single-precision numbers, double-precision numbers, and integers) return types.
    • Boolean: Maps boolean values to the on/off state. By default, false corresponds to off, and true corresponds to on.
    • Integer: Converts integer data from a device into a boolean value. You must specify the integer values that map to true and false.
    • Numeric: Uses a data filter script to convert numeric data from an API into a boolean value.
    If you select device as the data source type, configure the following parameters: product, device type (you can select specified device, dynamic device, or empty device), data item (such as device property), and property. You can use Format Reference and Validate Data Format to check your data, then click OK to complete the configuration.
  3. Click OK.

Step 3: Configure style

  1. In the style pane on the right, configure the component's appearance.
    Parameter Description
    style type Sets the component style. The options are:
    • round button: The default value.
    • square button
    • luminous button: This button is circular. You can set a theme color for its glow.
    theme color This parameter is available when the style type is set to luminous button. The options are:
    • Green
    • Red
    • Yellow

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

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

Previous：BoilerNext：Knob Switch