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


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