Modules/WebVision

The module provides in OpenSCADA a mechanism of the final visualization of the visual control area (VCA). The module is based on WEB technologies (XHTML, JavaScript, CSS, AJAX). In its work, the module uses the data from the VCA engine — module VCAEngine.

Visual control area (VCA) is an integral part of the SCADA system. It applies to the client stations with a view to providing accessible information about the control object and to for the the issuance of the control actions to the object. In various practical situations and conditions the VCA, based on different principles of visualization, may by applied. For example, this may be the library of widgets Qt, GTK+, WxWidgets or hypertext mechanisms based on the technologies HTML, XHTML, XML, CSS and JavaScript, or third-party applications of visualization, realized in various programming languages Java, Python, etc. Any of these principles has its advantages and disadvantages, the combination of which could become an insurmountable obstacle to the use of VCA in a practical case. For example, technologies like the Qt library can create highly-productive VCA, which will undoubtedly important for the operator station for control the technological processes (TP). However, the need for installation of that client software in some cases may make using of it impossible. On the other hand, Web-technology does not require installation on client systems and is extremely multi-platform (it is enough to create a link to the Web-server at any Web-browser) that is most important for various engineering and administrative stations, but the productivity and reliability of such interfaces is lower, that actually eliminates the using of them at the operator stations of TP.

OpenSCADA has extremely flexible architecture that allows you to create external interfaces, including user, in any manner and taste. For example, the OpenSCADA configuration environment available now as by means of the Qt-library, and also the Web-based.

At the same time, independent creation of the VCA implementations in different basis may cause the inability to use the configuration of one VCA in another one. That is inconvenient and limited from the user side, as well as costly in terms of implementation and follow-up support.

In order to avoid these problems, as well as to create as soon as possible the full spectrum of different types of VCA, the generic concept of VCA is established. The result of this project — this direct visualization module (based on the Web-technologies), direct visualization module Vision and the VCA engine VCAEngine.

1 Purpose

This module of the direct visualization of the VCA serves only for the execution of the VCA interfaces in the area of WEB-technologies!

The user interface forms in WEB-browser, by reference to the WEB-server and receiving from it XHTML-document over HTTP. In this case, the WEB-server — OpenSCADA, which supports standard communication mechanisms of the TCP-networks (module Transport.Sockets), hypertext transfer protocol (module Protocol.HTTP), as well as encryption of the traffic between the browser and the server (Transport.SSL). Therefore, in order to access the user interface provided by this module, OpenSCADA must configure transport (Transport.Sockets or Transport.SSL) in conjunction with the HTTP protocol (Protocol.HTTP). OpenSCADA comes with configuration files that contain the Transport.Sockets configuration for port 10002. Consequently, the module interface, in the default, will be available at URL: "http://localhost:10002".

The final version of this VCA module, built on the basis of this module, will provide:

• three levels of difficulty in the formation of the visualization interface, which allow organically to develop and apply the tools by the principle — from simple to complex:

1. formation from the template frames, by assigning the dynamics and without the graphical configuration;
2. graphical formation of new frames, using ready-made visualization elements from the library - mnemosmes;
3. forming, in the library, new ones: frames, template frames and display elements.

