Модулі/Динамічний конфігуратор на Web - OpenSCADAWiki

# Модулі/Динамічний конфігуратор на Web

This page is a translated version of the page Modules/WebCfgD and the translation is 100% complete.

English • ‎mRussian • ‎Українська

Модуль | Ім'я | Версія | Ліцензія | Джерело | Мови | Платформи | Тип | Автор
--- | --- | --- | --- | --- | --- | --- | --- | ---
WebCfgD | Конфігуратор програми (Динамічний WEB) | 3.1 | GPL2 | ui_WebCfgD.so | en,uk,ru,de | x86,x86_64,ARM | Користувацькі інтерфейси | Роман Савоченко
Опис
Надає заснований на WEB динамічний конфігуратор OpenSCADA. Використано технології: XHTML, CSS та JavaScript. Завдання (To Do): - реалізувати неблокуючий доступ до зовнішніх станцій.

Цей модуль надає конфігуратор OpenSCADA. Конфігуратор реалізовано на основі таких Web-технологій:

- HTTP — протокол передачі гіпертексту;
- XHTML — розширена мова розмітки гіпертекстових документів;
- CSS — каскадні таблиці стилів гіпертекстових документів;
- JavaScript — мова програмування браузеру, вбудована у гіпертекстовий документ;
- DOM — об'єктна модель документу внутрішньої структури браузеру;
- AJAX — механізм асинхронних та синхронних запитів із JavaScript до серверу;
- XML — розширена мова розмітки.

Інтерфейс конфігуратору формується у WEB-браузері шляхом звернення до WEB-серверу та отримання від нього XHTML-документу за протоколом HTTP. У цьому випадку, у ролі WEB-серверу виступає OpenSCADA, яка підтримує стандартні комунікаційні механізми TCP-мереж (модуль Transport.Sockets), протокол передачі гіпертексту (модуль Protocol.HTTP), а також шифрування трафіку між браузером та сервером (Transport.SSL). Виходячи з цього, для отримання доступу до інтерфейсу користувача, який надається цим модулем, потрібно у OpenSCADA налаштувати транспорт (Transport.Sockets або Transport.SSL) у поєднані з протоколом HTTP (Protocol.HTTP). Разом з OpenSCADA постачаються конфігураційні файли, які містять налаштування Transport.Sockets для порту 10002. Відповідно, інтерфейс модуля, по замовченню, буде доступний за URL: "http://localhost:10002".

Після отримання XHTML-документу браузером запускається програма на мові JavaScript, для формування динамічного інтерфейсу конфігуратору.

У основі модуля лежить інтерфейс управління OpenSCADA, що означає надання єдиного інтерфейсу конфігурації. Оновлення модуля може знадобитися тільки у випадку оновлення специфікації мови інтерфейсу управління. Для запиту контексту сторінки використовується груповий запит інтерфейсу управління, що дозволяє оптимізувати час віддаленого доступу за високо-латентними та повільними каналами зв'язку.

Модуль реалізовувався та тестувався на чотирьох WEB-браузерах — представниках трьох типів WEB-рушіїв, а саме:

- Chromium 55
- Mozilla Firefox 3.0, 45.7
- Opera 9.6
- Konqueror 3.5, 4

Використання модуля починається з відкриття сеансу користувача (автентифікації) модулем протоколу HTTP (Protocol.HTTP). Для функціювання аутентифікації та механізму збереження сеансу, браузер повинен дозволяти Cookies.

Рис.1. Аутентифікація користувача.
Рис.2. Робоче вікно конфігуратора.

Розглянемо робоче вікно конфігуратору на рисунку 2.

Робоче вікно конфігуратору складається із наступних частин:

  1 Панель інструментів — містить кнопки управління.
  2 Адреса відкритого вузла — відображає адресу обраного вузла.
  3 Навігатор — призначено для прямої навігації за деревом управління із підтримкою групового обрання утриманням клавіш Control або Shift, що використовується операціями видалення і встановлення.
    Зображення іконки проекту OpenSCADA спочатку отримується із файлу "{StationName}.[png|gif|jpg|jpeg]", а потім, за відсутності першого, із файлу "{StationID}.[png|gif|jpg|jpeg]", у теці іконок.
  4 Робоче поле — поділено на частини:

поділено на частини:

    4.1 Ім'я вузла — містить ім'я поточного вузла.
    4.2 Табулятор робочих областей — до табулятору розташовуються кореневі сторінки (області управління) вузла. Області управління наступних рівнів розташовуються у основному просторі контролю.
  5 Рядок статусу — відображає стан конфігуратора.

