Skip to Content

Changes for page 1. User Manual

Last modified by Iaroslav Platonov on 2026/06/08 09:26
From version 242.3
edited by Iaroslav Platonov
on 2026/06/08 09:26
Change comment: There is no comment for this version
To version 240.2
edited by Iaroslav Platonov
on 2026/06/07 18:30
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,99 +1,163 @@
1 1  {{html clean="false"}}
2 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; }
10 -
11 -/* ── Reading progress bar ── */
12 12  #rn-prog { position:fixed;top:0;left:0;height:3px;width:0;background:#005AB4;z-index:9999;pointer-events:none; }
13 13  
14 -/* ── Page content wrapper ── */
15 -.doc-wrap { position:relative; }
5 +/* Layout: relative container, content fills width minus TOC margin */
6 +.doc-wrap {
7 + position:relative;
8 +}
16 16  .doc-content {
17 - margin-right:224px;
10 + margin-right:224px; /* TOC width 200px + 24px gap — never changes */
18 18   border-left:1px solid #E8E8E8;
19 19   border-right:1px solid #E8E8E8;
20 20   padding:0 32px;
21 21  }
22 22  
23 -/* ── Right "On This Page" TOC ── */
16 +/* TOC: absolute by default, fixed via JS when scrolled */
24 24  .doc-toc {
25 - position:absolute;top:0;right:0;width:200px;
18 + position:absolute;
19 + top:0; right:0;
20 + width:200px;
26 26   font-size:12.5px;line-height:1.55;
27 27   padding:20px 0 20px 16px;
28 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; }
24 +.doc-toc.is-fixed {
25 + position:fixed;
26 + width:200px;
27 + overflow-y:auto;
28 + /* Below XWiki navbar (~1000) and action bars (~100) */
29 + z-index:10;
30 +}
31 +.toc-header {
32 + display:flex;justify-content:space-between;align-items:center;
33 + margin-bottom:10px;
34 +}
35 +.toc-header strong {
36 + font-size:13px;font-weight:700;color:#222222;
37 + text-transform:none;letter-spacing:0;
38 +}
39 +.toc-toggle {
40 + background:none;border:none;cursor:pointer;
41 + color:#555555;font-size:14px;padding:0 2px;line-height:1;
42 +}
43 +.toc-toggle:hover { color:#222222; }
34 34  .doc-toc ul { list-style:none;margin:0;padding:0; }
35 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; }
46 +.doc-toc a {
47 + display:block;padding:3px 0;
48 + color:#555555;text-decoration:none;
49 + border-left:2px solid transparent;
50 + transition:color .12s;
51 +}
52 +.doc-toc a:hover { color:#222222;text-decoration:underline; }
53 +.doc-toc a.toc-on {
54 + color:#222222;font-weight:700;
55 + border-left:2px solid #005AB4;padding-left:5px;
56 +}
57 +.tl1 > a { font-weight:600; color:#222222; }
40 40  .tl2 > a { padding-left:14px; }
41 41  .tl3 > a { padding-left:26px;font-size:12px; }
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; }
61 +/* Typography */
62 +.doc-content h1 {
63 + font-size:1.6em;font-weight:700;color:#222222;
64 + margin:0 0 6px 0;border:none;
65 +}
66 +.rn-meta { font-size:.8em;color:#555555;margin:0 0 28px 0; }
67 +.doc-content h2 {
68 + font-size:1.15em;font-weight:700;color:#222222;
69 + margin:36px 0 10px 0;
70 + display:flex;align-items:baseline;gap:7px;
71 + scroll-margin-top:16px;
72 +}
73 +.doc-content h3 {
74 + font-size:1em;font-weight:700;color:#222222;
75 + margin:22px 0 8px 0;
76 + display:flex;align-items:baseline;gap:6px;
77 + scroll-margin-top:16px;
78 +}
79 +.doc-content h4 {
80 + font-size:.93em;font-weight:700;color:#222222;
81 + margin:14px 0 6px 0;
82 + display:flex;align-items:baseline;gap:5px;
83 + scroll-margin-top:16px;
84 +}
49 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; }
86 +.doc-content strong { color:#222222; }
87 +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:#222222; }
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; }
89 +/* Anchor icon */
90 +.anchor-icon {
91 + color:#E8E8E8;text-decoration:none;opacity:0;
92 + transition:opacity .15s;vertical-align:middle;margin-left:4px;
93 + display:inline-flex;align-items:center;
94 +}
55 55  h2:hover .anchor-icon,h3:hover .anchor-icon,h4:hover .anchor-icon { opacity:1; }
56 56  .anchor-icon:hover { color:#005AB4; }
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; }
98 +/* Oracle-style Note box: border only, no fill */
99 +.note {
100 + border:1px solid #E8E8E8;border-radius:6px;
101 + padding:12px 16px;margin:14px 0;
102 +}
103 +.note-hd {
104 + font-weight:700;font-size:.875em;
105 + display:flex;align-items:center;gap:5px;
106 + margin-bottom:6px;
107 +}
108 +.note-body { font-size:.875em;color:#333;line-height:1.65; }
68 68  
69 -/* ── Section index list ── */
70 -.section-index { list-style:disc;padding-left:20px;margin:0 0 20px 0; }
110 +/* Oracle-style section index list */
111 +.section-index {
112 + list-style:disc;padding-left:20px;margin:0 0 20px 0;
113 +}
71 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; }
115 +.section-index li a {
116 + color:#005AB4;font-weight:600;font-size:.93em;
117 + text-decoration:underline;
118 +}
119 +.section-index li p {
120 + margin:3px 0 0 0;font-size:.875em;color:#333;line-height:1.6;
121 +}
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; }
123 +/* Parent topic */
124 +.parent-topic {
125 + font-size:.82em;color:#555555;margin:18px 0 24px 0;
126 + border-top:1px solid #E8E8E8;padding-top:10px;
127 +}
77 77  .parent-topic a { color:#005AB4; }
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; }
130 +/* Accordion — Oracle subsection feel */
131 +details.acc {
132 + border:1px solid #E8E8E8;border-radius:4px;
133 + margin-bottom:5px;
134 +}
135 +details.acc summary {
136 + display:flex;align-items:center;gap:8px;
137 + padding:9px 12px;cursor:pointer;list-style:none;
138 + background:none;user-select:none;
139 +}
82 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; }
141 +details.acc summary::before {
142 + content:'▶';font-size:.58em;color:#555555;
143 + transition:transform .18s;flex-shrink:0;
144 +}
84 84  details.acc[open] summary::before { transform:rotate(90deg); }
85 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; }
147 +.acc-num { font-size:.8em;color:#555555;min-width:28px;font-weight:600; }
148 +.acc-title { font-size:.9em;font-weight:700;color:#222222;flex:1; }
88 88  .acc-body { padding:10px 14px 12px 14px;font-size:.88em;color:#333;line-height:1.7; }
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; }
151 +/* Images */
152 +.fig { margin:12px 0 22px 0; }
153 +.fig img {
154 + border-radius:4px;border:1px solid #E8E8E8;display:block;
155 + cursor:zoom-in;transition:box-shadow .15s;max-width:100%;
156 +}
157 +.fig img:hover { box-shadow:0 2px 10px rgba(0,90,180,.15); }
158 +.fig-cap { font-size:.78em;color:#555555;font-style:italic;margin:4px 0 0 0; }
95 95  
96 -/* ── Lightbox ── */
160 +/* Lightbox */
97 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 98  #rn-lb.open { display:flex; }
99 99  #rn-lb-wrap { position:relative;cursor:default;max-width:92vw;max-height:90vh; }
... ... @@ -101,18 +101,18 @@
101 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 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; }
103 103  
104 -/* ── Back to top ── */
105 -#rn-top { position:fixed;bottom:60px;right:24px;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); }
168 +/* Back to top */
169 +#rn-top { position:fixed;bottom:24px;right:24px;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 106  #rn-top.on { opacity:1;transform:translateY(0);pointer-events:auto; }
107 107  #rn-top:hover { background:#0066cc; }
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; }
173 +/* Toast */
174 +.rn-toast { position:fixed;bottom:66px;right:24px;z-index:9999;background:#222222;color:#fff;font-size:.74em;padding:4px 11px;border-radius:4px;pointer-events:none;opacity:0;transition:opacity .18s; }
111 111  .rn-toast.on { opacity:1; }
112 112  
113 -/* ── Tables ── */
177 +/* Tables */
114 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; }
179 +.rn-table th { background:#f5f5f5;text-align:left;padding:7px 12px;font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#555555;border-bottom:2px solid #E8E8E8; }
116 116  .rn-table td { padding:7px 12px;border-bottom:1px solid #E8E8E8;color:#333;vertical-align:top; }
117 117  .rn-table tr:last-child td { border-bottom:none; }
118 118  .rn-table tr:hover td { background:#f5f5f5; }
... ... @@ -149,20 +149,20 @@
149 149   <p>Users log in to CENTO through a web interface. Supported browsers: Google Chrome, Microsoft Edge, etc.</p>
150 150   <p>Enter the server IP or DNS address — for example <code>http://192.168.80.10/</code> or <code>https://demotest.centosoftware.com/</code>. When working directly on the server, use <code>http://127.0.0.1</code>.</p>
151 151   <div class="fig">
152 - <img src="/xwiki/bin/download/CENTO%20Manuals/1.%20User%20Manual/WebHome/1762985411819-434.png" alt="CENTO login form with username and password fields and a Login button" style="max-width:320px;" onclick="openLightbox(this)"/>
216 + <img src="/xwiki/bin/download/CENTO%20Manuals/1.%20User%20Manual/WebHome/1762985411819-434.png" alt="Figure 1.1. Authorization page" style="max-width:320px;" onclick="openLightbox(this)"/>
153 153   <p class="fig-cap">Figure 1.1. Authorization page</p>
154 154  </div>
155 - <div class="note note-info">
156 - <div class="note-hd"><span>ℹ</span> Note</div>
219 + <div class="note">
220 + <div class="note-hd" style="color:#005AB4"><span>ℹ</span> Note</div>
157 157   <div class="note-body">Enter username and password and click <strong>Login</strong>. If credentials are incorrect, the message <em>User with the entered parameters not found!</em> appears.</div>
158 158  </div>
159 159   <div class="fig">
160 - <img src="/xwiki/bin/download/CENTO%20Manuals/1.%20User%20Manual/WebHome/Screenshot%202025-12-01%20at%2009.20.57.png" alt="CENTO main interface panel showing top navigation bar with Diagrams, Analysis, Reports, Logs, and Settings menus" style="max-width:100%;" onclick="openLightbox(this)"/>
224 + <img src="/xwiki/bin/download/CENTO%20Manuals/1.%20User%20Manual/WebHome/Screenshot%202025-12-01%20at%2009.20.57.png" alt="Figure 1.2. Main panel" style="max-width:100%;" onclick="openLightbox(this)"/>
161 161   <p class="fig-cap">Figure 1.2. Main panel</p>
162 162  </div>
163 163   <p>To switch users, open the drop-down menu in the upper right corner and select <strong>Logout</strong>.</p>
164 164   <div class="fig">
165 - <img src="/xwiki/bin/download/CENTO%20Manuals/1.%20User%20Manual/WebHome/1762985502322-231.png" alt="User drop-down menu in the upper right corner with the Logout option highlighted" style="max-width:280px;" onclick="openLightbox(this)"/>
229 + <img src="/xwiki/bin/download/CENTO%20Manuals/1.%20User%20Manual/WebHome/1762985502322-231.png" alt="Figure 1.3. System logout" style="max-width:280px;" onclick="openLightbox(this)"/>
166 166   <p class="fig-cap">Figure 1.3. System logout</p>
167 167  </div>
168 168   <div class="fig">
... ... @@ -268,8 +268,8 @@
268 268  </div>
269 269  
270 270   <h4 id="s-control">2.2.1 Control<a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-control')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" style="flex-shrink:0"><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></h4>
271 - <div class="note note-warning">
272 - <div class="note-hd"><span>⚠</span> Warning</div>
335 + <div class="note">
336 + <div class="note-hd" style="color:#DD5600"><span>⚠</span> Warning</div>
273 273   <div class="note-body">Control actions affect live equipment. Confirm the correct object is selected before executing any command.</div>
274 274  </div>
275 275   <p>Remote switching, setpoint changes, and group commands are executed directly from mimic diagrams. Access is governed by user permissions in the Information Model.</p>
... ... @@ -429,8 +429,8 @@
429 429  
430 430   <h3 id="s-sound">2.8 Sound Alerts<a class="anchor-icon" href="javascript:void(0)" onclick="copyAnchor('s-sound')" title="Copy link"><svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" style="flex-shrink:0"><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>
431 431   <p>Audible browser alerts for events matching configured conditions. Enabled per user in personal settings.</p>
432 - <div class="note note-warning">
433 - <div class="note-hd"><span>⚠</span> Warning</div>
496 + <div class="note">
497 + <div class="note-hd" style="color:#DD5600"><span>⚠</span> Warning</div>
434 434   <div class="note-body">Requires the browser tab to remain active. Backgrounded tabs may experience delayed alerts.</div>
435 435  </div>
436 436  
... ... @@ -643,32 +643,6 @@
643 643   window.addEventListener('resize', update, {passive:true});
644 644   }); });
645 645   })();
646 -
647 - /* ── Left panel navigation hints ── */
648 - (function(){
649 - var hints = {
650 - 'Preface': 'Introduction to CENTO Software documentation',
651 - '1. User Manual': 'Web interface guide — login, diagrams, analysis, logs, reports',
652 - '2. Setup Manual': 'System configuration and setup for administrators',
653 - '3. Metering Channels': 'Metering channel configuration and data collection setup',
654 - '4. Structure and Modules Description': 'CENTO system architecture and module overview',
655 - '5. Diagrams Development Manual': 'Creating and configuring SCADA mimic diagrams',
656 - '6. Flexible Reports Guide': 'Building configurable tabular reports from metering data',
657 - '7. Events Setup': 'Configuring event rules, thresholds, and notifications',
658 - '8. Control Setup Manual': 'Setting up remote control and switching operations',
659 - 'Network Diagram (CLOUD)': 'CENTO deployment topology for cloud installations',
660 - 'Network Diagram (On-Prem)': 'CENTO deployment topology for on-premises installations',
661 - 'Server Configuration Example': 'Reference server setup and configuration example',
662 - 'Technical Requirements': 'Hardware and software requirements for CENTO deployment',
663 - 'DEMO server': 'Access the live CENTO demo environment',
664 - 'Release Notes': 'Changelog and version history for the CENTO platform',
665 - };
666 - document.querySelectorAll('#leftPanels a').forEach(function(a){
667 - var text = a.textContent.trim();
668 - var hint = hints[text] || hints[text.replace(/^\d+\.\s*/, '')];
669 - if (hint) a.setAttribute('data-hint', hint);
670 - });
671 - })();
672 672  })();
673 673  </script>
674 674  {{/html}}