• construction of interfaces for visualization of practically any complexity (limited by the "discreteness" of the primitive functions), ranging from simple monitoring interfaces, and to complete hierarchical interfaces used in SCADA systems;
• providing the different ways of forming and configuration of the user interface, based on different interfaces of graphical representation (Qt, Web, ...), or-through the standard interface of OpenSCADA control;
• construction and correction of the interface, appointment and change of the dynamics in the process of the execution;
• construction, at the user level, of new template frames and the formation of specialized ones, under the scope, libraries of frames (e.g. the inclusion of parameters frames, diagrams and other elements linking them to each other), according to the idea of secondary use, accumulation and improvement;
• construction of new custom visualization elements and the formation of specialized, at the field of application, libraries of frames, according to the idea of secondary use, accumulation and improvement;
• description of the logic of new template frames and user visualization elements as by the simple links as well by the compact and full-featured user programming language;
• possibility of inclusion, to the user's visualization elements, the functions (or frames of functions' calculation) of the object model of OpenSCADA, practically linking the presentation with the algorithm of computation, for example, visualizing the library of the apparatus of TP models for subsequent visual building of the TP models;
• separation the data of the user interfaces and presentation interfaces of these data, allowing to build the user interface in the one environment, and execute in many others (Qt, Web, ...);
• ability to connect to the executable interface for monitoring and correction of actions; for example, training operators and monitoring their actions in real time;
• visual construction of various schemes with overlapping logical connections and subsequent centralized execution in the background - visual construction and execution of mathematical models, logic circuits, relay circuits and other;
• providing, to OpenSCADA, object API functions; can be used to control the properties of the visualization interface from user procedures;
• server construction for: frames, visualization elements and visualization interface projects; with the ability to service multiple client connections;
• simple organization of client stations on different bases (Qt, Web, ...) with the connection to the central server;
• full-featured mechanism for distributing authorities between users that allows you to create and execute projects with different rights to access their components;
• flexible formation of rules of alarms and notifications, with the support of various methods of the notification;
• support of custom formation of the palette and font preferences for the visualization interface, in styles;
• support of the user forming of the events maps under various control equipment and user's preferences;
• support for user profiles, allowing the identification of various properties of the visualization interface (colors, font features, the preferred card of events);
• flexible storage and distribution of libraries of widgets, frames and projects of the visualization interfaces in the databases, supported by OpenSCADA; practically, the user only has to register the received database with the data.

2 Execution of the VCA interfaces

Execution of the VCA interface is to run a new project session, or connect to the existing one, on the level of the VCA engine (Fig.2). Before the connection request to the session the user authentication request (Fig.1) is done. Then the module of direct visualization displays and controls the data of the session. The main window of the execution mode of this module has the form presented at Figure 3. The administrator users ("root" or in the group "root") can close the opened sessions.

The interface of the execution window is built fully dynamically by the JavaScript script on the basis of the contents of the project session through direct XML requests to the server.

Update of the contents of the open pages of the visual interface with periodicity of the project session is implemented. During the upgrade process:

- request, in the model, of opened pages list and checking consistency of the really opened pages to this list;

- requests of modified data on each opened page and its widgets;

- updating content of the pages and their widgets in accordance with the received modified data.

The mechanism of the request for only modified data is based on the absolute counter of the session execution. When you make real changes in the attributes of widgets the remembering of the value of this counter is made, which allows us to identify the modified attributes. This approach allows to increase productivity and reduce the load on the traffic in case of access to the model through the network.

Hierarchically, the module assumes the possibility of placing pages of the project as in the main window of execution (Fig. 3), and by placing inside the container widgets, as well as by opening additional windows over the main one.

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 the document folder or specified in the "prjDoc" attribute;
  • panel of user statuses and actions when specified in the "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.

The module supports multi-language which one enabled by the dynamic messages translation of OpenSCADA. The gotten language passes by the module Protocol.HTTP and detects in way and by the order:

• URL's parameter "lang".
• Authenticated user's language.
• Language of the Web-browser from the HTTP property "Accept-Language".
• Generic language of the OpenSCADA process.

Fig.1. Authentication page.

Fig.2. Connection or creation of a new session of the execution project of the VCA.

Fig.3. Main execution window.

3 Presentation of the basic elements (primitives)

This version of the module does not implement all the shapes of the primitives laid by the project. In general, the project provides the following primitives:

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.

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}	Create manually with the type "Text"! Specifies a notifier and a procedure of the notification resource obtaining according to the "Signalling (Alarms)" conception.
statLine (main page)	Status line items	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	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: if((SYS.time()-this.ownerSess().userActTm()) < 60)userSetVis = ""; else if(this.ownerSess().reqUser() != "user") userSetVis = "user";
prjDoc (main page)	Project document	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 "{OffLine}|{OnLineOpenSCADAWiki}", for example for the AGLCS project — "AGLCS|Using/Model_AGLKS". The online part is used in first order at its specifying!
vs_goHttpUrl (view "Button" of the primitive "FormEl")	Go to the HTTP URL	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	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	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	Create manually with the type "String"! Dynamic window title value.

Consider the implementation of each primitive in more detail.

3.1 Elementary figure primitive (ElFigure)

Support of the elementary figures is implemented: lines, elliptical arcs, Bézier curves and fill of the enclosed space with the color and image with the properties:

