Exploring Digital Twin Monitoring (DTM)


This article describes the main elements of DTM.

Monitoring Editor


The following figure shows the page of the monitoring editor.


../_images/editor.png


The names and functions of each area of the editor are described as follows.


Component

Description

Toolbar

Include graphic drawing tools and page editing tools.

Management Area

Display and manage the directory where panels, elements, widgets, and resources are stored.

Preview Area

Display a preview view of the panels, elements, widgets, and resources in the management area.

Canvas

drawing panels or elements.

Configuration Area

Configure the properties of panels and elements and make data binding.

Viewing Area

View the architecture of the panel or element.
  • List: A tree list of all elements in the panel or element.
    • Parent-child relationship: Drag and drop elements to other elements to set the parent-child relationship.

    • Arrangement order: from top to bottom for the element level from back to front. The element that is first in the list order is located at the bottom of the panel or element.

  • Layers (Displayed only for panels): Show all the layer information in the panel. Layers can be added and deleted. The elements can be selected to be classified into different layers.

  • Status (Displayed only for elements): the status information of this element.

  • Overview: Top view to quickly select the local position of a drawing or drawing element.

  • Data: All JSON data for these panels or elements.


Toolbar


When editing a drawing or element, you can quickly draw a panel with the graphics tools in the toolbar or change the page state with the page editing tools.

Graphics Tools


The graphics tool in the toolbar is shown below.


Panel Graphics Tools


../_images/page_toolbar1.png


Element Graphics Tools


../_images/toolbar.png


The table below explains the functions of each button.


Button

Description

click

Edit mode.

draw

Draw irregular shapes.

shape

Draw ellipses, rounded rectangles, rectangular bodies, orthogonal polygons, triangular bodies, star bodies, and circular arcs.

text

Add text.

border

Draw the border.

chart

Draw pie charts, single-dimensional bar charts, bar charts, and line charts. Available only when drawing elements.

link

Connects the center of the elements. Available only when drawing panels.

controller

Provides controls such as Textbox input and buttons to control the asset.

DTD1

Add a DTD page and enable sending parameters to the DTD page.

alarmlist

Add an alarm list of assets. You can acknowledge alarms directly on the DTM page or enter the alarm console directly to operate.


Page Editing Tools


The page editing tool in the toolbar is shown below.


../_images/page_toolbar.png


The table below explains the functions of each button.


Button

Description

bind

Bind assets to the panel.

redo

Undo/redo.

scale

Toggle/hide the rulers.

grids

Toggle/hide the grid.

save

Save the page.

preview

Preview the page.

reload

Reload.

zoom

Current page zoom scale. Drag the numbers left and right to adjust the scale.

fullscreen

Zoom to full screen.

lefttoolbar

Hide/Show the left toolbar.

righttoolbar

Hide/Show the right toolbar.

switchfull

Enable/disable full-screen mode.


Element Editing Tools


The element editing tool in the toolbar is shown below.


../_images/element_toolbar.png


The table below explains the functions of each button.


Button

Description

distribute

Horizontal/vertical distribution, available only when three or more elements are selected.

align

Alignment, available only when two or more elements are selected.

search

Search for element configuration.

advanced

Hide/Show advanced configuration.