Skip to Content

Wiki source code of 5. Diagrams Development Manual

Last modified by Iaroslav Platonov on 2026/06/08 10:32
Hide last authors
Iaroslav Platonov 210.1 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; }
Lana 4.2 10
Iaroslav Platonov 210.1 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; }
Lana 205.1 13
Iaroslav Platonov 210.1 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 }
Lana 4.2 22
Iaroslav Platonov 210.1 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; }
Lana 4.2 42
Iaroslav Platonov 210.1 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; }
Lana 4.2 52
Iaroslav Platonov 210.1 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; }
Lana 4.2 57
Iaroslav Platonov 210.1 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; }
Lana 4.2 68
Iaroslav Platonov 210.1 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; }
Lana 4.2 74
Iaroslav Platonov 210.1 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; }
Lana 4.2 78
Iaroslav Platonov 210.1 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; }
Lana 5.2 89
Iaroslav Platonov 210.1 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; }
Lana 8.2 95
Iaroslav Platonov 210.1 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; }
Lana 10.2 103
Iaroslav Platonov 210.1 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; }
Lana 10.2 108
Iaroslav Platonov 210.1 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; }
Lana 10.2 112
Iaroslav Platonov 210.1 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>
Lana 14.2 121
Iaroslav Platonov 210.1 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>
Lana 14.2 134
Iaroslav Platonov 210.1 135 <div class="doc-wrap">
136 <div class="doc-content">
Lana 14.3 137
Iaroslav Platonov 210.1 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>
Lana 14.3 146
Iaroslav Platonov 210.1 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>
Lana 16.2 679
Iaroslav Platonov 210.1 680 </div><!-- /doc-content -->
Lana 16.2 681
Iaroslav Platonov 210.1 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>
Lana 54.2 723
Iaroslav Platonov 210.1 724 </div><!-- /doc-wrap -->
725 <script>
Lana 54.2 726
Iaroslav Platonov 210.1 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});
Lana 54.2 736
Iaroslav Platonov 210.1 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;});
Lana 54.2 742
Iaroslav Platonov 210.1 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);});
Lana 54.2 758
Iaroslav Platonov 210.1 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 });
Lana 54.2 772
Iaroslav Platonov 210.1 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 });
Lana 54.2 782
Iaroslav Platonov 210.1 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();});
Lana 54.2 796
Iaroslav Platonov 210.1 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 };
Lana 54.2 808
Iaroslav Platonov 210.1 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;
Lana 54.2 816
Iaroslav Platonov 210.1 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');
Lana 54.2 820
Iaroslav Platonov 210.1 821 function update() {
822 var wr = wrap.getBoundingClientRect();
Lana 54.2 823
Iaroslav Platonov 210.1 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);
Lana 54.2 828
Iaroslav Platonov 210.1 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 }
Lana 54.2 839
Iaroslav Platonov 210.1 840 requestAnimationFrame(function(){ requestAnimationFrame(function(){
841 update();
842 window.addEventListener('scroll', update, {passive:true});
843 window.addEventListener('resize', update, {passive:true});
844 }); });
845 })();
Lana 54.2 846
Iaroslav Platonov 210.1 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 })();
Lana 54.2 873
Iaroslav Platonov 210.1 874 </script>
875 {{/html}}