Manufacturing operations personnel and developers of SCADA systems are increasingly being asked to implement components of web-based architectures, and many SCADA software providers are integrating this technology into their platforms. Whatever your role in the process, it’s a necessity to understand the basic architecture and terminology for web technology components in modern automation systems. This is an admittedly broad topic, so we’ll focus just on visualization tools here.
Bridging the Gap
Most industrial control systems have a very predictable system architecture. Control hardware like a PLC is connected via an internal network to SCADA software. The SCADA software provides a visual representation of the system, historical data storage and display, and alarm detection and notification. Client computers can access this information via a separate internal network. The communication methods between the pieces of the architecture vary depending on the hardware and software involved.
Web applications can provide all of this functionality, but the development tools used and the communication protocols involved are not something most industrial control programmers are familiar with.
First of all, let's go over the REST architecture as it is most likely be used in an automation project. REST stands for Representational State Transfer. The basics of REST are that the client (aka service consumer) and the server (aka service provider) communicate via a set of basic commands (aka services) including GET, POST, PUT, and DELETE. The two services we are most concerned with at this point are GET, which retrieves data from a service provider, and POST, which sends data back to the service provider. In both instances the service provider would most likely be a SCADA platform that has some form of web functionality, but it could be any piece of software that provides REST functionality.
Now that the basic architecture is out of the way, let’s go over the fun stuff: The extensive options and tools available to make your service consumer, or in this case, the web app. If you have some familiarity here, you may remember that simple HTML and CSS can be combined to make web pages. Those days are gone. Modern web pages are a complex system of Frameworks, Build Engines, and “Languages.”
Front End Frameworks
Once a frontend framework has been selected, the next step is to determine which tool or tools you would like to use for dependency management. Dependencies are the external libraries that you can use to make your code more efficient and to save time writing logic that may have already been created. These libraries can be anything from simple design schemes to the entire frontend framework that we looked at earlier. The first and most essential is NPM (Node Package Manager). NPM is installed by installing NodeJs, https://nodejs.org/ . I won’t go into the what or how to use NodeJs in this post but it is an awesome tool that is used heavily in the web development world. Other popular options are Yarn, Bower, and Webpack, and it is often advantageous to utilize multiple tools like this on larger projects.
For many, the best way to learn is to do. If you would like to try building a simple web page using React and an Inductive Automation Ignition installation as the REST service provider, take a look at this step-by-step guide.