• formation of arbitrary images from three elemental shapes and fillings of closed spaces with color or image;
• there is the possibility of determination of the figures' properties both in general and individual to each one: line width, color and style, line border's width and color, filling's color and image;
• scaling;
• transformation: rotation and mirroring;
• user's attributes support for dynamic: points, widths, colors, styles and images;
• formation of events by action of the mouse manipulator in a closed space and in general.

Figure shows a part of the screen with a frame containing the elementary figures.

3.2 Text primitive (Text)

Support of the text element with the following properties is implemented:

• Font with the properties: type-class, size, bold, italic, strikeout and underline.
• Text color.
• Text orientation.
• Automatic word wrap.
• Alignment of the text horizontally and vertically with all variants.
• Displaying the background as the color and image.
• Displaying the border around the text, with the specified color, width and style.
• Displaying HTML.
• Addition of the text by arguments of different type and properties.

Figure represents a part of the screen with the frame containing the text examples using various parameters.

3.3 Primitive of the form element (FormEl)

Provides support for the form elements on the VCA frames with the planed properties, including the types:

• Line edit — Represented by the following types: "Text", "Combo", "Integer", "Real", "Time", "Date", "Date and time". All kinds of line editor support the confirmation of entry.
• Text edit — Provides the flat-text editor with the confirmation or denial of entry.
• Check box — Provides a field of binary flag.
• Button — Provides the button with support of the button color, image in the button and the modes:
  • standard;
  • checkable;
  • call the menu;
  • call the file loading;
  • call the file saving.
• Combo box — Provides a field for selecting an item from the list of specified items
• List — Provides the list box with the control of the current item.
• Tree — Provides the tree element with possibility of an item selection.
• Table — Provides the table element with the possibility of selecting for cells, rows or columns and editing the cell content.
• Slider — Slider element.
• Scroll bar — Scroll bar (Equal to Slider).
• Password — Hidden password typing.

The "Enabled" and "Active" modes are implemented, as well as the transfer of changes and events to the data model of the VCA — engine. The mode "Active" cause to the activity cursor set for not empty background and the addition conditions of the different views "Text", "Media" and "Box":

• Text — not empty text;
• Media — not empty source image.

Figure represents a part of the screen with the frame containing the above-listed elements of the form.

