Export translations

Settings

Group
Language
Format	Export for off-line translation Export in native format

{{DISPLAYTITLE:Модули/WebVision}}<languages/>
{| class="wikitable"
|-
! Модуль !! Имя !! Версия !! Лицензия !! Источник !! Языки !! Платформы !! Тип !! Автор
|-
<section begin=info />
| [[Special:MyLanguage/Modules/WebVision|WebVision]] || Рабочий пользовательский интерфейс (WEB)
| 6.11 || GPL2 || ui_WebVision.so || en,uk,ru,de || x86,x86_64,ARM
<section end=info />
| UI || {{Author|Roman Savochenko|Maxim Lysenko (2007-2012), Ksenia Yashina (2007-2008)}}
|-
! colspan="9" | Description
|-
| colspan="9" | Visual operation user interface, based on the WEB — front-end to the VCA engine.
* '''Total complexity:''' > 50 {{CtxDetails|HD|human-days, 1 HD — 10 hours}}
* '''Sponsored by, for the primitive "Media" and Notification on 1.35 {{CtxDetails|HD|human-days, 1 HD — 10 hours}}:''' Hadi Ramezani
* '''Sponsored by, for the Notification on 0.85 {{CtxDetails|HD|human-days, 1 HD — 10 hours}}:''' Vinnica Poultry Farm
* '''Sponsored by, for finishing the mirroring of the primitive ElFigure on 0.5 {{CtxDetails|HD|human-days, 1 HD — 10 hours}}:''' SVItoVYR Ltd
* '''Sponsored by, for the Export on 0.8 {{CtxDetails|HD|human-days, 1 HD — 10 hours}}:''' Vinnica Poultry Farm
* '''[[Special:MyLanguage/Works/To_do|To Do]]:'''
<section begin=ToDo />
: * revise and unify the keyboard focus forcing on a first active element considering them specifity, to ensure the keyboard shortcuts;
: - expand the primitive "Diagram" by the mouse scaling operations;
: - implement own RTE-editor for the view Text of the primitive FormEl;
: - ElFigure: fix some properties loss (line width at the least) at the actions processing, in the way of the primitive code common refactoring;
: + expand the status-bar, with the functions:
:: + user status fields;
:: - printing and exporting the Diagram primitive after it moving to "SVG".
: - ElFigure,Diagram: enable or make the anti aliasing, for the library GD;
: - implement the primitives "Diagram", "ElFigure" in the tag "SVG";
: - expand the variant "Animation" of the primitive "Media" in using the raw image files, like to PNG.
<section end=ToDo />
|}