Панель інструментів містить наступні кнопки управління (зліва на право):

- Завантажити — завантаження обраного об'єкту або гілки об'єктів зі сховища.
- Примусово завантажити — примусове завантаження (навіть без ознаки модифікації) обраного об'єкту або гілки об'єктів зі сховища.
- Зберегти — збереження обраного об'єкту або гілки об'єктів до сховища.
- Примусово зберегти — примусове збереження (навіть без ознаки модифікації) обраного об'єкту або гілки об'єктів до сховища.
- Нагору — підняття нагору по дереву.
- Попередня — відкриття попередньої сторінки, що відкривалася.
- Наступна — відкриття наступної сторінки, що відкривалася.
- Додати — додання нового об'єкту до контейнеру.
- Видалити — видалення обраного об'єкту.
- Копіювати елемент — копіювання обраного об'єкту.
- Вирізати елемент — вирізання обраного об'єкту. Початковий об'єкт видаляється після вставки.
- Вставити елемент — вставка скопійованого або вирізаного елементу.
- Оновити — оновлення вмісту поточної сторінки.
- Запустити — запуск періодичного оновлення вмісту поточної сторінки з інтервалом одна секунда.
- Зупинити — зупинка періодичного оновлення вмісту поточної сторінки з інтервалом одна секунда.
- Підручник на сторінку — виклик підручника обраної сторінки.
- Про... — інформація про цей модуль.

Елементи управління поділяються на: базові, команди, переліки, таблиці та зображення. Всі елементи відображаються у послідовності, яка суворо відповідає їх розташуванню у описі мови інтерфейсу управління.

## 1 Конфігурація

Для налаштування власної поведінки у окремих випадках, модулем надається можливість налаштування параметрів за посередництвом інтерфейсу управління OpenSCADA (рис.3). Такими параметрами є:

- Перехід на сторінку конфігурації переліку зовнішніх OpenSCADA станцій, що використовується для надання можливості віддаленої конфігурації.

Рис.3. Сторінка конфігурації самого конфігуратора.

## 2 Базові елементи

До числа базових елементів входять: інформаційні елементи, поля вводу значень, елементи обрання з переліку, прапорці-ознаки, текстові поля. У випадку відсутності ім'я елементу, базовий елемент приєднується до попереднього базового елементу. Приклад групи базових елементів з приєднанням наведено на рисунку 4.

Для елементів вводу, які не передбачають миттєвих змін та можуть тривалий час редагуватися перед остаточним завершенням, передбачено механізм підтвердження. Цей механізм дозволяє виключити затримки при редагуванні, особливо у випадках конфігурації віддалених станцій, та вносити зміни за підтвердженням. До елементів вводу з підтвердженням відносяться: поля вводу рядків тексту або чисельних значень та текстові поля. Підтвердження здійснюється натиском кнопки, яка з'являється поряд з полем вводу після початку редагування.

Текстові поля підтримують підсвічення синтаксису, правила чого передаються у вигляді регулярних виразів з інтерфейсу управління або можуть бути вбудовані до значення тексту як коментар у XML-тегу "SnthHgl".

Рис.4. Приєднання базових елементів.

## 3 Команди

Команди — це елементи передачі визначених вказівок дії вузлу та організації посилань-переходів на інші сторінки. Команди можуть містити параметри. Параметри формуються з базових елементів. Приклад команди з параметрами приведено на рисунку 5.

Рис.5. Команда.

## 4 Списки

Переліки містять групу базових елементів одного типу. Операції над елементами доступні через контекстне меню переліку, за кліком мишею на переліку. Через елементи переліку можуть виконуватися операції переходу на інші сторінки, зазвичай дочірні. Переліки можуть бути індексованими. Приклад переліку наведено на рисунку 6.

Рис.6. Список.

## 5 Таблиці

Таблиці містять значення базових елементів. Тип базового елементу є індивідуальним для кожного стовпчика. Приклад таблиці наведено на рисунку 7. Операції над структурою таблиці, для редагованих таблиць, доступні за посередництвом контекстного меню, за кліком на службовому стовпчику із номерами рядків. Редагування елементів таблиці здійснюється шляхом подвійного кліку по потрібній клітинці.

Рис.7. Таблиця.

## 6 Зображення

Зображення закликано передавати графічну інформацію до конфігураторів. Приклад зображення наведено на рисунку 8.

Рис.8. Зображення.

## 7 Дизайн

