• Documentation
  • Using Panels
  • Creating and Configuring Panels

Creating and Configuring Panels


You need to create panels and configure panel information to hold elements and widgets.

Creating Panels


Creating panels through the following.

  • Quickly creating panels in the toolbar

  • Creating panels in the management area


Creating panels in Toolbar by following these steps.

  1. Select Monitoring > Monitor to open the DTM Visualization Tool Editor.

  2. Select Menu menulines and select New Panel in the drop-down menu.

  3. In the top toolbar, select the save button save .

  4. Enter the panel name in the pop-up window and select OK. The created panels will be saved under Root of Panel by default.


Creating panels in Management Area by following these steps.

  1. Select Monitoring > Monitor to open the DTM Visualization Tool Editor.

  2. In the Management Area, select the destination folder for the new panel.

  3. Right-click the target folder name and select New Panel.

  4. Enter the panel name in the pop-up window and select OK.

Configuring Panel Attributes


In Panel Settings in the configuration area on the right, you can customize the configuration of panels.

Configuring Panel Basic Attributes


Under the Basic tab, you can configure the following panel basic attributes.


Field

Description

Data Type

Select the data type of the panel. The DTM visualization tool supports CDS and TSDB data types.

Preview Address

Set the web page displayed when previewing this panel/element.

Snapshot Address

Set the preview image of this panel/element/widget in the preview area.

Background

Select the background color of the panel. The panel defaults to a transparent background.

Width

Set the canvas width.

Height

Set the canvas height.

Before Deserialization

Script executed before drawing elements in the preview state.

After Deserialization

Script executed after drawing elements in the preview state. For example, you can update element styles after the page loads.

Connection Action
Select the connection action between elements and widgets on the panel. After selecting an element, a small arrow appears in the upper right corner. Hold the arrow and drag to specify the connected element. The DTM visualization tool supports No Action, Copy Style, Snap, and Parent-Child connection actions.

  • Copy Style: The element will copy the style of the specified element. For example, color.

  • Snap: Two elements will form a snap node relationship. When the snapped element is dragged, rotated, etc., the snapping element will synchronize changes with it as a reference.

  • Parent-Child: The dragged element has a parent-child relationship with this element.

Tree Hierarchy Rendering

Enable/disable the tree hierarchy rendering feature of the panel.

Zoomable

Enable/disable the zoom feature of the panel.

Pannable

Enable/disable the pan feature of the panel.

Box Selection

Enable/disable the box selection feature of the panel.

Fit Content

Enable/disable the fit content feature of the panel. Once enabled, the panel will automatically adjust the zoom ratio to fit the elements and widgets on the panel.

Layout

Quickly adjust the canvas layout. The DTM visualization tool editor provides 7 quick layouts: circular layout, symmetric layout, hierarchical layout, north layout, south layout, west layout, and east layout.

JSON Background

Enter an image path as the background image of this page in the preview state.

Data Fetch Interval

Set the time interval for the canvas to fetch data.

Show Data Trend

Show/hide the data trend.


Configuring Grids and Guides Style


Under the Grids and Guides tab, you can configure the following grids and guides attributes.


Field

Description

Grid Visible

Show/hide the grid guides of the canvas.

Skew

Select this option to change the grid guides to “skew” style. In skew style, the grid angle is 120° and grid rotation is 30°.

Reset

Select this option to change the grid guides to “default” style.

Grid Size

Adjust the grid size enclosed by the guides, default value is 40.

Bold Line Every

Adjust the interval of bold grid guide lines, default value is 10.

Light Line Color

Set the light grid line color, default value is rgba(191,191,191,0.4).

Bold Line Color

Set the bold grid line color, default value is rgb(191,191,191).

Grid Angle

Set the angle between grids, default value is 90.

Grid Rotation

Set the grid rotation angle, default value is 0.

Zoom Threshold

The grid disappears when zoomed to a certain level, default value is 0.25.


Configuring Page Settings


In Page Settings in the configuration area on the right, you can customize the page configuration.

Configuring Page Tag


Under the Page Tag tab, you can configure tags for the current page.


Field

Description

Tag List

Configure page tags, and third-party users can index the corresponding monitoring visualization tool pages based on the tags.

Asset Tag

When this page is associated with an asset, the associated asset tags will appear. For more information on asset topology associations, see Associating Pages.


Configuring Hoverbox


Under the Hoverbox Settings tab, you can configure the background color and text color for the Hoverbox on the current page. For more information on the configuration of Hoverbox, see Configuring Elements Interaction.


Note

If the hoverbox background color and text color have been configured in the element interaction, the hoverbox configured in the page will not take effect.