3.4 Primitive of the displaying the media-materials (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 of it in the size of the widget.
• Playback of the simple animated images and video formats with the possibility to control the playback speed (inaccessible).
• 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.

Figure represents a part of the screen with the frame containing examples of reviewing/playback of the media-data.

3.5 Primitive of constructing diagrams (Diagram)

The diagrams construction element releases for types: "Graph", "Spectrum" and "XY", with properties:

• General properties of the diagram types "Graph", "Spectrum" and "XY":
  • possibility to select the archiver, the archive buffer or all their, at working with the archiving data;
  • adaptation of the parameter graph to real data values by adjusting the scale, in the absence of a directly specified range of values;
  • controlling by axis ranges in way increasing, decreasing and shifting;
  • wide range of scaling and adapting the time axis with automatic fitting the requested data to quality pretty for imaging, or needed for export — specifying the maximum number of measurements per pixel;
  • imaging dimensional grid and markers in horizontal and vertical with adapting to the imaging range;
  • tracing mode of the current time by periodically updating and shifting the time of the diagram to the current time — the time of the last data in the archive buffer.
• Properties of the diagram type "Graph":
  • constructing graphics up to 100 parameters per diagram in a percentage scale and displaying the selected parameters in its own scale;
  • constructing graph for: current, archiving and users data;
  • forming of an intermediate display buffer for current values;
  • support for the active mode with cursor and getting values under the cursor;
  • possibility of construction graphics as into both linear and logarithmic scale of the values.
• Properties of the diagram type "Spectrum":
  • construction of graphics of the frequency spectrum of parameters up to 100 on one diagram in a percentage scale and the ability to display selected parameters in its own scale;
  • constructing graph for: archiving and users data;
  • support for the active mode with cursor and getting values under the cursor;
• Properties of the diagram type "XY":
  • construction of XY graphs of parameters up to 50 on one diagram in a percentage scale and the ability to display selected parameters on its own scale;
  • constructing graph for: current, archiving and users data;
  • forming of an intermediate display buffer for current values;
  • the parameters distributed by pairs at one graph, where paired by axis Y (0,2,4...) and unpaired by axis X (1,3,5...);
  • possibility of construction graphics as into both linear and logarithmic scale of the values.

Figure represents a part of the screen with the frame containing examples of the diagrams: "Graph", "Spectrum" and "XY".

3.6 Primitive of the protocol formation (Protocol)

Provides for support of the element of the protocol formation with the following properties:

• Protocol formation from the message archive for the specified time and depth.
• Request of the data from the message archivers.
• Selection of the data from the archives by the level of importance and the template of the message category.
• Support the mode of the tracking for the messages appearance in the message archive.

Figure represents a part of the screen with the frame containing an example of the protocol.

3.7 Primitive of the report formation (Document)

Provides for support element of the report formation with the following properties:

• Flexible formation of document structure based on HyperText Markup Language, which provides support for a wide range of features in the documents formatting.
• Formation of the documents at a command or a schedule, which necessary for creation of reports to the archive and then reviewing the archive.
• Formation of the documents in real time, to provide them completely dynamically and on the basis of archives at the specified time.
• Using the widget attributes for transmission to the document of values and addresses to the archives, which allows you to use the document widget as a template when generating reports with other input data.

The basis of any document is the XHTML template. The XHTML-template is the tag "body" of the WEB-page which contains the document's static in the standard XHTML 1.0 and elements of the executable instructions in the user programming language of OpenSCADA in the view <?dp {procedure} ?>. The resulting document is formed by the procedures execution and insertion of their result into the document.

The source for values of the executable instructions are the widget attributes of the primitive, as well as all the mechanisms of the user programming language OpenSCADA. Attributes may be added by the user and they can be linked to the actual attributes or parameters or they can be autonomous, values of which will be formed in the widget procedure. In the case of linked attributes the values can be extracted from the archive-history.

Figure represents the frame, containing a sample of the document.

3.8 Primitive of the box-container (Box)

Provides for support of the container primitive, which, in combination, plays the role of project pages. This primitive is the only container-element, which can itself include links to frames from the library, thus forming the user elements of the desired configuration. The primitive implements the properties provided by the project. Let's list, in points, the properties of this primitive:

• Container — Allows forming the desired objects by grouping in the primitive borders.
• Page — Elements, constructed on the basis of the primitive, may serve as a page of the user interface.
• Container of pages — Property of substitution, in the execution process, of its own content by another page. Used to create frames on the pages of the user interface. For example, the main page of the typical SCADA-system with signal objects is constructed in this way.
• Background — Supports for ability to specify the background as color and image.
• Border — Supports for displaying of the border with the specified color, width and style.

4 Overall configuration of the module

To configure and control this module, you have the configuration page of the OpenSCADA control interface (Fig.4):

• Control for the active WEB-sessions.
• Configuring:
  • Lifetime, in minutes, and maximum number of the sessions.
  • Lifetime, in hours, and maximum number of the cached pages.
  • Level of the PNG-images compression. The optimum is the minimum level 1, since large files get uncompressed, and higher compression levels create a higher load on the processor.
  • Resizing raster images on the server side. Mostly to decrease too big images size then decrease the traffic, what causes to rise the server load.
  • Custom interface CSS rules. CSS rules to override the standard ones what placed in the special token ##CUST_CSS## of the file WebVisionVCA.html.

Fig.4. Configuration page of the module.

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 — UI.WebVision.

5 Efficiency and scalability

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 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 the DemoDB (AGLKS) project reopening:

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:

Fig.5. Memory effectivity on AMD64 platform.

Fig.6. Memory effectivity on I386 platform.

Fig.7. Absolute initial size of OpenSCADA "AGLKS" on the platform AMD64.

Fig.8. Absolute initial size of OpenSCADA "AGLKS" on the platform I386.

MEASURES:

1. 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.
2. There were some tries to tune the memory allocator of GLibC using "Memory Allocation Tunables" without any significant effect, so we will notify the Debian community, firstly.
3. 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.

Fig.9. Tendency of the memory consumption on a real big application at the default conditions.

Fig.10. Tendency of the memory consumption on a real big application at the environment variable MALLOC_ARENA_MAX=1.

20.06.2013
GROUNDS: At working with the board 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:

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.

6 Notes

At this stage, the module can be used to construct real user interfaces with support for the main functions. However, some problems may arise due to the differences between browsers. At this time, provided enough quality performance on browsers: Chromium (Google Chrome), FireFox, Opera, Konqueror.

7 Links

• Spreadsheet: Analysis of effectivity of the memory allocation.