DocsICP FilingConsole
Documentation
Home Page IoT Studio User Guide Web Visualization Development Widgets Basic components Line

Line

Updated at:
Copy as MD
My Favorites

The line component is primarily used for various connection scenarios. You can drag its endpoints to adjust the line's length and direction. This topic details how to configure the component.

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. In the search box above the component list on the left, enter line to find the component. Then, drag the component to the canvas.

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

    After adding the component to the canvas, you can configure its properties in the Style panel. Configurable properties include the line's start and end coordinates, length, angle, component name, opacity, color (default is #333333), width, line style, and cap styles.

Step 2: Configure the style

  1. In the Style panel on the right, configure properties such as Color, Width, Line Style, Cap, Start Cap Style, or End Cap Style.
    Many settings in the Style panel support binding to a data source. You can select a device, an API, or an application push.

    Each parameter requires a specific data format. The data returned by your data source must match the required format.

    Parameter Format
    Color

    A boolean or enum type.

    If the data source is a device, you can only select a property from the thing model. Supported data formats are float, double, integer, boolean, and enum. In this case, you can configure the display color of the component's content when the device is offline. If the data source returns a numerical type, you must use Convert Integer to Boolean or Convert Number to Enum to set the colors for different values.

    Note

    In a Repeat List, to configure the color based on a thing model property (including the offline state), the component's data source must be a device. The configuration is as follows:

    • If the data source of the Repeat List is a device, the data source for the component's color can be set to parent component data source or device.

    • If the data source of the Repeat List is a non-device type, the data source for the component's color must be device.
    Width An integer from 0 to 100.
    Line style An integer from 0 to 2.

    The values map to the line styles as follows (in the same order as the dropdown list):

    • 0: Solid line
    • 1: Dashed line
    • 2: Dotted line
    Cap An integer from 0 to 1.

    The values map to the cap styles as follows (in the same order as the dropdown list):

    • 0: Square cap
    • 1: Round cap
    Start cap style An integer from 0 to 6.

    The values map to the start or end cap styles as follows (in the same order as the dropdown list):

    • 0: No style
    • 1: Hollow circle
    • 2: Solid circle
    • 3: Hollow square
    • 4: Solid square
    • 5: Hollow arrow
    • 6: Solid arrow
    End cap style

  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.

Previous：TextNext：Image