DocsICP FilingConsole
官方文档
首页

Fan

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

This component provides a rotation animation. You can use it as a static icon or bind it to a data source to display the fan's speed.

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 search box above the component list on the left, enter Fan. Locate the component and drag it to the canvas.

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

    After you add the component, select it to configure its properties, such as Component Name, Visibility, opacity, and colors, on the Style tab in the properties pane on the right.

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 Application Push.
    Note The data source must return data of one of the following types: boolean, enum, single-precision number, double-precision number, or integer.
    In the Select Data Source dialog box, set the data source type to Device. Then, configure product, device (you can select Specific device, Dynamic device, or Empty device), data item (such as device property), and property. Click OK.
  3. Click OK.

Step 3: Configure styles

  1. On the Style tab in the properties pane, configure the display settings for the component.
    Parameter Description
    Display Pipe Toggles the visibility of an L-shaped pipe on the component.
    Fan Status This setting appears when no data source is configured. It controls the rotation state of the fan.
    • On: The fan is always rotating.
    • Off: The default value. The fan is always stopped.
    Stop Color These parameters are available after a data source is configured. You can configure the component's color for each state.
    Low-speed Color
    Medium-speed Color
    High-speed Color
    Stop Option These parameters are available after a data source is configured and the returned data type is boolean or enum.

    Sets the conditions that map data values to the fan's stop, low-speed, medium-speed, or high-speed states. You can select one or more options, or none.

    • boolean: Maps boolean values to the fan states. By default, false (0) maps to the stopped state, and true (1) maps to the high-speed state.
    • enum: Maps enumeration values to the fan states. You can define custom mappings based on the returned enumeration values.
    Note If you configure multiple options for a specific rotation state, the fan enters that state and displays the corresponding color if any of its configured conditions are met.
    Low-speed Option
    Medium-speed Option
    High-speed Option
    Stop threshold These parameters are available after a data source is configured and the returned data type is numeric (single-precision number, double-precision number, or integer).

    Sets the conditions for the fan's stop, low-speed, and medium-speed states:

    • Stop threshold: If the property value from the data source <= stop threshold, the fan enters the stopped state and displays the stop color.
    • Low-speed threshold: If stop threshold < property value from the data source <= low-speed threshold, the fan enters the low-speed state and displays the low-speed color.
    • Medium-speed threshold: If low-speed threshold < property value from the data source <= medium-speed threshold, the fan enters the medium-speed state and displays the medium-speed color.
      Note You do not need to configure a high-speed threshold. When the property value from the data source > medium-speed threshold, the fan enters the high-speed state and displays the high-speed color.
    Low-speed threshold
    Medium-speed threshold

  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：L-shaped pipeNext：Digital display