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. This trend will only accelerate with time, so 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 in this blog post.
Most industrial control systems have a very predictable system architecture.
Control hardware, like a PLC, is connected via an internal network to SCADA software such as Ignition. 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, where it is then displayed visually for operators and plant managers to interact with. 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. The concepts we’ll cover are REST architecture and tools, front-end frameworks, dependencies and dependency management, and task runners.
First of all, let's go over the REST architecture as it is most likely to be used in an automation project. REST stands for Representational State Transfer and it standardizes communication between applications on the internet. Using REST, the client (aka service consumer) and the server (aka service provider) communicate. In a manufacturing site, 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.
The service provider and service consumer communicate via a set of basic commands (aka services) including GET, POST, PUT, and DELETE. The two services you should be most familiar with are GET, which retrieves data from a service provider, and POST, which sends data back to the service provider.
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 web pages can be created with simple HTML and CSS. Those days are gone. Modern web pages are a complex system of frameworks, build engines, and “languages” – particularly Javascript – which dramatically extend web page capabilities.
Of those three, the natural place to start is with a Frontend Framework. A programming framework is the tool you will use to build the graphical components of your web page. While it’s technically possible to just write plain HTML, CSS, and JavaScript to make your application work, you shouldn’t. A frontend framework improves developer efficiency because it handles a large amount of the boilerplate work that needs to be done on every web application.
A few of the most popular Javascript frameworks are React, AngularJS, Angular 4-5, and Vue.js. Each one of these frameworks requires a unique development style, and each have their pros and cons. It will be up to you or your team to make the decision on which one to go with for your SCADA project.
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. If your team doesn’t actively manage dependencies during the project, then critical programming errors can and likely will occur – especially on complex projects.
The most essential dependency management software is NPM (Node Package Manager). NPM is installed by installing NodeJs.
I won’t go into the what or how to use NodeJs in this post but it’s 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 use multiple tools like these on larger projects. One such additional tools is a task runner.
Task runners are applications which preprocess some of the code to make it run more efficiently in the browser, so that information is displayed faster and responds more quickly. Task runners also improve security by making it more difficult to view the code in the browser which is great for protecting IP.
Preprocessing is very important if development tools are used that a browser cannot natively interpret. Browsers can really only interpret HTML, CSS and JavaScript, so if development tools such as Sass, Less, or Stylus are used, then the code must be pre-processed so browsers can interpret them. These three “languages” – Sass, Less, and Stylus – all accomplish the same functionality that CSS provides, but they bring extra added features to make development easier. With a task runner each one of them can then be preprocessed to CSS so the browser can use it.
For many hands-on learners, 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.