Creating and Configuring Elements¶

You need to create elements and configure elements information to monitor assets.

Creating Elements¶

Creating elements through the following.

Creating elements in Toolbar by following these steps.

Select Monitoring > Monitor to open the DTM Visualization Tool Editor.
Select Menu and select New Element in the drop-down menu.
In the top toolbar, select the save button .
Enter the element name in the pop-up window and select OK. The created elements will be saved under Root of Elements by default.

Creating elements in Management Area by following these steps.

Select a blank space on the canvas to configure the control, basic, grids and guides and data binding attributes for that element.

Under the Control tab, you can configure the following element control attributes.

Field	Description
Event	Event handling Render elements
Visible	Set whether the element is visible.
Scrollable	Once enabled, the mouse wheel will no longer trigger the view’s scroll interaction on this node. Default is false.
Interactive	Set whether the element is interactive.
Hide Selection Border	Set whether to hide the selection border.
Pixel Precise	Set whether the transparent area of the element in 2D mode can be used to select the element. Default is True, meaning ignored. When True, selecting the transparent area of a node will not trigger interaction.
Texture Cache	Set whether to enable texture cache.
Fit Size	The final drawing size of the vector is determined by the reference node. When calculating the component size, it determines whether to stretch or reset the size. Default is false. false: Stretch, the component graphic will be stretched. true: Reset size, if layout attributes are set, they will take effect.

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

Field	Description
Preview Address	Set the web page displayed when previewing this element.
Snapshot Address	Set the preview image of this element in the preview area.
Background	Select the background color of the panel. The panel defaults to a transparent background.
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. Copy Style: The element will copy the style of the specified element. For example, color.
Width	Set the canvas width.
Height	Set the canvas height.
Boundary Extension	Element content can exceed the white canvas and be placed on the page. When dragging elements, the exceeding part will not refresh. Boundary extension can expand the rendering area of the element.
Snap Points	Edit the position of snap points. After setting snap points, lines can snap to these points when connecting in the panel.
Snap Mode	Select the snap mode, default is proximity. Proximity: Snapping occurs only when close to the snap point, otherwise the current x, y anchor values are automatically determined. Strict: Strictly snap to a snap point; other positions cannot serve as line endpoints.
Tint Mode	Select the calculation method for tinting color. Multiply: Default value. Override Override RGB: Override color except transparency. Override A: Override transparency.

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 1.
Bold Line Every	Adjust the interval of bold grid guide lines, default value is 20.
Light Line Color	Set the light grid line color, default value is rgba(191, 191, 191, 0.2).
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.

Under the Data Binding tab, you can configure the following data attributes.

Field	Description
Property	Set the property key value.
Value Type	Select the type of the property value.
Default Value	Optional, enter the default value of the property.
Name	Enter the display name of the property in the panel.
Group	Select a group to categorize properties.
Bindable	Set whether this property can be bound to data.
Description	Enter the property description.
Additional Information	Enter additional property information.