Skip to Content
Last modified by Iaroslav Platonov on 2026/06/08 10:32
From version 210.1
edited by Iaroslav Platonov
on 2026/06/08 10:32
Change comment: There is no comment for this version
To version 209.2
edited by Sergei
on 2026/02/06 05:05
Change comment: Update document after refactoring.

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.Iaroslav
1 +XWiki.Sergei
Content
... ... @@ -1,875 +1,1220 @@
1 -{{html clean="false"}}
2 -<style>
3 -/* ── Disable XWiki automatic heading counters inside our content ── */
4 -.doc-content h1::before,.doc-content h2::before,
5 -.doc-content h3::before,.doc-content h4::before,
6 -.doc-content h5::before,.doc-content h6::before {
7 - content:none !important; display:none !important;
8 -}
9 -.doc-content { counter-reset:none !important; }
1 += CONTENT =
10 10  
11 -/* ── Reading progress bar ── */
12 -#rn-prog { position:fixed;top:0;left:0;height:3px;width:0;background:#005AB4;z-index:9999;pointer-events:none; }
3 +{{toc/}}
13 13  
14 -/* ── Page content wrapper ── */
15 -.doc-wrap { position:relative; }
16 -.doc-content {
17 - margin-right:224px;
18 - border-left:1px solid #E8E8E8;
19 - border-right:1px solid #E8E8E8;
20 - padding:0 32px;
21 -}
5 += 1. INTRODUCTION =
22 22  
23 -/* ── Right "On This Page" TOC ── */
24 -.doc-toc {
25 - position:absolute;top:0;right:0;width:200px;
26 - font-size:12.5px;line-height:1.55;
27 - padding:20px 0 20px 16px;
28 -}
29 -.doc-toc.is-fixed { position:fixed;width:200px;overflow-y:auto;z-index:10; }
30 -.toc-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }
31 -.toc-header strong { font-size:13px;font-weight:700;color:#222; }
32 -.toc-toggle { background:none;border:none;cursor:pointer;color:#555;font-size:14px;padding:0 2px;line-height:1; }
33 -.toc-toggle:hover { color:#222; }
34 -.doc-toc ul { list-style:none;margin:0;padding:0; }
35 -.doc-toc li { margin:0; }
36 -.doc-toc a { display:block;padding:3px 0;color:#555;text-decoration:none;border-left:2px solid transparent;transition:color .12s; }
37 -.doc-toc a:hover { color:#222;text-decoration:underline; }
38 -.doc-toc a.toc-on { color:#222;font-weight:700;border-left:2px solid #005AB4;padding-left:5px; }
39 -.tl1 > a { font-weight:600;color:#222; }
40 -.tl2 > a { padding-left:14px; }
41 -.tl3 > a { padding-left:26px;font-size:12px; }
7 +CENTO is a multifunctional software platform for data collection, processing, and display.
42 42  
43 -/* ── Typography ── */
44 -.doc-content h1 { font-size:1.6em;font-weight:700;color:#222;margin:0 0 6px 0;border:none; }
45 -.rn-meta { font-size:.8em;color:#555;margin:0 0 28px 0; }
46 -.doc-content h2 { font-size:1.15em;font-weight:700;color:#222;margin:36px 0 10px 0;display:flex;align-items:baseline;gap:7px;scroll-margin-top:16px; }
47 -.doc-content h3 { font-size:1em;font-weight:700;color:#222;margin:22px 0 8px 0;display:flex;align-items:baseline;gap:6px;scroll-margin-top:16px; }
48 -.doc-content h4 { font-size:.93em;font-weight:700;color:#222;margin:14px 0 6px 0;display:flex;align-items:baseline;gap:5px;scroll-margin-top:16px; }
49 -.doc-content p { font-size:.93em;color:#333;line-height:1.75;margin:0 0 12px 0; }
50 -.doc-content strong { color:#222; }
51 -.doc-content code { background:#f5f5f5;border:1px solid #E8E8E8;border-radius:3px;padding:1px 5px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:.82em;color:#222;line-height:1; }
9 +The CENTO software allows you to create, edit, and view diagrams without installing additional programs.
52 52  
53 -/* ── Anchor icon ── */
54 -.anchor-icon { color:#E8E8E8;text-decoration:none;opacity:0;transition:opacity .15s;vertical-align:middle;margin-left:4px;display:inline-flex;align-items:center; }
55 -h2:hover .anchor-icon,h3:hover .anchor-icon,h4:hover .anchor-icon { opacity:1; }
56 -.anchor-icon:hover { color:#005AB4; }
11 +This Manual explains how to work in the built-in CENTO diagram editor, how to create and configure diagrams as well as how to link diagram elements to objects in the CENTO information model.
57 57  
58 -/* ── Callout notes ── */
59 -.note { border-radius:6px;padding:12px 16px;margin:14px 0;border:1px solid transparent; }
60 -.note-info { background:#e1f1f9 !important;border-color:#b3d4ee !important;border-left:4px solid #005AB4 !important; }
61 -.note-warning { background:#fff4ec !important;border-color:#f5cba7 !important;border-left:4px solid #DD5600 !important; }
62 -.note-tip { background:#e5f3df !important;border-color:#b7dba5 !important;border-left:4px solid #73A839 !important; }
63 -.note-hd { font-weight:700;font-size:.85em;display:flex;align-items:center;gap:5px;margin-bottom:5px; }
64 -.note-info .note-hd { color:#003d80 !important; }
65 -.note-warning .note-hd { color:#a03d00 !important; }
66 -.note-tip .note-hd { color:#3d6b1a !important; }
67 -.note-body { font-size:.875em;color:#222 !important;line-height:1.65; }
13 +It is assumed that the user, having read the "User Manual", "Setup Manual", and "Information Model Setup Manual", is already familiar with the basic interface elements, ways to configure CENTO, and the basic concepts of the CENTO information model.
68 68  
69 -/* ── Section index list ── */
70 -.section-index { list-style:disc;padding-left:20px;margin:0 0 20px 0; }
71 -.section-index li { margin-bottom:12px; }
72 -.section-index li a { color:#005AB4;font-weight:600;font-size:.93em;text-decoration:underline; }
73 -.section-index li p { margin:3px 0 0 0;font-size:.875em;color:#333;line-height:1.6; }
15 += 2. VIEWING DIAGRAMS =
74 74  
75 -/* ── Parent topic ── */
76 -.parent-topic { font-size:.82em;color:#555;margin:18px 0 24px 0;border-top:1px solid #E8E8E8;padding-top:10px; }
77 -.parent-topic a { color:#005AB4; }
17 +Diagrams can be viewed by hovering over [[image:Screenshot 2025-12-03 at 20.28.38.png||height="30" width="88"]] in the CENTO main menu and clicking on the name of a diagram in the drop-down list under the button. The drop-down list contains a list of diagrams available for viewing. An example of a diagram screen with a drop-down list is shown in Fig. 2.1.
78 78  
79 -/* ── Accordion ── */
80 -details.acc { border:1px solid #E8E8E8;border-radius:4px;margin-bottom:5px; }
81 -details.acc summary { display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;list-style:none;background:none;user-select:none; }
82 -details.acc summary::-webkit-details-marker { display:none; }
83 -details.acc summary::before { content:'▶';font-size:.58em;color:#555;transition:transform .18s;flex-shrink:0; }
84 -details.acc[open] summary::before { transform:rotate(90deg); }
85 -details.acc summary:hover { background:#f5f5f5; }
86 -.acc-num { font-size:.8em;color:#555;min-width:28px;font-weight:600; }
87 -.acc-title { font-size:.9em;font-weight:700;color:#222;flex:1; }
88 -.acc-body { padding:10px 14px 12px 14px;font-size:.88em;color:#333;line-height:1.7; }
19 +[[image:Screenshot 2025-12-03 at 20.29.25.png]]
89 89  
90 -/* ── Images ── */
91 -.fig { margin:12px auto 24px auto;width:fit-content;max-width:100%; }
92 -.fig img { border-radius:4px 4px 0 0;border:1px solid #E8E8E8;display:block;cursor:zoom-in;max-width:100%;box-shadow:0 1px 4px rgba(0,0,0,.10);transition:box-shadow .15s; }
93 -.fig img:hover { box-shadow:0 3px 12px rgba(0,90,180,.18); }
94 -.fig-cap { font-size:.78em;color:#555;margin:0;padding:5px 8px;background:#f5f5f5;border:1px solid #E8E8E8;border-top:none;border-radius:0 0 4px 4px;display:block;width:100%;box-sizing:border-box; }
21 +Figure 2.1. Diagram with a drop-down list of available diagrams
95 95  
96 -/* ── Lightbox ── */
97 -#rn-lb { display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.8);cursor:zoom-out;align-items:center;justify-content:center; }
98 -#rn-lb.open { display:flex; }
99 -#rn-lb-wrap { position:relative;cursor:default;max-width:92vw;max-height:90vh; }
100 -#rn-lb-wrap img { max-width:100%;max-height:90vh;border-radius:5px;display:block; }
101 -#rn-lb-x { position:absolute;top:-13px;right:-13px;background:#005AB4;color:#fff;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center; }
102 -#rn-lb-cap { position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:#ddd;font-size:.78em;background:rgba(0,0,0,.55);padding:3px 12px;border-radius:14px;pointer-events:none; }
23 +Zooming of the diagrams is performed by scrolling the mouse wheel, or by clicking the buttons in the upper-right corner of the viewing area **Zoom in** [[image:Screenshot 2025-12-03 at 20.30.03.png||height="26" width="26"]] or **Zoom out** [[image:Screenshot 2025-12-03 at 20.30.27.png||height="28" width="28"]]. The **Scale **[[image:Screenshot 2025-12-03 at 20.30.58.png||height="28" width="28"]] button is designed to automatically adjust the size of the diagram within the screen.
103 103  
104 -/* ── Back to top ── */
105 -#rn-top { position:fixed;bottom:60px;right:60px;z-index:9997;width:36px;height:36px;border-radius:50%;background:#005AB4;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;pointer-events:none;box-shadow:0 2px 8px rgba(0,90,180,.3); }
106 -#rn-top.on { opacity:1;transform:translateY(0);pointer-events:auto; }
107 -#rn-top:hover { background:#0066cc; }
25 +When using CENTO on touchscreen devices or on multi-touch panels, the image is zoomed in or out by double touching and simultaneously changing the distance between the touch points.
108 108  
109 -/* ── Toast ── */
110 -.rn-toast { position:fixed;bottom:66px;right:24px;z-index:9999;background:#222;color:#fff;font-size:.74em;padding:4px 11px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .18s; }
111 -.rn-toast.on { opacity:1; }
27 +The visible portion of the diagram can be repositioned within the interface workspace by clicking and dragging with the left mouse button held down, or by pressing and dragging using the mouse wheel (middle mouse button).
112 112  
113 -/* ── Tables ── */
114 -.rn-table { width:100%;border-collapse:collapse;margin:8px 0 18px 0;font-size:.875em; }
115 -.rn-table th { background:#f5f5f5;text-align:left;padding:7px 12px;font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#555;border-bottom:2px solid #E8E8E8; }
116 -.rn-table td { padding:7px 12px;border-bottom:1px solid #E8E8E8;color:#333;vertical-align:top; }
117 -.rn-table tr:last-child td { border-bottom:none; }
118 -.rn-table tr:hover td { background:#f5f5f5; }
119 -.sc { display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#deeaf7;color:#005AB4;border-radius:3px;font-size:.8em;font-weight:700; }
120 -</style>
29 +Switching between diagrams is performed in the **Active schemes** tree displayed on the left side of the screen when the button [[image:Screenshot 2025-12-03 at 20.31.39.png||height="29" width="29"]] is pressed. This tree can be pinned in the viewer by clicking the button [[image:Screenshot 2025-12-03 at 20.32.16.png||height="28" width="28"]]. The diagram currently displayed on the screen is highlighted within the corresponding tree structure [[image:Screenshot 2025-12-03 at 20.32.52.png||height="22" width="140"]].
121 121  
122 -<div id="rn-prog"></div>
123 -<div id="rn-lb">
124 - <div id="rn-lb-wrap">
125 - <button id="rn-lb-x" onclick="closeLightbox()">&#10005;</button>
126 - <img id="rn-lb-img" src="" alt=""/>
127 - </div>
128 - <div id="rn-lb-cap"></div>
129 -</div>
130 -<button id="rn-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="Back to top">
131 - <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 4l5 5H3z"/></svg>
132 -</button>
133 -<div class="rn-toast" id="rn-toast">Link copied &#10003;</div>
31 +The sorting of diagrams and folders (IM objects) depends on the indicated position, see Fig. 2.1, as well as additional settings in the tree itself when the button [[image:Screenshot 2025-12-03 at 20.33.22.png||height="27" width="31"]]is right-clicked.
134 134  
135 -<div class="doc-wrap">
136 -<div class="doc-content">
33 +[[image:Screenshot 2025-12-03 at 20.34.06.png||height="80" width="305"]]
137 137  
138 - <ul class="section-index">
139 - <li><a href="#s-intro">1. Introduction</a><p>CENTO platform overview and scope of this manual.</p></li>
140 - <li><a href="#s-viewing">2. Viewing Mimic Diagrams</a><p>Navigating diagrams, debug mode, dispatch marks, setpoints, IM measurements, and event highlighting.</p></li>
141 - <li><a href="#s-management">3. Mimic Diagram Management</a><p>Diagram list page, creating/renaming/deleting diagrams, hiding from the tree, missing tags check.</p></li>
142 - <li><a href="#s-editor">4. Diagram Editor</a><p>Graphical editor interface, parameter binding, and 22 advanced configuration topics.</p></li>
143 - <li><a href="#s-binding">5. Binding Tags by ID or Code</a><p>Binding devices and information model objects to diagram elements.</p></li>
144 - <li><a href="#s-abbrev">Abbreviations</a><p>Terms used throughout this manual.</p></li>
145 - </ul>
35 +The tree structure is sorted in ascending order based on the defined positional indices.
146 146  
147 - <h2 id="s-intro">1. Introduction <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-intro')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h2>
148 - <p>CENTO is a multifunctional software platform for data collection, processing, and display. This manual covers the development, configuration, and use of CENTO mimic diagrams - interactive SCADA screens that visualise equipment state and process flows in real time.</p>
149 - <div class="note note-info">
150 - <div class="note-hd"><span>&#x2139;</span> Note</div>
151 - <div class="note-body">This guide assumes familiarity with the CENTO web interface (User Manual) and basic system configuration (Setup Manual).</div>
152 - </div>
153 - <h2 id="s-viewing">2. Viewing Mimic Diagrams <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-viewing')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h2>
154 - <p>Mimic diagrams are accessed by hovering over the Diagrams item in the CENTO main menu and selecting a diagram name from the drop-down list.</p>
155 - <div class="fig">
156 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.28.38.png" alt="Screenshot 2025-12-03 at 20.28.38.png" style="max-width:100%;" onclick="openLightbox(this)"/>
157 - </div>
158 - <div class="fig">
159 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.29.25.png" alt="Figure 2.1. Diagram with a drop-down list of available diagrams" style="max-width:100%;" onclick="openLightbox(this)"/>
160 - <p class="fig-cap">Figure 2.1. Diagram with a drop-down list of available diagrams</p>
161 - </div>
162 - <div class="fig">
163 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.30.03.png" alt="Screenshot 2025-12-03 at 20.30.03.png" style="max-width:100%;" onclick="openLightbox(this)"/>
164 - </div>
165 - <div class="fig">
166 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.30.27.png" alt="Screenshot 2025-12-03 at 20.30.27.png" style="max-width:100%;" onclick="openLightbox(this)"/>
167 - </div>
168 - <div class="fig">
169 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.30.58.png" alt="Screenshot 2025-12-03 at 20.30.58.png" style="max-width:100%;" onclick="openLightbox(this)"/>
170 - </div>
171 - <div class="fig">
172 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.31.39.png" alt="Screenshot 2025-12-03 at 20.31.39.png" style="max-width:100%;" onclick="openLightbox(this)"/>
173 - </div>
174 - <div class="fig">
175 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.32.16.png" alt="Screenshot 2025-12-03 at 20.32.16.png" style="max-width:100%;" onclick="openLightbox(this)"/>
176 - </div>
177 - <div class="fig">
178 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.32.52.png" alt="Screenshot 2025-12-03 at 20.32.52.png" style="max-width:100%;" onclick="openLightbox(this)"/>
179 - </div>
180 - <div class="fig">
181 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.33.22.png" alt="Screenshot 2025-12-03 at 20.33.22.png" style="max-width:100%;" onclick="openLightbox(this)"/>
182 - </div>
183 - <div class="fig">
184 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.34.06.png" alt="Screenshot 2025-12-03 at 20.34.06.png" style="max-width:100%;" onclick="openLightbox(this)"/>
185 - </div>
186 - <div class="fig">
187 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.47.15.png" alt="Screenshot 2025-12-03 at 20.47.15.png" style="max-width:100%;" onclick="openLightbox(this)"/>
188 - </div>
189 - <div class="fig">
190 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.47.54.png" alt="Screenshot 2025-12-03 at 20.47.54.png" style="max-width:100%;" onclick="openLightbox(this)"/>
191 - </div>
192 - <div class="fig">
193 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.48.29.png" alt="Screenshot 2025-12-03 at 20.48.29.png" style="max-width:100%;" onclick="openLightbox(this)"/>
194 - </div>
195 - <div class="fig">
196 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.49.07.png" alt="Screenshot 2025-12-03 at 20.49.07.png" style="max-width:100%;" onclick="openLightbox(this)"/>
197 - </div>
198 - <div class="fig">
199 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.49.34.png" alt="Screenshot 2025-12-03 at 20.49.34.png" style="max-width:100%;" onclick="openLightbox(this)"/>
200 - </div>
201 - <div class="fig">
202 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.50.14.png" alt="Screenshot 2025-12-03 at 20.50.14.png" style="max-width:100%;" onclick="openLightbox(this)"/>
203 - </div>
204 - <div class="fig">
205 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.50.38.png" alt="Screenshot 2025-12-03 at 20.50.38.png" style="max-width:100%;" onclick="openLightbox(this)"/>
206 - </div>
207 - <div class="fig">
208 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.51.39.png" alt="Figure 2.2. Measurements in the debug mode" style="max-width:100%;" onclick="openLightbox(this)"/>
209 - <p class="fig-cap">Figure 2.2. Measurements in the debug mode</p>
210 - </div>
211 - <div class="fig">
212 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.52.16.png" alt="Screenshot 2025-12-03 at 20.52.16.png" style="max-width:100%;" onclick="openLightbox(this)"/>
213 - </div>
214 - <div class="fig">
215 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.52.48.png" alt="Screenshot 2025-12-03 at 20.52.48.png" style="max-width:100%;" onclick="openLightbox(this)"/>
216 - </div>
217 - <div class="fig">
218 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.53.18.png" alt="Screenshot 2025-12-03 at 20.53.18.png" style="max-width:100%;" onclick="openLightbox(this)"/>
219 - </div>
220 - <div class="fig">
221 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.53.43.png" alt="Screenshot 2025-12-03 at 20.53.43.png" style="max-width:100%;" onclick="openLightbox(this)"/>
222 - </div>
223 - <div class="fig">
224 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.55.35.png" alt="Screenshot 2025-12-03 at 20.55.35.png" style="max-width:100%;" onclick="openLightbox(this)"/>
225 - </div>
226 - <div class="fig">
227 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/1766339171500-131.png" alt="Figure 2.3. Dispatch marks interface" style="max-width:100%;" onclick="openLightbox(this)"/>
228 - <p class="fig-cap">Figure 2.3. Dispatch marks interface</p>
229 - </div>
230 - <div class="fig">
231 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2020.58.29.png" alt="Figure 2.4. Calling object measurements" style="max-width:100%;" onclick="openLightbox(this)"/>
232 - <p class="fig-cap">Figure 2.4. Calling object measurements</p>
233 - </div>
234 - <div class="fig">
235 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.01.06.png" alt="Screenshot 2025-12-03 at 21.01.06.png" style="max-width:100%;" onclick="openLightbox(this)"/>
236 - </div>
237 - <div class="fig">
238 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.01.36.png" alt="Screenshot 2025-12-03 at 21.01.36.png" style="max-width:100%;" onclick="openLightbox(this)"/>
239 - </div>
240 - <div class="fig">
241 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.02.31.png" alt="Screenshot 2025-12-03 at 21.02.31.png" style="max-width:100%;" onclick="openLightbox(this)"/>
242 - </div>
243 - <div class="fig">
244 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.03.24.png" alt="Figure 2.5. Setpoints" style="max-width:100%;" onclick="openLightbox(this)"/>
245 - <p class="fig-cap">Figure 2.5. Setpoints</p>
246 - </div>
247 - <div class="fig">
248 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.03.57.png" alt="Figure 2.6. Setpoint settings" style="max-width:100%;" onclick="openLightbox(this)"/>
249 - <p class="fig-cap">Figure 2.6. Setpoint settings</p>
250 - </div>
251 - <div class="fig">
252 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.04.36.png" alt="Figure 2.7. Measurements of the IM object" style="max-width:100%;" onclick="openLightbox(this)"/>
253 - <p class="fig-cap">Figure 2.7. Measurements of the IM object</p>
254 - </div>
255 - <div class="fig">
256 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.05.55.png" alt="Screenshot 2025-12-03 at 21.05.55.png" style="max-width:100%;" onclick="openLightbox(this)"/>
257 - </div>
258 - <div class="fig">
259 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.06.45.png" alt="Figure 2.8. Highlighting tag values associated with a technology event" style="max-width:100%;" onclick="openLightbox(this)"/>
260 - <p class="fig-cap">Figure 2.8. Highlighting tag values associated with a technology event</p>
261 - </div>
262 - <h2 id="s-management">3. Mimic Diagram Management <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-management')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h2>
263 - <p>Diagrams are managed via <strong>Settings - Diagrams</strong>. The page lists all diagrams with options to create, rename, copy, delete, hide, and check for missing tags.</p>
264 - <div class="fig">
265 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.08.33.png" alt="Figure 3.1. Mimic diagrams page" style="max-width:100%;" onclick="openLightbox(this)"/>
266 - <p class="fig-cap">Figure 3.1. Mimic diagrams page</p>
267 - </div>
268 - <div class="fig">
269 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.09.11.png" alt="Screenshot 2025-12-03 at 21.09.11.png" style="max-width:100%;" onclick="openLightbox(this)"/>
270 - </div>
271 - <div class="fig">
272 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.09.41.png" alt="Figure 3.2. New scheme window" style="max-width:100%;" onclick="openLightbox(this)"/>
273 - <p class="fig-cap">Figure 3.2. New scheme window</p>
274 - </div>
275 - <div class="fig">
276 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.10.28.png" alt="Screenshot 2025-12-03 at 21.10.28.png" style="max-width:100%;" onclick="openLightbox(this)"/>
277 - </div>
278 - <div class="fig">
279 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.11.01.png" alt="Screenshot 2025-12-03 at 21.11.01.png" style="max-width:100%;" onclick="openLightbox(this)"/>
280 - </div>
281 - <div class="fig">
282 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.11.55.png" alt="Screenshot 2025-12-03 at 21.11.55.png" style="max-width:100%;" onclick="openLightbox(this)"/>
283 - </div>
284 - <div class="fig">
285 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.12.22.png" alt="Screenshot 2025-12-03 at 21.12.22.png" style="max-width:100%;" onclick="openLightbox(this)"/>
286 - </div>
287 - <div class="fig">
288 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.12.56.png" alt="Screenshot 2025-12-03 at 21.12.56.png" style="max-width:100%;" onclick="openLightbox(this)"/>
289 - </div>
290 - <div class="fig">
291 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.13.23.png" alt="Screenshot 2025-12-03 at 21.13.23.png" style="max-width:100%;" onclick="openLightbox(this)"/>
292 - </div>
293 - <div class="fig">
294 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.13.55.png" alt="Screenshot 2025-12-03 at 21.13.55.png" style="max-width:100%;" onclick="openLightbox(this)"/>
295 - </div>
296 - <div class="fig">
297 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.14.23.png" alt="Figure 3.3. Hiding diagrams in the tree" style="max-width:100%;" onclick="openLightbox(this)"/>
298 - <p class="fig-cap">Figure 3.3. Hiding diagrams in the tree</p>
299 - </div>
300 - <div class="fig">
301 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.15.40.png" alt="Screenshot 2025-12-03 at 21.15.40.png" style="max-width:100%;" onclick="openLightbox(this)"/>
302 - </div>
303 - <div class="fig">
304 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.16.11.png" alt="Screenshot 2025-12-03 at 21.16.11.png" style="max-width:100%;" onclick="openLightbox(this)"/>
305 - </div>
306 - <div class="fig">
307 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.16.38.png" alt="Screenshot 2025-12-03 at 21.16.38.png" style="max-width:100%;" onclick="openLightbox(this)"/>
308 - </div>
309 - <div class="fig">
310 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2021.20.20.png" alt="Figure 3.4. Missing tags" style="max-width:100%;" onclick="openLightbox(this)"/>
311 - <p class="fig-cap">Figure 3.4. Missing tags</p>
312 - </div>
313 - <h3 id="s-diagpage">3.1. Diagram Page Interface <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-diagpage')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h3>
314 - <p>The diagram management page provides the full list of diagrams with search, filters, and per-diagram action buttons.</p>
315 - <div class="fig">
316 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2022.05.04.png" alt="Screenshot 2025-12-03 at 22.05.04.png" style="max-width:100%;" onclick="openLightbox(this)"/>
317 - </div>
318 - <div class="fig">
319 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-03%20at%2022.08.32.png" alt="Screenshot 2025-12-03 at 22.08.32.png" style="max-width:100%;" onclick="openLightbox(this)"/>
320 - </div>
321 - <h2 id="s-editor">4. Diagram Editor <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-editor')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h2>
322 - <p>The graphical editor is opened from the diagrams management page. It has three main zones: top main menu, left templates panel, and right properties panel.</p>
323 - <div class="fig">
324 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.17.41.png" alt="Figure 4.1. Editor interface" style="max-width:100%;" onclick="openLightbox(this)"/>
325 - <p class="fig-cap">Figure 4.1. Editor interface</p>
326 - </div>
327 - <details class="acc" id="s-editor-ui">
328 - <summary><span class="acc-num">4.1</span><span class="acc-title">Graphical Editor Interface</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-editor-ui')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
329 - <div class="acc-body"><p>Three zones: top main menu (file, view, arrangement); left Categories panel (graphic tools and user templates); right Properties panel (element config).</p> <div class="fig">
330 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.22.13.png" alt="Figure 4.2. Graphic templates" style="max-width:100%;" onclick="openLightbox(this)"/>
331 - <p class="fig-cap">Figure 4.2. Graphic templates</p>
332 - </div> <div class="fig">
333 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.23.25.png" alt="Figure 4.3. Object properties" style="max-width:100%;" onclick="openLightbox(this)"/>
334 - <p class="fig-cap">Figure 4.3. Object properties</p>
335 - </div></div>
336 - </details>
337 - <details class="acc" id="s-binding-params">
338 - <summary><span class="acc-num">4.2</span><span class="acc-title">Binding of Parameters: General Information</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-binding-params')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
339 - <div class="acc-body"><p>Select an element and click <strong>Setting up rules</strong> to open the Component visual settings window for binding tags, channels, or IM attributes.</p> <div class="fig">
340 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.24.58.png" alt="Figure 4.4. Component visual settings window" style="max-width:100%;" onclick="openLightbox(this)"/>
341 - <p class="fig-cap">Figure 4.4. Component visual settings window</p>
342 - </div> <div class="fig">
343 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.31.29.png" alt="Figure 4.5. Binding an element to a tag or channel" style="max-width:100%;" onclick="openLightbox(this)"/>
344 - <p class="fig-cap">Figure 4.5. Binding an element to a tag or channel</p>
345 - </div> <div class="fig">
346 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.32.04.png" alt="Figure 4.6. Tag and channel tree interface" style="max-width:100%;" onclick="openLightbox(this)"/>
347 - <p class="fig-cap">Figure 4.6. Tag and channel tree interface</p>
348 - </div></div>
349 - </details>
350 - <details class="acc" id="s-custom-cat">
351 - <summary><span class="acc-num">4.3</span><span class="acc-title">Adding Objects to Custom Categories</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-custom-cat')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
352 - <div class="acc-body"><p>Custom graphic templates can be saved to user categories for reuse across diagrams.</p> <div class="fig">
353 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.33.11.png" alt="Figure 4.7. Adding a new component" style="max-width:100%;" onclick="openLightbox(this)"/>
354 - <p class="fig-cap">Figure 4.7. Adding a new component</p>
355 - </div></div>
356 - </details>
357 - <details class="acc" id="s-lib">
358 - <summary><span class="acc-num">4.4</span><span class="acc-title">Importing and Exporting a Library of Elements</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-lib')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
359 - <div class="acc-body"><p>Element library transfer (export/import) is only available in editing mode. Use to migrate element libraries between CENTO servers.</p> <div class="fig">
360 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.35.15.png" alt="Figure 4.8. Export library modal window" style="max-width:100%;" onclick="openLightbox(this)"/>
361 - <p class="fig-cap">Figure 4.8. Export library modal window</p>
362 - </div> <div class="fig">
363 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.35.44.png" alt="Figure 4.9. Import library modal window" style="max-width:100%;" onclick="openLightbox(this)"/>
364 - <p class="fig-cap">Figure 4.9. Import library modal window</p>
365 - </div> <div class="fig">
366 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.36.09.png" alt="Figure 4.10. Imported category" style="max-width:100%;" onclick="openLightbox(this)"/>
367 - <p class="fig-cap">Figure 4.10. Imported category</p>
368 - </div></div>
369 - </details>
370 - <details class="acc" id="s-auto-replace">
371 - <summary><span class="acc-num">4.5</span><span class="acc-title">Auto-replace Active Objects</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-auto-replace')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
372 - <div class="acc-body"><p>Swaps all instances of an active object type across a diagram with a different element while preserving bindings.</p> <div class="fig">
373 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.37.31.png" alt="Figure 4.11. Replace with another element" style="max-width:100%;" onclick="openLightbox(this)"/>
374 - <p class="fig-cap">Figure 4.11. Replace with another element</p>
375 - </div> <div class="fig">
376 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2012.38.14.png" alt="Figure 4.12. Activation of the Connectable parameter" style="max-width:100%;" onclick="openLightbox(this)"/>
377 - <p class="fig-cap">Figure 4.12. Activation of the Connectable parameter</p>
378 - </div> <div class="fig">
379 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.11.02.png" alt="Figure 4.13. Prompt when trying to connect a line to an active object" style="max-width:100%;" onclick="openLightbox(this)"/>
380 - <p class="fig-cap">Figure 4.13. Prompt when trying to connect a line to an active object</p>
381 - </div> <div class="fig">
382 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.11.47.png" alt="Figure 4.14. Selecting similar elements is not available" style="max-width:100%;" onclick="openLightbox(this)"/>
383 - <p class="fig-cap">Figure 4.14. Selecting similar elements is not available</p>
384 - </div></div>
385 - </details>
386 - <details class="acc" id="s-color-replace">
387 - <summary><span class="acc-num">4.6</span><span class="acc-title">Auto-replace of Colors Used in Diagrams</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-color-replace')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
388 - <div class="acc-body"><p>Bulk color replacement changes all instances of a specific color on a diagram in one operation.</p> <div class="fig">
389 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.12.37.png" alt="Figure 4.15. Color replacement modal window" style="max-width:100%;" onclick="openLightbox(this)"/>
390 - <p class="fig-cap">Figure 4.15. Color replacement modal window</p>
391 - </div></div>
392 - </details>
393 - <details class="acc" id="s-anim-frame">
394 - <summary><span class="acc-num">4.7</span><span class="acc-title">Setting Up an Animation Frame for Technological Events</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-anim-frame')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
395 - <div class="acc-body"><p>An animation frame can be configured on diagram objects so they visually respond to specific technological events.</p> <div class="fig">
396 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.13.43.png" alt="Figure 4.16. Scheme settings modal window" style="max-width:100%;" onclick="openLightbox(this)"/>
397 - <p class="fig-cap">Figure 4.16. Scheme settings modal window</p>
398 - </div></div>
399 - </details>
400 - <details class="acc" id="s-charts">
401 - <summary><span class="acc-num">4.8</span><span class="acc-title">Chart Settings</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-charts')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
402 - <div class="acc-body"><p>Diagrams support adding charts for real-time parameter monitoring and future data display (planned vs. actual).</p> <div class="fig">
403 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.15.15.png" alt="Figure 4.17. Charts object" style="max-width:100%;" onclick="openLightbox(this)"/>
404 - <p class="fig-cap">Figure 4.17. Charts object</p>
405 - </div> <div class="fig">
406 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.16.36.png" alt="Figure 4.18. Edit data of chart modal window" style="max-width:100%;" onclick="openLightbox(this)"/>
407 - <p class="fig-cap">Figure 4.18. Edit data of chart modal window</p>
408 - </div> <div class="fig">
409 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.18.01.png" alt="Figure 4.19. Chart in the diagram viewer" style="max-width:100%;" onclick="openLightbox(this)"/>
410 - <p class="fig-cap">Figure 4.19. Chart in the diagram viewer</p>
411 - </div> <div class="fig">
412 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.18.57.png" alt="Figure 4.20. Edit the data of the chart" style="max-width:100%;" onclick="openLightbox(this)"/>
413 - <p class="fig-cap">Figure 4.20. Edit the data of the chart</p>
414 - </div> <div class="fig">
415 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.19.47.png" alt="Figure 4.21. Chart in the diagram viewer" style="max-width:100%;" onclick="openLightbox(this)"/>
416 - <p class="fig-cap">Figure 4.21. Chart in the diagram viewer</p>
417 - </div> <div class="fig">
418 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.20.34.png" alt="Figure 4.22. Edit the data of the chart" style="max-width:100%;" onclick="openLightbox(this)"/>
419 - <p class="fig-cap">Figure 4.22. Edit the data of the chart</p>
420 - </div> <div class="fig">
421 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.21.50.png" alt="Figure 4.23. Forecasting chart" style="max-width:100%;" onclick="openLightbox(this)"/>
422 - <p class="fig-cap">Figure 4.23. Forecasting chart</p>
423 - </div></div>
424 - </details>
425 - <details class="acc" id="s-level">
426 - <summary><span class="acc-num">4.9</span><span class="acc-title">Setting Up Level Indicators</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-level')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
427 - <div class="acc-body"><p>Level indicators represent tag values as fill percentages within container shapes.</p> <div class="fig">
428 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.23.18.png" alt="Figure 4.24. Water level parameter output" style="max-width:100%;" onclick="openLightbox(this)"/>
429 - <p class="fig-cap">Figure 4.24. Water level parameter output</p>
430 - </div> <div class="fig">
431 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.24.38.png" alt="Figure 4.25. Setting the fill depending on the values" style="max-width:100%;" onclick="openLightbox(this)"/>
432 - <p class="fig-cap">Figure 4.25. Setting the fill depending on the values</p>
433 - </div></div>
434 - </details>
435 - <details class="acc" id="s-active-props">
436 - <summary><span class="acc-num">4.10</span><span class="acc-title">Properties of Active Objects</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-active-props')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
437 - <div class="acc-body"><p>Each active object has configurable properties: context menus, animation, poster display, highlight behaviour, and measurement table view.</p> <div class="fig">
438 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.26.04.png" alt="Figure 4.26. Edit the data of the element" style="max-width:100%;" onclick="openLightbox(this)"/>
439 - <p class="fig-cap">Figure 4.26. Edit the data of the element</p>
440 - </div> <div class="fig">
441 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.27.06.png" alt="Figure 4.27. Disabling context menus, posters, and animations" style="max-width:100%;" onclick="openLightbox(this)"/>
442 - <p class="fig-cap">Figure 4.27. Disabling context menus, posters, and animations</p>
443 - </div> <div class="fig">
444 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.28.03.png" alt="Figure 4.28. Highlighting of an active element" style="max-width:100%;" onclick="openLightbox(this)"/>
445 - <p class="fig-cap">Figure 4.28. Highlighting of an active element</p>
446 - </div> <div class="fig">
447 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.29.40.png" alt="Figure 4.29. Highlighting and hiding the active element" style="max-width:100%;" onclick="openLightbox(this)"/>
448 - <p class="fig-cap">Figure 4.29. Highlighting and hiding the active element</p>
449 - </div> <div class="fig">
450 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.30.35.png" alt="Figure 4.30. Changing the view of the measurement table" style="max-width:100%;" onclick="openLightbox(this)"/>
451 - <p class="fig-cap">Figure 4.30. Changing the view of the measurement table</p>
452 - </div></div>
453 - </details>
454 - <details class="acc" id="s-manual-input">
455 - <summary><span class="acc-num">4.11</span><span class="acc-title">Simplified Manual Input from a Diagram</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-manual-input')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
456 - <div class="acc-body"><p>Tag values can be entered manually directly from diagram objects without opening the measurements window.</p> <div class="fig">
457 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.31.44.png" alt="Figure 4.31. Manual input object" style="max-width:100%;" onclick="openLightbox(this)"/>
458 - <p class="fig-cap">Figure 4.31. Manual input object</p>
459 - </div> <div class="fig">
460 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.32.15.png" alt="Figure 4.32. Editing the manual input window" style="max-width:100%;" onclick="openLightbox(this)"/>
461 - <p class="fig-cap">Figure 4.32. Editing the manual input window</p>
462 - </div> <div class="fig">
463 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.32.50.png" alt="Figure 4.33. Binding the tag to the manual input object" style="max-width:100%;" onclick="openLightbox(this)"/>
464 - <p class="fig-cap">Figure 4.33. Binding the tag to the manual input object</p>
465 - </div> <div class="fig">
466 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.33.15.png" alt="Figure 4.34. Binding to the attribute of the IM object" style="max-width:100%;" onclick="openLightbox(this)"/>
467 - <p class="fig-cap">Figure 4.34. Binding to the attribute of the IM object</p>
468 - </div> <div class="fig">
469 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.33.48.png" alt="Figure 4.35. Viewing a diagram with manual input objects" style="max-width:100%;" onclick="openLightbox(this)"/>
470 - <p class="fig-cap">Figure 4.35. Viewing a diagram with manual input objects</p>
471 - </div> <div class="fig">
472 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.34.21.png" alt="Screenshot 2025-12-04 at 13.34.21.png" style="max-width:100%;" onclick="openLightbox(this)"/>
473 - </div> <div class="fig">
474 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.34.45.png" alt="Screenshot 2025-12-04 at 13.34.45.png" style="max-width:100%;" onclick="openLightbox(this)"/>
475 - </div> <div class="fig">
476 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.35.12.png" alt="Screenshot 2025-12-04 at 13.35.12.png" style="max-width:100%;" onclick="openLightbox(this)"/>
477 - </div></div>
478 - </details>
479 - <details class="acc" id="s-fixed-input">
480 - <summary><span class="acc-num">4.12</span><span class="acc-title">Input of Fixed Manual Entry Values</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-fixed-input')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
481 - <div class="acc-body"><p>Fixed-value buttons allow operators to apply preset values with a single click.</p> <div class="fig">
482 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.36.08.png" alt="Figure 4.36. Manual input button configuration" style="max-width:100%;" onclick="openLightbox(this)"/>
483 - <p class="fig-cap">Figure 4.36. Manual input button configuration</p>
484 - </div> <div class="fig">
485 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.38.45.png" alt="Figure 4.37. Manual input value button" style="max-width:100%;" onclick="openLightbox(this)"/>
486 - <p class="fig-cap">Figure 4.37. Manual input value button</p>
487 - </div></div>
488 - </details>
489 - <details class="acc" id="s-links">
490 - <summary><span class="acc-num">4.13</span><span class="acc-title">Links to External Sources and Other Diagrams</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-links')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
491 - <div class="acc-body"><p>Links can be configured on diagram objects to navigate to external URLs, local pages, other diagrams, or pre-filtered analysis views.</p> <div class="fig">
492 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.39.27.png" alt="Figure 4.38. Adding links" style="max-width:100%;" onclick="openLightbox(this)"/>
493 - <p class="fig-cap">Figure 4.38. Adding links</p>
494 - </div> <div class="fig">
495 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.40.17.png" alt="Figure 4.39. Clicking on a link over the mimic diagram" style="max-width:100%;" onclick="openLightbox(this)"/>
496 - <p class="fig-cap">Figure 4.39. Clicking on a link over the mimic diagram</p>
497 - </div> <div class="fig">
498 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.42.18.png" alt="Figure 4.40. Tag selection window in Real-time data analysis" style="max-width:100%;" onclick="openLightbox(this)"/>
499 - <p class="fig-cap">Figure 4.40. Tag selection window in Real-time data analysis</p>
500 - </div> <div class="fig">
501 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.42.58.png" alt="Figure 4.41. Link in Real-time data analysis" style="max-width:100%;" onclick="openLightbox(this)"/>
502 - <p class="fig-cap">Figure 4.41. Link in Real-time data analysis</p>
503 - </div> <div class="fig">
504 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.43.35.png" alt="Figure 4.42. Opening the link over the diagram" style="max-width:100%;" onclick="openLightbox(this)"/>
505 - <p class="fig-cap">Figure 4.42. Opening the link over the diagram</p>
506 - </div></div>
507 - </details>
508 - <details class="acc" id="s-grounding">
509 - <summary><span class="acc-num">4.14</span><span class="acc-title">Installing Portable Grounding on Diagrams</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-grounding')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
510 - <div class="acc-body"><p>Portable grounding is enabled in <strong>Settings - Diagrams - Edit - Extras - Scheme settings</strong>.</p> <div class="fig">
511 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.44.28.png" alt="Figure 4.43. Enabling portable grounding" style="max-width:100%;" onclick="openLightbox(this)"/>
512 - <p class="fig-cap">Figure 4.43. Enabling portable grounding</p>
513 - </div> <div class="fig">
514 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.45.01.png" alt="Screenshot 2025-12-04 at 13.45.01.png" style="max-width:100%;" onclick="openLightbox(this)"/>
515 - </div> <div class="fig">
516 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.45.24.png" alt="Figure 4.44. Portable grounding settings" style="max-width:100%;" onclick="openLightbox(this)"/>
517 - <p class="fig-cap">Figure 4.44. Portable grounding settings</p>
518 - </div> <div class="fig">
519 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.45.53.png" alt="Figure 4.45. Installation of portable grounding" style="max-width:100%;" onclick="openLightbox(this)"/>
520 - <p class="fig-cap">Figure 4.45. Installation of portable grounding</p>
521 - </div> <div class="fig">
522 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.46.24.png" alt="Figure 4.46. Information on installed portable grounding" style="max-width:100%;" onclick="openLightbox(this)"/>
523 - <p class="fig-cap">Figure 4.46. Information on installed portable grounding</p>
524 - </div></div>
525 - </details>
526 - <details class="acc" id="s-highlight-lines">
527 - <summary><span class="acc-num">4.15</span><span class="acc-title">Highlighting Lines When Hovering</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-highlight-lines')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
528 - <div class="acc-body"><p>In viewing mode, hover backlight on line-type objects can be configured to highlight connected elements - useful for tracing connections on large diagrams.</p> <div class="fig">
529 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.47.20.png" alt="Figure 4.47. Highlighting of connected lines" style="max-width:100%;" onclick="openLightbox(this)"/>
530 - <p class="fig-cap">Figure 4.47. Highlighting of connected lines</p>
531 - </div></div>
532 - </details>
533 - <details class="acc" id="s-exponential">
534 - <summary><span class="acc-num">4.16</span><span class="acc-title">Outputting Numbers in Exponential Form</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-exponential')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
535 - <div class="acc-body"><p>Large numeric values can be displayed in exponential notation on diagram elements.</p> <div class="fig">
536 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.48.10.png" alt="Figure 4.48. Enabling the exponential form" style="max-width:100%;" onclick="openLightbox(this)"/>
537 - <p class="fig-cap">Figure 4.48. Enabling the exponential form</p>
538 - </div> <div class="fig">
539 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.49.12.png" alt="Figure 4.49. Displaying a number in exponential form" style="max-width:100%;" onclick="openLightbox(this)"/>
540 - <p class="fig-cap">Figure 4.49. Displaying a number in exponential form</p>
541 - </div></div>
542 - </details>
543 - <details class="acc" id="s-delimited">
544 - <summary><span class="acc-num">4.17</span><span class="acc-title">Displaying Delimited Values</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-delimited')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
545 - <div class="acc-body"><p>Instant tag values can be displayed with digit grouping separators (enabled by default).</p> <div class="fig">
546 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.50.42.png" alt="Figure 4.50. Displaying delimited values" style="max-width:100%;" onclick="openLightbox(this)"/>
547 - <p class="fig-cap">Figure 4.50. Displaying delimited values</p>
548 - </div></div>
549 - </details>
550 - <details class="acc" id="s-metering-display">
551 - <summary><span class="acc-num">4.18</span><span class="acc-title">Display of Metering Data on the Diagram</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-metering-display')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
552 - <div class="acc-body"><p>Metering channel data can be displayed as charts (section 4.8) or as direct value bindings.</p> <div class="fig">
553 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.51.42.png" alt="Figure 4.51. Binding the metering channel" style="max-width:100%;" onclick="openLightbox(this)"/>
554 - <p class="fig-cap">Figure 4.51. Binding the metering channel</p>
555 - </div> <div class="fig">
556 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.52.24.png" alt="Figure 4.52. Value of the metering channel" style="max-width:100%;" onclick="openLightbox(this)"/>
557 - <p class="fig-cap">Figure 4.52. Value of the metering channel</p>
558 - </div> <div class="fig">
559 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2013.52.57.png" alt="Figure 4.53. Table" style="max-width:100%;" onclick="openLightbox(this)"/>
560 - <p class="fig-cap">Figure 4.53. Table</p>
561 - </div> <div class="fig">
562 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.07.04.png" alt="Figure 4.54. Metering channel binding" style="max-width:100%;" onclick="openLightbox(this)"/>
563 - <p class="fig-cap">Figure 4.54. Metering channel binding</p>
564 - </div> <div class="fig">
565 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.10.47.png" alt="Figure 4.55. Display of metering channel data" style="max-width:100%;" onclick="openLightbox(this)"/>
566 - <p class="fig-cap">Figure 4.55. Display of metering channel data</p>
567 - </div> <div class="fig">
568 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.11.51.png" alt="Figure 4.56. Sensor graphic element" style="max-width:100%;" onclick="openLightbox(this)"/>
569 - <p class="fig-cap">Figure 4.56. Sensor graphic element</p>
570 - </div> <div class="fig">
571 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.12.20.png" alt="Screenshot 2025-12-04 at 14.12.20.png" style="max-width:100%;" onclick="openLightbox(this)"/>
572 - </div> <div class="fig">
573 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.13.22.png" alt="Figure 4.57. Binding to the tag ID" style="max-width:100%;" onclick="openLightbox(this)"/>
574 - <p class="fig-cap">Figure 4.57. Binding to the tag ID</p>
575 - </div></div>
576 - </details>
577 - <details class="acc" id="s-heatmaps">
578 - <summary><span class="acc-num">4.19</span><span class="acc-title">Heatmaps</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-heatmaps')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
579 - <div class="acc-body"> <div class="note note-info">
580 - <div class="note-hd"><span>&#x2139;</span> Note</div>
581 - <div class="note-body">Heatmap functionality requires an active license for the corresponding module.</div>
582 - </div> <div class="fig">
583 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.13.52.png" alt="Figure 4.58. Create heatmap" style="max-width:100%;" onclick="openLightbox(this)"/>
584 - <p class="fig-cap">Figure 4.58. Create heatmap</p>
585 - </div> <div class="fig">
586 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.14.27.png" alt="Figure 4.59. Editing heatmap properties" style="max-width:100%;" onclick="openLightbox(this)"/>
587 - <p class="fig-cap">Figure 4.59. Editing heatmap properties</p>
588 - </div> <div class="fig">
589 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.14.52.png" alt="Figure 4.60. Heatmap" style="max-width:100%;" onclick="openLightbox(this)"/>
590 - <p class="fig-cap">Figure 4.60. Heatmap</p>
591 - </div></div>
592 - </details>
593 - <details class="acc" id="s-layers">
594 - <summary><span class="acc-num">4.20</span><span class="acc-title">Layers</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-layers')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
595 - <div class="acc-body"><p>In editing mode, diagram sections can be placed in separate layers to optimise work with large diagrams. Layers have no effect in viewing mode.</p> <div class="fig">
596 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.15.37.png" alt="Figure 4.61. Layers menu" style="max-width:100%;" onclick="openLightbox(this)"/>
597 - <p class="fig-cap">Figure 4.61. Layers menu</p>
598 - </div></div>
599 - </details>
600 - <details class="acc" id="s-svg">
601 - <summary><span class="acc-num">4.21</span><span class="acc-title">Active SVG Elements</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-svg')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
602 - <div class="acc-body"><p>The editor supports importing SVG graphic templates. Active SVG elements optimise performance and enable CSS/SVG-based animation for technological processes.</p> <div class="fig">
603 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.17.19.png" alt="Figure 4.62. Import animated SVGs" style="max-width:100%;" onclick="openLightbox(this)"/>
604 - <p class="fig-cap">Figure 4.62. Import animated SVGs</p>
605 - </div> <div class="fig">
606 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.17.47.png" alt="Figure 4.63. Import animated SVGs" style="max-width:100%;" onclick="openLightbox(this)"/>
607 - <p class="fig-cap">Figure 4.63. Import animated SVGs</p>
608 - </div> <div class="fig">
609 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.18.12.png" alt="Figure 4.64. Animated SVG" style="max-width:100%;" onclick="openLightbox(this)"/>
610 - <p class="fig-cap">Figure 4.64. Animated SVG</p>
611 - </div> <div class="fig">
612 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.18.44.png" alt="Figure 4.65. Legend for switch positions" style="max-width:100%;" onclick="openLightbox(this)"/>
613 - <p class="fig-cap">Figure 4.65. Legend for switch positions</p>
614 - </div> <div class="fig">
615 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.19.10.png" alt="Figure 4.66. Graphic elements" style="max-width:100%;" onclick="openLightbox(this)"/>
616 - <p class="fig-cap">Figure 4.66. Graphic elements</p>
617 - </div> <div class="fig">
618 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.19.47.png" alt="Figure 4.67. Rules for animated SVG" style="max-width:100%;" onclick="openLightbox(this)"/>
619 - <p class="fig-cap">Figure 4.67. Rules for animated SVG</p>
620 - </div> <div class="fig">
621 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.21.36.png" alt="Figure 4.68. Animated image" style="max-width:100%;" onclick="openLightbox(this)"/>
622 - <p class="fig-cap">Figure 4.68. Animated image</p>
623 - </div></div>
624 - </details>
625 - <details class="acc" id="s-conversion">
626 - <summary><span class="acc-num">4.22</span><span class="acc-title">Conversion of Diagrams from Editor v2 to v3</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-conversion')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
627 - <div class="acc-body"><p>To convert a v2 diagram to v3, press <code>Alt+Shift+D</code> in the editor, then select version 3 from the version selector in the horizontal menu.</p> <div class="fig">
628 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.25.20.png" alt="Figure 4.69. Warning about switching to editor version 3" style="max-width:100%;" onclick="openLightbox(this)"/>
629 - <p class="fig-cap">Figure 4.69. Warning about switching to editor version 3</p>
630 - </div></div>
631 - </details>
632 - <details class="acc" id="s-im-display">
633 - <summary><span class="acc-num">4.23</span><span class="acc-title">Display of the IM Object Name and Tag Measurement Units</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-im-display')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
634 - <div class="acc-body"><p>Tag data can be displayed in different modes: value, IM object name, measurement units, or combined.</p> <div class="fig">
635 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.26.29.png" alt="Figure 4.70. Options for displaying tag data" style="max-width:100%;" onclick="openLightbox(this)"/>
636 - <p class="fig-cap">Figure 4.70. Options for displaying tag data</p>
637 - </div> <div class="fig">
638 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.27.28.png" alt="Figure 4.71. IM measurement" style="max-width:100%;" onclick="openLightbox(this)"/>
639 - <p class="fig-cap">Figure 4.71. IM measurement</p>
640 - </div> <div class="fig">
641 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.27.52.png" alt="Figure 4.72. IM object" style="max-width:100%;" onclick="openLightbox(this)"/>
642 - <p class="fig-cap">Figure 4.72. IM object</p>
643 - </div> <div class="fig">
644 - <img src="/xwiki/bin/download/CENTO%20Manuals/Mnemonics%20Development/WebHome/Screenshot%202025-12-04%20at%2014.28.24.png" alt="Screenshot 2025-12-04 at 14.28.24.png" style="max-width:100%;" onclick="openLightbox(this)"/>
645 - </div></div>
646 - </details>
647 - <details class="acc" id="s-upload-download">
648 - <summary><span class="acc-num">4.24</span><span class="acc-title">Uploading / Downloading Diagrams</span><a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-upload-download')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></summary>
649 - <div class="acc-body"><p>Diagram files can be uploaded and downloaded from the Mimic diagrams management page via the <strong>Actions</strong> column, enabling backup, migration, and sharing of diagrams between CENTO installations.</p></div>
650 - </details>
651 - <h2 id="s-binding">5. Binding Tags to the Diagram Using ID or Code <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-binding')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h2>
652 - <h3 id="s-bind-devices">5.2. Binding Devices to the Diagram <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-bind-devices')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h3>
653 - <p>Device objects reflect communication status. Device status values:</p>
654 - <table class="rn-table" style="max-width:480px">
655 - <thead><tr><th style="width:60px">Status</th><th>Meaning</th></tr></thead>
656 - <tbody>
657 - <tr><td><span class="sc">0</span></td><td>Disabled</td></tr>
658 - <tr><td><span class="sc">1</span></td><td>Normal</td></tr>
659 - <tr><td><span class="sc">2</span></td><td>Data in device with errors</td></tr>
660 - <tr><td><span class="sc">3</span></td><td>Device unavailable</td></tr>
661 - <tr><td><span class="sc">4</span></td><td>Manual input data present</td></tr>
662 - <tr><td><span class="sc">9</span></td><td>Status not available</td></tr>
663 - </tbody>
664 - </table>
665 - <h3 id="s-bind-im">5.3. Binding Parameters to Information Model Objects <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-bind-im')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h3>
666 - <p>Tags and channels can be bound to IM objects and their attributes, enabling diagrams to reflect IM hierarchy automatically. See the <strong>Information Model Setup Manual</strong> for IM configuration.</p>
667 - <h2 id="s-abbrev">Abbreviations <a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-abbrev')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"/></svg></a></h2>
668 - <table class="rn-table" style="max-width:480px">
669 - <thead><tr><th style="width:80px">Term</th><th>Definition</th></tr></thead>
670 - <tbody>
671 - <tr><td><strong>IM</strong></td><td>Information Model</td></tr>
672 - <tr><td><strong>SCADA</strong></td><td>Supervisory Control and Data Acquisition</td></tr>
673 - <tr><td><strong>SVG</strong></td><td>Scalable Vector Graphics</td></tr>
674 - <tr><td><strong>RMB</strong></td><td>Right Mouse Button</td></tr>
675 - <tr><td><strong>LMB</strong></td><td>Left Mouse Button</td></tr>
676 - </tbody>
677 - </table>
678 - <div class="parent-topic">Parent topic: <a href="[[CENTO Manuals>>doc:CENTO Manuals.WebHome]]">CENTO Manuals</a></div>
37 +[[image:Screenshot 2025-12-03 at 20.47.15.png]]
679 679  
680 -</div><!-- /doc-content -->
39 +The tree structure is organized by folders and additionally sorted in ascending order based on the defined position within each folder.
681 681  
682 -<nav class="doc-toc">
683 - <div class="toc-header">
684 - <strong>On This Page</strong>
685 - <button class="toc-toggle" id="toc-tog" title="Collapse">&laquo;</button>
686 - </div>
687 - <ul id="toc-list">
688 - <li class="tl1"><a href="#s-intro" data-toc>1. Introduction</a></li>
689 - <li class="tl1"><a href="#s-viewing" data-toc>2. Viewing Diagrams</a></li>
690 - <li class="tl1"><a href="#s-management" data-toc>3. Diagram Management</a></li>
691 - <li class="tl2"><a href="#s-diagpage" data-toc>3.1 Page Interface</a></li>
692 - <li class="tl1"><a href="#s-editor" data-toc>4. Diagram Editor</a></li>
693 - <li class="tl2"><a href="#s-editor-ui" data-toc>4.1 Editor Interface</a></li>
694 - <li class="tl2"><a href="#s-binding-params" data-toc>4.2 Parameter Binding</a></li>
695 - <li class="tl2"><a href="#s-custom-cat" data-toc>4.3 Custom Categories</a></li>
696 - <li class="tl2"><a href="#s-lib" data-toc>4.4 Library Import/Export</a></li>
697 - <li class="tl2"><a href="#s-auto-replace" data-toc>4.5 Auto-replace Objects</a></li>
698 - <li class="tl2"><a href="#s-color-replace" data-toc>4.6 Color Auto-replace</a></li>
699 - <li class="tl2"><a href="#s-anim-frame" data-toc>4.7 Animation Frame</a></li>
700 - <li class="tl2"><a href="#s-charts" data-toc>4.8 Chart Settings</a></li>
701 - <li class="tl2"><a href="#s-level" data-toc>4.9 Level Indicators</a></li>
702 - <li class="tl2"><a href="#s-active-props" data-toc>4.10 Active Object Props</a></li>
703 - <li class="tl2"><a href="#s-manual-input" data-toc>4.11 Manual Input</a></li>
704 - <li class="tl2"><a href="#s-fixed-input" data-toc>4.12 Fixed Input Values</a></li>
705 - <li class="tl2"><a href="#s-links" data-toc>4.13 Links</a></li>
706 - <li class="tl2"><a href="#s-grounding" data-toc>4.14 Portable Grounding</a></li>
707 - <li class="tl2"><a href="#s-highlight-lines" data-toc>4.15 Line Highlighting</a></li>
708 - <li class="tl2"><a href="#s-exponential" data-toc>4.16 Exponential Numbers</a></li>
709 - <li class="tl2"><a href="#s-delimited" data-toc>4.17 Delimited Values</a></li>
710 - <li class="tl2"><a href="#s-metering-display" data-toc>4.18 Metering Display</a></li>
711 - <li class="tl2"><a href="#s-heatmaps" data-toc>4.19 Heatmaps</a></li>
712 - <li class="tl2"><a href="#s-layers" data-toc>4.20 Layers</a></li>
713 - <li class="tl2"><a href="#s-svg" data-toc>4.21 Active SVG</a></li>
714 - <li class="tl2"><a href="#s-conversion" data-toc>4.22 v2 to v3 Conversion</a></li>
715 - <li class="tl2"><a href="#s-im-display" data-toc>4.23 IM Display</a></li>
716 - <li class="tl2"><a href="#s-upload-download" data-toc>4.24 Upload/Download</a></li>
717 - <li class="tl1"><a href="#s-binding" data-toc>5. Tag Binding</a></li>
718 - <li class="tl2"><a href="#s-bind-devices" data-toc>5.2 Devices</a></li>
719 - <li class="tl2"><a href="#s-bind-im" data-toc>5.3 IM Objects</a></li>
720 - <li class="tl1"><a href="#s-abbrev" data-toc>Abbreviations</a></li>
721 - </ul>
722 -</nav>
41 +The displayed diagrams can be exported to .png files, and sent for printing, thereby they serve to display the current state in a certain period. To do this, click on the **Export** button [[image:Screenshot 2025-12-03 at 20.47.54.png||height="28" width="27"]] on the right side of the screen and select the required menu.
723 723  
724 -</div><!-- /doc-wrap -->
725 -<script>
43 +If the user has the right to edit diagrams, then the **Edit** button [[image:Screenshot 2025-12-03 at 20.48.29.png||height="30" width="29"]] is displayed on the right in the viewing area. When clicking it, the displayed diagram opens in the menu of the built-in editor. Operational guidelines for using the editor are detailed in Section 3 of this manual.
726 726  
727 -(function(){
728 - var bar = document.getElementById('rn-prog');
729 - var top = document.getElementById('rn-top');
730 - window.addEventListener('scroll', function(){
731 - var d = document.documentElement;
732 - var pct = d.scrollTop / (d.scrollHeight - d.clientHeight);
733 - bar.style.width = (pct*100)+'%';
734 - d.scrollTop > 280 ? top.classList.add('on') : top.classList.remove('on');
735 - }, {passive:true});
45 +The **Settings** menu [[image:Screenshot 2025-12-03 at 20.49.07.png||height="33" width="32"]] allows adjustment of the displayed depth of the object path in the header of the **Measurements** menu table (see Fig. 2.2), as well as the format for displaying instantaneous tag values [[image:Screenshot 2025-12-03 at 20.49.34.png||height="32" width="202"]] . Access to this button is granted based on user permissions.
736 736  
737 - /* TOC active via IntersectionObserver */
738 - var links = Array.from(document.querySelectorAll('[data-toc]'));
739 - var secs = links.map(function(a){
740 - return {el: document.getElementById(a.getAttribute('href').slice(1)), a:a};
741 - }).filter(function(s){return s.el;});
47 +The **Debug** mode [[image:Screenshot 2025-12-03 at 20.50.14.png||height="35" width="33"]] allows the diagram designer to configure active templates to display any actions embedded in the logical rules of the elements. After activating this mode, click on the diagram object to be checked. After that, information appears with the attribute code of the IM object, the tag ID number, and its value/quality/status. To apply the values entered in these fields, click on the **Apply** button [[image:Screenshot 2025-12-03 at 20.50.38.png||height="32" width="30"]]. This mode does not change the tag configuration and does not send a signal of the user’s manual input to the system.
742 742  
743 - var busy = false;
744 - var obs = new IntersectionObserver(function(entries){
745 - if (busy) return;
746 - entries.forEach(function(e){
747 - if (!e.isIntersecting) return;
748 - var i = secs.findIndex(function(s){return s.el===e.target;});
749 - if (i<0) return;
750 - secs.forEach(function(s){s.a.classList.remove('toc-on');});
751 - secs[i].a.classList.add('toc-on');
752 - var toc = document.querySelector('.doc-toc');
753 - var link = secs[i].a;
754 - toc.scrollTop = link.offsetTop - toc.offsetTop - toc.clientHeight/2 + link.clientHeight/2;
755 - });
756 - }, {rootMargin:'-8% 0px -60% 0px', threshold:0});
757 - secs.forEach(function(s){obs.observe(s.el);});
49 +[[image:Screenshot 2025-12-03 at 20.51.39.png||height="130" width="683"]]
758 758  
759 - links.forEach(function(a){
760 - a.addEventListener('click', function(e){
761 - var id = a.getAttribute('href').slice(1);
762 - var el = document.getElementById(id);
763 - if (!el) return;
764 - e.preventDefault();
765 - busy = true;
766 - secs.forEach(function(s){s.a.classList.remove('toc-on');});
767 - a.classList.add('toc-on');
768 - el.scrollIntoView({behavior:'smooth',block:'start'});
769 - setTimeout(function(){busy=false;}, 900);
770 - });
771 - });
51 +Figure 2.2. Measurements in the debug mode
772 772  
773 - /* TOC collapse */
774 - var tocList = document.getElementById('toc-list');
775 - var togBtn = document.getElementById('toc-tog');
776 - var collapsed = false;
777 - togBtn && togBtn.addEventListener('click', function(){
778 - collapsed = !collapsed;
779 - tocList.style.display = collapsed ? 'none' : '';
780 - togBtn.textContent = collapsed ? '»' : '«';
781 - });
53 +The playback [[image:Screenshot 2025-12-03 at 20.52.16.png||height="25" width="25"]] mode allows viewing archived data of tag values associated with the diagram. By default, viewing is available for the last 20 minutes, this is the maximum time limit that can be used for any selected period in the calendar drop-down menu. After selecting the date and time, click on the play button [[image:Screenshot 2025-12-03 at 20.52.48.png||height="27" width="27"]].
782 782  
783 - /* Lightbox */
784 - var lb = document.getElementById('rn-lb');
785 - var lbI = document.getElementById('rn-lb-img');
786 - var lbC = document.getElementById('rn-lb-cap');
787 - window.openLightbox = function(img){
788 - lbI.src = img.src; lbI.alt = img.alt; lbC.textContent = img.alt;
789 - lb.classList.add('open'); document.body.style.overflow='hidden';
790 - };
791 - window.closeLightbox = function(){
792 - lb.classList.remove('open'); document.body.style.overflow='';
793 - };
794 - lb.addEventListener('click', function(e){if(e.target===lb)closeLightbox();});
795 - document.addEventListener('keydown', function(e){if(e.key==='Escape')closeLightbox();});
55 +When the button [[image:Screenshot 2025-12-03 at 20.53.18.png||height="30" width="30"]] is pressed, the **Dispatch marks** page is opened (see Fig. 2.3). This interface displays the history of setting and removing dispatch marks. The object tree of the information model (IM) is located on the left side, while the history of mark assignments and removals is shown on the right. The right panel can be exported as a .xlsx table using the button [[image:Screenshot 2025-12-03 at 20.53.43.png||height="28" width="98"]].
796 796  
797 - /* Copy anchor */
798 - var toast = document.getElementById('rn-toast');
799 - var t;
800 - window.copyAnchor = function(id){
801 - var url = location.href.split('#')[0]+'#'+id;
802 - if(navigator.clipboard) navigator.clipboard.writeText(url).catch(function(){});
803 - else { var x=document.createElement('textarea');x.value=url;document.body.appendChild(x);x.select();document.execCommand('copy');document.body.removeChild(x); }
804 - toast.classList.add('on');
805 - clearTimeout(t);
806 - t = setTimeout(function(){toast.classList.remove('on');}, 1600);
807 - };
57 +Another button [[image:Screenshot 2025-12-03 at 20.55.35.png||height="30" width="78"]] in the Actions menu removes the mark assigned to the diagram object.
808 808  
809 - /* ── Sticky TOC via JS ──
810 - Uses position:absolute→fixed switch. No placeholder needed because
811 - .doc-content has a fixed margin-right — content width never changes. */
812 - (function(){
813 - var toc = document.querySelector('.doc-toc');
814 - var wrap = document.querySelector('.doc-wrap');
815 - if (!toc || !wrap) return;
59 +[[image:1766339171500-131.png]]
816 816  
817 - var navbar = document.querySelector('.navbar, nav.navbar, #topBar, header');
818 - var navH = navbar ? navbar.offsetHeight : 0;
819 - var footer = document.querySelector('footer, .xwikifooter, #xwikifooter, .bottombar, .sticky-container');
61 +Figure 2.3. Dispatch marks interface
820 820  
821 - function update() {
822 - var wr = wrap.getBoundingClientRect();
63 +The position of the diagrams and their scale are memorized for each user and device.
823 823  
824 - if (wr.top <= navH) {
825 - /* Doc-wrap has scrolled above navbar — fix the TOC */
826 - var footerTop = footer ? footer.getBoundingClientRect().top : window.innerHeight;
827 - var h = Math.max(0, Math.min(window.innerHeight, footerTop) - navH);
65 +The diagram view mode has the functions for:
828 828  
829 - toc.classList.add('is-fixed');
830 - toc.style.top = navH + 'px';
831 - toc.style.left = (wr.right - 200) + 'px'; /* right edge of wrap minus TOC width */
832 - toc.style.height = h + 'px';
833 - } else {
834 - /* Still in natural position */
835 - toc.classList.remove('is-fixed');
836 - toc.style.top = toc.style.left = toc.style.height = '';
837 - }
838 - }
67 +* switching to the parameter chart when left-clicking its value
68 +* displaying the main parameters of an object when left-clicking it
69 +* displaying the main parameters of an object via the "Measurements" menu when right-clicking it
70 +* remote control of switching devices (if this function is available and the rights are granted)
71 +* viewing a video (if this function is available and the rights are granted)
72 +* installation/removal of dispatcher tags (if this function is available and the rights are granted)
73 +* installation/removal of portable earthing devices (if this function is available and the rights are granted)
74 +* acknowledging events when right-clicking
75 +* viewing events in the operational log.
839 839  
840 - requestAnimationFrame(function(){ requestAnimationFrame(function(){
841 - update();
842 - window.addEventListener('scroll', update, {passive:true});
843 - window.addEventListener('resize', update, {passive:true});
844 - }); });
845 - })();
77 +An example of calling object measurements is shown in Fig. 2.4.
846 846  
847 - /* ── Left panel navigation hints ── */
848 - (function(){
849 - var hints = {
850 - 'Preface': 'Introduction to CENTO Software documentation',
851 - '1. User Manual': 'Web interface guide — login, diagrams, analysis, logs, reports',
852 - '2. Setup Manual': 'System configuration and setup for administrators',
853 - '3. Metering Channels': 'Metering channel configuration and data collection setup',
854 - '4. Structure and Modules Description': 'CENTO system architecture and module overview',
855 - '5. Diagrams Development Manual': 'Creating and configuring SCADA mimic diagrams',
856 - '6. Flexible Reports Guide': 'Building configurable tabular reports from metering data',
857 - '7. Events Setup': 'Configuring event rules, thresholds, and notifications',
858 - '8. Control Setup Manual': 'Setting up remote control and switching operations',
859 - 'Network Diagram (CLOUD)': 'CENTO deployment topology for cloud installations',
860 - 'Network Diagram (On-Prem)': 'CENTO deployment topology for on-premises installations',
861 - 'Server Configuration Example': 'Reference server setup and configuration example',
862 - 'Technical Requirements': 'Hardware and software requirements for CENTO deployment',
863 - 'DEMO server': 'Access the live CENTO demo environment',
864 - 'Release Notes': 'Changelog and version history for the CENTO platform',
865 - };
866 - document.querySelectorAll('#leftPanels a').forEach(function(a){
867 - var text = a.textContent.trim();
868 - var hint = hints[text] || hints[text.replace(/^\d+\.\s*/, '')];
869 - if (hint) a.setAttribute('data-hint', hint);
870 - });
871 - })();
872 -})();
79 +[[image:Screenshot 2025-12-03 at 20.58.29.png||height="329" width="881"]]
873 873  
874 -</script>
875 -{{/html}}
81 +Figure 2.4. Calling object measurements
82 +
83 +The **Measurements **drop-down window consists of the following columns:
84 +
85 +* **ID/Code** is the identification number of the parameter (tag) or its code, depending on the selected item in the drop-down menu, which is remembered even when the page is refreshed. Left-clicking on the ID value redirects to the **Devices, tags, channels** page under the** Tags, Channels** tab.
86 +* S is the status of the parameter (tag)
87 +* **Name** is the name of the parameter (tag)
88 +* **Value** is the value of the parameter (tag), left-clicking switches to the chart in the real-time data analysis.
89 +* **Description** displays the description of the parameter value taken from the IM directory
90 +* **Device** specifies the full path to the device to which the parameter (tag) is linked. Left-clicking redirects to the **Devices, tags, channels** page on the **Devices** tab
91 +* **The time of the last change**
92 +* **The time of the last update **is the time of the last poll for a tag
93 +* **Manual input** is a field for entering values manually. Manual input is available before data arrives by selecting [[image:Screenshot 2025-12-03 at 21.01.06.png||height="26" width="28"]]. Once correct tag polling occurs, the manual input is reset, and the actual incoming value is displayed. When the button [[image:Screenshot 2025-12-03 at 21.01.36.png||height="28" width="30"]]is selected, manual input remains visible until it is canceled by the user.
94 +
95 +The **Measurements** drop-down window can be moved from one point to another, as well as adjusted in height. To resize the window, point the mouse cursor to the lower-right corner, and then drag down or up the arrow that appears.
96 +
97 +Tag settings can be managed in Measurements. Additional fields are expanded by clicking on the setpoints button [[image:Screenshot 2025-12-03 at 21.02.31.png||height="29" width="84"]] (see Fig. 2.5). The setpoints can only be edited by users who have the right to do so.
98 +
99 +[[image:Screenshot 2025-12-03 at 21.03.24.png||height="130" width="1434"]]
100 +
101 +Figure 2.5. Setpoints
102 +
103 +Clicking on the setpoint opens an additional menu where the status, value, acknowledgment, and the time of insensitivity can be adjusted (see Fig. 2.6). This menu appears both on the already configured setpoints and on the missing ones.
104 +
105 +[[image:Screenshot 2025-12-03 at 21.03.57.png||height="317" width="704"]]
106 +
107 +Figure 2.6. Setpoint settings
108 +
109 +The object class code and its ID are displayed in the object measurements section (see Fig. 2.7), which is bound to the Information Model (IM). When clicked, the object is redirected to the **Information Model editor** page. Access to this page is restricted to users with the appropriate rights.
110 +
111 +[[image:Screenshot 2025-12-03 at 21.04.36.png||height="206" width="1025"]]
112 +
113 +Figure 2.7. Measurements of the IM object
114 +
115 +The **Measurements** table provides the ability to navigate to charts in the **Real-time data analysis** section, not only for a specific tag value but also for all tags simultaneously by pressing the button [[image:Screenshot 2025-12-03 at 21.05.55.png||height="28" width="25"]]
116 +
117 +Tags in the measurements associated with technology events are highlighted with a colored background, as well as with flashing, which allows to quickly navigate which of the parameters of the active object of the diagram is associated with a particular event, see example in Fig. 2.8. The background color of the backlight is the same as that of the animation frame of the active object in the additional settings of the diagram.
118 +
119 +[[image:Screenshot 2025-12-03 at 21.06.45.png||height="152" width="1024"]]
120 +
121 +Figure 2.8. Highlighting tag values associated with a technology event
122 +
123 += 3. DIAGRAM MANAGEMENT =
124 +
125 +== 3.1. Diagram page interface ==
126 +
127 +Diagrams are managed using the diagram manager in the **Settings** menu **Diagrams** (the menu item position can be changed by the user when configuring the system).
128 +
129 +An example of the **Diagrams** page is shown in Fig. 3.1.
130 +
131 +[[image:Screenshot 2025-12-03 at 21.08.33.png||height="199" width="1026"]]
132 +
133 +Figure 3.1. Mnemonic diagrams page
134 +
135 +To add a new diagram, click the button [[image:Screenshot 2025-12-03 at 21.09.11.png||height="20" width="91"]]. Then, enter a name for the new diagram in a window that appears (see Fig. 3.2).
136 +
137 +[[image:Screenshot 2025-12-03 at 21.09.41.png||height="169" width="569"]]
138 +
139 +Figure 3.2. New scheme window
140 +
141 +A new diagram appears in the list with its name. The diagram ID is assigned automatically.
142 +
143 +To search for a diagram by its name or ID, click on the icon [[image:Screenshot 2025-12-03 at 21.10.28.png||height="27" width="29"]] or search it in the diagram tree.
144 +
145 +To select all diagrams, press the button [[image:Screenshot 2025-12-03 at 21.11.01.png||height="32" width="31"]] . The button changes to [[image:Screenshot 2025-12-03 at 21.11.55.png||height="28" width="28"]]. To deselect all objects in the tree, press the same button [[image:Screenshot 2025-12-03 at 21.12.22.png||height="27" width="26"]] again. To collapse the tree, press the button [[image:Screenshot 2025-12-03 at 21.12.56.png||height="28" width="27"]] , to expand it, use the expand button [[image:Screenshot 2025-12-03 at 21.13.23.png||height="28" width="26"]]. To adjust the tree width, hover over the vertical divider and drag it left or right while holding the left mouse button. The button [[image:Screenshot 2025-12-03 at 21.13.55.png||height="28" width="27"]] allows hiding unpublished or published diagrams within the tree:
146 +
147 +[[image:Screenshot 2025-12-03 at 21.14.23.png||height="124" width="370"]]
148 +
149 +Figure 3.3. Hiding diagrams in the tree
150 +
151 +The font color of diagram names in the tree depends on their status: active diagrams are displayed with one style [[image:Screenshot 2025-12-03 at 21.15.40.png||height="27" width="127"]], while inactive ones are shown with another [[image:Screenshot 2025-12-03 at 21.16.11.png||height="34" width="164"]]. Additionally, diagrams without any linked tags are marked in the tree. When hovering over the icon [[image:Screenshot 2025-12-03 at 21.16.38.png||height="21" width="23"]] , a window appears displaying a list of tag IDs:
152 +
153 +[[image:Screenshot 2025-12-03 at 21.20.20.png||height="148" width="369"]]
154 +
155 +Figure 3.4. Missing tags
156 +
157 +The status of diagrams determines their visibility in the **Active schemes** tree of the diagram viewer (see Fig. 2.1). New diagrams have the default status //disabled.//
158 +
159 +The **Position** column indicates the sequence number of the diagram displayed in the **Active schemes** tree of the diagram viewer (see Fig. 2.1).
160 +
161 +In the **Object** column, the diagram is bound to the objects of the information model, which allows seeing the nesting levels in the tree of the diagram viewer (see Fig. 2.1).
162 +
163 +To edit the diagram in the built-in editor, click the button [[image:Screenshot 2025-12-03 at 22.05.04.png||height="26" width="26"]]in the **Actions** column. The operating rules for the diagram editor are detailed in the next sections of this manual.
164 +
165 +The button [[image:Screenshot 2025-12-03 at 22.08.32.png||height="27" width="28"]] in the **Actions** column is used to copy the diagram URL to the PC clipboard. A link to the diagram is required when configuring its view in the drop-down list [[image:Screenshot 2025-12-03 at 22.09.01.png||height="30" width="95"]] in the CENTO main menu (Settings > System > Menu editor).
166 +
167 +The diagram added to the drop-down list of the menu is to be displayed regardless of the status set in the **Diagrams** window.
168 +
169 +To create a copy of the diagram, click the button [[image:Screenshot 2025-12-03 at 22.10.09.png||height="31" width="32"]]in the **Actions** column opposite the diagram.
170 +
171 +To delete the diagram, click the button [[image:Screenshot 2025-12-03 at 22.10.43.png||height="30" width="31"]] in the **Actions** column opposite the diagram.
172 +
173 +To download the diagram, click the button [[image:Screenshot 2025-12-03 at 22.11.22.png||height="27" width="28"]] in the **Actions** column opposite the diagram.
174 +
175 +To download all the diagrams, click the **Download** button. To upload the downloaded diagram archive, click **Upload.**
176 +
177 += 4. DIAGRAM EDITOR =
178 +
179 +== 4.1. Graphical editor interface. ==
180 +
181 +The graphical editor interface is shown in Fig. 4.1
182 +
183 +[[image:Screenshot 2025-12-04 at 12.17.41.png]]
184 +
185 +Figure 4.1. Editor interface
186 +
187 +=== 4.1.1. Main menu ===
188 +
189 +The main menu (upper horizontal line) contains the main functions for working with the graphical editor interface: file actions, workspace settings, page view, arrangement settings for elements, their editing and viewing, as well as additional settings and background information for the diagram developer. The menu functions also have hints on hotkey combinations for quickly executing commands on the keyboard.
190 +
191 +When selecting an element on the diagram, the **Setting up rules** button [[image:Screenshot 2025-12-04 at 12.19.21.png||height="20" width="23"]] on the toolbar becomes available.
192 +
193 +If the selected element is an active object, clicking on the icon [[image:Screenshot 2025-12-04 at 12.19.53.png||height="28" width="29"]] redirects to the **Binding an element to a tag or channel** tree tree (see Fig. 4.5). When selecting an inactive element on the diagram and clicking on the **Setting up rules** button, the **Component visual settings** window appears (see Fig. 4.4). For quick binding of tags, metering channels, and devices within the rules, the tree structure can also be used, which opens upon clicking the button [[image:Screenshot 2025-12-04 at 12.19.53.png||height="28" width="29"]].
194 +
195 +Clicking on the icon [[image:Screenshot 2025-12-04 at 12.21.03.png||height="26" width="33"]] switches to the diagram view mode.
196 +
197 +=== 4.1.2. Toolbar ===
198 +
199 +The left panel **Categories** contains the basic set of graphical tools for creating and editing shapes and a set of graphic objects created by the diagram developer (see Fig. 4.2). The left panel can be also replaced with a tree for binding diagram objects (see Fig. 4.5), and the tree displaying binding to tags or metering channels (see Fig. 4.6).
200 +
201 +[[image:Screenshot 2025-12-04 at 12.22.13.png||height="720" width="344"]]
202 +
203 +Figure 4.2. Graphic templates
204 +
205 +=== 4.1.3. Properties panel ===
206 +
207 +The main tools for configuring the workspace and editing diagram elements are displayed on the right side of the graphical editor interface (see Fig. 4.3).
208 +
209 +[[image:Screenshot 2025-12-04 at 12.23.25.png||height="787" width="988"]]
210 +
211 +Figure 4.3. Object properties
212 +
213 +== 4.2. Binding of parameters: general information ==
214 +
215 +When selecting an inactive element on the diagram and clicking on the Setting up rules button [[image:Screenshot 2025-12-04 at 12.24.23.png||height="23" width="27"]], the **Component visual settings** window appears (see Fig. 4.4).
216 +
217 +[[image:Screenshot 2025-12-04 at 12.24.58.png||height="286" width="893"]]
218 +
219 +Figure 4.4. Component visual settings window
220 +
221 +The components are displayed on the diagram in accordance with the rules that determine which actions are to be performed with the component if certain conditions are met. The user can set multiple rules to customize the display of a single component.
222 +
223 +The **Copy** button [[image:Screenshot 2025-12-04 at 12.25.38.png||height="28" width="27"]] (23) is used for user convenience and allows creating a new rule based on one of the already configured rules.
224 +
225 +The **Condition No. 1** area determines in which cases an action is to be applied to the diagram component being edited and includes fields (see Fig. 4.4):
226 +
227 +~1. Selecting the type of source parameter to use when creating the rule. This can be the tag's value or its status, etc.
228 +
229 +2. Selecting the desired parameter from the database or from the information model, a drop-down list appears when clicking **More.**
230 +
231 +3. Entering tag processing formulas.
232 +
233 +4. The choice of the logical operator used in the condition, for example, equal if the parameter should be equal to something.
234 +
235 +5. Selecting the type of parameter used for comparison.
236 +
237 +6. Setting the value with which the source parameter is to be compared (manually or in a drop-down list).
238 +
239 +7. Entering tag processing formulas.
240 +
241 +8. If there are several conditions in the rule, the user determines in which cases they should call an action.:
242 +
243 +* if //any of// are selected, the logical operator OR is implied (if Condition #1 or Condition No. 2 or Condition No. N is met, then the action is performed);
244 +* if //all //is selected, the logical operator AND is implied (if Condition No. 1 and Condition No. 2 and Condition No. N are met, then the action is performed).
245 +
246 +9. To link a no-conditions tag on the diagram, select "no conditions".
247 +
248 +10. Delete the condition if necessary.
249 +
250 +~11. Comment on the condition (optional).
251 +
252 +12. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions.
253 +
254 +The **Action No. 1** area determines which settings are to be applied to the edited component of the diagram if the conditions set by the user are met, and includes the fields:
255 +
256 +13. Binding an action to the component text.
257 +
258 +14. Binding an action to the geometry of a component.
259 +
260 +15. Binding an action to a component style.
261 +
262 +16. Binding an action to an animation (object blinking).
263 +
264 +17. Selecting the parameter to edit (determined by the selected binding).
265 +
266 +18. Setting the parameter value (manually or in a drop-down list).
267 +
268 +19. Text formatting.
269 +
270 +20. If the action is linked to the text of the edited component, the parameter value can be rounded based on the specified number of decimal places.
271 +
272 +21. Output of numbers on the diagram in exponential form.
273 +
274 +22. To enable more flexible configuration of component display on the diagram, the rule may include multiple conditions.
275 +
276 +To delete unnecessary actions in the rule, click the button [[image:Screenshot 2025-12-04 at 12.29.45.png||height="23" width="24"]].
277 +
278 +The **Reset current rule** button is used to delete all conditions and actions in the selected rule.
279 +
280 +To save the changes, click **Save.**
281 +
282 +If saving the settings is not required, the window can be closed by clicking the button [[image:Screenshot 2025-12-04 at 12.30.16.png||height="25" width="24"]] or anywhere outside the modal window.
283 +
284 +When an active element on the diagram is selected and the **Binding an element to a tag or channel** button [[image:Screenshot 2025-12-04 at 12.30.53.png||height="23" width="22"]] is clicked, the element panel on the left side of the graphical editor is replaced with a tree for binding diagram objects to the information model.
285 +
286 +The **Binding an element to a tag or channel tree interface** is shown in Fig. 4.5
287 +
288 +[[image:Screenshot 2025-12-04 at 12.31.29.png||height="810" width="344"]]
289 +
290 +Figure 4.5. Binding an element to a tag or channel interface
291 +
292 +If the selected item is already bound to the IM, the **Binding an element to a tag or channel** menu displays the path to it and the link, while the **Choose** button in the tree is inactive. When another IM object is selected in the tree, the button becomes active and performs binding when clicked. For quicker binding, double-click can be used. The search field allows searching by the name or code of an Information Model (IM) object. When the object is deselected, the tree becomes inactive. To close the tree, click **Close.**
293 +
294 +When an inactive element on the diagram is selected and the B**inding an element to a tag or channel** button is pressed, the element panel on the left side of the graphical editor is replaced with a tree of devices, tags, and channels for binding diagram elements. The tag and channel tree interface for element binding is shown in Fig. 3.6. When selecting tags or metering channels, their IDs are automatically entered into the corresponding fields in the rules.
295 +
296 +[[image:Screenshot 2025-12-04 at 12.32.04.png||height="484" width="341"]]
297 +
298 +Figure 4.6. Tag and channel tree interface: binding an element to a tag or channel
299 +
300 +== 4.3. Adding objects to custom categories ==
301 +
302 +Fig. 4.7 shows an example of adding a graphic template to a user category.
303 +
304 +[[image:Screenshot 2025-12-04 at 12.33.11.png||height="435" width="831"]]
305 +
306 +Figure 4.7. Adding a new component
307 +
308 +To add a new object to a custom category, select the object (1) and click active elements adding button (2) in the appropriate category or drag it to this category by holding the left mouse button. Then, in the **Add a new component** window that appears, enter the desired name and click **Add** button (4).
309 +
310 +== 4.4. Importing and exporting a library of elements ==
311 +
312 +Element library transfer is only available in diagram editing mode. To transfer the element library from one server to another, perform the following steps:
313 +
314 +* To transfer the element library, open the File > New library > Export library section from the main menu on the source server. In the modal window that appears, select the categories to export and click **Export** (see Fig. 4.8). The selected categories are to be saved to a JSON file.
315 +
316 +* Open the diagram in editing mode on the target server and navigate to File  > New library > Import library in the horizontal menu. In the modal window that appears, enter the path to the previously saved JSON file or drag the file into the import field, then click **Import **(see Fig. 4.9).
317 +
318 +After importing, the library appears in the left column of the **Category,** the name of which is written in the format [name of the transferred category]_[date of transfer]_[randomly generated hash of 5 characters] (see Fig. 3.9).
319 +
320 +[[image:Screenshot 2025-12-04 at 12.35.15.png||height="251" width="479"]]
321 +
322 +Figure 4.8. Export library modal window
323 +
324 +[[image:Screenshot 2025-12-04 at 12.35.44.png||height="244" width="481"]]
325 +
326 +Figure 4.9. Import library modal window
327 +
328 +[[image:Screenshot 2025-12-04 at 12.36.09.png||height="122" width="480"]]
329 +
330 +Figure 4.10. Imported category
331 +
332 +When transferring active elements, keep in mind that they have a set of rules inside them that depend on the classes of the information model and their attributes. If the classes and attributes described in the rules are not available on the server, they must be downloaded from the server from which the library was imported; otherwise, the active element to be inactive.
333 +
334 +== 4.5. Auto-replace active objects ==
335 +
336 +To auto-replace active objects, do the following:
337 +
338 +* Create custom categories with objects (see section 4.3).
339 +* Select all the objects to be replaced on the diagram, right-click, and select the menu **Replace with another element.** In the window that opens, expand the category with the new object (see Fig. 4.11) and select it (if posters have been reconfigured for the object, then check the box **Apply new poster settings**). Click **Apply.**
340 +
341 +[[image:Screenshot 2025-12-04 at 12.37.31.png||height="422" width="477"]]
342 +
343 +Figure 4.11. Replace with another element modal window
344 +
345 +For the correct auto-replacement of active objects attached using linked lines to other elements of the diagram, the **Connectable** parameter should be enabled in the styles:
346 +
347 +[[image:Screenshot 2025-12-04 at 12.38.14.png]]
348 +
349 +Figure 4.12. Activation of the Connectable parameter
350 +
351 +If the active object does not have this parameter, trying to connect it to the line shows a prompt like in Fig. 4.13. The enabled parameter in the **Connectable** styles only affects the auto-replacement of the active object; this setting is not to affect the visual display in any way.
352 +
353 +[[image:Screenshot 2025-12-04 at 13.11.02.png||height="599" width="365"]]
354 +
355 +Figure 4.13. Prompt when trying to connect a line to an active object
356 +
357 +To conveniently select a large number of replaceable elements, use the **Select all similar elements **menu. This function works if the object being replaced is placed in a custom category, based on which the diagram was drawn. In other words, all objects have the same properties as the objects in the category. To use this function, select an element on the diagram, right-click, and select the **Select all similar elements.** All similar elements are to be highlighted automatically.
358 +
359 +After elements are automatically selected, the **Replace with another element** can be used.
360 +
361 +If the objects on the diagram differ from those placed in the category, clicking **Select all similar elements** pops up a message as in Fig. 4.14.
362 +
363 +[[image:Screenshot 2025-12-04 at 13.11.47.png||height="504" width="369"]]
364 +
365 +Figure 4.14. Selecting similar elements is not available
366 +
367 +== 4.6. Auto-replace of colors used in diagrams ==
368 +
369 +[[image:Screenshot 2025-12-04 at 13.12.37.png||height="408" width="581"]]
370 +
371 +Figure 4.15. Color replacement modal window
372 +
373 +Fig. 4.15 shows the** Color replacement** modal window, which allows the diagram developer to change the current color of not only the rendered elements (In the diagram) but also the color set in active object rules (In the rules) and text color (In the text). Clicking** Replace** applies the changes to the entire diagram. To change the color of individual objects, use standard style editing, as shown in Fig. 4.3.
374 +
375 +== 4.7. Setting up an animation frame for technological events associated with a diagram object ==
376 +
377 +[[image:Screenshot 2025-12-04 at 13.13.43.png||height="311" width="582"]]
378 +
379 +Figure 4.16. Scheme settings modal window
380 +
381 +For each created diagram, the flashing frame around the active object in diagram view mode can be customized depending on the incoming technological event. In the** Settings **window, under the **Animation frames,** the fields include:
382 +
383 +* **The frame **is the color of the frame
384 +* **Border, px** is the thickness of the frame
385 +* **Offset, px** is the indent of the displayed animation frame from the frame of the graphic element
386 +* **Animation time, s, **is the flashing time in seconds of incoming technological events that are configured without acknowledgment
387 +* **Fill **is the color of the fill inside the frame
388 +* **Opacity, % **is the opacity of the fill color inside the frame from 0 to 100%.
389 +
390 +== 4.8. Chart settings ==
391 +
392 +The diagrams support adding charts, enabling real-time monitoring of specific parameters, as well as the display of future data, for example, to compare planned versus actual values.
393 +
394 +The default chart template is in a custom category named **Charts.** To use it, move it to the diagram canvas (see Fig. 4.17).
395 +
396 +[[image:Screenshot 2025-12-04 at 13.15.15.png||height="291" width="582"]]
397 +
398 +Figure 4.17. Charts object
399 +
400 +The **Charts** object removed from the category visually looks like a picture that can be expanded in width and height, all other settings for colors, fonts and links are in the **Edit data of chart** modal window (see Fig. 4.18), which is available by right-clicking on the object and selecting **Edit data of chart.**
401 +
402 +The chart can display not only the value of a tag or a metering channel, but also several tags and channels, placing them on the same or separate axes.
403 +
404 +=== 4.8.1. Charts of current tag values in the template ===
405 +
406 +Fig. 4.18 shows an example of configuring the tag value chart display
407 +
408 +[[image:Screenshot 2025-12-04 at 13.16.36.png||height="532" width="452"]]
409 +
410 +Figure 4.18. Edit data of chart modal window
411 +
412 +The** Edit data of chart** modal window includes the following settings:
413 +
414 +* **Chart depth**
415 +* **Round** is rounding up values with the number of decimal places.
416 +* **Left X-axis boundary** is a required field, it defines the display depth of the chart (which also determines the data averaging interval). Parameters can be specified in days, hours, or minutes - the selected period is to be used for display in the diagram view mode.
417 +* **Y boundaries** are the boundaries of the chart display along the Y-axis, optional.
418 +* **Grid color** is the color of the grid.
419 +* **Axis color** is the color for the chart axes.
420 +* **Background color** is the color for the chart background.
421 +* **Font Size **is the font size.
422 +* **Font color** is the color for the font.
423 +* **Date format** is DD MMM YYYY (day, month, year). DD.MM .YY HH:mm:ss (day, month, year, hours, minutes, seconds).
424 +
425 +When filling in the chart settings, the data is displayed as shown below:
426 +
427 +[[image:Screenshot 2025-12-04 at 13.18.01.png||height="269" width="559"]]
428 +
429 +Figure 4.19. Chart in the diagram viewer
430 +
431 +Fig. 4.19 shows an example of a customized chart. This chart updates in real time and displays data from the last 5 minutes. Right-clicking on the chart opens the** Measurements** window, which provides information about the linked tag, its value, and more. Hovering the left mouse button over the chart calls the pop-up with the date, time, and value.
432 +
433 +=== 4.8.2. Charts of tag values selected on the diagram ===
434 +
435 +[[image:Screenshot 2025-12-04 at 13.18.57.png||height="599" width="559"]]
436 +
437 +Figure 4.20. Edit the data of the chart
438 +
439 +To plot a chart for any selected tag on the diagram, configure the fields as shown in Fig. 4.20:
440 +
441 +* Left border along X,
442 +* Y boundaries,
443 +* Grid color,
444 +* Axis color,
445 +* Background color,
446 +* Font size,
447 +* Font color,
448 +* Date format.
449 +
450 +When the chart settings are configured as shown in Fig. 4.20, data in view mode is displayed only after a linked tag is left-clicked. Each additional selected tag plots its own chart (see Fig. 4.21).
451 +
452 +[[image:Screenshot 2025-12-04 at 13.19.47.png||height="257" width="551"]]
453 +
454 +Figure 4.21. Chart in the diagram viewer
455 +
456 +=== 4.8.3. Displaying future data on charts ===
457 +
458 +[[image:Screenshot 2025-12-04 at 13.20.34.png||height="502" width="386"]]
459 +
460 +Figure 4.22. Edit the data of the chart
461 +
462 +Configuring charts for future data is similar to the previous steps.
463 +
464 +The difference lies in an additional field for metering channels, as shown in Fig. 4.2.2, where:
465 +
466 +* **The right border along X** displays future data; if no values are specified, the data for the current time is shown.
467 +
468 +When the chart settings are configured as shown in Fig. 4.22, the data in view mode is to display values within a range of a day ahead and a day behind (see Fig. 4.23).
469 +
470 +This data, displayed on the charts, enables forecasting, comparing planned vs. actual performance at the enterprise, and similar analyses.
471 +
472 +[[image:Screenshot 2025-12-04 at 13.21.50.png||height="262" width="548"]]
473 +
474 +Figure 4.23. Forecasting chart
475 +
476 +== 4.9. Setting up level indicators ==
477 +
478 +[[image:Screenshot 2025-12-04 at 13.23.18.png||height="309" width="333"]]
479 +
480 +Figure 4.24. Water level parameter output
481 +
482 +The diagram editor allows displaying data indicating the levels of measured values. Fig. 4.24 shows an example that displays the value of the //Water level// tag in the form of filling a vertical rectangle in blue.
483 +
484 +To configure this function:
485 +
486 +* Draw a suitable object, a rectangle, for example
487 +* Click on the **Setting up rules** icon [[image:Screenshot 2025-12-04 at 13.24.08.png||height="20" width="24"]]
488 +* In the window that opens (see Fig. 4.25), the** Condition** and **Action** fields need to be filled in for the rule. If highlighting areas based on specific conditions is not required, the **Condition **field can be left empty – in this case, the rendered object is to be displayed using the color specified in the **Action** field.
489 +
490 +[[image:Screenshot 2025-12-04 at 13.24.38.png||height="186" width="634"]]
491 +
492 +Figure 4.25. Setting the fill depending on the values
493 +
494 +Fig. 4.25 shows the setting of the fill depending on the values without conditions. The action to change the fill consists of the fill areas:
495 +
496 +1. In step #1, select the** Style** tab.
497 +1. In the suggested menu, select the option **Fill depending on the values.**
498 +1. Select the tag/attribute name from the drop-down list.
499 +1. If a tag is selected, its ID should be entered or selected from the drop-down list. If an IM attribute is selected, it also needs to be specified from the drop-down list of the class tree.
500 +1. The fill range of the minimum and maximum scales can be set not only by specifying any values, but also by the value of the channel/tag/attribute.
501 +1. Specify the minimum/maximum value of the scale for filling.
502 +1. Select the background color.
503 +1. Select the fill color of the area to be changed dynamically.
504 +1. Select the fill direction: vertically or horizontally.
505 +
506 +Thus, the display can be adjusted to show not only basic levels but also minimum and maximum values in the drawing by using different object fills based on a set of conditions.
507 +
508 +== 4.10. Properties of active objects ==
509 +
510 +Each created active diagram object has properties that affect various display functions in the viewing mode.
511 +
512 +To edit the properties of an object, right-click on it and select the **Edit data of the element.** The **Edit data of element **modal window is shown in Fig. 4.26.
513 +
514 +[[image:Screenshot 2025-12-04 at 13.26.04.png||height="361" width="873"]]
515 +
516 +Figure 4.26. Edit the data of the element
517 +
518 +* **Disabling context menus** allows selecting items that should be excluded from the context menu of the active object in the diagram viewer.
519 +* **Opening with a left-click **allows opening selected menu items with a left-click.
520 +* **Disable blinking of events for IM objects** disables the flashing frame around the active object when the event is triggered.
521 +* **Disable context menus, posters, and animations** disables the following:
522 +
523 +1. Disables the installation of posters for elements that are object attributes in the IM but have the same element ID bindings on the diagram. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). For posters to be exposed only to the switch, it is necessary for an IM element to enable **Disabling context menus, posters, and animations.**
524 +1. The// Disable context menus, posters, animations// attribute disables animation for such an element if the event is triggered not by changing it, but by changing another attribute included in this object, but if the triggered event relates to this attribute, then animation will work for it. In Fig. 4.27, the dedicated switch is linked to ID 13939, the element TO is linked to the same ID, it is located in the measurements of the object (Activation of the TO). If the **Disable context menus, posters, animations** field is disabled, the TO element will flash at any event related to the object with ID 13939. For the "TO" to flash only at an event that relates to this parameter, the TO element should turn it on.
525 +1. The //Disable context menus, posters, animations// attribute also disables all context menus that are available to the object, but only measurements remain. In Fig. 3.27, the dedicated switch is linked to ID 13939, the element TO is bound to the same ID, it is located in the measurements of the object (Activation of the TO). If an IM element does not include the// Disable context menus, posters, animations //attribute, then all context menus from the switch are to be available to it.
526 +
527 +[[image:Screenshot 2025-12-04 at 13.27.06.png||height="376" width="875"]]
528 +
529 +Figure 4. 27. Disabling context menus, posters, and animations attribute
530 +
531 +* **Disabling graphic animation** helps smooth the transition (rotations, offsets, and other geometric changes) of active or dynamic objects from one state to another in the diagram viewing mode.
532 +* **Enabling element backlight **allows turning on the element highlighting when hovering in the diagram viewer (see Fig. 4.28), which allows the user to determine which diagram objects are active.
533 +
534 +[[image:Screenshot 2025-12-04 at 13.28.03.png||height="232" width="328"]]
535 +
536 +Figure 4.28. Highlighting of an active element of the diagram
537 +
538 +* **The hidden element** allows adjusting the visibility/invisibility of rendered objects in the diagram viewer. As soon as any object with this setting appears, a button [[image:Screenshot 2025-12-04 at 13.28.37.png||height="26" width="24"]], which hides such an object appears in the viewer in the upper-right corner. Clicking on it displays the diagram object and shows the button like this [[image:Screenshot 2025-12-04 at 13.29.19.png||height="23" width="25"]].
539 +
540 +[[image:Screenshot 2025-12-04 at 13.29.40.png||height="225" width="329"]]
541 +
542 +Figure 4.29. Highlighting and hiding the active element of the diagram
543 +
544 +* **Enabling animation for changing the state of a discrete signal** enables/disables the animation frame for objects whose tags are not described in the system of technological events, i.e. there are no records of alerts related to a particular state of the discrete signal in the logs. The flashing frame is to be displayed for as long as it is set in the animation settings of the diagram in Fig. 4.16.
545 +* **The label **does not require filling in.
546 +* **Element ID** is an object binding to the IM.
547 +* **Poster position** can be vertical or horizontal, should be selected from the drop-down list.
548 +* **X-indent **indicates the X-axis coordinate. When moving the image near the active object, this coordinate is to be written automatically.
549 +* **Y-indent** indicates the Y-axis coordinate. When moving the image near the active object, this coordinate is to be written automatically.
550 +* **The add attribute** button allows adding additional properties to an object.
551 +
552 +In the **Measurements (left click)** field, left-click can adjust the number of rows and columns in the table. Fig. 4.30 shows an example of a two-column table.
553 +
554 +[[image:Screenshot 2025-12-04 at 13.30.35.png||height="333" width="328"]]
555 +
556 +Figure 4.30. Changing the view of the measurement table
557 +
558 +== 4.11. Simplified manual input from a diagram ==
559 +
560 +In diagrams, tag values can be entered manually not only in the measurement window but also in separately drawn objects.
561 +
562 +To quickly manage tags using manual input, a template is provided, which is located in the user category //Manual input.// To use this object, drag it to the diagram canvas (see Fig. 4.31).
563 +
564 +[[image:Screenshot 2025-12-04 at 13.31.44.png||height="335" width="661"]]
565 +
566 +Figure 4.31. Manual input object
567 +
568 +The manual input object removed from the category (see Fig. 4.31) visually looks like a picture that can be expanded in width and height. All other settings can be found in the **Editing manual input** modal window (see Fig. 4.32), which is available by right-clicking on the object and selecting the **Editing manual input **menu.
569 +
570 +[[image:Screenshot 2025-12-04 at 13.32.15.png||height="221" width="488"]]
571 +
572 +Figure 4.32. Editing the manual input window
573 +
574 +Fig. 4.32 shows the **Editing manual input** modal window, which includes the following settings:
575 +
576 +* **Tag** drop-down list for selecting a binding to a tag or IM attribute;
577 +* **Tag ID** drop-down list for binding to the tag ID or to the IM object, and its attribute.
578 +
579 +[[image:Screenshot 2025-12-04 at 13.32.50.png||height="346" width="492"]]
580 +
581 +Figure 4.33. Binding the tag to the manual input object
582 +
583 +[[image:Screenshot 2025-12-04 at 13.33.15.png||height="354" width="492"]]
584 +
585 +Figure 4.34. Binding to the attribute of the IM object
586 +
587 +Figs. 4.33 and 4.34 show examples of binding, which, when viewed in the diagram, appear as shown in Fig. 4.35.
588 +
589 +[[image:Screenshot 2025-12-04 at 13.33.48.png||height="236" width="490"]]
590 +
591 +Figure 4.35. Viewing a diagram with manual input objects
592 +
593 +Fig. 4.35 shows two examples with the manual input objects. To manage the values of the real-time parameters, right-click or left-click in the rendered areas. After clicking, an icon [[image:Screenshot 2025-12-04 at 13.34.21.png||height="27" width="26"]]appears on the right. When clicked, the value is entered manually, as well as an icon [[image:Screenshot 2025-12-04 at 13.34.45.png||height="30" width="33"]] for manual input before data is received. This manual input value is to be reset automatically after data is received. To reset the values entered manually, click on [[image:Screenshot 2025-12-04 at 13.35.12.png||height="28" width="27"]].
594 +
595 +== 4.12. Input of fixed manual entry values ==
596 +
597 +The diagrams support manual input of tag values not only through the measurements window but also directly from separately rendered objects within the diagrams.
598 +
599 +Unlike the manual Input template described in Section 4.11, this function enables creating buttons that assign or reset fixed tag values upon a left click on the rendered element.
600 +
601 +These buttons can also be configured with logical rules based on specific tag values by defining conditions and corresponding actions. Configuration is available through the context menu (right-click) under Object properties > Left click action > Manual input.
602 +
603 +[[image:Screenshot 2025-12-04 at 13.36.08.png]]
604 +
605 +Figure 4.36. Manual input button configuration
606 +
607 +Fig. 4.36 shows an example of manual input configuration for a tag with ID 9001, where:
608 +
609 +* **Tag ID** specifies the identification number of the tag selected from a drop-down list [[image:Screenshot 2025-12-04 at 13.36.43.png||height="22" width="24"]] or entered manually.
610 +* **Action** selects from a drop-down list: either manual input or cancellation of manual input.
611 +* **Value** specifies the value to be assigned to the tag when the diagram button is pressed.
612 +* **Before cancel** – if the state switch is enabled [[image:Screenshot 2025-12-04 at 13.37.25.png||height="25" width="40"]], the value persists until it is manually reset by the user. If the state switch is disabled [[image:Screenshot 2025-12-04 at 13.37.59.png||height="23" width="38"]], the manual input is automatically to be cleared after the next tag value change during the device polling.
613 +* **Add tag** allows specifying multiple tags for manual input, with the option to set different values for each tag.
614 +
615 +Fig. 4.37 shows an example of a drawn button. When left-clicked in view mode, it inputs a fixed value of 900 for the tag with ID 9001.
616 +
617 +[[image:Screenshot 2025-12-04 at 13.38.45.png||height="220" width="577"]]
618 +
619 +Figure 4.37. Manual input value button
620 +
621 +== 4.13. Links to external sources of information/to a local server, as well as to other diagrams. ==
622 +
623 +[[image:Screenshot 2025-12-04 at 13.39.27.png||height="267" width="954"]]
624 +
625 +Figure 4.38. Adding links
626 +
627 +In diagram view mode, navigation can be made through links to external information sources, local servers, other diagrams, real-time data analysis, metering data analysis, and any CENTO interface.
628 +
629 +**1) Links from one diagram to another, as well as to external information sources**
630 +
631 +To add links from one diagram to another or to an external source of information, select an object, and then right-click to open the edit link menu. A modal window **Edit data of element** opens.
632 +
633 +In the drop-down list **Action with a left click**, select **Following the link**. In the **Link or mnemonic scheme ID** field, enter the ID number of the diagram or an external link, such as reference data, equipment manuals, etc.
634 +
635 +The configured link can be opened in the new tab, in the current tab, as well as over the mnemonic scheme.
636 +
637 +For the **Open over the mnemonic scheme** option, the zoom setting for the page to open is available. By default, the zoom is set to 30%. An example of clicking on a link over the mnemonic scheme is shown in Fig. 4.39.
638 +
639 +[[image:Screenshot 2025-12-04 at 13.40.17.png||height="406" width="929"]]
640 +
641 +Figure 4.39. Clicking on a link over the mnemonic scheme
642 +
643 +**2) Links to files on the local server**
644 +
645 +To set up links to files from the local server, specify the directory in config.toml of the sed_api_gateway service in the line: **FileStorage** = "C:/SED/file_storage/files " (this path is specified by default for Windows, if necessary, specify the one in which the files are to be stored).
646 +
647 +To switch from the diagram to files stored on the local server, specify the link address in the format: [[http:~~/~~/server_>>url:http://server_]]name/files/file_name in this directory.
648 +
649 +**3) Links for navigation to Real-Time Data Analysis**
650 +
651 +To navigate to **Metering data** or **Real-time dat**a open the object properties as described above. In the** Link or mnemonic scheme ID** field, click the button [[image:Screenshot 2025-12-04 at 13.41.24.png||height="21" width="33"]] and select **Real-time data** or **Analysis of data metering** from the drop-down list.
652 +
653 +Fig. 4.40 shows an example of selecting tags from the real-time data section. The opened modal window displays the interface of this page with trees of devices, objects, statuses, and time on the left side. To create a link from the diagram, the appropriate tree and relevant tags should be selected, then the desired tab – **Real-time data, Chart**, or **Table** – should be specified on the right side, followed by clicking the button [[image:Screenshot 2025-12-04 at 13.41.45.png||height="19" width="30"]].
654 +
655 +[[image:Screenshot 2025-12-04 at 13.42.18.png||height="499" width="925"]]
656 +
657 +Figure 4.40. Tag selection window in Real-time data analysis
658 +
659 +The link to the selected tags in **Real-time data analysis** appears as a string (see Fig. 4.41), which can be copied or deleted.
660 +
661 +[[image:Screenshot 2025-12-04 at 13.42.58.png||height="43" width="560"]]
662 +
663 +Figure 4.41. Link in Real-time data analysis
664 +
665 +[[image:Screenshot 2025-12-04 at 13.43.35.png||height="472" width="926"]]
666 +
667 +Figure 4.42. Opening the Link in Real-time data analysis over the diagram
668 +
669 +Fig. 4.42 shows an example of opening the charts configured in Fig. 4.40.
670 +
671 +The configuration of links for metering channels in **Analysis of data metering** is like the described above.
672 +
673 +== 4.14. Installing portable grounding on diagrams ==
674 +
675 +The portable grounding is enabled in Settings > Diagrams > Edit > Extras > Scheme settings (see Fig. 4.43).
676 +
677 +[[image:Screenshot 2025-12-04 at 13.44.28.png||height="506" width="922"]]
678 +
679 +Figure 4.43. Enabling portable grounding
680 +
681 +If this option is enabled, then the grounding [[image:Screenshot 2025-12-04 at 13.45.01.png||height="24" width="24"]] button appears on the right side of the screen in the diagram viewing mode. Right-clicking on it opens a menu for setting the size and color of the portable grounding icon (see Fig. 4.44) to be applied to portable groundings on all diagrams including those previously installed.
682 +
683 +[[image:Screenshot 2025-12-04 at 13.45.24.png||height="197" width="311"]]
684 +
685 +Figure 4.44. Portable grounding settings
686 +
687 +[[image:Screenshot 2025-12-04 at 13.45.53.png||height="228" width="416"]]
688 +
689 +Figure 4.45. Installation of portable grounding
690 +
691 +When installing a portable grounding on a diagram element, select the object from the drop-down list (see Fig. 4.45) and, if necessary, write a comment, then click Install. After installation, left-click on the grounding icon and view its information (see Fig. 4.46), as well as data on groundings installed appear in the technological and operational logs.
692 +
693 +[[image:Screenshot 2025-12-04 at 13.46.24.png||height="91" width="413"]]
694 +
695 +Figure 4.46. Information on the installed portable grounding
696 +
697 +== 4.15. Highlighting lines in diagram view when hovering ==
698 +
699 +In viewing mode, hover backlight behavior for line-type objects (General category) can be configured to respond to mouse pointer events. This setting quickly analyzes the connections between rendered objects on large diagrams. Fig. 4.47 shows an example of connections.
700 +
701 +To set up the line style, press Alt+Shift+D on the keyboard and right-click on any part of the diagram, then select **Convert lines.**  After converting styles, disable this mode with the same key combination.
702 +
703 +[[image:Screenshot 2025-12-04 at 13.47.20.png||height="434" width="452"]]
704 +
705 +Figure 4.47. Highlighting of connected lines
706 +
707 +== 4.16. Outputting numbers in exponential form on the diagram ==
708 +
709 +[[image:Screenshot 2025-12-04 at 13.48.10.png||height="303" width="987"]]
710 +
711 +Figure 4.48. Enabling the exponential form of the number
712 +
713 +The display of the values of the associated parameters in the actions of the rules can be represented in exponential form by enabling the **Exponential form** switch as in Fig. 4.48. The data in diagram viewing mode is to be displayed as shown in Fig. 4.49.
714 +
715 +[[image:Screenshot 2025-12-04 at 13.49.12.png||height="48" width="162"]]
716 +
717 +Figure 4.49. Displaying a number in exponential form
718 +
719 +== 4.17. Displaying delimited values ==
720 +
721 +In the settings [[image:Screenshot 2025-12-04 at 13.50.03.png]] , in diagram view mode, instant tag values can be displayed as delimited values. This setting is enabled by default (see Fig. 4.50).
722 +
723 +[[image:Screenshot 2025-12-04 at 13.50.42.png||height="358" width="379"]]
724 +
725 +Figure 4.50. Displaying delimited values
726 +
727 +== 4.18. Display of data metering on the diagram ==
728 +
729 +Data on metering channels can be displayed on forms in the form of charts, the configuration of which is described in clause 4.8, as well as in the form of values, for example, bindings to tags.
730 +
731 +Fig. 4.51 shows an example of binding the metering channel (power A+) of a device with ID 100063.
732 +
733 +[[image:Screenshot 2025-12-04 at 13.51.42.png||height="278" width="987"]]
734 +
735 +Figure 4.51. Binding the metering channel
736 +
737 +The channel value in the view mode is displayed for the last time interval, see Fig. 4.52.
738 +
739 +[[image:Screenshot 2025-12-04 at 13.52.24.png||height="607" width="539"]]
740 +
741 +Figure 4.52. Value of the metering channel
742 +
743 +Metering channel data can be displayed in tabular form, which is selected from the top horizontal menu by clicking the **Table** icon.
744 +
745 +[[image:Screenshot 2025-12-04 at 13.52.57.png||height="279" width="173"]]
746 +
747 +Figure 4.53. Table
748 +
749 +Fig. 4.53 shows the table. To render it on the diagram, the number of rows, columns, and title (if required) should be selected. To use this template for displaying metering channel values, it needs to be edited by right-clicking and selecting **Table editor **in the menu. Fig. 4.54 shows an example of table configuration, and Fig. 4.55 demonstrates data display in the diagram viewer.
750 +
751 +[[image:Screenshot 2025-12-04 at 14.07.04.png||height="302" width="902"]]
752 +
753 +Figure 4.54. Metering channel binding
754 +
755 +The table in Fig. 4.54 consists of the following sections:
756 +
757 +* **Title** is the table name (optional).
758 +* **Number of Rows** is the number of rows where metering data are displayed.
759 +* **Row Height **is the row height.
760 +* **Polling frequency (s)** is the time interval for updating data in the table, in seconds.
761 +* **Interval **is for selection of the data interval (applies to the entire table).
762 +* **Function** is data aggregation applied to the entire table.
763 +* **ID** specifies the metering channel, which can be entered manually or selected from a drop-down list [[image:Screenshot 2025-12-04 at 14.07.38.png||height="26" width="27"]]
764 +* **Name **is the column name corresponding to the metering channel.
765 +* **Width **is the column width.
766 +* **Change time **is a system field used to display the time of the metering channel's value change.
767 +
768 +Rows in this table can be moved [[image:Screenshot 2025-12-04 at 14.08.30.png]], deleted [[image:Screenshot 2025-12-04 at 14.09.56.png||height="32" width="33"]], and added [[image:Screenshot 2025-12-04 at 14.10.25.png||height="31" width="89"]]
769 +
770 +[[image:Screenshot 2025-12-04 at 14.10.47.png||height="322" width="637"]]
771 +
772 +Figure 4.55. Display of metering channel data
773 +
774 +Fig. 4.55 shows the table in the diagram viewer using the settings from Fig. 4.54. Line formatting for the data is applied according to the table header.
775 +
776 +== 4.19. Heatmaps ==
777 +
778 +Heatmap functionality is accessible only with an active license for the corresponding module.
779 +
780 +The graphic element templates contain the **Sensor** element (see Fig. 4.56), which is responsible for filling areas of the diagram depending on any tag values.
781 +
782 +[[image:Screenshot 2025-12-04 at 14.11.51.png||height="72" width="83"]]
783 +
784 +Figure 4.56. Sensor graphic element
785 +
786 +On the objects of the diagram, place such images and, in the window with the bindings of the rules [[image:Screenshot 2025-12-04 at 14.12.20.png||height="22" width="26"]]in the actions, specify the ID of the tag, which changes the color (for example, see Fig. 4.57).
787 +
788 +Images need to be placed on the diagram objects, and in the **Component visual settings** window [[image:Screenshot 2025-12-04 at 14.12.20.png||height="22" width="26"]], the tag ID should be specified in the actions, which triggers the color change upon tag value modification (see example in Fig. 4.57).
789 +
790 +[[image:Screenshot 2025-12-04 at 14.13.22.png||height="560" width="742"]]
791 +
792 +Figure 4.57. Binding to the tag ID
793 +
794 +After arranging and binding such sensors, select those elements (might be selected together with other graphic objects), the area inside which changes colors according to changes in the linked tags in the rules. Then click **Create heatmap** (see Fig. 4.58).
795 +
796 +[[image:Screenshot 2025-12-04 at 14.13.52.png||height="713" width="455"]]
797 +
798 +Figure 4.58. Create heatmap
799 +
800 +The created heatmap can be edited by right-clicking on the **Heatmap properties** (see Fig. 4.56). The modal window specifies the high and low limits, the normal value, the gamma (the range of colors for building a heatmap), the power parameter (the temperature for building transitions between temperatures), and the ability to display only those points that exceed the temperature in normal mode, see Fig. 4.60.
801 +
802 +[[image:Screenshot 2025-12-04 at 14.14.27.png||height="594" width="448"]]
803 +
804 +Figure 4.59. Editing heatmap properties
805 +
806 +[[image:Screenshot 2025-12-04 at 14.14.52.png||height="442" width="853"]]
807 +
808 +Figure 4.60. Heatmap
809 +
810 +== 4.20. Layers ==
811 +
812 +In editing mode, to optimize work with large diagrams, individual sections of the diagram can be placed in layers that do not affect operation in viewing mode.
813 +
814 +To switch to the layer mode, go to the View > Layers in the upper horizontal menu (Ctrl+Shift+L).
815 +
816 +[[image:Screenshot 2025-12-04 at 14.15.37.png||height="412" width="405"]]
817 +
818 +Figure 4.61. Layers menu
819 +
820 +Fig. 4.61 shows an example of a list of layers where:
821 +
822 +1. Add layer is used to add a part of the diagram to the layer with the name.
823 +1. Duplicating the selected layer in the list.
824 +1. It is used to move diagram elements from one layer to another.
825 +1. The layer removal button.
826 +1. To disable or enable the parts of the diagram included in a specific layer. Moreover, disabling the layer does not affect the display in viewing mode, but only speeds up editing.
827 +1. Blocking changes to a layer from the list.
828 +1. Foreground/background of the layer.
829 +
830 +== 4.21. Active ​​​​​​​SVG elements ==
831 +
832 +The diagram editor allows importing graphic element templates in SVG format from various sources. Developed animated images from external sources help optimize work in both view and edit modes of the diagram (see Section 4.22.1). They also enable monitoring technological processes with the ability to view moving and rotating objects on the diagram (see Section 4.22.2).
833 +
834 +=== 4.21.1. Active SVG elements to speed up the opening and editing of the diagram ===
835 +
836 +In editing mode, to optimize work with large diagrams, active elements in SVG format can be loaded. Such elements are created by software developers. The approach is in using a ready-made template for the active element specifying in the rules only the tag/attribute that is responsible for a particular action. Any graphic elements can be modified using a program that supports the SVG format, or directly by editing the file’s code.
837 +
838 +The loading of items is in the **Extras** menu item (see Fig. 4.62).
839 +
840 +[[image:Screenshot 2025-12-04 at 14.17.19.png||height="508" width="326"]]
841 +
842 +Figure 4.62. Import animated SVGs
843 +
844 +Ready-made templates should be uploaded to the **Import animated SVG**s menu (see Fig. 4.63).
845 +
846 +[[image:Screenshot 2025-12-04 at 14.17.47.png||height="156" width="322"]]
847 +
848 +Figure 4.63. Import animated SVGs
849 +
850 +The template uploaded in Fig. 4.64 replaces drawing of many graphic elements created in the diagram editor.
851 +
852 +[[image:Screenshot 2025-12-04 at 14.18.12.png||height="224" width="325"]]
853 +
854 +Figure 4.64. Animated SVG
855 +
856 +For example, it is necessary to display the status of a discrete signal (switch position), as shown in Fig. 4.65. In case of developing diagrams in the editor, it is necessary to draw all the sticks and text forms separately (see Fig. 4.66) and describe each state in the rules.
857 +
858 +[[image:Screenshot 2025-12-04 at 14.18.44.png||height="370" width="226"]]
859 +
860 +Figure 4.65. Legend for the position of the switch
861 +
862 +[[image:Screenshot 2025-12-04 at 14.19.10.png||height="167" width="224"]]
863 +
864 +Figure 4.66. Graphic elements
865 +
866 +In case of using an .svg file, these states are written inside the code and after importing them into the editor, the user cannot visually track them in any way. After importing the file, configure the rules in the actions of which the **Status** field appears (see Fig. 4.67) with the selection of a specific state, depending on the conditions described in the rule.
867 +
868 +[[image:Screenshot 2025-12-04 at 14.19.47.png]]
869 +
870 +Figure 4.67. Rules for animated SVG
871 +
872 +The code of the animated element is shown below:
873 +
874 +----
875 +
876 +<svg xmlns="http:~/~/www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"
877 +
878 +data-states='{"On":{"~-~-background":"#d50404","~-~-border":"var(~-~-main)"},
879 +
880 +"Off":{"~-~-background":"#0f0","~-~-border":"var(~-~-main)"},
881 +
882 +"Error/Intermediate":{"~-~-background":"#fff","~-~-border":"var(~-~-main)"},
883 +
884 +"WE are exhausted":{"~-~-background":"#00f","~-~-border":"var(~-~-main)"},
885 +
886 +"n/a":{"~-~-background":"transparent","~-~-border":"#000"}}'>
887 +
888 +<rect style="fill:var(~-~-background,transparent);stroke:var(~-~-border,var(~-~-main,#000));stroke-width:6;" height="80" width="80" />
889 +
890 +</svg>
891 +
892 +----
893 +
894 +=== 4.21.2. Animated SVG ===
895 +
896 +If proficiency in CSS or SVG code is available, an animated SVG template can be independently developed based on the example provided in Section 4.21.1, along with the application of various animations for technological processes.
897 +
898 +Fig. 4.68 shows an example of graphic elements with various animated styles configured through an SVG file. This animation is imported into the menu, as shown in Fig. 4.62, and in the mnemonic diagram editor, it appears as an image where only the size can be adjusted; all other edits are made within the template from the external source (such as Inkscape, Figma, etc.).
899 +
900 +[[image:Screenshot 2025-12-04 at 14.21.36.png||height="439" width="665"]]
901 +
902 +Figure 4.68. Animated Image
903 +
904 +Each element created, for example, Inkscape has a group, and each group has its own animation settings.
905 +
906 +For example, in Fig. 4.68, a grouped element is rendered, which needs to be moved up or down. The animation code for it would look as follows:
907 +
908 +----
909 +
910 +<animateTransform
911 +
912 + attributeName="transform"
913 +
914 + attributeType="XML"        
915 +
916 + type="rotate"
917 +
918 + values="360 85 83; 310 85 83; 360 85 83"
919 +
920 +keySplines="1 .9 .1 0 ; 0 .1 .9 1"
921 +
922 + dur="4s"
923 +
924 + repeatCount="indefinite" />
925 +
926 +----
927 +
928 +If the object needs to rotate around an axis (see Fig. 4.68), the example code for rotating counterclockwise would look like this:
929 +
930 +----
931 +
932 +<animateTransform
933 +
934 + attributeName="transform"
935 +
936 + attributeType="XML"
937 +
938 + type="rotate"
939 +
940 +values="0 117.36 311.98; 360 117.36 311.98"
941 +
942 +begin = "-3.1s"
943 +
944 + dur="4s"
945 +
946 + repeatCount="indefinite" />
947 +
948 +----
949 +
950 +For clockwise rotation, the example code would look like this:
951 +
952 +----
953 +
954 +<animateTransform
955 +
956 + attributeName="transform"
957 +
958 + attributeType="XML"
959 +
960 +
961 + type="rotate"
962 +
963 + from="0 112.36 251.98"
964 +
965 + to="360 112.36 251.98"
966 +
967 + dur="3s"
968 +
969 + repeatCount="indefinite" />
970 +
971 +----
972 +
973 +The coordinates values/from/to depend on the initial position of the graphic element. The smaller the time value (dur), the more frequently the graphic element moves.
974 +
975 +Thus, by knowing the SVG and CSS code, any animations can be imported into the diagram editor.
976 +
977 +== 4.22. Conversion of diagrams from version 2 of the editor to version ​​​​​​​3 ==
978 +
979 +For compatibility of the version 3 of the editor with the version 2, diagrams should be converted. To do this, type Alt+Shift+D on the keyboard. A version selection appears in the horizontal menu to the right of the **Open in viewer** button [[image:Screenshot 2025-12-04 at 14.24.51.png||height="24" width="29"]]. From the drop-down list, click version 3. After clicking, a message pops up in the upper-right corner, which warns about switching to the editor version 3 after clicking **Unsaved changes. Click here to save** see Fig. 4.69.
980 +
981 +[[image:Screenshot 2025-12-04 at 14.25.20.png]]
982 +
983 +Figure 4.69. Warning about switching to the editor version 3
984 +
985 +After saving, the system switches to the version 3 editor, and the page URL changes to /CENTO/web/ui/diagram_editor/. Next, press the Alt+Shift+D keyboard combination to hide the version selection menu. After converting, select the entire diagram and click on any of the selected objects. In the context menu, click on** Convert styles** and on one of the items **Convert active elements with stroke** or **Convert active elements without stroke,** depending on the features of the rendered objects. The selection of the item can be verified using the diagram viewer. Without closing a converted diagram, click **Unsaved change. Click here to save,** and then open the same diagram on another page in the viewer, all elements should look the same as on the original diagram in the editor version 2, if this is not the case, then on the page with the diagram where the conversion was performed, undo the last actions and select another item and check again in the viewer.
986 +
987 +If the diagram is closed with the wrong conversion option, it cannot be reverted. Restoring requires a copy of the diagram from the editor version 2.
988 +
989 +== 4.23. Display of the IM object name and the tag measurement units ==
990 +
991 +[[image:Screenshot 2025-12-04 at 14.26.29.png||height="304" width="741"]]
992 +
993 +Figure 4.70. Options for displaying tag data
994 +
995 +Diagrams allow displaying not only the tag value but also its value along with the units of measurement, the units of measurement without the tag value, the name of the IM object, and the IM object code.
996 +
997 +To configure this, in the **Component visual settings** window, by clicking on the upper horizontal menu [[image:Screenshot 2025-12-04 at 14.26.56.png||height="26" width="27"]], actions are selected on the** Text** tab, specifically **IM measurement** (see Fig. 4.71) or **IM object** (see Fig. 4.72).
998 +
999 +[[image:Screenshot 2025-12-04 at 14.27.28.png||height="290" width="740"]]
1000 +
1001 +Figure 4.71. IM measurement
1002 +
1003 +[[image:Screenshot 2025-12-04 at 14.27.52.png||height="282" width="723"]]
1004 +
1005 +Figure 4.72. IM object
1006 +
1007 +To display tag values, tag values with units of measurement, or units of measurement only, select **IM Measurement** in **Actions** and choose the IM class attribute from the drop-down list [[image:Screenshot 2025-12-04 at 14.28.24.png||height="25" width="26"]].
1008 +
1009 +Examples of such value displays are shown in Fig. 4.70, numbers 1, 2, and 3.
1010 +
1011 +To display the name of the IM object and its code, select **IM Object** in **Actions** and choose the appropriate menu from the drop-down list. Examples of such value displays are shown in Fig. 4.70 under numbers 4, 5, and 6.
1012 +
1013 +To display the name of the object trimmings unnecessary characters, use the formula in **Actions:**
1014 +
1015 +[[image:Screenshot 2025-12-04 at 14.30.16.png||height="315" width="746"]]
1016 +
1017 +Figure 4.73. IM object name with split characters
1018 +
1019 +Fig. 4.73 shows an example of configuring the display of the IM object name with split characters using the formula split(val, " ", 1), where the value is split by the delimiter space, thus removing the first word from the phrase. An example of this display is shown in Fig. 4.70 under number 5. This formula can also be used to display part of the IM object code.
1020 +
1021 +Since the rules reference the attributes of the IM (industrial object), in all the examples above, create an active object by right-clicking (1) and bind it in the IM tree [[image:Screenshot 2025-12-04 at 14.31.14.png||height="29" width="30"]] (2) to an object (3), as shown in Fig. 4.74. The data for the bound object is to be displayed in view mode as shown in Fig. 4.70.​​​​​​​
1022 +
1023 +[[image:Screenshot 2025-12-04 at 14.31.50.png||height="456" width="743"]]
1024 +
1025 +Figure 4.74. Creating and binding to an IM object
1026 +
1027 +== 4.24. Uploading/downloading diagrams ==
1028 +
1029 +Uploading and downloading diagrams are available on the **Mnemonic diagrams** page, in the Actions column.
1030 +
1031 +[[image:Screenshot 2025-12-04 at 14.32.48.png||height="166" width="742"]]
1032 +
1033 +Figure 4.75. Mnemonic diagrams page
1034 +
1035 +The button [[image:Screenshot 2025-12-04 at 14.33.20.png||height="25" width="26"]] uploads the diagram in an archive depending on the diagram version. If the diagram was in the version 2 of the editor, it is to be uploaded in the same version.
1036 +
1037 +The button [[image:Screenshot 2025-12-04 at 14.33.51.png||height="27" width="28"]] downloads the diagram in an archive depending on the diagram version. If the diagram was in version 3 of the editor, it is to be uploaded in the same version.
1038 +
1039 +The **Download** button allows downloading all the diagrams to one archive.
1040 +
1041 +The **Upload** button allows uploading all the diagrams from one previously downloaded archive. This allows diagrams to migrate from one server to another.
1042 +
1043 += 5. BINDING TAGS TO THE DIAGRAM USING ID OR CODE =
1044 +
1045 +**Example No. 1**
1046 +
1047 +An example of binding a real parameter taken from a database that outputs information as a numeric value on a diagram.
1048 +
1049 +Select the text on the diagram, which is to be a dynamic parameter, and open the window [[image:Screenshot 2025-12-04 at 14.39.54.png||height="28" width="29"]]. 
1050 +
1051 +In the rule, check the box next to the words** Without conditions** (1) (optional) and describe the first action. Mark the** Text** field, select the **Tag** parameter type (2) and write, for example, the ID=502001 (3) number from the database (or select it from the drop-down list (4) see Fig. 5.2), if it is necessary to round the values, enable rounding (5) and specify how many decimal places should be displayed. It is possible to format the text in the actions of the rules (6) (see Fig. 5.3), as well as output the value of the number in exponential form (7). Click **Save,** switch to the diagram [[image:Screenshot 2025-12-04 at 14.40.43.png||height="24" width="31"]]viewing mode and see the result (see Fig. 5.4).
1052 +
1053 +[[image:Screenshot 2025-12-04 at 14.41.18.png||height="337" width="925"]]
1054 +
1055 +Figure 5.1. Binding to the text
1056 +
1057 +To quickly bind to a tag, the **Component visual settings** window can be skipped by using the **Bind an element to a tag or channel** tree [[image:Screenshot 2025-12-04 at 14.41.48.png||height="25" width="25"]]. This automatically fills the tag, see Fig. 5.1.
1058 +
1059 +[[image:Screenshot 2025-12-04 at 14.42.21.png||height="427" width="927"]]
1060 +
1061 +Figure 5.2. Choose the parameter drop-down list
1062 +
1063 +[[image:Screenshot 2025-12-04 at 14.42.51.png||height="197" width="410"]]
1064 +
1065 +Figure 5.3. Formatting the text in the rules
1066 +
1067 +[[image:Screenshot 2025-12-04 at 14.43.17.png||height="197" width="921"]]
1068 +
1069 +Figure 5.4. Tag value in the view mode
1070 +
1071 +The tag settings include a field not only for the ID number but also for specifying a code that can be used when binding to the diagram. To do this, in Fig. 5.1, field No. 3, enter the tag code instead of its ID.
1072 +
1073 +In the viewing mode in Fig. 5.4 there is no difference in the display in this case.
1074 +
1075 +**Example No. 2**
1076 +
1077 +An example of binding a real parameter taken from a database, which outputs information on a diagram in the form of a dynamic element that changes color depending on the incoming value and the status of the parameter.
1078 +
1079 +CENTO receives various tag statuses:
1080 +
1081 +[[image:Screenshot 2025-12-04 at 14.44.04.png||height="421" width="343"]]
1082 +
1083 +Figure 5.5. Tag statuses
1084 +
1085 +For example, two statuses can be used: when the telemeasurment TI value is received in real time (i.e., 1 – Normal), and when the telemeasurment TI value is entered manually by the user (i.e., 4 – Manual input).
1086 +
1087 +Real parameter data for binding:
1088 +
1089 +|**ID number**|(% style="width:359px" %)**Parameter name**|(% style="width:378px" %)**Values**|**Decryption**
1090 +|10154|(% style="width:359px" %)Emergency alarm (EA)|(% style="width:378px" %)0/1|(((
1091 +normal/
1092 +
1093 +trigerring
1094 +)))
1095 +
1096 +Create a rectangle (with or without fill) and write the text //AC// inside the stroke.
1097 +
1098 +This element changes the background color depending on the incoming value and the status of the parameter, if the condition TI=0 is met, then the color is green, if the condition TI=1 is met, then the color is red, if there is no data, then the color is white (see Fig. 5.6).
1099 +
1100 +[[image:Screenshot 2025-12-04 at 14.45.25.png||height="405" width="486"]]
1101 +
1102 +Figure 5.6. Color changing in a dynamic element
1103 +
1104 +To do this, select the created rectangle with left-clicking and open the bindings window [[image:Screenshot 2025-12-04 at 14.45.55.png||height="25" width="28"]]
1105 +
1106 +Create the following rules:
1107 +
1108 +Rule No. 1 (fill in green with the value of TI = 0):
1109 +
1110 +If the TI value is 0 (normal), then the background is green (see Fig. 5.7).
1111 +
1112 +Rule No. 2 (fill in red with the value of TI = 1):
1113 +
1114 +If the TI value is 1 (signal available, then the background is red (see Fig. 5.8).
1115 +
1116 +Rule No. 3 (fill in white when the T is not equal to 0 and not equal to 1):
1117 +
1118 +If the TI value is not equal to 0 and at the same time the TI value is not equal to 1, then the background is white (see Fig. 5.9).
1119 +
1120 +Rule No. 4 (fill in white if the status is not normal and not with manual input):
1121 +
1122 +If the TI status is not equal to 1 (normal) and at the same time the TI status is not equal to 4 (not manual input), then the background is white (see Fig. 5.10).
1123 +
1124 +[[image:Screenshot 2025-12-04 at 14.46.37.png]]
1125 +
1126 +Figure 5.7. Rule No. 1
1127 +
1128 +[[image:Screenshot 2025-12-04 at 14.46.57.png]]
1129 +
1130 +Figure 5.8. Rule No. 2
1131 +
1132 +[[image:Screenshot 2025-12-04 at 14.47.27.png]]
1133 +
1134 +Figure 5.9. Rule No. 3
1135 +
1136 +[[image:Screenshot 2025-12-04 at 14.47.57.png]]
1137 +
1138 +Figure 5.10. Rule No. 4
1139 +
1140 +== 5.2. Binding devices to the diagram ==
1141 +
1142 +There are several device status values:
1143 +
1144 +0 – Disabled,
1145 +
1146 +1 – Normal,
1147 +
1148 +2 – Device has data errors,
1149 +
1150 +3 – Device is unavailable,
1151 +
1152 +4 – Data with manual input available,
1153 +
1154 +7 – Waiting for data,
1155 +
1156 +9 – Status is missing.
1157 +
1158 + The device is bound to the diagram by selecting **Device status** from the menu item. The content of the rules is similar to the example described above with changing the color of an object (in the** Condition** field, select the desired type of parameter, specify the device address, specify the operator and enter a numeric value equal to one or another status, and then specify the **Action **to be applied to the condition being fulfilled, for example, see Fig. 5.11).
1159 +
1160 +[[image:Screenshot 2025-12-04 at 14.49.03.png]]
1161 +
1162 +Figure 5.11. Binding to the device status
1163 +
1164 +Additionally, when using a template with a set of rules, device binding can be performed through the device tree by clicking on [[image:Screenshot 2025-12-04 at 14.49.33.png||height="24" width="25"]]. This automatically fills in the device ID fields shown in Fig. 5.11 streamlining the debugging process without opening the rules window.
1165 +
1166 +== 5.3. Binding parameters to information model objects ==
1167 +
1168 +To create an information model, see the "Information model setup manual".
1169 +
1170 +For example, create a square element (to serve as a switch) and describe the rules for it. In this example, the square changes the background color depending on the incoming parameter of the information model object, which refers to the value from the CENTO database.
1171 +
1172 +The sequence of bindings to the parameters of an information model object is like the actions for binding to tags: instead of **Tag value** and **Tag status,** select the** IM attribute** and **IM parameter status**, see Fig. 5.12.
1173 +
1174 +[[image:Screenshot 2025-12-04 at 14.50.40.png]]
1175 +
1176 +Figure 5.12. Binding to the parameter of the information model object
1177 +
1178 +In this example, the address of the parameter is the information model class, and its attribute is selected when opening the drop-down list [[image:Screenshot 2025-12-04 at 14.51.19.png||height="35" width="28"]], see Fig. 5.13.
1179 +
1180 +[[image:Screenshot 2025-12-04 at 14.51.50.png||height="466" width="356"]]
1181 +
1182 +Figure 5.13. Window with IM classes and their attributes
1183 +
1184 +After assembling the shape with the necessary rules for dynamic display, select the entire group and click the left mouse button. In the drop-down window, select **Create active element**, see Fig. 5.14. This function also applies to individual graphic drawings. To bind to the information model, open the appropriate bindings menu [[image:Screenshot 2025-12-04 at 14.52.28.png||height="31" width="31"]].
1185 +
1186 +[[image:Screenshot 2025-12-04 at 14.52.56.png||height="519" width="353"]]
1187 +
1188 +Figure 5.14. Creating an active element
1189 +
1190 +After creating the active element, the settings shown in Fig. 5.15 become the default. To set properties, right-click on the active element and select **Edit data of element** from the menu.
1191 +
1192 +[[image:Screenshot 2025-12-04 at 14.53.33.png]]
1193 +
1194 +Figure 5.15. Edit the data of elements
1195 +
1196 +After setting up the properties, select the shape and click the button [[image:Screenshot 2025-12-04 at 14.54.04.png||height="27" width="26"]]. Find the necessary element in the tree and select it (see Fig. 5.16).
1197 +
1198 +[[image:Screenshot 2025-12-04 at 14.54.49.png||height="642" width="570"]]
1199 +
1200 +Figure 5.16. Information model element binding
1201 +
1202 +In this way, it is bound to the elements of the information model. When switching from the editor to the diagram viewing mode and right-clicking on the created shape, the **Measurements** context menu appears, showing the complete set of parameters described in the information model, as shown in Fig. 3.3.
1203 +
1204 +Right-clicking displays a table of parameters, which includes all the parameters from measurements, with the option to configure short tag names and decode values, as shown in Fig. 5.17.
1205 +
1206 +[[image:Screenshot 2025-12-04 at 14.55.22.png||height="252" width="339"]]
1207 +
1208 +Figure 5.17. Table of the IM element parameters
1209 +
1210 +This object also has the option to display posters, with their arrangement appearing as shown in Fig. 5.18.
1211 +
1212 +[[image:Screenshot 2025-12-04 at 14.55.48.png||height="271" width="569"]]
1213 +
1214 +Figure 5.18. Installation of customized posters
1215 +
1216 += ABBREVIATIONS =
1217 +
1218 +DB – the database
1219 +
1220 +IM – information model.