Модуль підтримує зміну дизайну шляхом розташування у робочій/поточній теці двох файлів WebCfgDVCA.html та WebCfgDVCA.js, де перший — це XHTML-шаблон сторінки конфігуратору, а другий — це JavaScript програма XHTML-шаблону.

На цей час наявні наступні дизайни:

- Новий стандартний дизайн (по замовченню): WebCfgDVCA.html, WebCfgDVCA.js
- Старий стандартний дизайн (по замовченню): WebCfgDVCA.html, WebCfgDVCA.js

## 8 Помилки

Представлення конфігуратору може дещо відрізнятися на різних типах браузерів. Це пов'язано з тим, що у основі цього модуля лежить багато достатньо складних технологій, а також відмінностей їх реалізації на різних типах WEB-рушіїв.

Окрім того, кожний Web-браузер містить власні помилки. Частину помилок було обійдено у процесі реалізації, однак частина залишилася через значні складності у їх обході або-ж фактичної неможливості це виконати.

У цьому розділі міститься таблиця переліку виявлених помилок WEB-браузерів, які проявляються у конфігураторі.

Помилка | Опис | Виправлення
--- | --- | ---
Mozilla FireFox 3.0.4 (stable, few errors)
Offset of the popup window of the editable combobox at 5 pixels to the up and to the left. | The problem lies in the fact that the calculation of the absolute position of the element of the document doesn't grab exactly 5 pixels. Error of 5 pixels is visible in relation to the coordinates of the mouse pointer and the position of the newly-created entirely-positioned window. The algorithm for computing the position: for( ; obj != null; obj = obj.offsetParent ) posX += obj.offsetLeft; | To correction of this error to the estimated value on this browser the 5 pixels are added.
In the element of the list (<select size="10"/>) the vertical scroll is always shows and never turned on the horizontal one. | This element is actively used for building the context menu and drop-down list of the editable combo-box. | For workaround the browser error I must include the list in the block with scroll of the block itself.
The image field is not updating. | In order to eliminate the need for restructuring of the configurable page while updating the values of fields in the tree of the structure objects of the pages which was get from the XMLHttpRequest, the properties are created with the links to the object of the tags of the fields (addr_lab, addr_val_w). In objects with the name of the tag "img", these properties are not created by the browser. | not solved
Opera (stable, few errors)
Scroll of the unit of the page does not turn on. For example when displaying large images of the trend. | The block is fixed with the parameters{ overflow: auto; width: 600px; } however, in the case of the exceeding the size of the interior elements the scroll is not turned on. | not solved
Konqueror (very unstable on the dynamic resources and contains many errors)
Stable browser crashing. | Browser repeatedly and consistently crashes while the computation of JavaScript and when dealing with the external windows. | not solved
The scroll of the navigation tree doesn't returned. | If you drag the navigation tree to the vertical scroll, then scroll it down, then roll the large branch, the vertical scroll disappears, and some of the tree remains invisible behind the top of the block. That. the contents of the block are not updated. | not solved
The images do not update. | In the fields of images, to update the image from the server, the property "src" is to be changed. The browser does not sense it, or even updates the size of the frame, and the image is not updated. Methods to prevent caching of the images are used, but do not help. | not solved
Capturing button images | JavaScript of the module uses non-asynchronous but synchronous requests to the server to save the sequence of actions. At moments of such a request, if it was triggered by an event from an image (the image is a button), the image is captured as if it were for transfer, even for short-term mouse clicks. | not solved
Impossible to insert a new element to the tree of objects obtained as a result of XMLHttpRequest | To control the modification of the configuration page structure, the current structure tree was mapped to the newly received XMLHttpRequest. When inserting a new element into the structure tree using insertBefore(), a "DOM error 4" error occurs. If the insertion takes place in a tree created from scratch (and not from XMLHttpRequest), this error does not occur. The problem seems to be the difference between the "document" object of the owner of these trees. In such a tree it is not possible to add a node created as document.createElement(). Only the ones created as mytree.ownerDocument.createElement() are inserted. | The procedure for verifying the structure has been simplified and reduced to the definition of the fact of the change.
The mechanisms of the context menu formation in the Konqueror 4 doesn't work. | Typically, to create a context menu, the oncontextmenu handler, on Firefox and IE, or onmousedown with the right key processing, on the other browsers, are used. In Konqueror, oncontextmenu does not work at all, and onmousedown works only in Konqueror 3.5. | not solved

Modules/WebCfgD/uk - GFDL | May 2026 | OpenSCADA 0.9.9