Skip to Content

Changes for page 1. User Manual

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

Summary

Details

Page properties
Content
... ... @@ -1,188 +1,7 @@
1 +{{include reference="CENTO Manuals.StyleSheet"/}}
2 +
1 1  {{html clean="false"}}
2 -<style>
3 -#rn-prog { position:fixed;top:0;left:0;height:3px;width:0;background:#005AB4;z-index:9999;pointer-events:none; }
4 4  
5 -/* Layout: relative container, content fills width minus TOC margin */
6 -.doc-wrap {
7 - position:relative;
8 -}
9 -.doc-content {
10 - margin-right:224px; /* TOC width 200px + 24px gap — never changes */
11 - border-left:1px solid #E8E8E8;
12 - border-right:1px solid #E8E8E8;
13 - padding:0 32px;
14 -}
15 -
16 -/* TOC: absolute by default, fixed via JS when scrolled */
17 -.doc-toc {
18 - position:absolute;
19 - top:0; right:0;
20 - width:200px;
21 - font-size:12.5px;line-height:1.55;
22 - padding:20px 0 20px 16px;
23 -}
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; }
44 -.doc-toc ul { list-style:none;margin:0;padding:0; }
45 -.doc-toc li { margin:0; }
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; }
58 -.tl2 > a { padding-left:14px; }
59 -.tl3 > a { padding-left:26px;font-size:12px; }
60 -
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 -}
85 -.doc-content p { font-size:.93em;color:#333;line-height:1.75;margin:0 0 12px 0; }
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; }
88 -
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 -}
95 -h2:hover .anchor-icon,h3:hover .anchor-icon,h4:hover .anchor-icon { opacity:1; }
96 -.anchor-icon:hover { color:#005AB4; }
97 -
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; }
109 -
110 -/* Oracle-style section index list */
111 -.section-index {
112 - list-style:disc;padding-left:20px;margin:0 0 20px 0;
113 -}
114 -.section-index li { margin-bottom:12px; }
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 -}
122 -
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 -}
128 -.parent-topic a { color:#005AB4; }
129 -
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 -}
140 -details.acc summary::-webkit-details-marker { display:none; }
141 -details.acc summary::before {
142 - content:'▶';font-size:.58em;color:#555555;
143 - transition:transform .18s;flex-shrink:0;
144 -}
145 -details.acc[open] summary::before { transform:rotate(90deg); }
146 -details.acc summary:hover { background:#f5f5f5; }
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; }
149 -.acc-body { padding:10px 14px 12px 14px;font-size:.88em;color:#333;line-height:1.7; }
150 -
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; }
159 -
160 -/* Lightbox */
161 -#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; }
162 -#rn-lb.open { display:flex; }
163 -#rn-lb-wrap { position:relative;cursor:default;max-width:92vw;max-height:90vh; }
164 -#rn-lb-wrap img { max-width:100%;max-height:90vh;border-radius:5px;display:block; }
165 -#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; }
166 -#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; }
167 -
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); }
170 -#rn-top.on { opacity:1;transform:translateY(0);pointer-events:auto; }
171 -#rn-top:hover { background:#0066cc; }
172 -
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; }
175 -.rn-toast.on { opacity:1; }
176 -
177 -/* Tables */
178 -.rn-table { width:100%;border-collapse:collapse;margin:8px 0 18px 0;font-size:.875em; }
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; }
180 -.rn-table td { padding:7px 12px;border-bottom:1px solid #E8E8E8;color:#333;vertical-align:top; }
181 -.rn-table tr:last-child td { border-bottom:none; }
182 -.rn-table tr:hover td { background:#f5f5f5; }
183 -.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; }
184 -</style>
185 -
186 186  <div id="rn-prog"></div>
187 187  <div id="rn-lb">
188 188   <div id="rn-lb-wrap">
... ... @@ -201,6 +201,9 @@
201 201  <!-- ── CONTENT ── -->
202 202  <div class="doc-content">
203 203  
23 + <h1>User Manual</h1>
24 + <p class="rn-meta">Last modified by Iaroslav Platonov · 2026/02/06</p>
25 +
204 204   <ul class="section-index">
205 205  <li><a href="#s-login">1. System Login</a><p>How to access the CENTO web interface, log in, and switch users.</p></li>
206 206  <li><a href="#s-ui">2. User Interface</a><p>Overview of the main menu, SCADA diagrams, analysis tools, logs, reports, and notifications.</p></li>
... ... @@ -213,7 +213,7 @@
213 213   <p>Users log in to CENTO through a web interface. Supported browsers: Google Chrome, Microsoft Edge, etc.</p>
214 214   <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>
215 215   <div class="fig">
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)"/>
38 + <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)"/>
217 217   <p class="fig-cap">Figure 1.1. Authorization page</p>
218 218  </div>
219 219   <div class="note">
... ... @@ -221,12 +221,12 @@
221 221   <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>
222 222  </div>
223 223   <div class="fig">
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)"/>
46 + <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)"/>
225 225   <p class="fig-cap">Figure 1.2. Main panel</p>
226 226  </div>
227 227   <p>To switch users, open the drop-down menu in the upper right corner and select <strong>Logout</strong>.</p>
228 228   <div class="fig">
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)"/>
51 + <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)"/>
230 230   <p class="fig-cap">Figure 1.3. System logout</p>
231 231  </div>
232 232   <div class="fig">
... ... @@ -707,6 +707,32 @@
707 707   window.addEventListener('resize', update, {passive:true});
708 708   }); });
709 709   })();
532 +
533 + /* ── Left panel navigation hints ── */
534 + (function(){
535 + var hints = {
536 + 'Preface': 'Introduction to CENTO Software documentation',
537 + '1. User Manual': 'Web interface guide — login, diagrams, analysis, logs, reports',
538 + '2. Setup Manual': 'System configuration and setup for administrators',
539 + '3. Metering Channels': 'Metering channel configuration and data collection setup',
540 + '4. Structure and Modules Description': 'CENTO system architecture and module overview',
541 + '5. Diagrams Development Manual': 'Creating and configuring SCADA mimic diagrams',
542 + '6. Flexible Reports Guide': 'Building configurable tabular reports from metering data',
543 + '7. Events Setup': 'Configuring event rules, thresholds, and notifications',
544 + '8. Control Setup Manual': 'Setting up remote control and switching operations',
545 + 'Network Diagram (CLOUD)': 'CENTO deployment topology for cloud installations',
546 + 'Network Diagram (On-Prem)': 'CENTO deployment topology for on-premises installations',
547 + 'Server Configuration Example': 'Reference server setup and configuration example',
548 + 'Technical Requirements': 'Hardware and software requirements for CENTO deployment',
549 + 'DEMO server': 'Access the live CENTO demo environment',
550 + 'Release Notes': 'Changelog and version history for the CENTO platform',
551 + };
552 + document.querySelectorAll('#leftPanels a').forEach(function(a){
553 + var text = a.textContent.trim();
554 + var hint = hints[text] || hints[text.replace(/^\d+\.\s*/, '')];
555 + if (hint) a.setAttribute('data-hint', hint);
556 + });
557 + })();
710 710  })();
711 711  </script>
712 712  {{/html}}