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

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

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

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

Модуль | Имя | Версия | Лицензия | Источник | Языки | Платформы | Тип | Автор
--- | --- | --- | --- | --- | --- | --- | --- | ---
WebCfgD | Конфигуратор программы (Динамический WEB) | 3.1 | GPL2 | ui_WebCfgD.so | en,uk,ru,de | x86,x86_64,ARM | UI | Roman Savochenko Maxim Lysenko (2009) — the page initial translation
Description
Provides the WEB-based configurator of OpenSCADA. The technologies are used: XHTML, CSS and JavaScript. To Do: - implement non locking access to the external stations.

Этот модуль предоставляет конфигуратор 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.

The operating window of the configurator consists of the following parts:

  1 Toolbar — contains the control buttons.
  2 Address of the opened node — displays the selected node address.
  3 Navigator — designed for direct navigation by the control tree and with support the group selection by holding Control or Shift keys, that is used by deletion and setting operations.
    Icon's image of the OpenSCADA project is taken firstly from the file "{StationName}.[png|gif|jpg|jpeg]" and next, at the first one missing, from the file "{StationID}.[png|gif|jpg|jpeg]", in the icons folder.
  4 Workplace field — divided to parts:
    4.1 Node name — contains the current node name.
    4.2 Tabulator of the working areas — the root pages (control areas) of the node are placed into the tabulator. The control areas of the following levels are placed on the main control place.
  4 Status line — indicating the configurator status.

The toolbar contains the following control buttons (from left to right):

- Load — loads the selected object or branch of the object from the storage.
- Load forcibly — loads the selected object or branch of the object from the storage forcibly (even without the modification sign).
- Save — saves the selected object or branch of the object to the storage.
- Save forcibly — saves the selected object or branch of the object to the storage forcibly (even without the modification sign).
- Up — goes to the parent page.
- Back — goes back to the previous page.
- Forward — goes forward to the forward page.
- Add — adds a new object to the container.
- Delete — deletes the selected object.
- Copy item — copies the selected object.
- Cut item — cuts of the selected object. The original object is removed after paste.
- Paste item — pastes of the copied or cut item.
- Refresh — refreshes the current page.
- Start — runs periodically update of the current page content with an interval of one second.
- Stop — stops periodically update of the current page content with an interval of one second.
- Manual on the page — calls the selected page manual.
- About — information about the module.

Элементы управления делятся на: базовые, команды, списки, таблицы и изображения. Все элементы отображаются в последовательности, строго соответствующей их расположению в описании языка интерфейса управления.

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

Для настройки собственного поведения в отдельных случаях, модулем предоставляется возможность настройки отдельных параметров посредством интерфейса управления OpenSCADA (рис.3). Таковыми параметрами являются:

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

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

## 2 Базовые элементы

В число базовых элементов входят: информационные элементы, поля ввода значений, элементы выбора из списка, флаги, текстовые поля. В случае отсутствия имени элемента, базовый элемент присоединяется к предыдущему базовому элементу. Пример группы базовых элементов с присоединением приведён на рисунке 4.

Для элементов ввода, которые не подразумевают мгновенного изменения и могут продолжительное время редактироваться перед окончательным завершением, предусмотрен механизм подтверждения. Этот механизм позволяет исключить задержки при редактировании, особенно в случае конфигурации удалённых станций, и вносить изменения по подтверждению. К элементам ввода с подтверждением относятся: поля ввода строк текста или числовых значений и текстовые поля. Подтверждение осуществляется нажатием кнопки, которая появляется рядом с полем ввода после начала редактирования.

Text fields support the syntax highlighting, the rules are transmitted in the form of regular expressions from the control interface or can be builtin to the text value as a commentary in the XML-tag "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/ru - GFDL | July 2026 | OpenSCADA 1+r3070