Drawing Panels


In DTM Visualization Tool, you can build monitoring pages by adding elements and resources to panels, laying out elements and associating elements according to the actual business situation.

Adding Elements and Resources


Based on business requirements, select the elements template/files in the elements/resources management area on the left and drag and drop directly to add to the canvas.


../_images/add_element_template1.gif


If no template meets the requirement, you can draw the elements directly in the panels. For more information about drawing elements, see Using Elements.


Arranging Elements and Resources


Copying Contents on Panels for Multiple Times


To reuse contents (elements, widgets, or resources) in a DTM panel , copy elements, widgets, or resources for multiple times by the following steps:

  1. Select the element to copy and select Shift Copy from the top toolbar.

  2. Configure the following information in the popup window.


    Field

    Description

    Horizontal Distance

    The horizontal distance among copied contents.

    Vertical Distance

    The vertical distance among copied contents.

    Copy Times

    The amount of copied contents For example, enter 3 to copy the elements, widgets, or resources for 3 times.


  3. Select OK.

Adding Edge


Drag and drop the elements as needed, and use Edge link to link the elements.


../_images/link_element.gif


Note

After using the edge to connect the elements, drag the elements and the edge will change with them.

Adding a control


  1. Add controls Input Box and Button controller to the panels to control the asset data.


    ../_images/controller.gif


  2. Configure controls as needed

    • Under the Panel Settings tab, you can configure the style of the control, the same as the configuration item for elements. For more information, see Configure elements.

    • Under the Widgets Settings tab, you can configure the content of the control and its style.

Input Box


Field

Description

Text content, font, size and color

Can set the default input content of the input box, and support multi-language. And you can set the font, font size and color of the input content.

Prompt content, font, size and color

Can set the prompt content displayed in the input box, and support multi-language. And you can set the font, font size and color of the prompt text.

Background Color

Set the background color of the input box.

Border Size and Color

Set the border style of the input box.


Button


Field

Description

Text content, font, size, color and horizontal alignment

Can set the text of the button, and support multi-language. And you can set the font, font size, color and alignment of the text.

Background Color

Set the background color of the button.

Border Size and Color

Set the border style of the button.


For more information about how to link controls to data and have interaction, see Configuring Element Interaction.

Adding a DTD Page


DTD Page DTD1 can be added to panels and parameters can be passed to the DTD Visualization Tool page. Under the Widget Settings tab, the following configurations can be made.


Field

Description

Page

Select the DTD Page that you want to display.

Responsive Mode

Select the presentation mode of the page, and select between big panel, web and mobile.

Filter Parameter

If there are filters on the DTD page, you can configure the values of the filters to pass parameters.


Adding an Alarm List


Add the asset Alarm List alarmlist in the panels, you can acknowledge the alarm or jump to the alarm console operation in DTM Visualization Tool. Under the Widget Settings tab, the following configurations can be made.


Field

Description

Asset ID

Enter the asset ID, i.e. mdmId, of the asset for which you want to display.

Asset Type

Select the type of asset: Device or Site.

Lines Per Page

Configure the number of alarms per page.

Enter Alarm Console

Configure the URL of the source of the alarm list.

Header - background color, font, font size and color

Configure the style of the list header.

Header - Alarm Field

Configure the alarm fields shown in the list.

Content - background color, horizontal border color, font, font size and color

Configure the style of the list content.


Configuring Elements


After selecting the elements, you can configure the control, layout, basic, text, and interactions for the elements.


Note

To add or edit elements attributes, double-click on the image graphic in the Basic Configuration column to quickly open the elements file. For more information on how to configure the element’s business attributes, see Editing Element Business Properties.

../_images/jump_to_element.png

Configuring Elements Interaction


Under the Interaction tab, you can add one or more interaction events and actions for elements, the following interaction events are supported.


Event

Description

Click

Triggered by a left mouse button click on elements.

Double Click

Triggered by left mouse button double-clicking elements.

Hover

Triggered by hovering the cursor over elements.

Scroll

Triggered by placing the cursor over elements and rolling the mouse wheel.


The following interactive actions are supported.


Action

Description

Switch Page

The current page can be switched to the target page.

New Page

Open the target page. The open mode can be set to open on a new page or in a popup window. The size and style of the popup window can be set.

Previous Page

Go back to the previous page.

Script

Enter the JSON script to set it.

Control Script

Based on needs, you can bind data, control points and controls. The control script is system.write(c1,e1), where c1 is the control data point and e1 is the target data point.
  • Data: Bind the data obtained from the asset device data point.

  • Control Point: Bind the data points of the asset device to be controlled.

  • Control: Bind the data obtained from the control. For example, the data in Input Box.

Show Hoverbox

Show asset-specific data prompt windows on demand. Required panels are already bound assets. For more information, see Binding Data.
  • Optional display data: point name, description, updated time and trend.

  • Color: Configure the background color of the hoverbox and the text color.


Note

  • Target pages can only be supported for pages in the same folder.

  • When you need to switch the target page to the current page asset data, in Replace Target Assets, you can configure the relationship between the target page asset and the current page asset. This function needs to be enabled External Parameter when binding assets. For more information, see Binding Asset.

  • If the current page is the initial page, the Previous Page action does not take effect.