Модуль предоставляет в OpenSCADA механизм конечной визуализации среды визуализации и управления (СВУ). Модуль основан на WEB технологиях (XHTML, JavaScript, CSS, AJAX). В своей работе модуль использует данные движка СВУ — модуль [[Special:MyLanguage/Modules/VCAEngine|VCAEngine]].
{{#lst:Sub-projects/VCA/uk|Introduce}}
С целью избежания этих проблем, а также создания в кратчайшие сроки полного спектра различных типов СВУ, основан [[Special:MyLanguage/Sub-projects/VCA|проект создания концепции СВУ]]. Результатом этого проекта и стал данный модуль непосредственной визуализации (на основе Web-технологий), модуль непосредственной визуализации [[Special:MyLanguage/Modules/Vision|Vision]] и движок СВУ [[Special:MyLanguage/Modules/VCAEngine|VCAEngine]].

== Назначение ==
Данный модуль непосредственной визуализации СВУ предназначен только для исполнения интерфейсов СВУ в среде WEB-технологий!

Интерфейс пользователя формируется в WEB-браузере путём обращения к WEB-серверу и получения от него XHTML-документа по протоколу HTTP. В данном случае, в роли WEB-сервера выступает OpenSCADA, которая поддерживает стандартные коммуникационные механизмы TCP-сетей (модуль [[Special:MyLanguage/Modules/Sockets|Transport.Sockets]]), протокол передачи гипертекста (модуль [[Special:MyLanguage/Modules/HTTP|Protocol.HTTP]]), а также шифрование трафика между браузером и сервером ([[Special:MyLanguage/Modules/SSL|Transport.SSL]]). Исходя из этого, для получения доступа к интерфейсу пользователя, предоставляемого этим модулем, необходимо в OpenSCADA настроить транспорт (Transport.Sockets или Transport.SSL) в связке с протоколом HTTP (Protocol.HTTP). Вместе с OpenSCADA идут конфигурационные файлы, содержащие настройки Transport.Sockets для порта 10002. Следовательно, интерфейс модуля, по умолчанию, будет доступен по URL: "<nowiki>http://localhost:10002</nowiki>".

Финальная версия этого модуля СВУ, построенная на основе данного модуля, обеспечит:
{{#lst:Sub-projects/VCA/ru|TargetFeatures}}

== Исполнение интерфейсов СВУ ==
Исполнение интерфейса СВУ заключается в запуске нового сеанса проекта, или подключения к существующему, на уровне движка СВУ (рис.2). Перед запросом, на подключение к сеансу, выполняется запрос на аутентификацию пользователя (рис.1). Далее, модуль непосредственной визуализации отображает и управляет данными сеанса. Главное окно режима исполнения данного модуля имеет вид, представленный на рисунке 3. Административные пользователи ("root" или в группе "root") могут закрывать открытые сеансы.

Интерфейс окна исполнения полностью строится динамически, скриптом JavaScript и исходя из содержимого сеанса проекта, путём прямых XML запросов к серверу.

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

Механизм запроса только изменённых данных основан на абсолютном счётчике исполнения сессии. При внесении реальных изменений в атрибуты виджетов выполняется запоминание значения этого счётчика, что и позволяет идентифицировать изменённые атрибуты. Такой подход позволяет повысить производительность и уменьшить трафик, в случае доступа к движку СВУ через сеть.

Иерархически, модулем предусматривается возможность размещения страниц проекта как на главном окне исполнения (рис.3), так и вкладывая внутрь виджетов контейнеров, а также путем открытия дополнительных окон поверх основного.

Located in the status bar:
* On the right side:
** the current user, on whose behalf the VCA interface is executed — by a clicking this user can be changed, typing of the new username and password;
** the current interface style, which can be changed selecting need one in the combobox;
** the current alarm status by a lamp with color related to the alarm level and the active notifiers' icons; blinks at the alarm appearing or changing; pressing on the lamp you may quiet the alarm in whole or the desired type of the notification, pressing the correspond notifier icon near;
** the menu buttons of call the page printing and data exporting for:
*** printing: Main Page, Documents;
*** exporting: Documents (HTML,CSV), Tables (CSV).
** manual on the VCA-project — calls by a click the manual on the visualization project for the file "'''{ProjVCA_ID}.[pdf|html|odt]'''" in [[Special:MyLanguage/Documents/Program_manual#Config|the document folder]] or specified in the [[#SpecAttrs|"prjDoc" attribute]];
** panel of user statuses and actions when specified in the [[#SpecAttrs|"statLine" attribute]]; mouse clicking left, right and double forms events to the main interface page.
* In the main field of the status line various messages and assistance messages are displayed.

Модулем поддерживается многоязычность, которая включается [[Special:MyLanguage/Documents/Program_manual#ConfigTr|динамическим переводом сообщений OpenSCADA]]. Полученный язык передаётся модулем [[Special:MyLanguage/Modules/HTTP|Protocol.HTTP]] и определяется путём и в последовательности:
* URL параметр "lang".
* Язык пользователя, который вошёл.
* Язык Web-браузера из HTTP свойства "Accept-Language".
* Общий язык процесса OpenSCADA.

[[file:HTTP_auth_ru.png|center|frame|Рис.1. Страница аутентификации.]]

[[file:WebVision_wvis_connect_ru.png|center|frame|Рис.2. Подключение или создание нового сеанса исполнения проекта СВУ.]]

[[file:WebVision_wvis_run.png|center|frame|Рис.3. Главное окно режима исполнения.]]

== {{Anch|Primitives|Представление базовых элементов (примитивов)}} ==
Данной версией модуля реализованы не все образы примитивов, заложенные проектом. В целом, проектом заложены примитивы:
{| class="wikitable"
|-
! Идентификатор !! Наименование !! Функция
|-
| ElFigure || Элементарная графическая фигура ||
Примитив является основой отрисовки элементарных графических фигур со всевозможной комбинацией их в одном объекте. Предусматривается поддержка следующих элементарных фигур:
* Линия.
* Дуга.
* Кривая Безье.
* Заливка замкнутого пространства.<br/>
Для всех фигур, содержащихся в виджете, устанавливаются единые свойства толщины, цвета и т.д., также, предусматривается возможность указания вышеперечисленных атрибутов для каждой фигуры отдельно и их динамизация.
|-
| FormEl || Элемент формы ||
Включает поддержку стандартных компонентов формы:
* Редактирование строки.
* Редактирование текста.
* Флажок.
* Кнопка.
* Выбор из списка.
* Список.
* Дерево.
* Таблица.
* Слайдер.
* Строка прокрутки. 
|-
| Text || Текст || Элемент текста-метка. Характеризуется типом шрифта, цветом, ориентацией и выравниванием. Предусматривается поддержка аргументов. 
|-
| Media || Медиа || Элемент отображения растровых и векторных изображений различных форматов, проигрывания анимированных изображений, проигрывание аудио-фрагментов и просмотр видео-фрагментов. 
|-
| Diagram || Диаграмма || Элемент диаграммы с поддержкой возможности отображения нескольких потоков в реальном времени для: трендов (временных графиков), частотного спектра, XY диаграмм. 
|-
| Protocol || Протокол || Элемент протокола — визуализатор сообщений программы, с поддержкой нескольких режимов работы.
|-
| Document || Документ || Элемент формирования отчётов, журналов и другой документации на основе доступных данных. 
|-
| Box || Контейнер || Содержит механизм размещения-включения других виджетов для формирования новых, более сложных, виджетов и страниц конечной визуализации. 
|-
| Function, <span style="color: red">в планах</span> || Функция API объектной модели OpenSCADA || Невизуальный виджет, на стороне исполнения, позволяющий включать вычислительные функции объектной модели OpenSCADA в СВУ.
|}

{{Anch|SpecAttrs|The visualizer module provides and uses set of specific attributes}} of the generic means, the information of which is given in the table. These attributes are automatically created by the visualizer in their absence and during the first run, or created by the user in the frame of the specified area, as needed.
{| class="wikitable"
|-
! Identifier (area) !! Name !! Appointment
|-
| keepAspectRatio (main page) || Keep aspect ratio on scale || Keep aspect ratio of the pages on scale.
|-
| stBarNoShow (main page) || Do not show the status bar || Hide the status bar of the main window.
|-
| notify{N}, notifyVisWebVision{N} (page) || Notification: type {N} || [[File:at.png]] Create manually with the type "Text"!
Specifies a notifier and a procedure of the notification resource obtaining according to the [[Special:MyLanguage/Modules/VCAEngine#Alarms|"Signalling (Alarms)" conception]].
|-
| statLine (main page) || Status line items || [[File:at.png]] Create manually with the type "Text"!
Text field with description of the status line item in the string form "'''{Id}:{Label}:{ToolTip}:{Color}:{Img}'''", where:
* "Id" — identifier, uses also to form events from the widget "stIt_{Id}".
* "Label" — visual label of the status element.
* "ToolTip" — context help about the element.
* "Color" — label color.
* "Img" — image of the status element, instead the label.
|-
| userSetVis (main page) || Setting the user || [[File:at.png]] Create manually with the type "String"!
Change the user or call a dialog to select it. Variants of the value:
* "*" — call for a selecting dialog of the user; 
* "$" — change the user to the default one;
* "{user}[:{password}]" — direct change to ''user'' with ''password''; for empty password, the user is changed only if its permission is lesser or equal; a useful example of changing to the "user" after one minute inactivity:
<syntaxhighlight lang="JavaScript" style="margin-left: 20pt">
if((SYS.time()-this.ownerSess().userActTm()) < 60)userSetVis = "";
else if(this.ownerSess().reqUser() != "user") userSetVis = "user";
</syntaxhighlight>
|-
| prjDoc (main page) || Project document || [[File:at.png]] Create manually with the type "String"!
Specifying the project documentation of call from the status line's button with a possibility of disabling-concealing the button at empty value. The documentation specified in view "'''<nowiki>{OffLine}|{OnLineOpenSCADAWiki}</nowiki>'''", for example for the [[Special:MyLanguage/Using/Model_AGLKS|AGLCS project]] — "<nowiki>AGLCS|Using/Model_AGLKS</nowiki>". The online part is used in first order at its specifying!
|-
| vs_goHttpUrl (view "Button" of the primitive "FormEl") || Go to the HTTP URL || [[File:at.png]] Create manually with the type "String"!
Go to the specified URL at the button press.
|-
| vs_background (views "Line edit", "Text edit", "Combo box", "List", "Tree", "Table" of the primitive "FormEl") || Custom background || [[File:at.png]] Create manually with the type "String"!
Specifies for the custom background in the form '''{color}-{transp} {image}'''.
|-
| vs_border (views "Line edit", "Text edit", "Combo box", "List", "Tree", "Table" of the primitive "FormEl") || Custom border || [[File:at.png]] Create manually with the type "String"!
Specifies for the custom border in the standard CSS-form '''{wdth}px {style} {color}'''.
|-
| vs_winTitle (the view "Box") || Window title || [[File:at.png]] Create manually with the type "String"!
Dynamic window title value.
|}

Рассмотрим реализацию каждого примитива более детально.

=== Примитив элементарной фигуры (ElFigure) ===
<section begin=ElFigure />
Реализована поддержка элементарных фигур: линии, эллиптической дуги, кривой Безье и заливка замкнутых контуров цветом и изображением; со свойствами:
* формирование произвольных изображений из трёх элементарных фигур и заполнений замкнутых пространств цветом или изображением;
* возможность определения свойств фигур как в целом, так и отдельно для каждой: ширина, цвет и стиль линии, ширина и цвет бордюра линии, цвет и изображение заполнения;
* масштабирование;
* трансформация: поворот и отражение;
* поддержка пользовательских атрибутов динамических: точек, ширин, цветов, стилей и изображений;
* формирование событий по действиям манипулятором мыши в замкнутом пространстве и в целом.

На рисунке представлена часть экрана с кадром, содержащим вышеперечисленные элементарные фигуры.

[[file:WebVision_wvis_run_elfig.png|center]]
<section end=ElFigure />

=== Примитив текста (Text) ===
<section begin=Text />
Реализована поддержка элемента текста со свойствами:
* Шрифт со свойствами: типа-класса, размера, усиления, наклонности, подчёркивания и перечёркивания. 
* Цвет текста.
* Ориентация текста. 
* Автоматический перенос по словам. 
* Выравнивание текста по горизонтали и вертикали, со всеми вариантами.
* Отображение фона в виде цвета и изображения.
* Отображение бордюра вокруг текста с указанным цветом, шириной и стилем.
* Отображение HTML.
* Дополнение текста аргументами различного типа и свойств.

На рисунке представлена часть экрана с кадром, содержащим примеры текста с использованием различных параметров.

[[file:WebVision_wvis_run_txt_ru.png|center]]
<section end=Text />

=== Примитив элемента формы (FormEl) ===
<section begin=FormEl />
Реализована поддержка элементов формы на кадрах СВУ с заложенными свойства, включая следующие типы:
* ''Редактор строки'' — Представлено следующими видами: "Текст", "Combo", "Целое", "Вещественное", "Время", "Дата", "Время и Дата". Все виды редактора строки поддерживают подтверждение ввода.
* ''Редактор текста'' — Представляет редактор плоского текста с подтверждением или отказом от ввода.
* ''Поле флажка'' — Предоставляет поле бинарного флажка.
* ''Кнопка'' — Предоставляет кнопку с поддержкой цвета кнопки, изображения в кнопке и режимов:
** стандартный;
** переключаемый;
** вызов меню;
** вызов загрузки файла;
** вызов сохранения файла.
* ''Выбор из списка'' — Предоставляет поле выбора элемента со списка указанных элементов.
* ''Список'' — Предоставляет поле списка с контролем за текущим элементом.
* ''Дерево'' — Предоставляет элемент дерева с возможностью выбора элементов.
* ''Таблица'' — Предоставляет элемент таблицы с возможностью выбора ячеек, строк или колонок, а также редактирования содержимого ячейки.
* ''Слайдер'' — Элемент слайдера.
* ''Прогрес-бар'' — Полоска прогресс-бара (идентично Слайдер).
* ''Пароль'' — Скрытый ввод пароля.

Реализованы режимы "Включен" и "Активен", а также передача изменений и событий в модель данных СВУ — движок. Режим "Активный" приводит к установке курсора активности для непустого фона и дополнительных условий различных видов "Text", "Media" и "Box":
* ''Text'' — не пустой текст;
* ''Media'' — не пустой источник изображения.

На рисунке представлена часть экрана с кадром, содержащим вышеперечисленные элементы формы.

[[file:WebVision_wvis_run_formel_ru.png|center]]
<section end=FormEl />

=== Primitive of the displaying the media-materials (Media) ===
<section begin=Media />
Support of the element of the displaying of the media-materials with the following properties is provided:
* Indication of the media data source: images or video-material.
* Review of the images of most well-known formats with the possibility of fitting in the widget size and keeping aspect ratio here.
* Playback of the simple animated images and video formats with the possibility to control the playback speed (<font color="red">inaccessible</font>).
* Playback of the full-formatted video and audio by HTML5.
* Displaying the background as the color and image.
* Displaying the border along the perimeter of the widget, with the specified color, width and style.
* Formation of the active areas and generating the events when they are activated.

На рисунке представлена часть экрана с кадром, содержащим примеры просмотра/проигрывания медиа-данных.

[[file:WebVision_wvis_run_media.png|center]]
<section end=Media />

=== Примитив построения диаграмм (Diagram) ===
<section begin=Diagram />
Реализована поддержка элемента построения диаграмм для типов "График", "Спектр" и "XY", со свойствами:
* Общие свойства типов диаграммы "График", "Спектр" и "XY":
** возможность выбора архиватора, буфера архива или всех данных, при работе с архивными данными;
** адаптация графика параметра к реальным значениям данных путём подстройки шкалы, в случае отсутствия прямо указанного диапазона значений;
** управление масштабом шкалы значений путём увеличения, уменьшения и смещения;
** широкий диапазон масштабирования и адаптации шкалы времени с автоматическим приведением запрашиваемых данных к качеству достаточному для отображения, или нужному для экспорта — указанием предельного количества измерений в пикселе;
** отображение размерной сетки и маркеров по горизонтали и вертикали с адаптацией к диапазону отображения;
** следящий режим за текущим временем путём периодического обновления и смещения времени диаграммы к текущему времени —  времени последних данных в буфере архива.
* Свойства типа диаграммы "График":
** построение графиков до 100 параметров на одной диаграмме в процентной шкале и возможностью отображения выбранных параметров в собственной шкале;
** построение графика для: текущих, архивных и пользовательских данных;
** формирования промежуточного буфера отображения для текущих значений;
** поддержка активного режима с курсором и получением значений под курсором;
** возможность построения графиков как в линейной, так и логарифмической шкале значений.
* Свойства типа диаграммы "Спектр":
** построение графиков частотного спектра параметров до 100 на одной диаграмме в процентной шкале и возможностью отображения выбранных параметров в собственной шкале;
** построение графика для: архивных и пользовательских данных;
** поддержка активного режима с курсором и получением значений под курсором.
* Свойства типа диаграммы "XY":
** построение XY графиков параметров до 50 на одной диаграмме в процентной шкале и возможностью отображения выбранных параметров в собственной шкале;
** построение графика для: текущих, архивных и пользовательских данных;
** формирования промежуточного буфера отображения для текущих значений;
** параметры распределяются парами на график, где чётные по оси Y (0,2,4...) и нечётные по оси X (1,3,5...);
** возможность построения графиков как в линейной, так и логарифмической шкале значений.

На рисунке представлена часть экрана с кадром, содержащим примеры диаграмм: "График", "Спектр" и "XY".

[[file:WebVision_wvis_run_diag.png|center]]
<section end=Diagram />

=== Примитив формирования протокола (Protocol) ===
<section begin=Protocol />
Реализована поддержка элемента формирования протокола со свойствами:
* Формирование протокола из архива сообщений за указанное время и глубину.
* Запрос данных из указанных архиваторов сообщений.
* Выборка данных из архивов по уровню важности и шаблону категории сообщений.
* Поддержка режима слежения за появлением сообщений в архиве сообщений.

На рисунке представлена часть экрана с кадром, содержащим пример протокола.

[[file:WebVision_wvis_run_prot_ru.png|center]]
<section end=Protocol />

=== Примитив формирования отчётной документации (Document) ===
<section begin=Document />
Реализована поддержка элемента формирования отчётной документации со свойствами:
* Гибкое формирование структуры документа на основе языка гипертекстовой разметки, что предоставляет поддержку широких возможностей форматирования документов.
* Формирование документов по команде или расписанию, что необходимо для формирования отчётной документации в архив, с последующим просмотром архива.
* Формирование документов в режиме реального времени, для предоставления их полностью динамически и на основе архивов за указанное время.
* Использование атрибутов виджета для передачи в документ значений и адресов на архивы, что позволяет использовать виджет документа как шаблон, при формировании отчётов с другими входными данными.

В основе любого документа лежит XHTML-шаблон. XHTML-шаблон это тег "body" WEB-страницы, содержащий статику документа в стандарте XHTML 1.0, и элементы исполняемых инструкций на одном из языков пользовательского программирования OpenSCADA в виде '''<?dp {procedure} ?>'''. Результирующий документ формируется путём исполнения процедур и вставки их результата в документ.

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

На рисунке представлен кадр, содержащий пример документа.

[[file:WebVision_wvis_run_doc_ru.png|center]]
<section end=Document />

=== Примитив контейнера (Box) ===
<section begin=Box />
Реализована поддержка примитива контейнера, по совместительству выполняющего роль страниц проектов. Данный примитив является единственным элементом-контейнером, который может включать в себя ссылки на кадры из библиотеки, формируя тем самым пользовательские элементы нужной конфигурации. Примитив реализует предусмотренные проектом свойства. Перечислим, по пунктам, свойства данного примитива:
* ''Контейнер'' — Позволяет формировать нужные объекты путём группировки базовых в рамках данного примитива.
* ''Страница'' — Элементы, построенные на данном примитиве, могут выполнять роль страницы пользовательского интерфейса.
* ''Контейнер страниц'' — Свойство замещения, в процессе исполнения, собственного содержимого другой страницей. Используется для формирования фреймов на страницах пользовательского интерфейса. Например, главная страница типовой SCADA-системы с объектами сигнализации строится именно таким образом.
* ''Фон'' — Поддерживает возможность указания фона в виде цвета и изображения.
* ''Бордюр'' — Поддерживает возможность изображения бордюра с указанным цветом, толщиной и стилем.
<section end=Box />

== Общая конфигурация модуля ==
Для конфигурации и управления этим модулем, предоставляется конфигурационная страница интерфейса управления OpenSCADA (Рис.4) где Вы можете осуществлять:
* Контроль за активными WEB-сеансами.
* Конфигурацию:
** Время жизни, в минутах, и максимальное количество сеансов.
** Время жизни, в часах, и максимальное количество страниц в кеше.
** Уровень сжатия PNG-изображений. Наиболее оптимальным является минимальный уровень 1, поскольку без сжатия получаются большие файлы, а большие уровни сжатия создают более высокую нагрузку на процессор.
** Изменение размера растровых изображений на стороне сервера. В основном чтобы уменьшить размер очень больших изображений, а соответственно и трафика, что приводит к увеличению нагрузки на сервер.
** Пользовательские CSS правила интерфейса. CSS правила переопределения стандартных, которые размещаются по специальному знаку ##CUST_CSS## файла WebVisionVCA.html.

[[file:WebVision_wvis_cfg_ru.png|center|frame|Рис.4. Страница конфигурации модуля.]]

You can deeply customise main interface of the module overriding and adding the HTML and JavaScript code by placing to folder of your OpenSCADA project files WebVisionVCA.html and WebVisionVCA.js which initially you can obtain from the module source code — [http://oscada.org/svn/trunk/OpenSCADA/src/moduls/ui/WebVision/ UI.WebVision].

== {{Anch|Efficiency|Эффективность и масштабируемость}} ==
{{CntHdr|31.07.2019}}
GROUNDS: The Web-sessions may create many objects servicing the VCA-session for generating images, processing documents and performing other background functions of the end user Web-interface. Moreover, in difference to [[Special:MyLanguage/Modules/Vision|Vision]], the VCA-sessions may be created, closed and recreated again multiple times for different users and remote hosts. In the time the memory heap is affected by the memory fragmentation, so the program consumes more memory than at the start. The table below represents the phenomenon for different environments and the first page of [[Special:MyLanguage/Using/Model_AGLKS|the DemoDB (AGLKS) project]] reopening:
{| class="wikitable"
|-
! Environment !! Initially, MB !! Iter. 1, MB !! Iter. 2, MB !! Iter. 3, MB !! Iter. 4, MB !! Iter. 5, MB !! Resume
|-
| colspan="9" | ''Complete creation the Web- and VCA-sessions''

|-
| Debian 10 amd64, GLibC 2.28, GCC 8.3.0 + MALLOC_ARENA_MAX=2 || 181 || 189 || 190 || 195 || 195 || 194 || Satiated on the iteration '''3''', base consumption 8 MB, extra consumption 5 MB ('''62.5''' %), liboscada.so 3.5 MB, ui_WebVision.so 0.75 MB
|-
| Debian 10 amd64, GLibC 2.28, GCC 8.3.0 + MALLOC_ARENA_MAX=1 || 177 || 185 || 186 || 186 || 185 || 186 || Satiated on the iteration '''2''', base consumption 8 MB, extra consumption 1 MB ('''13''' %), liboscada.so 3.5 MB, ui_WebVision.so 0.75 MB
|-
| Debian 9 amd64, GLibC 2.28, GCC 8.3.0 + MALLOC_ARENA_MAX=1 || 160 || 168 || 168 || 168.5 || 168.5 || 168.5 || Satiated on the iteration '''1''', base consumption 8 MB, extra consumption 0.5 MB ('''6''' %), liboscada.so 3.5 MB, ui_WebVision.so 0.75 MB

|-
| Debian 10 amd64, GLibC 2.28, GCC 8.3.0 + optional background objects in WebVision || 184 || 194.5 || 200 || 207 || 207 || 212.5 || Satiated on the iteration '''5''', base consumption 10.5 MB, extra consumption 18 MB ('''171''' %), liboscada.so 3.5 MB, ui_WebVision.so 0.75 MB

|-
| Debian 10 amd64, GLibC 2.28, GCC 8.3.0 || 182 || 191.5 || 199 || 206 || 212 || 212 || Satiated on the iteration '''4''', base consumption 9.5 MB, extra consumption 20 MB ('''200''' %), liboscada.so 3.5 MB, ui_WebVision.so 0.74 MB
|-
| Debian 9 amd64, GLibC 2.24, GCC 6.3.0 || 160 || 170 || 178 || 179 || 183 || 185 || Satiated on the iteration '''5''', base consumption 10 MB, extra consumption 15 MB ('''150''' %), liboscada.so 3.5 MB, ui_WebVision.so 0.72 MB
|-
| Debian 8 amd64, GLibC 2.19, GCC 4.9.2 || 125.5 || 133 || 139 || 139 || 139 || 139 || Satiated on the iteration '''2''', base consumption 7.5 MB, extra consumption 6 MB ('''80''' %), liboscada.so 3.8 MB, ui_WebVision.so 0.79 MB
|-
| Debian 7 amd64, GLibC 2.13, GCC 4.7.2 || 101 || 108 || 111 || 112 || 112 || 112 || Satiated on the iteration '''2''', base consumption 7 MB, extra consumption 4 MB ('''57''' %), liboscada.so 3.4 MB, ui_WebVision.so 0.85 MB

|-
| Debian 10 i386, GLibC 2.28, GCC 8.3.0 + MALLOC_ARENA_MAX=1 || 144 || 152 || 152 || 152 || 152 || 152 || Satiated on the iteration '''1''', base consumption 8 MB, extra consumption 0 MB ('''0''' %), liboscada.so 3.7 MB, ui_WebVision.so 0.9 MB
|-
| Debian 9 i386, GLibC 2.24, GCC 6.3.0 + MALLOC_ARENA_MAX=1 || 126.5 || 132.5 || 133 || 133 || 133 || 133 || Satiated on the iteration '''1''', base consumption 6 MB, extra consumption 0.5 MB ('''8''' %), liboscada.so 3.7 MB, ui_WebVision.so 0.9 MB

|-
| Debian 10 i386, GLibC 2.28, GCC 8.3.0 || 151 || 158 || 162.5 || 166 || 166 || 166 || Satiated on the iteration '''3''', base consumption 7 MB, extra consumption 8 MB ('''114''' %), liboscada.so 3.7 MB, ui_WebVision.so 0.9 MB
|-
| Debian 9 i386, GLibC 2.24, GCC 6.3.0 || 125 || 131 || 132 || 136 || 136 || 139 || Satiated on the iteration '''5''', base consumption 6 MB, extra consumption 8 MB ('''133''' %), liboscada.so 3.7 MB, ui_WebVision.so 0.9 MB
|-
| Debian 8 i386, GLibC 2.19, GCC 4.9.2 || 92.5 || 99 || 101.5 || 103 || 103.5 || 103.5 || Satiated on the iteration '''2''', base consumption 6.5 MB, extra consumption 4.5 ('''69''' %), liboscada.so 3.6 MB, ui_WebVision.so 0.94 MB
|-
| Debian 7 i386, GLibC 2.13, GCC 4.7.2 || 70 || 76 || 76 || 76 || 77 || 77 || Satiated on the iteration '''2''', base consumption 6 MB, extra consumption 1 MB ('''16''' %), liboscada.so 3.6 MB, ui_WebVision.so 0.9 MB
|-
| ALTLinux 6 i386, GLibC 2.11.3, GCC 4.5.4 || 69 || 74 || 75 || 75 || 75 || 75 || Satiated on the iteration '''2''', base consumption 5 MB, extra consumption 1 MB ('''20''' %), liboscada.so 2.3 MB, ui_WebVision.so 0.9 MB

|-
| colspan="9" | ''Creation only VCA-session, from remote connection to the visualizer server''
|-
| Debian 10 amd64, GLibC 2.28, GCC 8.3.0 || 180 || 186 || 186 || 186 || 186 || 186 || Satiated on the iteration '''1''', extra consumption 0.2 MB (3 %)
|-
| Debian 7 amd64, GLibC 2.13, GCC 4.7.2 || 100 || 104 || 105 || 105 || 105 || 105 || Satiated on the iteration '''1''', extra consumption 1 MB (25 %)

|-
| Debian 10 i386, GLibC 2.28, GCC 8.3.0 || 148 || 154 || 155 || 155 || 155 || 155 || Satiated on the iteration '''1''', extra consumption 1 MB (16 %)
|-
| Debian 7 i386, GLibC 2.13, GCC 4.7.2 || 69 || 72 || 72 || 72 || 72 || 72 || Satiated on the iteration '''1''', extra consumption 0 MB (0 %)
|}

CONCLUSION: We see obvious degradation in the memory effectivity on the last Debian releases starting at Debian 8 (GLibC 2.19) on I386 and Debian 9 (GLibC 2.24) on AMD64, when the memory consumption increased up to 200% after 3,4 free-allocate iterations of the same data. To more presenting of the problem there have built follow images on the data basis:

[[file:WebVision_MemEffectAMD64.png|center|frame|Fig.5. Memory effectivity on AMD64 platform.]]

[[file:WebVision_MemEffectI386.png|center|frame|Fig.6. Memory effectivity on I386 platform.]]

[[file:WebVision_AbsInitSizeAMD64.png|center|frame|Fig.7. Absolute initial size of OpenSCADA "AGLKS" on the platform AMD64.]]

[[file:WebVision_AbsInitSizeAI386.png|center|frame|Fig.8. Absolute initial size of OpenSCADA "AGLKS" on the platform I386.]]

MEASURES:
# The optional background objects were implemented for the primitives "FormEl" and "Text", what will have most effect on mnemonic-schemes with these elements and wont have many effect for other, see the measuring data above.
# There were some tries to tune the memory allocator of GLibC using "[https://www.gnu.org/software/libc/manual/html_node/Memory-Allocation-Tunables.html Memory Allocation Tunables]" without any significant effect, so we will [https://bugs.debian.org/cgi-bin/bugreport.cgi?bug=934080 notify the Debian community], firstly.
# The problem was detected in arenas of the memory allocator, setting whose number to 1 (MALLOC_ARENA_MAX=1) completely resolves the problem and the effect you may see on Figures 9, 10, for a real big application.

[[file:WebVision_MemoryDef.png|center|frame|Fig.9. Tendency of the memory consumption on a real big application at the default conditions.]]

[[file:WebVision_MemoryArenas1.png|center|frame|Fig.10. Tendency of the memory consumption on a real big application at the environment variable MALLOC_ARENA_MAX=1.]]

{{CntHdr|20.06.2013}}
GROUNDS: At working with the board [[Special:MyLanguage/Using/Kontron_MOPSlcdLX|MOPSlcdLX]], attention was drawn to the heavy load of the task of forming full-size trends. As it turned out later, a large load is created by the formation of a PNG image in the GD2 library, or rather, the packing procedure of ZLib. The subject analysis of the performance of the formation of images of various formats on this board is summarized in the table below:
{| class="wikitable"
|-
! Format !! Trend building, milliseconds !! Converting to the image format, milliseconds !! Size of the image, bytes
|-
| PNG (0) || 200 || 800 || 1700365 
|-
| PNG (1) || 200 || 690 || 24000 
|-
| PNG (-1) || 200 || 1000 || 14800 
|-
| PNG (9) || 200 || 1900 || 13354 
|-
| JPEG (-1) || 200 || 180 || 53157 
|-
| GIF || 200 || 380 || 14300 
|}

CONCLUSION: As can be seen from the table above, the operation of forming PNG as a whole is resource-intensive and the most optimal level of compression is "1". At the same time, the formation of JPEG and GIF is much faster, but these image formats have a number of critical flaws, namely: JPEG does not have an alpha channel (transparency), and GIF is limited by the number of colors, which in both cases leads to loss of transparency and distortion of text smoothing and images in general.

MEASURES: The ability to select the compression level for the generated PNG images is added, and the default value is set to the optimal level "1". The implementation of the formation of the "Diagram" primitive on the browser side in the "svg" or "canvas" tags is planned.

== Замечания ==
На данном этапе модуль может быть использован для построения реальных интерфейсов пользователя с поддержкой основных функций. Однако, отдельные проблемы могут возникать как по причине недоработанности, так и различия браузеров. Сейчас достаточно качественно обеспечена работоспособность на браузерах: Chromium (Google Chrome), FireFox, Opera, Konqueror.

== Ссылки ==
* [[:File:WebVision MemAllocFree.ods|Электронная таблица: Анализ эффективности распределения памяти.]]

Export translations

Views

Navigation menu

OpenSCADA

OpenSCADA Wiki

Search

Tools

MediaWiki

Personal tools