Skip to Content

Wiki source code of 05 Cloud SCADA

Last modified by Joe on 2024/08/08 09:29
Show last authors
1 = **Introduction** =
2
3 The default page of the V-BOX web SCADA platform after login is shown as below. The main functions of this platform include the centralized monitoring, template management, project management, and authority management. The user could switch between the function modules through the left navigation bar, and the specific content of each function module will be displayed on the right side.
4
5 * **Centralized monitoring:** project list, that is displayed in groups;
6 * **Template management**: add and edit templates;
7 * **Authority management:** assign a project with configuration authority for view-account
8
9 (% style="text-align:center" %)
10 [[image:1617874482390-379.png||height="421" width="800" class="img-thumbnail"]]
11
12 = Log in =
13
14 Click Cloud SCADA under service in the upper right corner, or enter [[http:~~/~~/web.v-box.net/>>http://web.v-box.net/]] on browser.
15
16 [[image:image-20220714150826-1.jpeg]]
17
18 The account of the V-box web SCADA platform is the same as the V-BOX account.
19
20 (% style="text-align:center" %)
21 [[image:1617874518342-186.png||height="357" width="200" class="img-thumbnail"]]
22
23 (((
24 = **Centralized monitoring** =
25 )))
26
27 Centralized monitoring is the default home page of the platform. As shown as the figure below.
28
29 (% style="text-align:center" %)
30 [[image:1617874482390-379.png||height="421" width="800" class="img-thumbnail"]]
31
32 This page displays projects under each group by switching groups. You could add, delete and modify the group. In addition, you could add or remove projects from groups, browse projects, and configure project parameters.
33
34 == Group management ==
35
36 The centralized monitoring module classifies the project by group.
37
38 [[image:image-20220714151453-2.jpeg||height="394" width="795"]]
39
40
41 1. **Switch group:** Click group name to switch group.
42 1. **Add a group:** Click [[image:云组态群组添加.png||alt="V-BOX cloud configuration user manual_html_b2953a9d44427091.png" class="img-thumbnail"]] to add a new group.
43 1. **Edit group:** Click [[image:云组态群组编辑.png||alt="V-BOX cloud configuration user manual_html_516339bb09efc553.png" class="img-thumbnail"]] to edit the group name.
44 1. **Delete group:** Click [[image:云组态群组删除.png||alt="V-BOX cloud configuration user manual_html_c92089cb54d385cd.png" class="img-thumbnail"]] to delete the current group.
45
46 == New project ==
47
48 Click "New project" on the upper right corner to create a new project. You could input the project name, select a group and whether it is cross-box.
49
50 [[image:image-20220715094953-3.jpeg]]
51
52 (% style="text-align:center" %)
53 [[image:WXWorkCapture_17230269947889.png]]
54
55 (% class="box infomessage" %)
56 (((
57 Note: If you enable the option of Cross-box, in the project, you can select tags from all boxes bound in your V-NET account.
58 )))
59
60 Click "Thumbnail" to upload a thumbnail. It will be displayed as the preview image of the project.
61
62 [[image:image-20220715094733-2.jpeg]]
63
64 (% class="box infomessage" %)
65 (((
66 **✎Note: ** A project can upload no thumbnails or up to one thumbnail. When no thumbnail is uploaded, the project list will be displayed with the system default image
67 )))
68
69 == Manage project ==
70
71 The centralized monitoring module includes the following functions: add new projects, delete projects and preview projects for each group. Click on the corresponding group to display the list of projects in the group, as shown below.[[image:image-20220715100603-4.jpeg]]
72
73 **Manage project:** Click "manage project" to assign a project in the group.
74
75 **Preview project:** Click on [[image:1617948906340-294.png||class="img-thumbnail"]] to view the configuration screen of the project.
76
77 **Display mode: ** You could switch the display mode by clicking the icons on the upper right corner of page, shown as below.
78
79 (% style="text-align:center" %)
80 [[image:image-20220715101053-5.jpeg]]
81
82 == Browse project ==
83
84 Click on [[image:1617948906340-294.png||class="img-thumbnail"]] in the project list to view the configuration screen.
85
86 (% style="text-align:center" %)
87 [[image:V-BOX cloud configuration user manual_html_72b4c2044c0ab2fe.png||height="365" width="600" class="img-thumbnail"]]
88
89 **Real-time data: **Click the "Real-time Data" to view the device name and state, current value, encoding, description, etc.
90
91 **Alarm data: **Click the "Alarm data" button to pop up the alarm record page and view the current alarm status and historical alarm information.
92
93 **Historical data:** Click the "History Data" button to pop up the history report interface of the data. You could view all the historical data.
94
95 **Multi-language:** multi-language drop-down menu, one object could support three language at the same time, you could switch language by this menu.
96
97 [[image:image-20220715101731-6.jpeg||height="50" width="50" class="img-thumbnail"]] Open or close the alarm sound of the alarm record object.
98
99 [[image:image-20220715101736-7.jpeg||height="52" width="51" class="img-thumbnail"]] Full screen display or restore configuration screen.
100
101 [[image:image-20220715101741-8.jpeg||height="51" width="50" class="img-thumbnail"]] Hide or show the top blue menu bar.
102
103 [[image:image-20220715101747-9.jpeg||height="50" width="50" class="img-thumbnail"]] Zoom in the screen.
104
105 [[image:image-20220715101753-10.jpeg||height="51" width="50" class="img-thumbnail"]] Zoom out the screen.
106
107 == Project setting ==
108
109 [[image:image-20220715103031-11.jpeg]]
110
111 [[image:image-20220715104640-1.jpeg||height="34" width="41"]]**Configuration design:** Click  the button  to enter the configuration programmer to design the configuration screen for that project.
112
113 [[image:image-20220715104711-2.jpeg||height="32" width="40"]]**Preview project:** Click the project preview image or click the button to browse the configuration screen of the project.
114
115 [[image:image-20220715104745-3.jpeg]]**Login-free browse: **Click the button and set the expiration time in the pop-up box to generate the browsing address and QR code (scan to browse, but not to operate).
116
117 [[image:image-20220715104944-7.jpeg]]**Copy project:** Click the button to set the name and group of the new project to add a new project.
118
119 [[image:image-20220715105016-8.jpeg]]**Export project:** Click the button to export the project.
120
121 [[image:image-20220715105102-9.jpeg]]**Edit project:** Click the button to modify the project (project name and whether or not to cross V-BOX option), upload and delete thumbnails.
122
123 [[image:image-20220715105139-10.jpeg]]**Delete project:** Click the button to delete the project.
124
125 [[image:image-20220715105152-11.jpeg||height="36" width="43"]]**Assigned to a group: **Click the button to assign the project to a group.
126
127 == Import/Export ==
128
129 After clicking Export Project, a project file will be generated.
130
131 (% style="text-align:center" %)
132 [[image:云组态工程导出2.png]]
133
134 Create a new project, go to the design page and import the project file.
135
136
137 (% style="text-align:center" %)
138 [[image:云组态工程导入.png]]
139
140 = Template =
141
142 == Template management ==
143
144 Click the template management module on the left menu to enter the template management module.
145
146 (% class="box infomessage" %)
147 (((
148 **✎Note: **
149
150 * Only templates of the same resolution can be imported into the configuration screen of the project;
151 * Template design only supports single screen design;
152 * Template screen does not support import and export, preview, compile, import other templates, and bind monitoring point functions.
153 )))
154
155 (% style="text-align:center" %)
156 [[image:1617949183137-615.png||height="205" width="800" class="img-thumbnail"]]
157
158 The V-box Web SCADA platform provides a template management module that could save the designed configuration screen as a template and user could import the template to design the project more efficiently.
159
160 [[image:image-20220715105925-1.jpeg||height="46" width="45"]]**Add template: **Click the button to add a template as below.
161
162 [[image:image-20220715110054-4.jpeg]]
163
164 [[image:image-20220715105933-2.jpeg||height="37" width="45"]]**Edit template: **Click the button to enter the configuration programmer to design the configuration screen for that template project.
165
166 [[image:image-20220715105937-3.jpeg||height="42" width="42"]]**Delete template: **Click the button to delete the template.
167
168 == Template assign ==
169
170 Create a Scada project and click the [[image:模板导入图标.png]] button import template in the project configuration page.
171
172 (% style="text-align:center" %)
173 [[image:模版导入.png]]
174
175 (((
176 = **Web SCADA design** =
177 )))
178
179 == Main screen ==
180
181 Click "Design" (or Template design) in "Project Management" (or Template Management) screen to access WEB SCADA editor.
182
183 (% style="text-align:center" %)
184 [[image:1617949467765-343.png||height="393" width="800" class="img-thumbnail"]]
185
186 The function partition of WEB SCADA editor.
187
188 (% style="text-align:center" %)
189 [[image:V-box 1.png||alt="V-BOX cloud configuration user manual_html_cb0c19aefec34494.png" height="315" width="600" class="img-thumbnail"]]
190
191 1. **Toolbar:** A function bar that provides pages operations and objects operations;
192 1. **Project Manager:** It shows all screens for project and operations.
193 1. **Objects Library: **It provides 8 basic shapes objects and 20 common objects for creating SCADA page;
194 1. **Design Area: **Design area for SCADA page and template;
195
196 == Design process ==
197
198 1. Create new screen and set the property;
199 1. Select the object and drag the mouse in design area;
200 1. Edit object property and set the variable etc;
201 1. Save the screen;
202
203 == Screen management ==
204
205 A project or template is composed of one or several screens. A template contains only one screen, whereas a project can be composed of one or more screens (only take project as an example.). All screens are listed on "Project Manager". Select screen name, its page would be displayed on "Design Area".
206
207 [[image:image-20220715113713-9.jpeg]]
208
209 The screens are divided into normal screens and sub-screens, as shown above.
210
211 * The normal screen will be displayed when viewing a project or template.
212 * Sub-screen is embedded in the pop-up box of the normal screen, and the function switch and other objects are used to click the popup display.
213
214 In the project browsing page, the default display is the top common screen in the screen list, i.e., the main screen in the figure above, and the other screens will be switched through screen jumping or linking, etc.
215
216 **Create screens**
217
218 Click [[image:image-20220715114850-12.jpeg||height="30" width="48"]] to create a new screen. Set the porperties in the pop-up box, select the screen type (normal screen and sub-screen) and save.
219
220 [[image:image-20220715114601-11.jpeg]]
221
222 (% class="box infomessage" %)
223 (((
224 **✎Note:** When a thumbnail page is not created, the default picture would be displayed on "Centralized Monitoring".
225 )))
226
227 **Modifying screen**
228
229 1. Select the page to be modified;
230 1. Click [[image:V-BOX cloud configuration user manual_html_a5f920d2d144472c.png||height="30" width="30" class="img-thumbnail"]] on "Project Manager" or [[image:画面属性.png||alt="V-BOX cloud configuration user manual_html_56ae321f2d4418ac.png" class="img-thumbnail"]] on "Toolbar";
231 1. Modify screen on [Design Area];
232 1. Click [[image:V-BOX cloud configuration user manual_html_5970eb09902bd1a3.png||height="30" width="30" class="img-thumbnail"]] on "Toolbar" to complete modification;
233
234 **Deleting screen**
235
236 1. Select screen on "Project Manager";
237 1. Click[[image:V-BOX cloud configuration user manual_html_dca942a0244f9912.png||height="29" width="30"]] , and following message would pop up to prevent accidental deletion;
238
239 (% style="text-align:center" %)
240 [[image:V-BOX cloud configuration user manual_html_1e7f9096426ebeca.png||height="161" width="300" class="img-thumbnail"]]
241
242 (% start="3" %)
243 1. Click "OK" to delete page.
244
245 **Sort screen**
246
247 1. Select page screen on "Project Manager";
248 1. Click [[image:V-BOX cloud configuration user manual_html_1ab5c888bfd536c.png||height="25" width="53"]] to sort screen upwards or downwards.
249
250 (% class="box infomessage" %)
251 (((
252 **✎Note:** Thumbnail does not support sorting.
253 )))
254
255 == Object ==
256
257 The Web SCADA platform provides a variety of visualizations for users to design screen. All objects listed on "Object Library“.
258
259 The screen is made up of objects. All the objects are provided in the object bar, and control points will appear around all the objects selected in the canvas.
260
261 Only the special attributes of the objects are listed for explanation, and the basic attributes of the objects, such as position, style, lock, etc., are not listed.
262
263 === Adding object ===
264
265 1. Select and click the object on ”Objects Library“;
266 1. Move the cursor to the "Design Area";
267 1. When cursor changes as + symbol, hold down left click draw the desired size;
268
269 **Current object: **If you click a object, it will be in the selected state, that is, the current part.** **Control points with red background and black edge will appear around the current obejct.
270
271 **Selected object:** Click the blank space of the canvas, left-click the mouse to select an area, or hold down the Ctrl key and click the desired part. Objects with red or white dots around them are collectively referred to as selected parts.
272
273 [[image:image-20220715141718-1.jpeg]]
274
275 === Moving object ===
276
277 1. Select object on "Design Area";
278 1. Hold down the left click and move object to desired position.
279
280 (% style="text-align:center" %)
281 [[image:V-BOX cloud configuration user manual_html_4a7ca599f8cf89c5.png||height="141" width="200" class="img-thumbnail"]]
282
283 === Scaling object ===
284
285 1. Select object, the positioning control point would appear around object;
286 1. Click any control point;
287 1. Move point to scale object.
288
289 === Editing object ===
290
291 **Select device type**
292
293 Double-click the object to open property window, and click the button [[image:image-20220715144518-2.jpeg]] to select the device to be bound. One object can only bind one device type.
294
295 (% class="box infomessage" %)
296 (((
297 **✎Note:** If the SCADA project is selected as cross-box, then all the objects in the project can bind to V-BOX or ig series HMI.
298 )))
299
300 (% style="text-align:center" %)
301 [[image:V-BOX cloud configuration user manual_html_45a8e3cf3e1113fe.png||height="352" width="600" class="img-thumbnail"]]
302
303 If you choose V-BOX, the HMI of the current account will be filtered out in the multi-level grouping of the device selection drop-down box, and only the V-BOX bound to the current account will be displayed.
304
305 If you choose to bind an ig HMI, only the HMI bound by the current account will be displayed.
306
307 **Object state modification**
308
309 Double-click the object to open property window, modify the parameters, and save.
310
311 [[image:image-20220718085015-1.jpeg]]
312
313 **Object device modifcation**
314
315 * **Common object:** you have bound the monitoring point information belonging to the V-BOX at the monitoring monitoring point of the object. If you modify the monitoring point, there will be a reminder to confirm the switching device binding type. (If "Clear Original Configuration" is selected, then all the monitoring point information of the box bound to the object will be cleared, and switch the binding type of the object from V-BOX to HMI.
316 * **Time object: **Because HMI can't report the time, the monitoring equipment function of the time object can't be compatible with HMI. Therefore, when selecting the monitoring point of the monitoring device, there is only the option of V-BOX, and its multi-level grouping will only display the information of V-BOX. The display and hide function of this object can still bind HMI, but if the display and hide monitoring points are bound, the monitoring point binding to the monitoring device will be cleared.
317 * **Alarm record object:** Because the operation of binding monitoring point is different from other objects, no matter what the binding type before the object is, when switching between V-BOX and HMI, a switching reminder will be given. At the same time, when switching the binding device type at "display/conditional hide", the monitoring point information of the object binding will also be cleared, and the device type display will be switched.
318 * **Report object: **When you switch the device type of report binding at the monitoring point binding of the report, a switching reminder will be given.  At the same time, if you switch the binding device type at "display/conditional hide", the monitoring point information of the component binding will also be cleared, and the device type display here will be switched.
319 * **Map object:** You open the map and all the devices are selected by default. You could set according to your needs. At the same time, if you switch the binding device type in "display/conditional hide", the configuration will be cleared, and all devices will be displayed on the map by default.
320
321 === Object shape ===
322
323 (% style="text-align:center" %)
324 [[image:1617949894556-149.png||height="402" width="250" class="img-thumbnail"]]
325
326 **Line: **A line segment with a starting position and an ending position, which can be hidden by setting styles and conditions.
327
328 **Rectangle: **Used to display rectangular objects, and you can set its position, size, style, conditional hide, etc.
329
330 **Circle:** Used to display circular objects, and you can set its position, size, style, conditional hide, etc.
331
332 **Ellipse: **Used to display oval objects, and you can set its position, size, style, conditional hide, etc.
333
334 **Triangle: **Used to display triangle objects, and you can set its position, size, style, conditional hide, etc.
335
336 **Text: **Used to display text content parts, and you can set text style and background style, and support multi-language input.
337
338 (% class="table-bordered" %)
339 |=(% scope="row" style="width: 195px;" %)**Property**|=(% style="width: 483px;" %)**Description**
340 |=(% style="width: 195px;" %)Multilingual|(% style="width:483px" %)3 languages input and setting are supported, and each language can set the style and display mode of text separately. You need to select the language before setting the text content. The content of the text will be displayed according to the language selected when browsing the interface.
341 |=(% style="width: 195px;" %)Rounded corner|(% style="width:483px" %)Sets the rounded corners of appearance rectangle of the text object .
342 |=(% style="width: 195px;" %)Fill color|(% style="width:483px" %)Sets the fill color of appearance rectangle of the text object.
343 |=(% style="width: 195px;" %)Border color|(% style="width:483px" %)Sets the border color of the text object.
344 |=(% style="width: 195px;" %)Line type|(% style="width:483px" %)Sets the line type of the text object.
345 |=(% style="width: 195px;" %)(((
346 Thickness
347 )))|(% style="width:483px" %)Sets the thickness of the border of the text object. If you choose to hide the border, the border will not be displayed.
348 |=(% style="width: 195px;" %)Conditional hide|(% style="width:483px" %)Set monitoring points and triggering conditions when hiding the object. (conditions for bit address and word address configuration are different)
349
350 **Picture: **It is used for displaying the picture, and supports the user defined picture.
351
352 (% class="table-bordered" %)
353 |=(% scope="row" style="width: 195px;" %)**Property**|=(% style="width: 483px;" %)**Description**
354 |=(% style="width: 195px;" %)Gallery|(% style="width:483px" %)Choose the picture from the gallery
355 |=(% style="width: 195px;" %)Angle|(% style="width:483px" %)Rotation angle (0~~360)
356 |=(% style="width: 195px;" %)Conditional hide|(% style="width:483px" %)Set monitoring points and triggering conditions when hiding the object. (conditions for bit address and word address configuration are different)
357
358 **Table: **Custom table object. You could form the table quickly.
359
360 |=(% scope="row" style="width: 196px;" %)**Attribute**|=(% style="width: 482px;" %)**Description**
361 |=(% style="width: 196px;" %)Background color|(% style="width:482px" %)Sets the background color of the table object.
362 |=(% style="width: 196px;" %)Background transparency|(% style="width:482px" %)(((
363 Set the transparency of the background color in the table object (where the transparency is 0%, the background is full transparent).
364 )))
365 |=(% style="width: 196px;" %)Number of rows|(% style="width:482px" %)Sets the number of rows for the table object. (Limit the number of rows accordign to the object size)
366 |=(% style="width: 196px;" %)Number of columns|(% style="width:482px" %)Sets the number of columns in the table part.(Limit the number of columns accordign to the object size)
367 |=(% style="width: 196px;" %)Border color|(% style="width:482px" %)Sets the color of the border of the table object.
368 |=(% style="width: 196px;" %)Frame thickness|(% style="width:482px" %)Sets the thickness of the border of the table object.
369 |=(% style="width: 196px;" %)Row and column adaptation|(% style="width:482px" %)According to the object size, set the average distribution of width and height of the table.
370 |=(% style="width: 196px;" %)Hide line dividers|(% style="width:482px" %)If checked, the line showing the row is hidden.
371 |=(% style="width: 196px;" %)Hide column divider|(% style="width:482px" %)If checked, the line showing the column is hidden.
372
373 Table operation instructions:
374
375 |=(% style="width: 198px;" %)**Portable operation**|=(% style="width: 481px;" %)**Description**
376 |(% style="width:198px" %)Row control line segment|(% style="width:481px" %)Drag the  row control line to change the row height of the current row.
377 |(% style="width:198px" %)Column control line segment|(% style="width:481px" %)Drag the column control line to change the column width of the current column.
378
379 (% style="text-align:center" %)
380 [[image:V-BOX cloud configuration user manual_html_c84a5d0032df07e2.png||height="420" width="250" class="img-thumbnail"]]
381
382 === Display frame ===
383
384 After binding the monitoring point, the data of the monitoring point can be displayed in real time.
385
386 |=(% style="width: 178px;" %)**Property**|=(% style="width: 596px;" %)Description
387 |(% style="width:178px" %)Monitoring point|(% style="width:596px" %)(((
388 After binding the monitoring point, the data of the monitoring point can be obtained in real time and displayed. Only binding word monitoring points supported
389 )))
390 |(% style="width:178px" %)Write monitoring point|(% style="width:596px" %)(((
391 After binding the monitoring point, you can modify the data of the monitoring point on the browsing interface and write it synchronously to the device.
392 )))
393 |(% rowspan="3" style="width:178px" %)(((
394 Read-write permissions
395 )))|(% style="width:596px" %)Read-write: The display frame can display and write data.
396 |(% style="width:596px" %)Read-only: The display frame can only display data, but cannot write data.
397 |(% style="width:596px" %)Write only: The display frame can only write data, but cannot display data.
398 |(% rowspan="2" style="width:178px" %)(((
399 Background display and hide
400 )))|(% style="width:596px" %)Display: Set the background of the display frame. Background is divided into solid color background and picture background.
401 |(% style="width:596px" %)Hide: Hide the background of the display frame and display only real-time data.
402 |(% style="width:178px" %)Transparency settings|(% style="width:596px" %)(((
403 When the background is solid color background, set the transparency of the background color of the display frame. The default
404
405 transparency is set to 100% (where 0% transparency means that the background is fully transparent).
406 )))
407 |(% style="width:178px" %)(((
408 Object lock
409 )))|(% style="width:596px" %)(((
410 Check the object lock and set the monitoring point and trigger condition of the locking object at the same time. When browsing the interface, if the object lock condition is met, the object will be locked (the lock icon will be displayed on the object), that is, the component is not allowed to write.
411
412 If the hide object lock is checked, the locking function of the part lock will be retained, but the lock icon will not be displayed.
413 )))
414 |(% style="width:178px" %)Text setting|(% style="width:596px" %)Set the data display style of the display frame.
415 |(% style="width:178px" %)Conditional hiding|(% style="width:596px" %)Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
416
417 === Bit indicator ===
418
419 After the monitoring point is bound, it is used for displaying the state of the bit monitoring point. When the state of the bit monitoring point changes, the bit indicator displays according to the bit state picture pointed by the monitoring point.
420
421 |=(% colspan="1" scope="row" style="width: 250px;" %)**Property**|=(% style="width: 825px;" %)**Description**
422 |(% colspan="1" style="width:250px" %)Monitoring point|(% style="width:825px" %)Bind the monitoring point of bit indicator (only support bit monitoring points).
423 |(% colspan="1" rowspan="4" style="width:250px" %)(((
424 Flash
425 )))|(% style="width:825px" %)(((
426 Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
427 )))
428 |(% style="width:825px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
429 |(% style="width:825px" %)Edit conditions: Edit the condition that triggers this function.
430 |(% style="width:825px" %)Flash frequency: Set the time interval for flashing.
431 |(% colspan="1" rowspan="5" style="width:250px" %)(((
432 Status
433 )))|(% style="width:825px" %)(((
434 Function description: Set the multi-state of bit indicator. When the status of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state.
435 )))
436 |(% style="width:825px" %)Conditions: Set the conditions that trigger this state. The bit indicator only has two states: 0 and 1, and each state contains text settings for three languages.
437 |(% style="width:825px" %)(((
438 Language: Sets the text in the three languages in the selected state, including the displayed text content, text style, text position, etc.
439 )))
440 |(% style="width:825px" %)(((
441 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
442 )))
443 |(% style="width:825px" %)(((
444 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
445 )))
446 |(% rowspan="5" style="width:250px" %)(((
447 Graphic
448 )))|(% style="width:825px" %)(((
449 Function description: Set the display picture of each status of the bit indicator. Status of graphics is displayed synchronously with the status setting of the monitoring point.
450 )))
451 |(% style="width:825px" %)(((
452 Modify pictures: Click on a picture in a certain state, and modify the color below the picture.
453
454 This function only works for pictures in the “System Gallery”.
455 )))
456 |(% style="width:825px" %)(((
457 Select pictures: Modify multi-state pictures. Note: When a picture is selected, the pictures in both states of the bit indicator will be replaced in sequence by the state in which the new picture exists. If the new picture has only one status, the status 1 will display no picture.
458 )))
459 |(% style="width:825px" %)Use the default appearance: Restore the pictures in the 0 and 1 states of the bit indicator to the default pictures
460 |(% style="width:825px" %)No appearance: Set the current state to no graph display.
461 |(% style="width:250px" %)Conditional hiding|(% style="width:825px" %)Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
462
463 === Word indicator ===
464
465 After the word monitoring point is bound, read the status of the monitoring point address and display it according to the set status word and status bitmap. The display picture of the object can be set, which can support 128 kinds of status display.
466
467 |=(% style="width: 191px;" %)**Property**|=(% style="width: 630px;" %)**Description**
468 |(% style="width:191px" %)Monitoring point|(% style="width:630px" %)Monitor point for binding word status (only monitor points of word type supported).
469 |(% rowspan="4" style="width:191px" %)(((
470 Flash
471 )))|(% style="width:630px" %)(((
472 Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
473 )))
474 |(% style="width:630px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
475 |(% style="width:630px" %)Edit conditions: Edit the condition that triggers this function.
476 |(% style="width:630px" %)Flash frequency: Set the time interval for flashing.
477 |(% colspan="1" rowspan="5" style="width:191px" %)(((
478 Status
479 )))|(% style="width:630px" %)(((
480 Function description: Set the multi-state display of word monitoring points. When the state of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state. Word indicator has two states by default, and at least two states are required. A maximum of 128 states can be added. The condition of the last state is always other and cannot be set. Each status contains text settings in three languages.
481 )))
482 |(% style="width:630px" %)Conditions: Set the conditions that trigger this status. Click more conditions to set multiple conditions.
483 |(% style="width:630px" %)(((
484 Language: Sets the text in the three languages in the selected state, including the displayed text content,
485
486 text style, text position, etc.
487 )))
488 |(% style="width:630px" %)(((
489 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
490 )))
491 |(% style="width:630px" %)(((
492 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
493 )))
494 |(% rowspan="5" style="width:191px" %)(((
495 Graphic
496 )))|(% style="width:630px" %)(((
497 Function description: Set the picture displayed in each state of the word monitoring point. The state diagram of the graph and the status settings of monitoring points are displayed synchronously.
498 )))
499 |(% style="width:630px" %)(((
500 Modify pictures: Click on a picture in a certain state, and modify the color below the picture.
501
502 This function only works for pictures in the “System Gallery”.
503 )))
504 |(% style="width:630px" %)Select pictures: Modify multi-state pictures. Note that all existing state pictures of the word indicator will be replaced by each state of the new picture in sequence. If the number of states of the new picture is less than that of the current object, the current object will not display the picture of the corresponding state.
505 |(% style="width:630px" %)Use the default appearance: Restore the picture of all states of the word indicator to the default picture.
506 |(% style="width:630px" %)No appearance: Set the current state to no graph display.
507 |(% style="width:191px" %)Conditional hiding|(% style="width:630px" %)Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
508
509 === Bit switch ===
510
511 After the monitoring point is bound, it is used for controlling the state of the bit monitoring point. When the state of the bit monitoring point changes, the bit switch displays according to the bit state picture pointed by the monitoring point.
512
513 {{info}}
514 ✎Note: Do not set the address format to read-only/write-only in the SCADA project, it will result in failure to display the style picture.
515 {{/info}}
516
517 |=(% colspan="2" style="width: 255px;" %)**Property**|=(% colspan="1" style="width: 820px;" %)**Description**
518 |(% colspan="2" style="width:255px" %)Monitoring point|(% colspan="1" style="width:820px" %)Bind the monitoring point of the bit switch (only bit monitoring points are supported).
519 |(% colspan="2" style="width:255px" %)Write monitoring point|(% colspan="1" style="width:820px" %)Bind the write monitor point of the bit switch (only bit monitor points are supported).
520 |(% colspan="2" style="width:255px" %)The monitoring point is consistent with the write monitoring point|(% colspan="1" style="width:820px" %)(((
521 If this check box is checked, the bound write monitoring point the bound monitor monitoring point are consistent.
522 )))
523 |(% colspan="2" rowspan="3" style="width:255px" %)(((
524 Read-write permissions
525 )))|(% colspan="1" style="width:820px" %)Read-write: It can operate the monitoring point and read the state of the monitoring point synchronously. Operation mode: Set ON, set OFF, and switch.
526 |(% colspan="1" style="width:820px" %)(((
527 Read-only: The status of the monitoring point can only be read synchronously and displayed, but cannot be operated.
528 )))
529 |(% colspan="1" style="width:820px" %)Write only: The bit monitoring point can only be operated, but cannot be read.
530 |(% colspan="2" rowspan="2" style="width:255px" %)(((
531 Flash
532 )))|(% colspan="1" style="width:820px" %)Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
533 |(% colspan="1" style="width:820px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
534 |(% colspan="1" rowspan="2" style="width:256px" %)Flash|(% colspan="2" style="width:819px" %)Edit conditions: Edit the condition that triggers this function.
535 |(% colspan="2" style="width:819px" %)Flash frequency: Set the time interval for flashing.
536 |(% colspan="1" rowspan="5" style="width:256px" %)(((
537 Status
538 )))|(% colspan="2" style="width:819px" %)(((
539 Function description: Set the multi-state of bit indicator. When the state of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state.
540 )))
541 |(% colspan="2" style="width:819px" %)Conditions: Set the conditions that trigger this state. The bit indicator only has two states: 0 and 1, and each state contains text settings for three languages.
542 |(% colspan="2" style="width:819px" %)(((
543 Language: Set the text in three languages in the selected state, including the displayed text
544 content, text style, text position, etc.
545 )))
546 |(% colspan="2" style="width:819px" %)(((
547 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
548 )))
549 |(% colspan="2" style="width:819px" %)(((
550 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
551 )))
552 |(% colspan="1" rowspan="5" style="width:256px" %)(((
553 Graphic
554 )))|(% colspan="2" style="width:819px" %)(((
555 Function description: Set the display picture of each status of the bit indicator. Status of graphics
556
557 The diagram is displayed synchronously with the status setting of the monitoring point.
558 )))
559 |(% colspan="2" style="width:819px" %)(((
560 Modify pictures: Click on a picture in a certain state, and modify the color of the picture below the picture. This function only works for the pictures in the "System Gallery".
561 )))
562 |(% colspan="2" style="width:819px" %)Select pictures: Modify multi-state pictures. Note: When a picture is selected, the pictures in both states of the bit indicator will be replaced in sequence by the state in which the new picture exists. If the new picture has only one state, the state 1 will display no picture.
563 |(% colspan="2" style="width:819px" %)Use the default appearance: Restore the pictures in the 0 state and 1 state of the bit indicator to the default pictures.
564 |(% colspan="2" style="width:819px" %)No appearance: Set the current state to no graph display.
565 |(% colspan="1" rowspan="4" style="width:256px" %)(((
566 Object lock
567 )))|(% colspan="2" style="width:819px" %)(((
568 Function description: Check the object lock and set the monitoring point and trigger condition of the locking object at the same time. When browsing the interface, if the object lock condition is met, the object will be locked (the lock icon will be displayed on the object), that is, the object is not allowed to write.
569 )))
570 |(% colspan="2" style="width:819px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
571 |(% colspan="2" style="width:819px" %)Edit conditions: Edit the condition that triggers this function.
572 |(% colspan="2" style="width:819px" %)(((
573 Hide object lock icon: If the hide object lock is checked, the locking function of the object lock will be retained, but the lock icon will not be displayed.
574 )))
575 |(% colspan="1" style="width:256px" %)Conditional hiding|(% colspan="2" style="width:819px" %)(((
576 Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
577 )))
578
579 === Word switch ===
580
581 After the monitoring point is bound, it is used to set the data of the monitoring point.
582
583 (% style="width:1077px" %)
584 |=(% style="width: 252px;" %)**Property**|=(% style="width: 823px;" %)**Description**
585 |(% style="width:252px" %)Monitoring point|(% style="width:823px" %)Bind the monitoring point of the word switch.
586 |(% style="width:252px" %)Write monitoring point|(% style="width:823px" %)Bind the write monitoring point of the word switch.
587 |(% style="width:252px" %)The monitoring point is consistent with the write monitoring point|(% style="width:823px" %)(((
588 If this check box is checked, the bound write monitoring point the bound monitor monitoring point are consistent.
589 )))
590 |(% rowspan="3" style="width:252px" %)(((
591 Read-write permissions
592 )))|(% style="width:823px" %)(((
593 Read-write: It can operate the monitoring point and read the state of the monitoring point synchronously.
594
595 Operation mode: word setting, increase and decrease.
596 )))
597 |(% style="width:823px" %)(((
598 Read-only: The status of the monitoring point can only be read synchronously, and the monitor point cannot be operated.
599 )))
600 |(% style="width:823px" %)Write only: The monitoring point can only be operated, but the status cannot be read.
601 |(% rowspan="2" style="width:252px" %)(((
602
603
604 Word setting
605 )))|(% style="width:823px" %)when browsing the interface, click the object, the setting value will be written into the monitoring point.
606 |(% style="width:823px" %)Operand The value set to the write monitor point.
607 |(% rowspan="5" style="width:252px" %)(((
608 Increase
609 )))|(% style="width:823px" %)when browsing the interface, click the object, the value of the monitoring point is increased once.
610 |(% style="width:823px" %)Operand The value of each increase
611 |(% style="width:823px" %)Upper limit: The maximum value that can be written to the monitoring point.
612 |(% style="width:823px" %)(((
613 Return to destination: Whether to reset the specified value when the value written to the monitoring point reaches the maximum value.
614 )))
615 |(% style="width:823px" %)Destination value: The specified value is reset when the value of write monitoring reaches the upper limit.
616 |(% style="width:252px" %)Decrease|(% style="width:823px" %)The function is the same as increase.
617 |(% rowspan="4" style="width:252px" %)(((
618 Flash
619 )))|(% style="width:823px" %)Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
620 |(% style="width:823px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
621 |(% style="width:823px" %)Edit conditions: Edit the condition that triggers this function.
622 |(% style="width:823px" %)Flash frequency: Set the time interval for flashing.
623 |(% colspan="1" rowspan="5" style="width:252px" %)(((
624 Status
625 )))|(% style="width:823px" %)(((
626 Function description: Set the multi-state display of word monitoring points. When the state of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state.
627
628 Word indicator has two states by default, and at least two states are required. A maximum of 128 states can be added, and the condition of the last status is always other and cannot be set.
629
630 Text setting Each status contains text settings in three languages.
631 )))
632 |(% style="width:823px" %)(((
633 Conditions: Set the conditions that trigger this status. Click more conditions to set multiple conditions combination.
634 )))
635 |(% style="width:823px" %)(((
636 Language: Set the text in three languages in the selected state, including the displayed text
637
638 content, text style, text position, etc.
639 )))
640 |(% style="width:823px" %)(((
641 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
642 )))
643 |(% style="width:823px" %)(((
644 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
645 )))
646 |(% rowspan="5" style="width:252px" %)(((
647 Graphic
648 )))|(% style="width:823px" %)Function description: Set the picture displayed in each state of the word monitoring point. The state diagram of the graph is displayed synchronously with the state settings of the monitoring points.
649 |(% style="width:823px" %)Modify pictures: Click on a picture in a certain state, and modify the color of the picture below the picture. This function only works for the pictures in the "System Gallery".
650 |(% style="width:823px" %)Select pictures: Modify multi-state pictures. Note that all existing state pictures of the word indicator will be replaced by each state of the new picture in sequence. If the number of states of the new picture is less than that of the current object, the current object will not display the picture of the corresponding state.
651 |(% style="width:823px" %)Use the default appearance: Restore the picture of all states of the word indicator to the default picture.
652 |(% style="width:823px" %)No appearance: Set the current state to no graph display.
653 |(% style="width:252px" %)Conditional hiding|(% style="width:823px" %)(((
654 Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
655 )))
656
657 === Dashboard ===
658
659 A object used to realize data visualization by reflecting the numerical changes of word monitoring points in the form of dials and pointers.
660
661 |=(% colspan="2" style="width: 227px;" %)**Property**|=(% colspan="2" style="width: 825px;" %)**Description**|=
662 |(% colspan="2" style="width:227px" %)Monitoring point|(% colspan="2" style="width:825px" %)Bind the monitoring point and get the value of the monitoring point in real time.|
663 |(% colspan="2" style="width:227px" %)(((
664
665
666 Constant, variable
667 )))|(% colspan="2" style="width:825px" %)(((
668 Types of the upper/lower limit values of dashboard
669
670 Constant: The data of the upper/lower limit value of the dashboard is constant.
671
672 Variable: The data of the upper/lower limit value of the dashboard is controlled by the corresponding monitoring point data.
673 )))|
674 |(% colspan="2" style="width:227px" %)Lower limit|(% colspan="2" style="width:825px" %)The value of the starting scale of dashboard.|
675 |(% colspan="1" style="width:238px" %)Upper limit|(% colspan="2" style="width:820px" %)The value of the destination scale of dashboard.|(% colspan="2" rowspan="18" %)
676 |(% colspan="1" style="width:238px" %)Background display and hide|(% colspan="2" style="width:820px" %)Set the display and hide of dashboard background.
677 |(% colspan="1" style="width:238px" %)Display background image|(% colspan="2" style="width:820px" %)It only works when the background is set to display. You can select the displayed background image from the gallery.
678 |(% colspan="1" style="width:238px" %)Select a picture|(% colspan="2" style="width:820px" %)When the background of dashboard is set to display and background picture display is checked, the background picture can be selected.
679 |(% colspan="1" style="width:238px" %)Scale value display|(% colspan="2" style="width:820px" %)Display and hide scale values of dashboard.
680 |(% colspan="1" style="width:238px" %)Scale color|(% colspan="2" style="width:820px" %)Sets the color of the scale value.
681 |(% colspan="1" style="width:238px" %)Scale display|(% colspan="2" style="width:820px" %)Display and hide scale values of dashboard.
682 |(% colspan="1" style="width:238px" %)Main scale|(% colspan="2" style="width:820px" %)Set the number and color of main scale on the dashboard.
683 |(% colspan="1" style="width:238px" %)Sub-scale|(% colspan="2" style="width:820px" %)Set the number and color of sub-scales on the dashboard.
684 |(% colspan="1" style="width:238px" %)Default color|(% colspan="2" style="width:820px" %)The default color of the dashboard.
685 |(% colspan="1" style="width:238px" %)Dashboard type|(% colspan="2" style="width:820px" %)Dashboard dial display within the set number of degrees
686 |(% colspan="1" style="width:238px" %)Numerical display|(% colspan="2" style="width:820px" %)Sets the display and hide of variable values.
687 |(% colspan="1" style="width:238px" %)Pointer style|(% colspan="2" style="width:820px" %)Sets the style of the pointer.
688 |(% colspan="1" style="width:238px" %)Select the language:|(% colspan="2" style="width:820px" %)Set the display and display style of dashboard name. Text in 3 languages can be configured
689 |(% colspan="1" rowspan="4" style="width:238px" %)(((
690 Alert area
691 )))|(% colspan="2" style="width:820px" %)(((
692 Function description: Divide the dial of the dashboard into several areas (1 to 4 zones), each of which can set the style of the partition and the starting value of the partition independently.
693 )))
694 |(% colspan="2" style="width:820px" %)(((
695 Alert value: The starting value of this partition. All values need to be limited to the dashboard starting value; Otherwise, the partition is invalid.
696 )))
697 |(% colspan="2" style="width:820px" %)Color of alert area: Set the dial color of the partition.
698 |(% colspan="2" style="width:820px" %)(((
699 Note: When the value of the monitoring point is not in the set partition, the dashboard and pointer will display the default color; When the monitoring point value is in the set partition, the pointer color is displayed as the set alert area color.
700 )))
701
702 === Bar graph ===
703
704 A object used to realize data visualization by reflecting the numerical changes of word monitoring points in the way of bar graph.
705
706 |=(% colspan="2" style="width: 235px;" %)**Property**|=(% colspan="2" style="width: 817px;" %)**Description**|=
707 |(% colspan="2" style="width:235px" %)Monitoring point|(% colspan="2" style="width:817px" %)It is used to obtain the data of the monitoring point in real time and display it in the bar graph.|
708 |(% colspan="2" style="width:235px" %)Numerical display|(% colspan="2" style="width:817px" %)Whether to display the data of the current monitoring point.|
709 |(% colspan="2" rowspan="2" style="width:235px" %)Progress bar direction|(% colspan="2" style="width:817px" %)0 degree: The bar graph is displayed horizontally, that is, the scale is on the X-axis.|
710 |(% colspan="2" style="width:817px" %)90 degrees: The bar graph is displayed vertically, that is, the scale is on the Y-axis.|
711 |(% colspan="2" style="width:235px" %)Scale display|(% colspan="2" style="width:817px" %)Display and hide of bar graph scale.|
712 |(% colspan="2" style="width:235px" %)Main scale|(% colspan="2" style="width:817px" %)Set the number and color of the main scale.|
713 |(% colspan="2" style="width:235px" %)Sub-scale|(% colspan="2" style="width:817px" %)Set the number and color of sub-scale.|
714 |(% colspan="2" style="width:235px" %)Lower limit|(% colspan="2" style="width:817px" %)The minimum value of the bar graph.|
715 |(% colspan="1" style="width:195px" %)Upper limit|(% colspan="2" style="width:609px" %)The maximum value of the bar graph.|(% colspan="2" rowspan="10" %)
716 |(% colspan="1" rowspan="3" style="width:195px" %)(((
717 Style
718 )))|(% colspan="2" style="width:609px" %)(((
719 Style 1: The scale is displayed on the outer side below the horizontal bar graph or on the outer left side of the vertical bar graph.
720 )))
721 |(% colspan="2" style="width:609px" %)(((
722 Style 2: The scale is displayed on the top, bottom and outside of the horizontal bar graph or on the left and right sides of the vertical bar graph.
723 )))
724 |(% colspan="2" style="width:609px" %)(((
725 Style 3: The scale is displayed on the inner side below the horizontal bar graph or on the inner left side of the vertical bar graph.
726 )))
727 |(% colspan="1" style="width:195px" %)(((
728 Color
729 )))|(% colspan="2" style="width:609px" %)(((
730 Color display of data filling area of monitoring point:
731
732 ~1. When the starting color is consistent with the ending color, the filling area is displayed as solid color;
733
734 2. When the starting color is inconsistent with the ending color, the fill area is displayed as a gradient of starting color - ending color - starting color.
735 )))
736 |(% colspan="1" style="width:195px" %)Background display and hide|(% colspan="2" style="width:609px" %)(((
737 The bar graph background color is displayed or not. The background color refers to the color displayed when the bar graph fill area is not filled.
738 )))
739 |(% colspan="1" rowspan="4" style="width:195px" %)(((
740 Alert area
741 )))|(% colspan="2" style="width:609px" %)(((
742 Function description: Divide the bar graph into several areas (1 to 4 areas), each of which can set the style of the area and the starting value and ending value of the partition independently.
743 )))
744 |(% colspan="2" style="width:609px" %)(((
745 Alert value: The starting and ending values of the partition. All values need to be limited to upper limit and lower limit of the bar graph, otherwise the partition is invalid.
746 )))
747 |(% colspan="2" style="width:609px" %)(((
748 Color of alert area: When the monitoring point value is within a certain partition value range, the bar graph represents the color of the fill area (displayed in solid color).
749 )))
750 |(% colspan="2" style="width:609px" %)(((
751 Note: When the monitoring point value is not in the set partition, the bar chart will display the default color.
752 )))
753
754 === Real-time trend chart ===
755
756 The trend chart takes time as the horizontal axis and data as the vertical axis, and displays the change of data of monitoring points with time in curve.
757
758 |=(% style="width: 230px;" %)**Property**|=(% style="width: 845px;" %)**Description**
759 |(% style="width:230px" %)Number of curves|(% style="width:845px" %)Set the number of curves to be displayed on the curve object.
760 |(% style="width:230px" %)Curve type|(% style="width:845px" %)There are 4 optional styles for curve display.
761 |(% style="width:230px" %)Curve color|(% style="width:845px" %)The color of the curve when it is displayed.
762 |(% style="width:230px" %)Curve name|(% style="width:845px" %)The name of the curve shown in the graph example on the right side of the curve object.
763 |(% style="width:230px" %)Bind monitoring point|(% style="width:845px" %)Select the monitoring points that the curve needs to bind.
764 |(% rowspan="2" style="width:230px" %)(((
765 Y-axis range
766 )))|(% style="width:845px" %)Fixed: Set the values of upper limit and lower limit of Y axis to fixed values.
767 |(% style="width:845px" %)(((
768 Adaptation: In the set time axis, the upper limit of Y-axis is 20% above the maximum of the monitoring point data, and the lower limit of Y-axis is 20% below the minimum of the monitoring point data
769 )))
770 |(% style="width:230px" %)Lower limit of Y-axis|(% style="width:845px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
771 |(% style="width:230px" %)Upper limit of Y axis|(% style="width:845px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
772 |(% style="width:230px" %)Grid color|(% style="width:845px" %)Sets the color of the graph grid.
773 |(% style="width:230px" %)Text setting|(% style="width:845px" %)Sets the display style of text in X/Y axis.
774 |(% style="width:230px" %)Start date|(% style="width:845px" %)Set the start time of the X axis of the graph.
775 |(% style="width:230px" %)End date|(% style="width:845px" %)Set the end time of the X axis of the graph.
776 |(% style="width:230px" %)(((
777 Recent days
778 )))|(% style="width:845px" %)(((
779 There are 4 choices (last 1 day, last 7 days, last 30 days, to be selected) for you to filter the time are conveniently and quick, and the corresponding start date and end date will become the current selected last few days. If the selected start and end dates are not within the last 1 day, last 7 days and the last 30 days, the state in recent days will be to be selected.
780 )))
781 |(% rowspan="3" style="width:230px" %)(((
782 Time sequence
783 )))|(% style="width:845px" %)The time sequence of viewing is divided into two kinds: time ascending and time descending.
784 |(% style="width:845px" %)(((
785 Time ascending: The start time is displayed at the left starting point of the X axis, and the time increases from the start time to the end time.
786 )))
787 |(% style="width:845px" %)(((
788 Time descending: The end time is displayed at the left starting point of the X axis, and the time decreases from the end time to the start time.
789 )))
790 |(% style="width:230px" %)Date format|(% style="width:845px" %)Sets the display format of X-axis time and date.
791 |(% style="width:230px" %)Background color of the filter bar|(% style="width:845px" %)Sets the background color of the filter bar row below the chart. There are two kinds of translucent and fully transparent.
792 |(% style="width:230px" %)(((
793 Starting color/End color
794 )))|(% style="width:845px" %)Set the background color of the graph.
795 |(% style="width:230px" %)Gradient type|(% style="width:845px" %)Sets the gradient type of the background color of the graph.
796 |(% style="width:230px" %)Transparency settings|(% style="width:845px" %)Set the transparency of the background color of the graph. The larger the value, the more transparent it is.
797 |(% style="width:230px" %)[[image:image-20220720144807-1.png||height="43" width="54"]]|(% style="width:845px" %)Display the color of this curve correspondingly. Clicking on the graph while browsing the interface will hide the corresponding curve display.
798
799 === Flow bar ===
800
801 The flow effect of color block is used to reflect the flow process in technological process production.
802
803 Select the starting point or end point of the flow bar positioning point, hold down the left mouse button, you can rotate to the corresponding position in the range of 0 to degrees.
804
805 |=(% style="width: 229px;" %)**Property**|=(% style="width: 846px;" %)**Description**
806 |(% style="width:229px" %)Monitoring point|(% style="width:846px" %)Control the flow status of the flow object according to the status of the monitoring point.
807 |(% style="width:229px" %)Trigger condition|(% style="width:846px" %)(((
808 Edit the trigger condition. When the status value of the monitoring point meets the trigger condition, the flow object flows; When the conditions are not met, the flow object will stop flowing.
809 )))
810 |(% style="width:229px" %)Speed|(% style="width:846px" %)The speed of the flow bar can be selected as fast, medium and slow.
811 |(% rowspan="3" style="width:229px" %)(((
812 Flow direction
813 )))|(% style="width:846px" %)The flow direction of the flow bar can be forward and reverse along the straight line.
814 |(% style="width:846px" %)Forward: Flows from left to right.
815 |(% style="width:846px" %)Reverse: Flows from right to left.
816 |(% style="width:229px" %)Color|(% style="width:846px" %)The color of the flowing color block in the flow bar.
817 |(% style="width:229px" %)Color block thickness|(% style="width:846px" %)The thickness of the flowing color block in the flow bar.
818 |(% style="width:229px" %)Color block length|(% style="width:846px" %)The length of the flowing color block in the flow bar.
819 |(% style="width:229px" %)Color block spacing|(% style="width:846px" %)The distance between two flowing color blocks in a flow bar.
820 |(% style="width:229px" %)Border display and hide|(% style="width:846px" %)Set the display and hide of the flow bar border.
821 |(% style="width:229px" %)Border color|(% style="width:846px" %)Sets the border color of the flow bar.
822
823 (% class="lead" id="HTipsforflowbardesign" %)
824 **Tips for flow bar design**
825
826 In order to obtain a more beautiful flow bar, when it is necessary to simulate the flow effect in the water pipe, the pipe picture object can be designed first, and then the hidden frame of the flow bar is placed on the pipe picture object.
827
828 **Video window**
829
830 A video playback object plays a video file provided in a video source. At present, this object only supports fluorite cloud video source, and this object does not support Z-axis sorting on browsing pages, so the video window will be placed on top of all objects when the interface is browsed.
831
832 **Hyperlink**
833
834 The objects with hyperlink function can jump the picture directly and realize the access function.
835
836 |=(% style="width: 245px;" %)**Property**|=(% style="width: 830px;" %)**Description**
837 |(% style="width:245px" %)Background display and hide|(% style="width:830px" %)Set the display and hiding of the object background.
838 |(% rowspan="2" style="width:245px" %)Display background image|(% style="width:830px" %)Check: Hyperlink object background will be displayed as a picture.
839 |(% style="width:830px" %)Uncheck: Hyperlink object background will be displayed in solid color.
840 |(% style="width:245px" %)Transparency settings|(% style="width:830px" %)(((
841 When the background is a solid color background, set the transparency of the background color of the hyperlink part, and the default transparency is set to 100% (0% transparency means that the background is fully transparent).
842 )))
843 |(% style="width:245px" %)Opening mode|(% style="width:830px" %)When you click the hyperlink object, the link address screen is opened in a new window or this window.
844 |(% style="width:245px" %)Link address|(% style="width:830px" %)The address of the linked screen when clicking the hyperlink object.
845 |(% style="width:245px" %)Select language:|(% style="width:830px" %)Select language, and set the text and style of hyperlinks in multilingual.
846
847 === Function switch ===
848
849 This object realizes the function of jumping the picture or popping up the sub-picture on the engineering picture.
850
851 |=(% style="width: 246px;" %)**Property**|=(% style="width: 829px;" %)**Description**
852 |(% style="width:246px" %)Jump to the specified screen|(% style="width:829px" %)Click on the function switch, and jump to the specified screen.
853 |(% style="width:246px" %)Pop-up sub-screen|(% style="width:829px" %)Click on the function switch, and the specified sub-screen will pop up on this screen.
854 |(% style="width:246px" %)Jump to the previous screen.|(% style="width:829px" %)(((
855 Click the function switch, and the screen will jump to the previous screen (the previous screen does not include thumbnail page and sub-screen).
856 )))
857 |(% style="width:246px" %)Jump to the next screen|(% style="width:829px" %)(((
858 Click the function switch, and the screen will jump to the next screen (the next screen does not include thumbnail page and sub-screen).
859 )))
860 |(% style="width:246px" %)Return to the previous screen|(% style="width:829px" %)(((
861 Click the function switch, and the screen jumps to the previous screen (the screen does not include thumbnail page and sub-screen).
862 )))
863 |(% style="width:246px" %)Select language:|(% style="width:829px" %)Select language, and set the text and style of hyperlinks in multilingual.
864 |(% style="width:246px" %)Background display and hide|(% style="width:829px" %)Display and hide the background of the object.
865 |(% style="width:246px" %)Transparency settings|(% style="width:829px" %)(((
866 When the background is a solid color background, set the transparency of the background color of the function switch object. The default transparency is set to 100% (0% transparency means the background is fully transparent)
867 )))
868 |(% rowspan="2" style="width:246px" %)Display background image|(% style="width:829px" %)Check: The object background will be displayed as a picture.
869 |(% style="width:829px" %)Uncheck: The object background will be displayed in solid color.
870
871 === Time ===
872
873 Display the system time object of V-BOX. When the V-BOX is online, the current time of the V-BOX can be displayed in real time. When the V-BOX is offline, the time will stay at the time when the V-BOX is offline. When the V-BOX is not bound, the local time will be displayed.
874
875 |=(% style="width: 240px;" %)**Property**|=(% style="width: 835px;" %)**Description**
876 |(% style="width:240px" %)Monitor V-BOX|(% style="width:835px" %)Bind the V-BOX for displaying the system time of the V-BOX.
877 |(% rowspan="2" style="width:240px" %)Style selection|(% style="width:835px" %)Numbers: The time object will be displayed numerically.
878 |(% style="width:835px" %)Clock: The time object will be displayed as a dial clock.
879 |(% style="width:240px" %)Text setting|(% style="width:835px" %)Set the text style of numeric type in time object.
880
881 === Combination switch ===
882
883 Combination switch supports multipurpose object that perform multiple different or identical events. Click this button to trigger the corresponding functions in turn according to the set event sequence. The functions of combination switch are: Bit operation, word operation, four operations, screen jump.
884
885 (% style="width:1077px" %)
886 |=(% style="width: 231px;" %)**Property**|=(% colspan="2" style="width: 844px;" %)**Description**
887 |(% rowspan="3" style="width:231px" %)(((
888 Bit operation
889 )))|(% colspan="2" style="width:844px" %)(((
890 Operate on the bit monitoring point. Operation type: Set ON, set OFF, and switch.
891
892 Bit replication.
893 )))
894 |(% colspan="2" style="width:844px" %)(((
895 Write monitoring point Write monitoring point when performing bit operation events, only for set ON, Set OFF and switch.
896 )))
897 |(% style="width:152px" %)Bit replication|(% style="width:692px" %)Writes the status value of the source monitoring point to the address of the target monitoring point.
898 |(% rowspan="3" style="width:231px" %)(((
899 Word operation
900 )))|(% colspan="2" style="width:844px" %)(((
901 Operate on word monitoring points. Operation type: Word setting, increase, decrease and word copy.
902 )))
903 |(% colspan="2" style="width:844px" %)Write monitoring point Write monitoring point when performing word operation events, only for word setting, increase and decrease.
904 |(% style="width:152px" %)Word replication|(% style="width:692px" %)Write the data of the source monitoring point to the address of the target monitoring point.
905 |(% rowspan="4" style="width:231px" %)(((
906 Four operations
907 )))|(% colspan="2" style="width:844px" %)(((
908 Four operations such as addition, subtraction, multiplication and division on objects. Operation type: addition, subtraction,
909
910 multiplication and division.
911 )))
912 |(% colspan="2" style="width:844px" %)Source operand 1: The data source to be operated, which is divided into constants and variables.
913 |(% colspan="2" style="width:844px" %)Source operand 2: The data source to be operated, which is divided into constants and variables.
914 |(% colspan="2" style="width:844px" %)Target monitoring point: The result of the operation on the source operands 1 and 2 is written to the monitoring point.
915 |(% style="width:231px" %)Screen jump|(% colspan="2" style="width:844px" %)(((
916 Realize the jump between engineering screens or the pop-up/close function of sub-screens. Specific functions
917
918 Same as "function switch", please refer to the parameter description of "function switch".
919 )))
920 |(% style="width:231px" %)(((
921 Event list
922 )))|(% colspan="2" style="width:844px" %)(((
923 Successful events will form an event list under the Basic Switch tab. Relevant operations and precautions are described as follows:
924
925 ~1. Click an event in the event list to activate the event as a selected event;
926
927 2. Hold down the “ctrl” key and click an event in the event list to select or cancel an event;
928
929 3. The target monitoring point of the above event cannot be used as the source monitoring point of the following event;
930
931 4. Only one screen jump event can be added at most, and it can only be the last one in the list and the last one to be executed.
932 )))
933 |(% style="width:231px" %)Pop-up confirmation box|(% colspan="2" style="width:844px" %)After checking the check box, click the button to execute the event, and the confirmation execution box will pop up.
934 |(% style="width:231px" %)Select the language:|(% colspan="2" style="width:844px" %)Set the text and style of the object in multilingual states.
935 |(% style="width:231px" %)Transparency settings|(% colspan="2" style="width:844px" %)When the background is a solid color background, set the transparency of the background color of the combination switch object, and the default transparency is set to 100% (0% transparency means that the background is fully transparent).
936
937 === Histogram ===
938
939 This object compares two or more numerical changes (at different times or under different conditions) in a bar graph mode, which is mainly used for data statistics and analysis. A object used to realize data visualization by reflecting the numerical changes of word monitoring points in the way of bar graph.
940
941 |=(% style="width: 230px;" %)**Property**|=(% style="width: 845px;" %)**Description**
942 |(% style="width:230px" %)Add group|(% style="width:845px" %)Classify the data to be compared by histogram. You can add up to 8 groups.
943 |(% style="width:230px" %)(((
944
945
946 Add monitoring points
947 )))|(% style="width:845px" %)(((
948 Adds a monitoring point to monitor for the current group.
949
950 The parameters included in the added monitoring point are: Monitor point name, display color, monitor point address. The monitoring point name can be empty.
951 )))
952 |(% style="width:230px" %)(((
953 Scale display
954 )))|(% style="width:845px" %)(((
955 Scale ranges can be set to constants and variables.
956
957 Constant: The scale range (upper/lower limit value) of histogram is fixed.
958
959 Variable: The data of the upper/lower limit value of jump is controlled by the corresponding monitoring point data.
960 )))
961 |(% style="width:230px" %)Scale display|(% style="width:845px" %)(((
962 If the check box is checked, the Y axis of the histogram will display the scale. The number of scales and scale color displayed in it require setting the primary and secondary scales and the color of the scales.
963 )))
964 |(% style="width:230px" %)(((
965 Numerical display
966 )))|(% style="width:845px" %)(((
967 If the check box is checked, the value of the monitoring point will be displayed at the top of the corresponding histogram. If the width of the value is larger than that of the rectangular column, it will be displayed “...,” and the value will be displayed when the mouse moves up.
968
969 If the check box is not checked, the data of the monitoring point will not be displayed.
970 )))
971 |(% style="width:230px" %)Spacing of monitoring points|(% style="width:845px" %)The distance between histograms displayed by each monitoring point.
972 |(% style="width:230px" %)(((
973 Group spacing
974 )))|(% style="width:845px" %)(((
975 The distance displayed between groups.
976
977 Note: The sum of all monitoring point spacing, all group spacing and all column widths cannot exceed the objects. If the object exceeded, please adjust the number of monitoring points, groups spacing or monitoring point spacing, etc. to the actual situation.
978 )))
979
980 === Pie chart ===
981
982 Display the proportion of each monitoring point's data in the total sum of all monitoring points, eventually forming a full circle. The sector size of data from multiple monitoring points on a circle visually represents the percentage of the overall data accounted for by that data, and is commonly used in statistical models.
983
984 |=(% style="width: 230px;" %)**Property**|=(% style="width: 845px;" %)**Description**
985 |(% style="width:230px" %)(((
986 Add monitoring points
987 )))|(% style="width:845px" %)(((
988 Add monitoring points that need to participate in percentage statistics.
989
990 After adding the monitoring point, you can set the monitoring point name, graphic color, and value color, among which the monitoring point name can be set to empty.
991 )))
992 |(% style="width:230px" %)Style selection|(% style="width:845px" %)Define how the scale value, current value and monitor point name are displayed.
993 |(% style="width:230px" %)Numerical display|(% style="width:845px" %)Set whether the monitoring point value and the percentage value are displayed.
994 |(% style="width:230px" %)Monitoring point name|(% style="width:845px" %)Set whether the monitoring point name is displayed.
995 |(% style="width:230px" %)Central control point|(% style="width:845px" %)(((
996 Drag the center control point of the pie chart up and down to set the radius of the inner circle of the pie chart. It can be displayed as a circular proportion chart.
997 )))
998
999 === Ring chart ===
1000
1001 A object used to realize data visualization by reflecting the numerical changes of word monitoring points in a ring-shape. The complete circle as a range of values is called the range value circle; the filled circle segment to represent the current value is called the value circle, where the maximum and minimum values of the set range are at the start (end) of the circle.
1002
1003 |=(% style="width: 229px;" %)**Property**|=(% style="width: 846px;" %)**Description**
1004 |(% style="width:229px" %)Monitoring point|(% style="width:846px" %)(((
1005 It is used to obtain the data of the monitoring point in real time and display it in the filled area of ring chart.
1006 )))
1007 |(% style="width:229px" %)(((
1008 Display range
1009 )))|(% style="width:846px" %)(((
1010 Set the upper and lower range limits of the whole ring chart.
1011
1012 Constant: The display range (upper/lower limit value) of the ring chart is fixed.
1013
1014 Variable: The data of the upper/lower limit value of the ring chart is controlled by the corresponding monitoring point data.
1015 )))
1016 |(% style="width:229px" %)(((
1017 Scale display
1018 )))|(% style="width:846px" %)(((
1019 If the check box is checked, the scale and scale value can be displayed around the ring diagram. At this time, the number of primary and secondary scales and scale colors should be set.
1020
1021 If the check box is not checked, the scale around the ring chart will not be displayed.
1022 )))
1023 |(% style="width:229px" %)Numerical scale display|(% style="width:846px" %)(((
1024 Whether to display the percentage value of monitoring control point value and quantum value.
1025
1026 If displayed, the scale value is displayed in the middle of the ring chart.
1027 )))
1028 |(% style="width:229px" %)Starting angle|(% style="width:846px" %)(((
1029 Defines the starting angle of the numeric ring of the ring chart. The angle is rotated counterclockwise with the top middle position of the ring chart as the reference point
1030 )))
1031 |(% style="width:229px" %)Circular color|(% style="width:846px" %)The color of the ring segment represented by the monitoring point value.
1032 |(% style="width:229px" %)Background color|(% style="width:846px" %)Ring background color, that is, the background color of the range value ring.
1033 |(% colspan="1" rowspan="4" style="width:229px" %)(((
1034 Alert a(% style="background-color:transparent" %)rea
1035 )))|(% style="width:846px" %)(((
1036 Function description: Divide the ring chart into several areas(1 to 4 areas), each of which can set the style of the partition and the starting value and the ending value of the partition independently.
1037 )))
1038 |(% style="width:846px" %)(((
1039 Alert value: The starting and ending values of the partition. All values need to be limited to upper limit and lower limit of the ring chart, otherwise the partition is invalid.
1040 )))
1041 |(% style="width:846px" %)Alert area color: When the monitoring point value is within a certain partition value range, the ring chart represents the color of the fill area (displayed in solid color).
1042 |(% style="width:846px" %)Note: When the monitoring point value is not in the set partition, the ring chart will display the default color.
1043
1044 === Historical trend chart ===
1045
1046 View the historical data curve of monitoring points by setting the start date and the end date. The change of curve is used to display the data change of each monitoring point, X axis represents the time and Y axis represents the monitoring point value.
1047
1048 |=(% style="width: 236px;" %)**Property**|=(% style="width: 839px;" %)**Description**
1049 |(% style="width:236px" %)Number of curves|(% style="width:839px" %)Set the number of curves to be displayed on the curve object.
1050 |(% style="width:236px" %)Curve type|(% style="width:839px" %)There are 4 optional styles for curve display.
1051 |(% style="width:236px" %)Curve color|(% style="width:839px" %)The color of the curve when it is displayed.
1052 |(% style="width:236px" %)Curve name|(% style="width:839px" %)The name of the curve shown in the graph example on the right side of the curve object.
1053 |(% style="width:236px" %)Bind monitoring point|(% style="width:839px" %)Select the monitoring points that the curve needs to bind.
1054 |(% rowspan="2" style="width:236px" %)(((
1055 Y-axis range
1056 )))|(% style="width:839px" %)Fixed: Set the values of upper limit and lower limit of Y axis to fixed values.
1057 |(% style="width:839px" %)(((
1058 Adaptation: In the set time axis, the upper limit of Y-axis is 20% above the maximum of the monitoring point data, and the lower limit of Y-axis is 20% below the minimum of the monitoring point data
1059 )))
1060 |(% style="width:236px" %)Lower limit of Y-axis|(% style="width:839px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
1061 |(% style="width:236px" %)Upper limit of Y axis|(% style="width:839px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
1062 |(% style="width:236px" %)Grid color|(% style="width:839px" %)Sets the color of the graph grid.
1063 |(% style="width:236px" %)Text setting|(% style="width:839px" %)Sets the display style of text in X/Y axis.
1064 |(% style="width:236px" %)Start date|(% style="width:839px" %)Set the start time of the X axis of the graph.
1065 |(% style="width:236px" %)End date|(% style="width:839px" %)Set the end time of the X axis of the graph.
1066 |(% style="width:236px" %)(((
1067 Recent days
1068 )))|(% style="width:839px" %)(((
1069 There are 4 choices (last 1 day, last 7 days, last 30 days, to be selected) for you to filter the time are conveniently and quick, and the corresponding start date and end date will become the current selected last few days. If the selected start and end dates are not within the last 1 day, last 7 days and the last 30 days, the state in recent days will be to be selected.
1070 )))
1071 |(% rowspan="3" style="width:236px" %)(((
1072 Time sequence
1073 )))|(% style="width:839px" %)The time sequence of viewing is divided into two kinds: time ascending and time descending.
1074 |(% style="width:839px" %)(((
1075 Time ascending: The start time is displayed at the left starting point of the X axis, and the time increases from the start time to the end time.
1076 )))
1077 |(% style="width:839px" %)(((
1078 Time descending: The end time is displayed at the left starting point of the X axis, and the time decreases from the end time to the start time.
1079 )))
1080 |(% style="width:236px" %)Date format|(% style="width:839px" %)Sets the display format of X-axis time and date.
1081 |(% style="width:236px" %)Background color of the filter bar|(% style="width:839px" %)Sets the background color of the filter bar row below the chart. There are two kinds of translucent and fully transparent.
1082 |(% style="width:236px" %)Starting color/End color|(% style="width:839px" %)Set the background color of the graph.
1083 |(% style="width:236px" %)Gradient type|(% style="width:839px" %)Sets the gradient type of the background color of the graph.
1084 |(% style="width:236px" %)Transparency settings|(% style="width:839px" %)Set the transparency of the background color of the graph. The larger the value, the more transparent it is.
1085
1086 Property description when browsing the interface:
1087
1088 |=(% style="width: 139px;" %)**Property**|=(% style="width: 682px;" %)**Description**
1089 |(% style="width:139px" %)[[image:image-20220720150850-2.png]]|(% style="width:682px" %)Switch the display mode of historical trend chart data: Curves and tables.
1090 |(% style="width:139px" %)(((
1091 [[image:image-20220720150854-3.png]]
1092 )))|(% style="width:682px" %)(((
1093 The historical trend chart moves forward according to the time span.
1094
1095 Time span: The time period between the end date and the start date.
1096
1097 For example, if the start time and end time are separated by 1 day, the historical trend chart will move forward by 1 day.
1098 )))
1099 |(% style="width:139px" %)(((
1100 [[image:image-20220720150911-4.png]]
1101 )))|(% style="width:682px" %)(((
1102 The historical trend chart moves backward by time span.
1103
1104 Time span: The time period between the end date and the start date.
1105
1106 For example, if the start time and end time are separated by 1 day, the historical trend chart will move back by 1 day.
1107 )))
1108 |(% style="width:139px" %)(((
1109 [[image:image-20220720150920-5.png]]
1110 )))|(% style="width:682px" %)(((
1111 Previous page. When the data from the start time to the end time is displayed in multiple pages, click the previous page to display the historical data of previous page.
1112
1113 You can't click on the previous page when you are on the first page.
1114 )))
1115 |(% style="width:139px" %)(((
1116 [[image:image-20220720150922-6.png]]
1117 )))|(% style="width:682px" %)(((
1118 Next page. Data from start time to end time are displayed in multiple pages. Click next page to display the historical data of next page.
1119
1120 You can't click on the next page when you are on the last page.
1121 )))
1122 |(% style="width:139px" %)(((
1123 [[image:image-20220720150929-7.png]]
1124 )))|(% style="width:682px" %)(((
1125 When the width is less than 683, click to view the current page and how many pieces of data per page and how many pieces of data.
1126 )))
1127 |(% style="width:139px" %)(((
1128 [[image:image-20220720150932-8.png]]
1129 )))|(% style="width:682px" %)(((
1130 Figure: Display the color of this curve correspondingly.
1131
1132 When the data is displayed as "curve": When browsing the interface, clicking on the map will hide the corresponding curve display;
1133
1134 When the data is displayed as "table”: The table only displays the data of one monitoring point, and the data of the first selected monitoring point is displayed by default. Clicking on the figure will switch to the data of the corresponding monitoring point.
1135 )))
1136 |(% style="width:139px" %)[[image:image-20220720150937-9.png]]|(% style="width:682px" %)Historical trend chart query button. Click it to pop-up a pop-up box to set the query range.
1137 |(% style="width:139px" %)[[image:image-20220720151000-10.png]]|(% style="width:682px" %)First page: Clicking this button will return to the first page regardless of the current page.
1138 |(% style="width:139px" %)[[image:image-20220720151016-12.png]]|(% style="width:682px" %)Previous page: Clicking this button will display the data of the previous page.
1139 |(% style="width:139px" %)[[image:image-20220720151025-14.png]]|(% style="width:682px" %)Next page: Clicking this button will display the data of the next page.
1140 |(% style="width:139px" %)[[image:image-20220720151023-13.png]]|(% style="width:682px" %)Last page: Clicking this button to reach the last page regardless of the current page.
1141
1142 (% style="text-align:center" %)
1143 [[image:V-BOX cloud configuration user manual_html_c84a5d0032df07e2.png||height="420" width="250" class="img-thumbnail"]]
1144
1145 === Display frame ===
1146
1147 After binding the monitoring point, the data of the monitoring point can be displayed in real time.
1148
1149 |=(% style="width: 178px;" %)**Property**|=(% style="width: 596px;" %)Description
1150 |(% style="width:178px" %)Monitoring point|(% style="width:596px" %)(((
1151 After binding the monitoring point, the data of the monitoring point can be obtained in real time and displayed. Only binding word monitoring points supported
1152 )))
1153 |(% style="width:178px" %)Write monitoring point|(% style="width:596px" %)(((
1154 After binding the monitoring point, you can modify the data of the monitoring point on the browsing interface and write it synchronously to the device.
1155 )))
1156 |(% rowspan="3" style="width:178px" %)(((
1157 Read-write permissions
1158 )))|(% style="width:596px" %)Read-write: The display frame can display and write data.
1159 |(% style="width:596px" %)Read-only: The display frame can only display data, but cannot write data.
1160 |(% style="width:596px" %)Write only: The display frame can only write data, but cannot display data.
1161 |(% rowspan="2" style="width:178px" %)(((
1162 Background display and hide
1163 )))|(% style="width:596px" %)Display: Set the background of the display frame. Background is divided into solid color background and picture background.
1164 |(% style="width:596px" %)Hide: Hide the background of the display frame and display only real-time data.
1165 |(% style="width:178px" %)Transparency settings|(% style="width:596px" %)(((
1166 When the background is solid color background, set the transparency of the background color of the display frame. The default
1167
1168 transparency is set to 100% (where 0% transparency means that the background is fully transparent).
1169 )))
1170 |(% style="width:178px" %)(((
1171 Object lock
1172 )))|(% style="width:596px" %)(((
1173 Check the object lock and set the monitoring point and trigger condition of the locking object at the same time. When browsing the interface, if the object lock condition is met, the object will be locked (the lock icon will be displayed on the object), that is, the component is not allowed to write.
1174
1175 If the hide object lock is checked, the locking function of the part lock will be retained, but the lock icon will not be displayed.
1176 )))
1177 |(% style="width:178px" %)Text setting|(% style="width:596px" %)Set the data display style of the display frame.
1178 |(% style="width:178px" %)Conditional hiding|(% style="width:596px" %)Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
1179
1180 === Bit indicator ===
1181
1182 After the monitoring point is bound, it is used for displaying the state of the bit monitoring point. When the state of the bit monitoring point changes, the bit indicator displays according to the bit state picture pointed by the monitoring point.
1183
1184 |=(% colspan="1" scope="row" style="width: 250px;" %)**Property**|=(% style="width: 825px;" %)**Description**
1185 |(% colspan="1" style="width:250px" %)Monitoring point|(% style="width:825px" %)Bind the monitoring point of bit indicator (only support bit monitoring points).
1186 |(% colspan="1" rowspan="4" style="width:250px" %)(((
1187 Flash
1188 )))|(% style="width:825px" %)(((
1189 Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
1190 )))
1191 |(% style="width:825px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
1192 |(% style="width:825px" %)Edit conditions: Edit the condition that triggers this function.
1193 |(% style="width:825px" %)Flash frequency: Set the time interval for flashing.
1194 |(% colspan="1" rowspan="5" style="width:250px" %)(((
1195 Status
1196 )))|(% style="width:825px" %)(((
1197 Function description: Set the multi-state of bit indicator. When the status of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state.
1198 )))
1199 |(% style="width:825px" %)Conditions: Set the conditions that trigger this state. The bit indicator only has two states: 0 and 1, and each state contains text settings for three languages.
1200 |(% style="width:825px" %)(((
1201 Language: Sets the text in the three languages in the selected state, including the displayed text content, text style, text position, etc.
1202 )))
1203 |(% style="width:825px" %)(((
1204 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
1205 )))
1206 |(% style="width:825px" %)(((
1207 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
1208 )))
1209 |(% rowspan="5" style="width:250px" %)(((
1210 Graphic
1211 )))|(% style="width:825px" %)(((
1212 Function description: Set the display picture of each status of the bit indicator. Status of graphics is displayed synchronously with the status setting of the monitoring point.
1213 )))
1214 |(% style="width:825px" %)(((
1215 Modify pictures: Click on a picture in a certain state, and modify the color below the picture.
1216
1217 This function only works for pictures in the “System Gallery”.
1218 )))
1219 |(% style="width:825px" %)(((
1220 Select pictures: Modify multi-state pictures. Note: When a picture is selected, the pictures in both states of the bit indicator will be replaced in sequence by the state in which the new picture exists. If the new picture has only one status, the status 1 will display no picture.
1221 )))
1222 |(% style="width:825px" %)Use the default appearance: Restore the pictures in the 0 and 1 states of the bit indicator to the default pictures
1223 |(% style="width:825px" %)No appearance: Set the current state to no graph display.
1224 |(% style="width:250px" %)Conditional hiding|(% style="width:825px" %)Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
1225
1226 === Word indicator ===
1227
1228 After the word monitoring point is bound, read the status of the monitoring point address and display it according to the set status word and status bitmap. The display picture of the object can be set, which can support 128 kinds of status display.
1229
1230 |=(% style="width: 191px;" %)**Property**|=(% style="width: 630px;" %)**Description**
1231 |(% style="width:191px" %)Monitoring point|(% style="width:630px" %)Monitor point for binding word status (only monitor points of word type supported).
1232 |(% rowspan="4" style="width:191px" %)(((
1233 Flash
1234 )))|(% style="width:630px" %)(((
1235 Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
1236 )))
1237 |(% style="width:630px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
1238 |(% style="width:630px" %)Edit conditions: Edit the condition that triggers this function.
1239 |(% style="width:630px" %)Flash frequency: Set the time interval for flashing.
1240 |(% colspan="1" rowspan="5" style="width:191px" %)(((
1241 Status
1242 )))|(% style="width:630px" %)(((
1243 Function description: Set the multi-state display of word monitoring points. When the state of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state. Word indicator has two states by default, and at least two states are required. A maximum of 128 states can be added. The condition of the last state is always other and cannot be set. Each status contains text settings in three languages.
1244 )))
1245 |(% style="width:630px" %)Conditions: Set the conditions that trigger this status. Click more conditions to set multiple conditions.
1246 |(% style="width:630px" %)(((
1247 Language: Sets the text in the three languages in the selected state, including the displayed text content,
1248
1249 text style, text position, etc.
1250 )))
1251 |(% style="width:630px" %)(((
1252 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
1253 )))
1254 |(% style="width:630px" %)(((
1255 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
1256 )))
1257 |(% rowspan="5" style="width:191px" %)(((
1258 Graphic
1259 )))|(% style="width:630px" %)(((
1260 Function description: Set the picture displayed in each state of the word monitoring point. The state diagram of the graph and the status settings of monitoring points are displayed synchronously.
1261 )))
1262 |(% style="width:630px" %)(((
1263 Modify pictures: Click on a picture in a certain state, and modify the color below the picture.
1264
1265 This function only works for pictures in the “System Gallery”.
1266 )))
1267 |(% style="width:630px" %)Select pictures: Modify multi-state pictures. Note that all existing state pictures of the word indicator will be replaced by each state of the new picture in sequence. If the number of states of the new picture is less than that of the current object, the current object will not display the picture of the corresponding state.
1268 |(% style="width:630px" %)Use the default appearance: Restore the picture of all states of the word indicator to the default picture.
1269 |(% style="width:630px" %)No appearance: Set the current state to no graph display.
1270 |(% style="width:191px" %)Conditional hiding|(% style="width:630px" %)Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
1271
1272 === Bit switch ===
1273
1274 After the monitoring point is bound, it is used for controlling the state of the bit monitoring point. When the state of the bit monitoring point changes, the bit switch displays according to the bit state picture pointed by the monitoring point.
1275
1276 |=(% colspan="2" style="width: 255px;" %)**Property**|=(% colspan="1" style="width: 820px;" %)**Description**
1277 |(% colspan="2" style="width:255px" %)Monitoring point|(% colspan="1" style="width:820px" %)Bind the monitoring point of the bit switch (only bit monitoring points are supported).
1278 |(% colspan="2" style="width:255px" %)Write monitoring point|(% colspan="1" style="width:820px" %)Bind the write monitor point of the bit switch (only bit monitor points are supported).
1279 |(% colspan="2" style="width:255px" %)The monitoring point is consistent with the write monitoring point|(% colspan="1" style="width:820px" %)(((
1280 If this check box is checked, the bound write monitoring point the bound monitor monitoring point are consistent.
1281 )))
1282 |(% colspan="2" rowspan="3" style="width:255px" %)(((
1283 Read-write permissions
1284 )))|(% colspan="1" style="width:820px" %)Read-write: It can operate the monitoring point and read the state of the monitoring point synchronously. Operation mode: Set ON, set OFF, and switch.
1285 |(% colspan="1" style="width:820px" %)(((
1286 Read-only: The status of the monitoring point can only be read synchronously and displayed, but cannot be operated.
1287 )))
1288 |(% colspan="1" style="width:820px" %)Write only: The bit monitoring point can only be operated, but cannot be read.
1289 |(% colspan="2" rowspan="2" style="width:255px" %)(((
1290 Flash
1291 )))|(% colspan="1" style="width:820px" %)Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
1292 |(% colspan="1" style="width:820px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
1293 |(% colspan="1" rowspan="2" style="width:256px" %)Flash|(% colspan="2" style="width:819px" %)Edit conditions: Edit the condition that triggers this function.
1294 |(% colspan="2" style="width:819px" %)Flash frequency: Set the time interval for flashing.
1295 |(% colspan="1" rowspan="5" style="width:256px" %)(((
1296 Status
1297 )))|(% colspan="2" style="width:819px" %)(((
1298 Function description: Set the multi-state of bit indicator. When the state of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state.
1299 )))
1300 |(% colspan="2" style="width:819px" %)Conditions: Set the conditions that trigger this state. The bit indicator only has two states: 0 and 1, and each state contains text settings for three languages.
1301 |(% colspan="2" style="width:819px" %)(((
1302 Language: Set the text in three languages in the selected state, including the displayed text
1303 content, text style, text position, etc.
1304 )))
1305 |(% colspan="2" style="width:819px" %)(((
1306 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
1307 )))
1308 |(% colspan="2" style="width:819px" %)(((
1309 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
1310 )))
1311 |(% colspan="1" rowspan="5" style="width:256px" %)(((
1312 Graphic
1313 )))|(% colspan="2" style="width:819px" %)(((
1314 Function description: Set the display picture of each status of the bit indicator. Status of graphics
1315
1316 The diagram is displayed synchronously with the status setting of the monitoring point.
1317 )))
1318 |(% colspan="2" style="width:819px" %)(((
1319 Modify pictures: Click on a picture in a certain state, and modify the color of the picture below the picture. This function only works for the pictures in the "System Gallery".
1320 )))
1321 |(% colspan="2" style="width:819px" %)Select pictures: Modify multi-state pictures. Note: When a picture is selected, the pictures in both states of the bit indicator will be replaced in sequence by the state in which the new picture exists. If the new picture has only one state, the state 1 will display no picture.
1322 |(% colspan="2" style="width:819px" %)Use the default appearance: Restore the pictures in the 0 state and 1 state of the bit indicator to the default pictures.
1323 |(% colspan="2" style="width:819px" %)No appearance: Set the current state to no graph display.
1324 |(% colspan="1" rowspan="4" style="width:256px" %)(((
1325 Object lock
1326 )))|(% colspan="2" style="width:819px" %)(((
1327 Function description: Check the object lock and set the monitoring point and trigger condition of the locking object at the same time. When browsing the interface, if the object lock condition is met, the object will be locked (the lock icon will be displayed on the object), that is, the object is not allowed to write.
1328 )))
1329 |(% colspan="2" style="width:819px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
1330 |(% colspan="2" style="width:819px" %)Edit conditions: Edit the condition that triggers this function.
1331 |(% colspan="2" style="width:819px" %)(((
1332 Hide object lock icon: If the hide object lock is checked, the locking function of the object lock will be retained, but the lock icon will not be displayed.
1333 )))
1334 |(% colspan="1" style="width:256px" %)Conditional hiding|(% colspan="2" style="width:819px" %)(((
1335 Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
1336 )))
1337
1338 === Word switch ===
1339
1340 After the monitoring point is bound, it is used to set the data of the monitoring point.
1341
1342 (% style="width:1077px" %)
1343 |=(% style="width: 252px;" %)**Property**|=(% style="width: 823px;" %)**Description**
1344 |(% style="width:252px" %)Monitoring point|(% style="width:823px" %)Bind the monitoring point of the word switch.
1345 |(% style="width:252px" %)Write monitoring point|(% style="width:823px" %)Bind the write monitoring point of the word switch.
1346 |(% style="width:252px" %)The monitoring point is consistent with the write monitoring point|(% style="width:823px" %)(((
1347 If this check box is checked, the bound write monitoring point the bound monitor monitoring point are consistent.
1348 )))
1349 |(% rowspan="3" style="width:252px" %)(((
1350 Read-write permissions
1351 )))|(% style="width:823px" %)(((
1352 Read-write: It can operate the monitoring point and read the state of the monitoring point synchronously.
1353
1354 Operation mode: word setting, increase and decrease.
1355 )))
1356 |(% style="width:823px" %)(((
1357 Read-only: The status of the monitoring point can only be read synchronously, and the monitor point cannot be operated.
1358 )))
1359 |(% style="width:823px" %)Write only: The monitoring point can only be operated, but the status cannot be read.
1360 |(% rowspan="2" style="width:252px" %)(((
1361
1362
1363 Word setting
1364 )))|(% style="width:823px" %)when browsing the interface, click the object, the setting value will be written into the monitoring point.
1365 |(% style="width:823px" %)Operand The value set to the write monitor point.
1366 |(% rowspan="5" style="width:252px" %)(((
1367 Increase
1368 )))|(% style="width:823px" %)when browsing the interface, click the object, the value of the monitoring point is increased once.
1369 |(% style="width:823px" %)Operand The value of each increase
1370 |(% style="width:823px" %)Upper limit: The maximum value that can be written to the monitoring point.
1371 |(% style="width:823px" %)(((
1372 Return to destination: Whether to reset the specified value when the value written to the monitoring point reaches the maximum value.
1373 )))
1374 |(% style="width:823px" %)Destination value: The specified value is reset when the value of write monitoring reaches the upper limit.
1375 |(% style="width:252px" %)Decrease|(% style="width:823px" %)The function is the same as increase.
1376 |(% rowspan="4" style="width:252px" %)(((
1377 Flash
1378 )))|(% style="width:823px" %)Effect: When the flash condition is met, the object will use the set flash frequency as the time interval when browsing the interface, and the objects are displayed alternately.
1379 |(% style="width:823px" %)Select monitoring points: Bind the monitoring point of the trigger condition.
1380 |(% style="width:823px" %)Edit conditions: Edit the condition that triggers this function.
1381 |(% style="width:823px" %)Flash frequency: Set the time interval for flashing.
1382 |(% colspan="1" rowspan="5" style="width:252px" %)(((
1383 Status
1384 )))|(% style="width:823px" %)(((
1385 Function description: Set the multi-state display of word monitoring points. When the state of the monitoring point satisfies a trigger condition in multiple states, the object displays the style and information in the state.
1386
1387 Word indicator has two states by default, and at least two states are required. A maximum of 128 states can be added, and the condition of the last status is always other and cannot be set.
1388
1389 Text setting Each status contains text settings in three languages.
1390 )))
1391 |(% style="width:823px" %)(((
1392 Conditions: Set the conditions that trigger this status. Click more conditions to set multiple conditions combination.
1393 )))
1394 |(% style="width:823px" %)(((
1395 Language: Set the text in three languages in the selected state, including the displayed text
1396
1397 content, text style, text position, etc.
1398 )))
1399 |(% style="width:823px" %)(((
1400 Select language: Select a language in the drop-down box to display text for that language (without style) in the status display list, and the content and style of the text in the language can be set in language setting.
1401 )))
1402 |(% style="width:823px" %)(((
1403 Copy property: Copy the multilingual text and styles of one status to the corresponding multilingual of another status or all statues.
1404 )))
1405 |(% rowspan="5" style="width:252px" %)(((
1406 Graphic
1407 )))|(% style="width:823px" %)Function description: Set the picture displayed in each state of the word monitoring point. The state diagram of the graph is displayed synchronously with the state settings of the monitoring points.
1408 |(% style="width:823px" %)Modify pictures: Click on a picture in a certain state, and modify the color of the picture below the picture. This function only works for the pictures in the "System Gallery".
1409 |(% style="width:823px" %)Select pictures: Modify multi-state pictures. Note that all existing state pictures of the word indicator will be replaced by each state of the new picture in sequence. If the number of states of the new picture is less than that of the current object, the current object will not display the picture of the corresponding state.
1410 |(% style="width:823px" %)Use the default appearance: Restore the picture of all states of the word indicator to the default picture.
1411 |(% style="width:823px" %)No appearance: Set the current state to no graph display.
1412 |(% style="width:252px" %)Conditional hiding|(% style="width:823px" %)(((
1413 Set the monitoring points and trigger conditions hidden by the object. When the condition is met, the object is hidden.
1414 )))
1415
1416 === Dashboard ===
1417
1418 A object used to realize data visualization by reflecting the numerical changes of word monitoring points in the form of dials and pointers.
1419
1420 |=(% colspan="2" style="width: 227px;" %)**Property**|=(% colspan="2" style="width: 825px;" %)**Description**|=
1421 |(% colspan="2" style="width:227px" %)Monitoring point|(% colspan="2" style="width:825px" %)Bind the monitoring point and get the value of the monitoring point in real time.|
1422 |(% colspan="2" style="width:227px" %)(((
1423
1424
1425 Constant, variable
1426 )))|(% colspan="2" style="width:825px" %)(((
1427 Types of the upper/lower limit values of dashboard
1428
1429 Constant: The data of the upper/lower limit value of the dashboard is constant.
1430
1431 Variable: The data of the upper/lower limit value of the dashboard is controlled by the corresponding monitoring point data.
1432 )))|
1433 |(% colspan="2" style="width:227px" %)Lower limit|(% colspan="2" style="width:825px" %)The value of the starting scale of dashboard.|
1434 |(% colspan="1" style="width:238px" %)Upper limit|(% colspan="2" style="width:820px" %)The value of the destination scale of dashboard.|(% colspan="2" rowspan="18" %)
1435 |(% colspan="1" style="width:238px" %)Background display and hide|(% colspan="2" style="width:820px" %)Set the display and hide of dashboard background.
1436 |(% colspan="1" style="width:238px" %)Display background image|(% colspan="2" style="width:820px" %)It only works when the background is set to display. You can select the displayed background image from the gallery.
1437 |(% colspan="1" style="width:238px" %)Select a picture|(% colspan="2" style="width:820px" %)When the background of dashboard is set to display and background picture display is checked, the background picture can be selected.
1438 |(% colspan="1" style="width:238px" %)Scale value display|(% colspan="2" style="width:820px" %)Display and hide scale values of dashboard.
1439 |(% colspan="1" style="width:238px" %)Scale color|(% colspan="2" style="width:820px" %)Sets the color of the scale value.
1440 |(% colspan="1" style="width:238px" %)Scale display|(% colspan="2" style="width:820px" %)Display and hide scale values of dashboard.
1441 |(% colspan="1" style="width:238px" %)Main scale|(% colspan="2" style="width:820px" %)Set the number and color of main scale on the dashboard.
1442 |(% colspan="1" style="width:238px" %)Sub-scale|(% colspan="2" style="width:820px" %)Set the number and color of sub-scales on the dashboard.
1443 |(% colspan="1" style="width:238px" %)Default color|(% colspan="2" style="width:820px" %)The default color of the dashboard.
1444 |(% colspan="1" style="width:238px" %)Dashboard type|(% colspan="2" style="width:820px" %)Dashboard dial display within the set number of degrees
1445 |(% colspan="1" style="width:238px" %)Numerical display|(% colspan="2" style="width:820px" %)Sets the display and hide of variable values.
1446 |(% colspan="1" style="width:238px" %)Pointer style|(% colspan="2" style="width:820px" %)Sets the style of the pointer.
1447 |(% colspan="1" style="width:238px" %)Select the language:|(% colspan="2" style="width:820px" %)Set the display and display style of dashboard name. Text in 3 languages can be configured
1448 |(% colspan="1" rowspan="4" style="width:238px" %)(((
1449 Alert area
1450 )))|(% colspan="2" style="width:820px" %)(((
1451 Function description: Divide the dial of the dashboard into several areas (1 to 4 zones), each of which can set the style of the partition and the starting value of the partition independently.
1452 )))
1453 |(% colspan="2" style="width:820px" %)(((
1454 Alert value: The starting value of this partition. All values need to be limited to the dashboard starting value; Otherwise, the partition is invalid.
1455 )))
1456 |(% colspan="2" style="width:820px" %)Color of alert area: Set the dial color of the partition.
1457 |(% colspan="2" style="width:820px" %)(((
1458 Note: When the value of the monitoring point is not in the set partition, the dashboard and pointer will display the default color; When the monitoring point value is in the set partition, the pointer color is displayed as the set alert area color.
1459 )))
1460
1461 === Bar graph ===
1462
1463 A object used to realize data visualization by reflecting the numerical changes of word monitoring points in the way of bar graph.
1464
1465 |=(% colspan="2" style="width: 235px;" %)**Property**|=(% colspan="2" style="width: 817px;" %)**Description**|=
1466 |(% colspan="2" style="width:235px" %)Monitoring point|(% colspan="2" style="width:817px" %)It is used to obtain the data of the monitoring point in real time and display it in the bar graph.|
1467 |(% colspan="2" style="width:235px" %)Numerical display|(% colspan="2" style="width:817px" %)Whether to display the data of the current monitoring point.|
1468 |(% colspan="2" rowspan="2" style="width:235px" %)Progress bar direction|(% colspan="2" style="width:817px" %)0 degree: The bar graph is displayed horizontally, that is, the scale is on the X-axis.|
1469 |(% colspan="2" style="width:817px" %)90 degrees: The bar graph is displayed vertically, that is, the scale is on the Y-axis.|
1470 |(% colspan="2" style="width:235px" %)Scale display|(% colspan="2" style="width:817px" %)Display and hide of bar graph scale.|
1471 |(% colspan="2" style="width:235px" %)Main scale|(% colspan="2" style="width:817px" %)Set the number and color of the main scale.|
1472 |(% colspan="2" style="width:235px" %)Sub-scale|(% colspan="2" style="width:817px" %)Set the number and color of sub-scale.|
1473 |(% colspan="2" style="width:235px" %)Lower limit|(% colspan="2" style="width:817px" %)The minimum value of the bar graph.|
1474 |(% colspan="1" style="width:195px" %)Upper limit|(% colspan="2" style="width:609px" %)The maximum value of the bar graph.|(% colspan="2" rowspan="10" %)
1475 |(% colspan="1" rowspan="3" style="width:195px" %)(((
1476 Style
1477 )))|(% colspan="2" style="width:609px" %)(((
1478 Style 1: The scale is displayed on the outer side below the horizontal bar graph or on the outer left side of the vertical bar graph.
1479 )))
1480 |(% colspan="2" style="width:609px" %)(((
1481 Style 2: The scale is displayed on the top, bottom and outside of the horizontal bar graph or on the left and right sides of the vertical bar graph.
1482 )))
1483 |(% colspan="2" style="width:609px" %)(((
1484 Style 3: The scale is displayed on the inner side below the horizontal bar graph or on the inner left side of the vertical bar graph.
1485 )))
1486 |(% colspan="1" style="width:195px" %)(((
1487 Color
1488 )))|(% colspan="2" style="width:609px" %)(((
1489 Color display of data filling area of monitoring point:
1490
1491 ~1. When the starting color is consistent with the ending color, the filling area is displayed as solid color;
1492
1493 2. When the starting color is inconsistent with the ending color, the fill area is displayed as a gradient of starting color - ending color - starting color.
1494 )))
1495 |(% colspan="1" style="width:195px" %)Background display and hide|(% colspan="2" style="width:609px" %)(((
1496 The bar graph background color is displayed or not. The background color refers to the color displayed when the bar graph fill area is not filled.
1497 )))
1498 |(% colspan="1" rowspan="4" style="width:195px" %)(((
1499 Alert area
1500 )))|(% colspan="2" style="width:609px" %)(((
1501 Function description: Divide the bar graph into several areas (1 to 4 areas), each of which can set the style of the area and the starting value and ending value of the partition independently.
1502 )))
1503 |(% colspan="2" style="width:609px" %)(((
1504 Alert value: The starting and ending values of the partition. All values need to be limited to upper limit and lower limit of the bar graph, otherwise the partition is invalid.
1505 )))
1506 |(% colspan="2" style="width:609px" %)(((
1507 Color of alert area: When the monitoring point value is within a certain partition value range, the bar graph represents the color of the fill area (displayed in solid color).
1508 )))
1509 |(% colspan="2" style="width:609px" %)(((
1510 Note: When the monitoring point value is not in the set partition, the bar chart will display the default color.
1511 )))
1512
1513 === Real-time trend chart ===
1514
1515 The trend chart takes time as the horizontal axis and data as the vertical axis, and displays the change of data of monitoring points with time in curve.
1516
1517 |=(% style="width: 230px;" %)**Property**|=(% style="width: 845px;" %)**Description**
1518 |(% style="width:230px" %)Number of curves|(% style="width:845px" %)Set the number of curves to be displayed on the curve object.
1519 |(% style="width:230px" %)Curve type|(% style="width:845px" %)There are 4 optional styles for curve display.
1520 |(% style="width:230px" %)Curve color|(% style="width:845px" %)The color of the curve when it is displayed.
1521 |(% style="width:230px" %)Curve name|(% style="width:845px" %)The name of the curve shown in the graph example on the right side of the curve object.
1522 |(% style="width:230px" %)Bind monitoring point|(% style="width:845px" %)Select the monitoring points that the curve needs to bind.
1523 |(% rowspan="2" style="width:230px" %)(((
1524 Y-axis range
1525 )))|(% style="width:845px" %)Fixed: Set the values of upper limit and lower limit of Y axis to fixed values.
1526 |(% style="width:845px" %)(((
1527 Adaptation: In the set time axis, the upper limit of Y-axis is 20% above the maximum of the monitoring point data, and the lower limit of Y-axis is 20% below the minimum of the monitoring point data
1528 )))
1529 |(% style="width:230px" %)Lower limit of Y-axis|(% style="width:845px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
1530 |(% style="width:230px" %)Upper limit of Y axis|(% style="width:845px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
1531 |(% style="width:230px" %)Grid color|(% style="width:845px" %)Sets the color of the graph grid.
1532 |(% style="width:230px" %)Text setting|(% style="width:845px" %)Sets the display style of text in X/Y axis.
1533 |(% style="width:230px" %)Start date|(% style="width:845px" %)Set the start time of the X axis of the graph.
1534 |(% style="width:230px" %)End date|(% style="width:845px" %)Set the end time of the X axis of the graph.
1535 |(% style="width:230px" %)(((
1536 Recent days
1537 )))|(% style="width:845px" %)(((
1538 There are 4 choices (last 1 day, last 7 days, last 30 days, to be selected) for you to filter the time are conveniently and quick, and the corresponding start date and end date will become the current selected last few days. If the selected start and end dates are not within the last 1 day, last 7 days and the last 30 days, the state in recent days will be to be selected.
1539 )))
1540 |(% rowspan="3" style="width:230px" %)(((
1541 Time sequence
1542 )))|(% style="width:845px" %)The time sequence of viewing is divided into two kinds: time ascending and time descending.
1543 |(% style="width:845px" %)(((
1544 Time ascending: The start time is displayed at the left starting point of the X axis, and the time increases from the start time to the end time.
1545 )))
1546 |(% style="width:845px" %)(((
1547 Time descending: The end time is displayed at the left starting point of the X axis, and the time decreases from the end time to the start time.
1548 )))
1549 |(% style="width:230px" %)Date format|(% style="width:845px" %)Sets the display format of X-axis time and date.
1550 |(% style="width:230px" %)Background color of the filter bar|(% style="width:845px" %)Sets the background color of the filter bar row below the chart. There are two kinds of translucent and fully transparent.
1551 |(% style="width:230px" %)(((
1552 Starting color/End color
1553 )))|(% style="width:845px" %)Set the background color of the graph.
1554 |(% style="width:230px" %)Gradient type|(% style="width:845px" %)Sets the gradient type of the background color of the graph.
1555 |(% style="width:230px" %)Transparency settings|(% style="width:845px" %)Set the transparency of the background color of the graph. The larger the value, the more transparent it is.
1556 |(% style="width:230px" %)[[image:image-20220720144807-1.png||height="43" width="54"]]|(% style="width:845px" %)Display the color of this curve correspondingly. Clicking on the graph while browsing the interface will hide the corresponding curve display.
1557
1558 === Flow bar ===
1559
1560 The flow effect of color block is used to reflect the flow process in technological process production.
1561
1562 Select the starting point or end point of the flow bar positioning point, hold down the left mouse button, you can rotate to the corresponding position in the range of 0 to degrees.
1563
1564 |=(% style="width: 229px;" %)**Property**|=(% style="width: 846px;" %)**Description**
1565 |(% style="width:229px" %)Monitoring point|(% style="width:846px" %)Control the flow status of the flow object according to the status of the monitoring point.
1566 |(% style="width:229px" %)Trigger condition|(% style="width:846px" %)(((
1567 Edit the trigger condition. When the status value of the monitoring point meets the trigger condition, the flow object flows; When the conditions are not met, the flow object will stop flowing.
1568 )))
1569 |(% style="width:229px" %)Speed|(% style="width:846px" %)The speed of the flow bar can be selected as fast, medium and slow.
1570 |(% rowspan="3" style="width:229px" %)(((
1571 Flow direction
1572 )))|(% style="width:846px" %)The flow direction of the flow bar can be forward and reverse along the straight line.
1573 |(% style="width:846px" %)Forward: Flows from left to right.
1574 |(% style="width:846px" %)Reverse: Flows from right to left.
1575 |(% style="width:229px" %)Color|(% style="width:846px" %)The color of the flowing color block in the flow bar.
1576 |(% style="width:229px" %)Color block thickness|(% style="width:846px" %)The thickness of the flowing color block in the flow bar.
1577 |(% style="width:229px" %)Color block length|(% style="width:846px" %)The length of the flowing color block in the flow bar.
1578 |(% style="width:229px" %)Color block spacing|(% style="width:846px" %)The distance between two flowing color blocks in a flow bar.
1579 |(% style="width:229px" %)Border display and hide|(% style="width:846px" %)Set the display and hide of the flow bar border.
1580 |(% style="width:229px" %)Border color|(% style="width:846px" %)Sets the border color of the flow bar.
1581
1582 (% class="lead" id="HTipsforflowbardesign" %)
1583 **Tips for flow bar design**
1584
1585 In order to obtain a more beautiful flow bar, when it is necessary to simulate the flow effect in the water pipe, the pipe picture object can be designed first, and then the hidden frame of the flow bar is placed on the pipe picture object.
1586
1587 **Video window**
1588
1589 A video playback object plays a video file provided in a video source. At present, this object only supports fluorite cloud video source, and this object does not support Z-axis sorting on browsing pages, so the video window will be placed on top of all objects when the interface is browsed.
1590
1591 **Hyperlink**
1592
1593 The objects with hyperlink function can jump the picture directly and realize the access function.
1594
1595 |=(% style="width: 245px;" %)**Property**|=(% style="width: 830px;" %)**Description**
1596 |(% style="width:245px" %)Background display and hide|(% style="width:830px" %)Set the display and hiding of the object background.
1597 |(% rowspan="2" style="width:245px" %)Display background image|(% style="width:830px" %)Check: Hyperlink object background will be displayed as a picture.
1598 |(% style="width:830px" %)Uncheck: Hyperlink object background will be displayed in solid color.
1599 |(% style="width:245px" %)Transparency settings|(% style="width:830px" %)(((
1600 When the background is a solid color background, set the transparency of the background color of the hyperlink part, and the default transparency is set to 100% (0% transparency means that the background is fully transparent).
1601 )))
1602 |(% style="width:245px" %)Opening mode|(% style="width:830px" %)When you click the hyperlink object, the link address screen is opened in a new window or this window.
1603 |(% style="width:245px" %)Link address|(% style="width:830px" %)The address of the linked screen when clicking the hyperlink object.
1604 |(% style="width:245px" %)Select language:|(% style="width:830px" %)Select language, and set the text and style of hyperlinks in multilingual.
1605
1606 === Function switch ===
1607
1608 This object realizes the function of jumping the picture or popping up the sub-picture on the engineering picture.
1609
1610 |=(% style="width: 246px;" %)**Property**|=(% style="width: 829px;" %)**Description**
1611 |(% style="width:246px" %)Jump to the specified screen|(% style="width:829px" %)Click on the function switch, and jump to the specified screen.
1612 |(% style="width:246px" %)Pop-up sub-screen|(% style="width:829px" %)Click on the function switch, and the specified sub-screen will pop up on this screen.
1613 |(% style="width:246px" %)Jump to the previous screen.|(% style="width:829px" %)(((
1614 Click the function switch, and the screen will jump to the previous screen (the previous screen does not include thumbnail page and sub-screen).
1615 )))
1616 |(% style="width:246px" %)Jump to the next screen|(% style="width:829px" %)(((
1617 Click the function switch, and the screen will jump to the next screen (the next screen does not include thumbnail page and sub-screen).
1618 )))
1619 |(% style="width:246px" %)Return to the previous screen|(% style="width:829px" %)(((
1620 Click the function switch, and the screen jumps to the previous screen (the screen does not include thumbnail page and sub-screen).
1621 )))
1622 |(% style="width:246px" %)Select language:|(% style="width:829px" %)Select language, and set the text and style of hyperlinks in multilingual.
1623 |(% style="width:246px" %)Background display and hide|(% style="width:829px" %)Display and hide the background of the object.
1624 |(% style="width:246px" %)Transparency settings|(% style="width:829px" %)(((
1625 When the background is a solid color background, set the transparency of the background color of the function switch object. The default transparency is set to 100% (0% transparency means the background is fully transparent)
1626 )))
1627 |(% rowspan="2" style="width:246px" %)Display background image|(% style="width:829px" %)Check: The object background will be displayed as a picture.
1628 |(% style="width:829px" %)Uncheck: The object background will be displayed in solid color.
1629
1630 === Time ===
1631
1632 Display the system time object of V-BOX. When the V-BOX is online, the current time of the V-BOX can be displayed in real time. When the V-BOX is offline, the time will stay at the time when the V-BOX is offline. When the V-BOX is not bound, the local time will be displayed.
1633
1634 |=(% style="width: 240px;" %)**Property**|=(% style="width: 835px;" %)**Description**
1635 |(% style="width:240px" %)Monitor V-BOX|(% style="width:835px" %)Bind the V-BOX for displaying the system time of the V-BOX.
1636 |(% rowspan="2" style="width:240px" %)Style selection|(% style="width:835px" %)Numbers: The time object will be displayed numerically.
1637 |(% style="width:835px" %)Clock: The time object will be displayed as a dial clock.
1638 |(% style="width:240px" %)Text setting|(% style="width:835px" %)Set the text style of numeric type in time object.
1639
1640 === Combination switch ===
1641
1642 Combination switch supports multipurpose object that perform multiple different or identical events. Click this button to trigger the corresponding functions in turn according to the set event sequence. The functions of combination switch are: Bit operation, word operation, four operations, screen jump.
1643
1644 (% style="width:1077px" %)
1645 |=(% style="width: 231px;" %)**Property**|=(% colspan="2" style="width: 844px;" %)**Description**
1646 |(% rowspan="3" style="width:231px" %)(((
1647 Bit operation
1648 )))|(% colspan="2" style="width:844px" %)(((
1649 Operate on the bit monitoring point. Operation type: Set ON, set OFF, and switch.
1650
1651 Bit replication.
1652 )))
1653 |(% colspan="2" style="width:844px" %)(((
1654 Write monitoring point Write monitoring point when performing bit operation events, only for set ON, Set OFF and switch.
1655 )))
1656 |(% style="width:152px" %)Bit replication|(% style="width:692px" %)Writes the status value of the source monitoring point to the address of the target monitoring point.
1657 |(% rowspan="3" style="width:231px" %)(((
1658 Word operation
1659 )))|(% colspan="2" style="width:844px" %)(((
1660 Operate on word monitoring points. Operation type: Word setting, increase, decrease and word copy.
1661 )))
1662 |(% colspan="2" style="width:844px" %)Write monitoring point Write monitoring point when performing word operation events, only for word setting, increase and decrease.
1663 |(% style="width:152px" %)Word replication|(% style="width:692px" %)Write the data of the source monitoring point to the address of the target monitoring point.
1664 |(% rowspan="4" style="width:231px" %)(((
1665 Four operations
1666 )))|(% colspan="2" style="width:844px" %)(((
1667 Four operations such as addition, subtraction, multiplication and division on objects. Operation type: addition, subtraction,
1668
1669 multiplication and division.
1670 )))
1671 |(% colspan="2" style="width:844px" %)Source operand 1: The data source to be operated, which is divided into constants and variables.
1672 |(% colspan="2" style="width:844px" %)Source operand 2: The data source to be operated, which is divided into constants and variables.
1673 |(% colspan="2" style="width:844px" %)Target monitoring point: The result of the operation on the source operands 1 and 2 is written to the monitoring point.
1674 |(% style="width:231px" %)Screen jump|(% colspan="2" style="width:844px" %)(((
1675 Realize the jump between engineering screens or the pop-up/close function of sub-screens. Specific functions
1676
1677 Same as "function switch", please refer to the parameter description of "function switch".
1678 )))
1679 |(% style="width:231px" %)(((
1680 Event list
1681 )))|(% colspan="2" style="width:844px" %)(((
1682 Successful events will form an event list under the Basic Switch tab. Relevant operations and precautions are described as follows:
1683
1684 ~1. Click an event in the event list to activate the event as a selected event;
1685
1686 2. Hold down the “ctrl” key and click an event in the event list to select or cancel an event;
1687
1688 3. The target monitoring point of the above event cannot be used as the source monitoring point of the following event;
1689
1690 4. Only one screen jump event can be added at most, and it can only be the last one in the list and the last one to be executed.
1691 )))
1692 |(% style="width:231px" %)Pop-up confirmation box|(% colspan="2" style="width:844px" %)After checking the check box, click the button to execute the event, and the confirmation execution box will pop up.
1693 |(% style="width:231px" %)Select the language:|(% colspan="2" style="width:844px" %)Set the text and style of the object in multilingual states.
1694 |(% style="width:231px" %)Transparency settings|(% colspan="2" style="width:844px" %)When the background is a solid color background, set the transparency of the background color of the combination switch object, and the default transparency is set to 100% (0% transparency means that the background is fully transparent).
1695
1696 === Histogram ===
1697
1698 This object compares two or more numerical changes (at different times or under different conditions) in a bar graph mode, which is mainly used for data statistics and analysis. A object used to realize data visualization by reflecting the numerical changes of word monitoring points in the way of bar graph.
1699
1700 |=(% style="width: 230px;" %)**Property**|=(% style="width: 845px;" %)**Description**
1701 |(% style="width:230px" %)Add group|(% style="width:845px" %)Classify the data to be compared by histogram. You can add up to 8 groups.
1702 |(% style="width:230px" %)(((
1703
1704
1705 Add monitoring points
1706 )))|(% style="width:845px" %)(((
1707 Adds a monitoring point to monitor for the current group.
1708
1709 The parameters included in the added monitoring point are: Monitor point name, display color, monitor point address. The monitoring point name can be empty.
1710 )))
1711 |(% style="width:230px" %)(((
1712 Scale display
1713 )))|(% style="width:845px" %)(((
1714 Scale ranges can be set to constants and variables.
1715
1716 Constant: The scale range (upper/lower limit value) of histogram is fixed.
1717
1718 Variable: The data of the upper/lower limit value of jump is controlled by the corresponding monitoring point data.
1719 )))
1720 |(% style="width:230px" %)Scale display|(% style="width:845px" %)(((
1721 If the check box is checked, the Y axis of the histogram will display the scale. The number of scales and scale color displayed in it require setting the primary and secondary scales and the color of the scales.
1722 )))
1723 |(% style="width:230px" %)(((
1724 Numerical display
1725 )))|(% style="width:845px" %)(((
1726 If the check box is checked, the value of the monitoring point will be displayed at the top of the corresponding histogram. If the width of the value is larger than that of the rectangular column, it will be displayed “...,” and the value will be displayed when the mouse moves up.
1727
1728 If the check box is not checked, the data of the monitoring point will not be displayed.
1729 )))
1730 |(% style="width:230px" %)Spacing of monitoring points|(% style="width:845px" %)The distance between histograms displayed by each monitoring point.
1731 |(% style="width:230px" %)(((
1732 Group spacing
1733 )))|(% style="width:845px" %)(((
1734 The distance displayed between groups.
1735
1736 Note: The sum of all monitoring point spacing, all group spacing and all column widths cannot exceed the objects. If the object exceeded, please adjust the number of monitoring points, groups spacing or monitoring point spacing, etc. to the actual situation.
1737 )))
1738
1739 === Pie chart ===
1740
1741 Display the proportion of each monitoring point's data in the total sum of all monitoring points, eventually forming a full circle. The sector size of data from multiple monitoring points on a circle visually represents the percentage of the overall data accounted for by that data, and is commonly used in statistical models.
1742
1743 |=(% style="width: 230px;" %)**Property**|=(% style="width: 845px;" %)**Description**
1744 |(% style="width:230px" %)(((
1745 Add monitoring points
1746 )))|(% style="width:845px" %)(((
1747 Add monitoring points that need to participate in percentage statistics.
1748
1749 After adding the monitoring point, you can set the monitoring point name, graphic color, and value color, among which the monitoring point name can be set to empty.
1750 )))
1751 |(% style="width:230px" %)Style selection|(% style="width:845px" %)Define how the scale value, current value and monitor point name are displayed.
1752 |(% style="width:230px" %)Numerical display|(% style="width:845px" %)Set whether the monitoring point value and the percentage value are displayed.
1753 |(% style="width:230px" %)Monitoring point name|(% style="width:845px" %)Set whether the monitoring point name is displayed.
1754 |(% style="width:230px" %)Central control point|(% style="width:845px" %)(((
1755 Drag the center control point of the pie chart up and down to set the radius of the inner circle of the pie chart. It can be displayed as a circular proportion chart.
1756 )))
1757
1758 === Ring chart ===
1759
1760 A object used to realize data visualization by reflecting the numerical changes of word monitoring points in a ring-shape. The complete circle as a range of values is called the range value circle; the filled circle segment to represent the current value is called the value circle, where the maximum and minimum values of the set range are at the start (end) of the circle.
1761
1762 |=(% style="width: 229px;" %)**Property**|=(% style="width: 846px;" %)**Description**
1763 |(% style="width:229px" %)Monitoring point|(% style="width:846px" %)(((
1764 It is used to obtain the data of the monitoring point in real time and display it in the filled area of ring chart.
1765 )))
1766 |(% style="width:229px" %)(((
1767 Display range
1768 )))|(% style="width:846px" %)(((
1769 Set the upper and lower range limits of the whole ring chart.
1770
1771 Constant: The display range (upper/lower limit value) of the ring chart is fixed.
1772
1773 Variable: The data of the upper/lower limit value of the ring chart is controlled by the corresponding monitoring point data.
1774 )))
1775 |(% style="width:229px" %)(((
1776 Scale display
1777 )))|(% style="width:846px" %)(((
1778 If the check box is checked, the scale and scale value can be displayed around the ring diagram. At this time, the number of primary and secondary scales and scale colors should be set.
1779
1780 If the check box is not checked, the scale around the ring chart will not be displayed.
1781 )))
1782 |(% style="width:229px" %)Numerical scale display|(% style="width:846px" %)(((
1783 Whether to display the percentage value of monitoring control point value and quantum value.
1784
1785 If displayed, the scale value is displayed in the middle of the ring chart.
1786 )))
1787 |(% style="width:229px" %)Starting angle|(% style="width:846px" %)(((
1788 Defines the starting angle of the numeric ring of the ring chart. The angle is rotated counterclockwise with the top middle position of the ring chart as the reference point
1789 )))
1790 |(% style="width:229px" %)Circular color|(% style="width:846px" %)The color of the ring segment represented by the monitoring point value.
1791 |(% style="width:229px" %)Background color|(% style="width:846px" %)Ring background color, that is, the background color of the range value ring.
1792 |(% colspan="1" rowspan="4" style="width:229px" %)(((
1793 Alert a(% style="background-color:transparent" %)rea
1794 )))|(% style="width:846px" %)(((
1795 Function description: Divide the ring chart into several areas(1 to 4 areas), each of which can set the style of the partition and the starting value and the ending value of the partition independently.
1796 )))
1797 |(% style="width:846px" %)(((
1798 Alert value: The starting and ending values of the partition. All values need to be limited to upper limit and lower limit of the ring chart, otherwise the partition is invalid.
1799 )))
1800 |(% style="width:846px" %)Alert area color: When the monitoring point value is within a certain partition value range, the ring chart represents the color of the fill area (displayed in solid color).
1801 |(% style="width:846px" %)Note: When the monitoring point value is not in the set partition, the ring chart will display the default color.
1802
1803 === Historical trend chart ===
1804
1805 View the historical data curve of monitoring points by setting the start date and the end date. The change of curve is used to display the data change of each monitoring point, X axis represents the time and Y axis represents the monitoring point value.
1806
1807 |=(% style="width: 236px;" %)**Property**|=(% style="width: 839px;" %)**Description**
1808 |(% style="width:236px" %)Number of curves|(% style="width:839px" %)Set the number of curves to be displayed on the curve object.
1809 |(% style="width:236px" %)Curve type|(% style="width:839px" %)There are 4 optional styles for curve display.
1810 |(% style="width:236px" %)Curve color|(% style="width:839px" %)The color of the curve when it is displayed.
1811 |(% style="width:236px" %)Curve name|(% style="width:839px" %)The name of the curve shown in the graph example on the right side of the curve object.
1812 |(% style="width:236px" %)Bind monitoring point|(% style="width:839px" %)Select the monitoring points that the curve needs to bind.
1813 |(% rowspan="2" style="width:236px" %)(((
1814 Y-axis range
1815 )))|(% style="width:839px" %)Fixed: Set the values of upper limit and lower limit of Y axis to fixed values.
1816 |(% style="width:839px" %)(((
1817 Adaptation: In the set time axis, the upper limit of Y-axis is 20% above the maximum of the monitoring point data, and the lower limit of Y-axis is 20% below the minimum of the monitoring point data
1818 )))
1819 |(% style="width:236px" %)Lower limit of Y-axis|(% style="width:839px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
1820 |(% style="width:236px" %)Upper limit of Y axis|(% style="width:839px" %)When the Y-axis range is fixed, set the minimum value of Y-axis.
1821 |(% style="width:236px" %)Grid color|(% style="width:839px" %)Sets the color of the graph grid.
1822 |(% style="width:236px" %)Text setting|(% style="width:839px" %)Sets the display style of text in X/Y axis.
1823 |(% style="width:236px" %)Start date|(% style="width:839px" %)Set the start time of the X axis of the graph.
1824 |(% style="width:236px" %)End date|(% style="width:839px" %)Set the end time of the X axis of the graph.
1825 |(% style="width:236px" %)(((
1826 Recent days
1827 )))|(% style="width:839px" %)(((
1828 There are 4 choices (last 1 day, last 7 days, last 30 days, to be selected) for you to filter the time are conveniently and quick, and the corresponding start date and end date will become the current selected last few days. If the selected start and end dates are not within the last 1 day, last 7 days and the last 30 days, the state in recent days will be to be selected.
1829 )))
1830 |(% rowspan="3" style="width:236px" %)(((
1831 Time sequence
1832 )))|(% style="width:839px" %)The time sequence of viewing is divided into two kinds: time ascending and time descending.
1833 |(% style="width:839px" %)(((
1834 Time ascending: The start time is displayed at the left starting point of the X axis, and the time increases from the start time to the end time.
1835 )))
1836 |(% style="width:839px" %)(((
1837 Time descending: The end time is displayed at the left starting point of the X axis, and the time decreases from the end time to the start time.
1838 )))
1839 |(% style="width:236px" %)Date format|(% style="width:839px" %)Sets the display format of X-axis time and date.
1840 |(% style="width:236px" %)Background color of the filter bar|(% style="width:839px" %)Sets the background color of the filter bar row below the chart. There are two kinds of translucent and fully transparent.
1841 |(% style="width:236px" %)Starting color/End color|(% style="width:839px" %)Set the background color of the graph.
1842 |(% style="width:236px" %)Gradient type|(% style="width:839px" %)Sets the gradient type of the background color of the graph.
1843 |(% style="width:236px" %)Transparency settings|(% style="width:839px" %)Set the transparency of the background color of the graph. The larger the value, the more transparent it is.
1844
1845 Property description when browsing the interface:
1846
1847 |=(% style="width: 139px;" %)**Property**|=(% style="width: 682px;" %)**Description**
1848 |(% style="width:139px" %)[[image:image-20220720150850-2.png]]|(% style="width:682px" %)Switch the display mode of historical trend chart data: Curves and tables.
1849 |(% style="width:139px" %)(((
1850 [[image:image-20220720150854-3.png]]
1851 )))|(% style="width:682px" %)(((
1852 The historical trend chart moves forward according to the time span.
1853
1854 Time span: The time period between the end date and the start date.
1855
1856 For example, if the start time and end time are separated by 1 day, the historical trend chart will move forward by 1 day.
1857 )))
1858 |(% style="width:139px" %)(((
1859 [[image:image-20220720150911-4.png]]
1860 )))|(% style="width:682px" %)(((
1861 The historical trend chart moves backward by time span.
1862
1863 Time span: The time period between the end date and the start date.
1864
1865 For example, if the start time and end time are separated by 1 day, the historical trend chart will move back by 1 day.
1866 )))
1867 |(% style="width:139px" %)(((
1868 [[image:image-20220720150920-5.png]]
1869 )))|(% style="width:682px" %)(((
1870 Previous page. When the data from the start time to the end time is displayed in multiple pages, click the previous page to display the historical data of previous page.
1871
1872 You can't click on the previous page when you are on the first page.
1873 )))
1874 |(% style="width:139px" %)(((
1875 [[image:image-20220720150922-6.png]]
1876 )))|(% style="width:682px" %)(((
1877 Next page. Data from start time to end time are displayed in multiple pages. Click next page to display the historical data of next page.
1878
1879 You can't click on the next page when you are on the last page.
1880 )))
1881 |(% style="width:139px" %)(((
1882 [[image:image-20220720150929-7.png]]
1883 )))|(% style="width:682px" %)(((
1884 When the width is less than 683, click to view the current page and how many pieces of data per page and how many pieces of data.
1885 )))
1886 |(% style="width:139px" %)(((
1887 [[image:image-20220720150932-8.png]]
1888 )))|(% style="width:682px" %)(((
1889 Figure: Display the color of this curve correspondingly.
1890
1891 When the data is displayed as "curve": When browsing the interface, clicking on the map will hide the corresponding curve display;
1892
1893 When the data is displayed as "table”: The table only displays the data of one monitoring point, and the data of the first selected monitoring point is displayed by default. Clicking on the figure will switch to the data of the corresponding monitoring point.
1894 )))
1895 |(% style="width:139px" %)[[image:image-20220720150937-9.png]]|(% style="width:682px" %)Historical trend chart query button. Click it to pop-up a pop-up box to set the query range.
1896 |(% style="width:139px" %)[[image:image-20220720151000-10.png]]|(% style="width:682px" %)First page: Clicking this button will return to the first page regardless of the current page.
1897 |(% style="width:139px" %)[[image:image-20220720151016-12.png]]|(% style="width:682px" %)Previous page: Clicking this button will display the data of the previous page.
1898 |(% style="width:139px" %)[[image:image-20220720151025-14.png]]|(% style="width:682px" %)Next page: Clicking this button will display the data of the next page.
1899 |(% style="width:139px" %)[[image:image-20220720151023-13.png]]|(% style="width:682px" %)Last page: Clicking this button to reach the last page regardless of the current page.
1900
1901 === Alarm record display ===
1902
1903 All alarm records generated by the monitoring points set in V-BOX are queried and displayed in a table according to the time sequence, and dynamic query time periods can be set according to the start time and the end time.
1904
1905 |=(% style="width: 258px;" %)**Property**|=(% style="width: 817px;" %)**Description**
1906 |(% style="width:258px" %)Select V-BOX|(% style="width:817px" %)Select the alarm monitoring points under the V-BOX , up to 16 monitoring points can be selected.
1907 |(% style="width:258px" %)Alarm type|(% style="width:817px" %)(((
1908 The alarm mode includes current alarm record and historical alarm record. You could select the corresponding alarm according to your needs.
1909 )))
1910 |(% style="width:258px" %)Alarm level|(% style="width:817px" %)Select the alarm level to display in the table.
1911 |(% style="width:258px" %)Start date|(% style="width:817px" %)Sets the start date of the query.
1912 |(% style="width:258px" %)End date|(% style="width:817px" %)Sets the end date of the query.
1913 |(% style="width:258px" %)Time format|(% style="width:817px" %)Set the alarm time format displayed in the table.
1914 |(% style="width:258px" %)Date format|(% style="width:817px" %)Format the alarm time and date displayed in the table.
1915 |(% rowspan="3" style="width:258px" %)(((
1916 Time sequence
1917 )))|(% style="width:817px" %)The time sequence of viewing is divided into two kinds: time ascending and time descending.
1918 |(% style="width:817px" %)Time ascending: The latest alarm information is at the end of the alarm information displayed bar.
1919 |(% style="width:817px" %)Time descending: The latest alarm information is at the top of the alarm information display bar.
1920 |(% style="width:258px" %)Set the display content|(% style="width:817px" %)Check the information content to be displayed in the alarm record table.
1921 |(% style="width:258px" %)Background color|(% style="width:817px" %)Set the background color of the alarm record display object.
1922 |(% style="width:258px" %)Head color|(% style="width:817px" %)Set the header color of the alarm record display object.
1923 |(% style="width:258px" %)Border color|(% style="width:817px" %)Set the border color of the alarm record display object.
1924 |(% style="width:258px" %)Color of the selected row|(% style="width:817px" %)Set the color of the alarm record display object when each row is selected.
1925 |(% style="width:258px" %)Alarm lamp color|(% style="width:817px" %)Set the alarm lamp color of the alarm record display object.
1926 |(% style="width:258px" %)Header text color|(% style="width:817px" %)Set the header text color of the alarm record display object.
1927 |(% style="width:258px" %)General alarm text color|(% style="width:817px" %)Set the color displayed in the alarm information bar when the alarm level is general alarm.
1928 |(% style="width:258px" %)Severe alarm text color|(% style="width:817px" %)Set the color displayed in the alarm information bar when the alarm level is severe alarm.
1929 |(% style="width:258px" %)(((
1930 Particularly severe alarm text color
1931 )))|(% style="width:817px" %)Set the color displayed in the alarm information bar when the alarm level is particularly severe.
1932 |(% style="width:258px" %)Background color of the filter bar|(% style="width:817px" %)(((
1933 Set the background color of filter bar below the alarm record display object. There are two kinds of translucent and fully transparent.
1934 )))
1935 |(% style="width:258px" %)Transparency settings|(% style="width:817px" %)Set the background color transparency of the alarm record display object. The larger the value, the more transparent it is.
1936 |(% rowspan="3" style="width:258px" %)(((
1937
1938
1939 Cell customization
1940 )))|(% style="width:817px" %)The default is adaptive. After selecting custom, you can set the width of the cell.
1941 |(% style="width:817px" %)Text beyond hiding: After exceeding the custom width, the excess text is hidden.
1942 |(% style="width:817px" %)Text beyond wrap: The text wraps around if it excess the custom width.
1943
1944 === Indirect screen display ===
1945
1946 The specified sub-screen is displayed according to the status of the monitoring point.
1947
1948 |=(% style="width: 246px;" %)**Property**|=(% style="width: 829px;" %)**Description**
1949 |(% rowspan="4" style="width:246px" %)(((
1950 Conditional trigger
1951 )))|(% style="width:829px" %)Select the type of condition displayed on the sub screen: Bit condition, word condition and unconditional.
1952 |(% style="width:829px" %)(((
1953 Bit condition: When the monitoring point is set ON or OFF, the specified sub-screen will be triggered and popped up. When the value of the monitoring point does not meet the set conditions, it is not displayed.
1954 )))
1955 |(% style="width:829px" %)(((
1956 Word condition: When the value of the monitoring point meets the set conditions, the specified will be triggered and popped up. Multiple conditions can be added. The newly added condition is displayed later. If multiple conditions are met at the same time, displays the latest screen specified by a condition. When the value of the monitoring point is not satisfied, it is not displayed.
1957 )))
1958 |(% style="width:829px" %)Unconditional: Always display the specified screen.
1959 |(% style="width:246px" %)Bind monitoring point|(% style="width:829px" %)(((
1960 When the trigger type of condition is bit condition or word condition, the monitoring point should be bound. When the trigger type of condition is unconditional, there is no need to bind monitoring point.
1961 )))
1962 |(% style="width:246px" %)Display title bar|(% style="width:829px" %)(((
1963 Uncheck by default. If checked, the style of the title bar will be displayed. You can enter a title name, and set the background color of the title bar and the font color.
1964 )))
1965 |(% style="width:246px" %)Background display and hide|(% style="width:829px" %)Display and hide the background of the object.
1966 |(% rowspan="2" style="width:246px" %)Display background image|(% style="width:829px" %)Check: The background of indirect screen will be displayed as a picture.
1967 |(% style="width:829px" %)Uncheck: The background of indirect screen will be displayed in solid color.
1968
1969 == Toolbar ==
1970
1971 The toolbar provides a collection of buttons for related operations on canvas and objects.
1972
1973 (% class="wikigeneratedid" id="HDescription" %)
1974 **Description**
1975
1976 Reference objects: Right alignment, left alignment, top alignment, bottom alignment, X-axis alignment, Y-axis alignment, equal width, equal height, equal width and height, horizontal equal spacing and vertical equal spacing buttons in the toolbar are operating on a plurality of selected objects (the objects locked in position do not perform the above operations). When operating, the relevant values of a certain object are taken as operation data, then the object is called a reference object. The control points around the reference object are red points. When you select multiple objects and then click on a object, that object is the reference object. If a object is not clicked, the leftmost object of the selected objects is used as the reference object.
1977
1978 |(% style="width:136px" %)**Toolbar**|(% style="width:200px" %)**Name**|(% style="width:119px" %)**Shortcut key**|(% style="width:620px" %)**Function description**
1979 |(% style="width:136px" %)[[image:image-20220720154713-15.png||height="38" width="38"]]|(% style="width:200px" %)(((
1980
1981
1982 Selection
1983 )))|(% style="width:119px" %) |(% style="width:620px" %)(((
1984 Mouse tool: Click it to select the current part. Hold down the Ctrl key and click on the object. Multiple objects can be selected at the same time. Click the selected object again, then it is deselected.
1985 )))
1986 |(% style="width:136px" %)[[image:image-20220720154716-16.png||height="39" width="39"]]|(% style="width:200px" %)Save|(% style="width:119px" %)Ctrl + S|(% style="width:620px" %)Saves the current canvas.
1987 |(% style="width:136px" %)[[image:image-20220720154723-17.png||height="36" width="36"]]|(% style="width:200px" %)Delete|(% style="width:119px" %)Del|(% style="width:620px" %)Delete selected objects. You can delete multiple selected objects.
1988 |(% style="width:136px" %)[[image:image-20220720154726-18.png||height="29" width="29"]]|(% style="width:200px" %)Copy screen|(% style="width:119px" %) |(% style="width:620px" %)(((
1989 Copies the current screen to another screen (except the screen generated by default).
1990 )))
1991 |(% style="width:136px" %)[[image:image-20220720154728-19.png||height="29" width="29"]]|(% style="width:200px" %)Copy|(% style="width:119px" %)Ctrl + C|(% style="width:620px" %)Multiple selected objects can be copied.
1992 |(% style="width:136px" %)[[image:image-20220720154733-20.png||height="28" width="28"]]|(% style="width:200px" %)Paste|(% style="width:119px" %)Ctrl + V|(% style="width:620px" %)Multiple selected objects copied can be pasted.
1993 |(% style="width:136px" %)[[image:image-20220720154753-21.png||height="28" width="28"]]|(% style="width:200px" %)Multiple copy|(% style="width:119px" %) |(% style="width:620px" %)Multiple objects can be copied according to the input parameters
1994 |(% style="width:136px" %)[[image:image-20220720154757-22.png||height="25" width="22"]]|(% style="width:200px" %) |(% style="width:119px" %) |(% style="width:620px" %)Synchronize the name of V-BOX and monitoring point.
1995 |(% style="width:136px" %)[[image:image-20220720154800-23.png||height="23" width="26"]]|(% style="width:200px" %)Left alignment|(% style="width:119px" %)Alt + l|(% style="width:620px" %)Align to the left with reference to the left edge of the reference object.
1996 |(% style="width:136px" %)[[image:image-20220720154802-24.png||height="24" width="27"]]|(% style="width:200px" %)Right alignment|(% style="width:119px" %)Alt + R|(% style="width:620px" %)Align to the right with reference to the right edge of the reference object.
1997 |(% style="width:136px" %)[[image:image-20220720154814-25.png||height="23" width="24"]]|(% style="width:200px" %)Top alignment|(% style="width:119px" %)Alt + u|(% style="width:620px" %)Align to the top with reference to the upper edge of the reference object.
1998 |(% style="width:136px" %)[[image:image-20220720154819-26.png||height="22" width="23"]]|(% style="width:200px" %)Bottom alignment|(% style="width:119px" %)Alt + d|(% style="width:620px" %)Align to the bottom with reference to the lower edge of the reference object.
1999 |(% style="width:136px" %)[[image:image-20220720154822-27.png||height="23" width="24"]]|(% style="width:200px" %)X-axis alignment|(% style="width:119px" %)Alt + x|(% style="width:620px" %)Align with reference to the midline of the height of the reference object.
2000 |(% style="width:136px" %)[[image:image-20220720154825-28.png||height="25" width="25"]]|(% style="width:200px" %)Y-axis alignment|(% style="width:119px" %)Alt + y|(% style="width:620px" %)Align with reference to the midline of the width of the reference object.
2001 |(% style="width:136px" %)[[image:image-20220720154829-29.png||height="24" width="24"]]|(% style="width:200px" %)Equal width|(% style="width:119px" %)Alt + w|(% style="width:620px" %)Set the width of the selected object, taking the width of the reference object as the operating value.
2002 |(% style="width:136px" %)[[image:image-20220720154834-30.png||height="25" width="25"]]|(% style="width:200px" %)Equal height|(% style="width:119px" %)Alt + h|(% style="width:620px" %)Set the height of the selected object, taking the height of the reference object as the operating value.
2003 |(% style="width:136px" %)[[image:image-20220720154836-31.png||height="25" width="25"]]|(% style="width:200px" %)Equal width and height|(% style="width:119px" %)Alt + e|(% style="width:620px" %)(((
2004 Set the width and the height of the selected object, taking he width and the height of the reference object as the operating value.
2005 )))
2006 |(% style="width:136px" %)[[image:image-20220720154839-32.png||height="26" width="28"]]|(% style="width:200px" %)Equal horizontal spacing|(% style="width:119px" %)Alt + a|(% style="width:620px" %)Set equal horizontal spacing between selected objects.
2007 |(% style="width:136px" %)[[image:image-20220720154900-33.png||height="26" width="28"]]|(% style="width:200px" %)Equal vertical spacing|(% style="width:119px" %)Alt + V|(% style="width:620px" %)Set equal vertical spacing between selected objects.
2008 |(% style="width:136px" %)[[image:image-20220720154904-34.png||height="24" width="26"]]|(% style="width:200px" %)Place at the top|(% style="width:119px" %) |(% style="width:620px" %)Place the selected object on top of the other objects.
2009 |(% style="width:136px" %)[[image:image-20220720154908-35.png||height="25" width="27"]]|(% style="width:200px" %)Place at the bottom|(% style="width:119px" %) |(% style="width:620px" %)Place the selected object at the bottom of other objects.
2010 |(% style="width:136px" %)[[image:image-20220720154914-36.png||height="21" width="29"]]|(% style="width:200px" %)Undo|(% style="width:119px" %)Ctrl + Z|(% style="width:620px" %)Take the operation of the current screen back one step.
2011 |(% style="width:136px" %)[[image:image-20220720154922-37.png||height="22" width="30"]]|(% style="width:200px" %)Restore|(% style="width:119px" %)Ctrl + R|(% style="width:620px" %)Restore the operation one step forward after undoing the current screen.
2012 |(% style="width:136px" %)[[image:image-20220720154926-38.png||height="27" width="29"]]|(% style="width:200px" %)Settings|(% style="width:119px" %)Alt + m|(% style="width:620px" %)Properties of the current screen.
2013 |(% style="width:136px" %)[[image:image-20220720154930-39.png]]|(% style="width:200px" %)Browse|(% style="width:119px" %) |(% style="width:620px" %)(((
2014 Browse the current project configuration screen, and the default home page is the top column in the table of project screen.
2015 )))
2016 |(% style="width:136px" %)[[image:image-20220720154933-40.png||height="28" width="30"]]|(% style="width:200px" %)(((
2017 One-click to display and hide the tex
2018 )))|(% style="width:119px" %) |(% style="width:620px" %)One-click to display and hide the text of the display box in the current screen.
2019 |(% style="width:136px" %)[[image:image-20220720154947-41.png||height="31" width="33"]]|(% style="width:200px" %)Import template|(% style="width:119px" %) |(% style="width:620px" %)Imports the designed configuration screen template for the current screen.
2020 |(% style="width:136px" %)(((
2021 [[image:image-20220720154953-42.png||height="26" width="26"]]
2022 )))|(% style="width:200px" %)Check|(% style="width:119px" %) |(% style="width:620px" %)(((
2023 Check the integrity of the configuration information of project objects, and display error messages at the bottom of the screen.
2024 )))
2025 |(% style="width:136px" %)[[image:image-20220720155009-43.png||height="26" width="26"]]|(% style="width:200px" %)Zoom in canvas|(% style="width:119px" %)Ctrl + +|(% style="width:620px" %)Zoom in on the current canvas.
2026 |(% style="width:136px" %)[[image:image-20220720155013-44.png||height="26" width="26"]]|(% style="width:200px" %)Canvas restoration|(% style="width:119px" %)Ctrl + )|(% style="width:620px" %)Restores the current canvas.
2027 |(% style="width:136px" %)[[image:image-20220720155016-45.png||height="27" width="27"]]|(% style="width:200px" %)Zoom out canvas|(% style="width:119px" %)Ctrl +-|(% style="width:620px" %)Zoom out the current canvas.
2028 |(% style="width:136px" %)[[image:image-20220720155019-46.png||height="27" width="32"]]|(% style="width:200px" %)Export|(% style="width:119px" %) |(% style="width:620px" %)Export the current project.
2029 |(% style="width:136px" %)[[image:image-20220720155114-47.png||height="27" width="31"]]|(% style="width:200px" %)Import|(% style="width:119px" %) |(% style="width:620px" %)Import an external project into the current project.
2030 |(% style="width:136px" %)[[image:image-20220720155117-48.png||height="28" width="119"]]|(% style="width:200px" %)Status|(% style="width:119px" %) |(% style="width:620px" %)(((
2031 Browses the styles for the current status of a object with multi-state in the current screen.
2032 )))
2033 |(% style="width:136px" %)[[image:image-20220720155120-49.png||height="33" width="115"]]|(% style="width:200px" %)Language|(% style="width:119px" %) |(% style="width:620px" %)Browses the current language of the multilingual object in the current screen.
2034 |(% style="width:136px" %)[[image:image-20220720155123-50.png]]|(% style="width:200px" %)Font size|(% style="width:119px" %) |(% style="width:620px" %)Sets the text font size of the selected object.
2035 |(% style="width:136px" %)[[image:image-20220720155131-51.png]]|(% style="width:200px" %)Font color|(% style="width:119px" %) |(% style="width:620px" %)Sets the text font color of the selected object.
2036 |(% style="width:136px" %)[[image:image-20220720155135-52.png||height="33" width="31"]]|(% style="width:200px" %)Bold|(% style="width:119px" %)Ctrl + B|(% style="width:620px" %)Sets the text font weight of the selected part.
2037 |(% style="width:136px" %)[[image:image-20220720155142-53.png||height="31" width="19"]]|(% style="width:200px" %)Italic|(% style="width:119px" %)Ctrl + i|(% style="width:620px" %)Sets the font text italic of the selected object.
2038 |(% style="width:136px" %)[[image:image-20220720155146-54.png||height="35" width="30"]]|(% style="width:200px" %)Underline|(% style="width:119px" %)Ctrl + U|(% style="width:620px" %)Sets the text font underline of the selected object.
2039 |(% style="width:136px" %)[[image:image-20220720155150-55.png||height="28" width="35"]]|(% style="width:200px" %)Horizontal left alignment|(% style="width:119px" %)Shift + L|(% style="width:620px" %)Sets the selected object text to horizontal left alignment
2040 |(% style="width:136px" %)[[image:image-20220720155153-56.png||height="26" width="31"]]|(% style="width:200px" %)Horizontal center alignment|(% style="width:119px" %)Shift + C|(% style="width:620px" %)Sets the selected object text to horizontal center alignment.
2041 |(% style="width:136px" %)[[image:image-20220720155155-57.png||height="26" width="34"]]|(% style="width:200px" %)Horizontal right alignment|(% style="width:119px" %)Shift + R|(% style="width:620px" %)Sets the selected object text to horizontal right alignment.
2042 |(% style="width:136px" %)[[image:image-20220720155158-58.png||height="29" width="27"]]|(% style="width:200px" %)Vertical top alignment|(% style="width:119px" %)Shift + U|(% style="width:620px" %)Sets the selected object text to vertical top alignment.
2043 |(% style="width:136px" %)(((
2044 [[image:image-20220720155201-59.png||height="32" width="30"]]
2045
2046
2047 )))|(% style="width:200px" %)Vertical center alignment|(% style="width:119px" %)Shift + M|(% style="width:620px" %)Sets the selected object text to vertical center alignment.
2048 |(% style="width:136px" %)(((
2049 [[image:image-20220720155204-60.png||height="27" width="25"]]
2050
2051
2052 )))|(% style="width:200px" %)Vertical bottom alignment|(% style="width:119px" %)Shift + D|(% style="width:620px" %)Sets the selected object text to vertical bottom alignment.
2053
2054 = **Permission management** =
2055
2056 Click permission management menu on the left to enter the permission Management module as figure below.
2057
2058 [[image:image-20220720160629-1.jpeg]]
2059
2060 This module assigns projects and sets configuration permissions for sub-accounts.
2061
2062 **How to assign projects to sub-accounts.**
2063
2064 Click the button [[image:image-20220720160640-2.jpeg]] at the end of the line where the sub-account is located to enter the project list screen with permission for this sub-account, as shown in the figure below.
2065 [[image:image-20220720160701-3.jpeg]]
2066
2067 Click the button in the upper right corner of Figure above, select the project in the pop-up box, and click “save” to set the permission of the selected project for the account.
2068
2069 [[image:image-20220720160817-4.jpeg]]
2070
2071 **How to unbind the sub-account.**
2072
2073 In the assigned projects list of sub-accounts, click the button [[image:image-20220720160902-5.jpeg]] to  unbind the project for the account.
2074
2075 = **Appendix** =
2076
2077 The shortcut key actions in the configuration editor are as follows:
2078
2079
2080 |=**Shortcut key**|=**Function**|=**Shortcut key**|=**Function**|=**Shortcut key**|=**Function**
2081 |↑|Object moves up 1px|Ctrl + S|Save project|Alt + u|Top alignment
2082 |↓|Object moves down 1px|Ctrl + Z|Undo|Alt + d|Bottom alignment
2083 |→|Object moves right 1px|Ctrl + R|Restore|Alt + x|X-axis alignment
2084 |←|Object moves left 1px|Ctrl + alt + n|New screen|Alt + y|Y-axis alignment
2085 |Ctrl + ↑|Object moves up 10px|Ctrl + U|Font underline|Alt + w|Equal width
2086 |Ctrl + ↓|Object moves down 10px|Ctrl + i|Italic font|Alt + h|Equal height
2087 |Ctrl + →|Object moves right 10px|Ctrl + B|Bold font|Alt + e|Equal width and height
2088 |Ctrl +|Object moves left 10px|Ctrl + Shift + L|Text horizontal left alignment|Alt + a|Equal horizontal spacing
2089 |Del|Delete object|Ctrl + Shift + C|Text horizontal center alignment|Alt + V|Equal vertical spacing
2090 |Ctrl + C|Copy objects|Ctrl + Shift + R|Text horizontal right alignment|Ctrl + A|Select all objects
2091 |Ctrl + V|Paste objects|Ctrl + Shift + U|Text vertical top alignment|Ctrl + D|Uncheck the object
2092 |Shift + ↑|Sort current page up|Ctrl + Shift + D|Text vertical bottom alignment| |
2093 |Shift + ↓|Sort current page down|Ctrl + Shift + M|Text vertical right alignment| |
2094 |Ctrl +-|Zoom out canvas|Alt + M|Modify the screen| |
2095 |Ctrl + =|Zoom in canvas|Alt + l|Left alignment| |
2096 |Ctrl +)|Canvas restoration|Alt + R|Right alignment| |
2097
2098 = **Demo account** =
2099
2100 **What is Cloud SCADA platform?**
2101
2102 Cloud SCADA is an IoT platform that can realize terminal equipment data collection, real-time control, alarm push, group management, configuration design and other functions. With this platform, users can monitor terminal equipment more conveniently.
2103
2104 **How to access?**
2105
2106 Asean URL: [[http:~~/~~/asean.v-box.net/web/htmlnew/user/login.html>>url:http://asean.v-box.net/web/htmlnew/user/login.html]]
2107
2108 Asean account&password: weconuser 123123
2109
2110 EU URL: [[http:~~/~~/eu.v-box.net/web/htmlnew/user/login.html>>url:http://eu.v-box.net/web/htmlnew/user/login.html]]
2111
2112 EU account&password: weconuser weconuser123
2113
2114 (% class="box infomessage" %)
2115 (((
2116 **✎Note: **
2117
2118 1. users can edit Cloud SCADA project freely, and the modified results will not be saved.
2119 1. users can enter the Cloud SCADA page by clicking the following positions.
2120 )))
2121
2122 (% style="text-align:center" %)
2123 [[image:1648577581177-590.png||height="408" width="800" class="img-thumbnail"]]
2124
2125 **Industry classification**
2126
2127 There are 20 Cloud SCADA projects created in demo account, including HVAC system, water treatment system, smart farm, smart factory and smart city.
2128
2129 (% style="text-align:center" %)
2130 [[image:1648577644453-821.png||height="377" width="800" class="img-thumbnail"]]
2131
2132 **Part of the project introduction**
2133
2134 Heating Monitoring System
2135
2136 Collect the analog signals of the temperature, pressure and flow rate of the outlet water of the heat exchanger, and use PID to control the valve diameter of the heat exchanger and the rotation speed of the circulating pump to achieve the purpose of automatic temperature adjustment.
2137
2138 (% style="text-align:center" %)
2139 [[image:1648577724164-599.png||height="393" width="800" class="img-thumbnail"]]
2140
2141 (% style="text-align:center" %)
2142 [[image:1648577744837-247.png||height="450" width="800" class="img-thumbnail"]]
2143
2144 Water Treatment System
2145
2146 Industry introduction: water treatment system.Mainly to improve waterquality, to meet certain water quality standards, such as drinking water, industrial wastewater discharge.In order to ensure the stable operation of the water treatment system, it is necessary to monitor the water pressure and water level, and adjust the   appropriate water pressure and water level by remote control of the pumpspeed.
2147
2148 (% style="text-align:center" %)
2149 [[image:1648577778435-311.png||height="450" width="800" class="img-thumbnail"]]
2150
2151 Smart City Monitoring
2152
2153 The multi-functional city monitoring system can be applied to multiple scenarios such as HVAC, factory, and pump station monitoring. Monitor and control common industrial parameters such as voltage, current, power, frequency, temperature, liquid level, etc.
2154
2155 (% style="text-align:center" %)
2156 [[image:1648577825813-481.png||height="452" width="800" class="img-thumbnail"]]
2157
2158 (% style="text-align:center" %)
2159 [[image:1648577843849-690.png||height="452" width="800" class="img-thumbnail"]]
2160
2161 Smart Building Monitoring
2162
2163 It is used in community management to monitor various facilities in the community such as elevator equipment, lighting system, parking lot, fire fighting equipment, etc. In the event of an abnormality in the equipment, such as elevator damage, insufficient fire water, etc., an alarm prompt is sent to the manager.
2164
2165 (% style="text-align:center" %)
2166 [[image:1648577874801-932.png||height="408" width="800" class="img-thumbnail"]]
2167
2168 (% style="text-align:center" %)
2169 [[image:1648577894932-957.png||height="408" width="800" class="img-thumbnail"]]