Web browser, as an environment for the operation of software for control / process control
Often, in industrial enterprises, there is a need for a convenient presentation of technological processes with the ability to intervene in their course. This functionality is implemented by SCADA systems or AWS (automated workplace). In the post we will discuss how to create a full-fledged operator position with minimal labor costs.
We will use the vector graphics editor Inkscape [1]. This editor is freely available under the GNU GENERAL PUBLIC LICENSE license. This tool allows you to save graphics as svg [2] Scalable Vector Graphics. What essentially is an xml file.
Programming on the client is done in javascript (jquery [3]). From the code it is clear that the main class is assigned to each control / alarm object. This makes it possible using javascript to change its properties. You can come up with any combination - limited only by fantasy. This method is much easier to implement on QT for example or Delphi. There is no need to track the coordinates of objects, it is very easy to respond to mouse events. On the server, programming can be carried out in any language, depending on the hardware with which the AWP is supposed to be interfaced. This may be, for example, ethernet modbus, with data writing to SQLite, this scheme is quite simply implemented in C - there are all the necessary libraries, although any other configuration is possible. Data exchange between client and server is performed using AJAX [4].
')
The purpose of the post - to give specific recommendations for the creation and deployment of an automated workplace. The most difficult and important for the user link of modern workstations is the ability to create / change the display schemes of technological processes. Free software Inkscape - is a very convenient tool and free, which is important. The second complex link is the mapping program itself. And here the process is very similar to the creation of a site. The first stage is the layout of the AWP window, the second - directly programming - mainly in javascript. Client-service interaction is also quite simple - with the help of AJAX. In this implementation, ARM is not tied to a workplace, the operator’s seat should include only a computer, Internet and browser. This system is quite flexible: control / management can be conducted from anywhere in the world using tablets, phones - any devices on which Internet browsers can function.
Graphics editor
We will use the vector graphics editor Inkscape [1]. This editor is freely available under the GNU GENERAL PUBLIC LICENSE license. This tool allows you to save graphics as svg [2] Scalable Vector Graphics. What essentially is an xml file.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> </head> <body> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg width="744.09448819" height="1052.3622047" id="svg2" version="1.1" inkscape:version="0.48.3.1 r9886" sodipodi:docname="drawing.svg"> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.64" inkscape:cx="-11.810742" inkscape:cy="648.32115" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" showguides="true" inkscape:window-width="1301" inkscape:window-height="744" inkscape:window-x="65" inkscape:window-y="24" inkscape:window-maximized="1"> <inkscape:grid id="grid4044" type="xygrid" /> </sodipodi:namedview> <defs id="defs4" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> ... </svg> <script> $(document).ready(function(){ $('.main').click( function(){ r = 'rgb(255, 0, 0)'; g = 'rgb(0, 255, 0)'; b = 'rgb(0, 0, 255)'; fill = $(this).css( 'fill' ); newfill = r; if( fill == newfill ) newfill = b; $(this).css( 'fill', newfill ); }); }); </script> </body> </html> Programming
Programming on the client is done in javascript (jquery [3]). From the code it is clear that the main class is assigned to each control / alarm object. This makes it possible using javascript to change its properties. You can come up with any combination - limited only by fantasy. This method is much easier to implement on QT for example or Delphi. There is no need to track the coordinates of objects, it is very easy to respond to mouse events. On the server, programming can be carried out in any language, depending on the hardware with which the AWP is supposed to be interfaced. This may be, for example, ethernet modbus, with data writing to SQLite, this scheme is quite simply implemented in C - there are all the necessary libraries, although any other configuration is possible. Data exchange between client and server is performed using AJAX [4].
')
Conclusion
The purpose of the post - to give specific recommendations for the creation and deployment of an automated workplace. The most difficult and important for the user link of modern workstations is the ability to create / change the display schemes of technological processes. Free software Inkscape - is a very convenient tool and free, which is important. The second complex link is the mapping program itself. And here the process is very similar to the creation of a site. The first stage is the layout of the AWP window, the second - directly programming - mainly in javascript. Client-service interaction is also quite simple - with the help of AJAX. In this implementation, ARM is not tied to a workplace, the operator’s seat should include only a computer, Internet and browser. This system is quite flexible: control / management can be conducted from anywhere in the world using tablets, phones - any devices on which Internet browsers can function.
Source: https://habr.com/ru/post/217401/
All Articles