SCADA Systems on the Web

• Download source - 9.3 MB

SCADA stands for Supervisory Control and Data Acquisition. It is used to describe applications that monitor and control external devices. Usually, it refers to software systems with a UI that are connected to manufacturing machines, sensors, or any kind of controller. These systems can be as simple as turning a pump on or off and as complicated as monitoring or programming an entire manufacturing plant.

Traditionally SCADA systems have always been built using C/C++ with either a text UI or graphical UI, and more recently using C# WinForms/WPF (or Java Swing or AWT). In most cases, the hardware where the application runs is directly connected to the controllers, allowing the software to communicate with the devices in real time. Which means that the vast majority of SCADA systems are desktop applications, or fat clients of sorts. Even distributed or networked SCADA systems are still not web applications. Why is that?

Let’s look at the four aspects of typical SCADA applications that make them quite complex to implement as web applications using HTML-based frameworks:

• Monitoring
• Controlling
• UI complexity
• Local Hardware connectivity

When evaluating HTML-based framework for building SCADA applications, industrial-grade requirements have to be met. These frameworks require developers to build the UI by typing HTML text, to manipulate the UI by concatenating HTML strings or building HTML elements, and process the user input through posts. This usually includes, to a different degree, frameworks and technologies like ASP.NET, PHP, JSP, Blazor, Angular, etc.

Monitoring

A typical SCADA monitoring application displays a dashboard that is updated when it receives an input from the local controllers the hardware is connected to. The update can be detected in two ways: push and pull.

In the push model, the controller driver fires an event or calls a registered callback when the input changes. In the pull model, the application queries the controller at regular intervals. For a local application this is quite straightforward: the callback triggers a UI update with the new values, while the polling can run at a short interval and update the UI when the values change.

Doing the same for a web application adds a new set of problems: Now we have the push or pull model for the controllers connected to the web server (server-side), and we have to also manage a push or pull model for the browser(s) update (client-side).

For the server-side push model, the controller is connected to the web server and the callback triggers code running on the web server, while the UI is in a web browser on a different machine and potentially on multiple clients at the same time. The only way for the web server to tell the browsers that something changed is to use a WebSocket connection, which is fine, but you need to code it, wire it and manage it. You can use SignalR or the WebSocket directly, but it’s still something you need to add to your web application and wire it, build some kind of communication protocol, etc.

Once you solve the server-side push model and you receive the update data pushed to the client browser in a JavaScript method, you have to update the UI in the browser. But if your system is HTML-based, you need to update the DOM in JavaScript and/or you have to fire an Ajax request and receive the updated fragment. It’s all up to you. Try it with something as simple as a dashboard with only 6 sliders, 6 spinners, 6 gauges, and a liquid container as shown in the following screenshot:

Application migrated or modernized using the Wisej framework can benefit from a layer of abstraction by using just the C# language to build complex reusable components that render as JavaScript widgets and are wired to the server.

In order to realize the monitoring application in the screenshot, JavaScript is not needed at all. Wisej builds the client side JavaScript widgets pre-wired with a server side component.

Controlling

While monitoring is the process of receiving data from the connected devices and displaying it in real time, controlling is the opposite: send updates to the devices in response to user actions as quickly and reliably as possible.

Traditional HTML based systems require a page submit to send all the data back to the server and make it quite difficult to wire pointer, touch, keyboard events in real time and to send the updated data to the server. Typically you need to attach to all sorts of native browser events, pack the event data, invoke a remote API, deal with state, session, etc. All on your own and always reinventing the wheel from scratch.

Wisej controls (and any third party widget integrated in Wisej) automatically send any update to the server using small, fast, WebSocket or HTTP packets without waiting for the user to submit anything. As a result, a Wisej SCADA application behaves very close to a local desktop application even when the browser is thousands of miles away.

UI Complexity

Things aren’t usually as simple as shown in the above emulation applications. Typical user interfaces for control centers connect a large number of monitor views. For example, Wisej is being used at a tire production plant to manage the production floor. In this setup, up to 80,000 parameters are fed into the application and shown in a complex real-time Web view:

At German EME GmbH, Wisej is being used to manage glass production machines and recipe management. Amtech’s Encore, the leading ERP for the packaging industry, is powering packaging and corrugator production sites around the world with computer-to-machine communications based on SCADA. Wisej is the technical base framework for the entire solution, consisting of hundreds of modules and views.

With Wisej you can build complex, composite and reusable .NET components that fire server-side events, update the browser, and receive browser updates easily using the Visual Studio designer, and reuse it as many times as you need to.

With Wisej you can also draw or paint custom controls from the server directly into the browser. The liquid container in the previous screen is a C# component that is painted on the server side using standard paint and graphics calls and updated on the browser in real time.

In fact it’s this one: https://www.codeproject.com/Tips/989219/Liquid-Container-Control. A WinForms control that has become an HTML5 JavaScript widget based on Wisej without changing a single line of code.

private void LiquidContainerControl_Paint(object sender, PaintEventArgs e)
{
    CreateRegion(0);
    PaintBackground(e);
    Paintimage(e);
    PaintText(e);
}

Another option for real time drawing of complex controls is to use the Canvas component and use the full Canvas HTML5 syntax in C# or VB.NET and see it displayed on the client browser in real time.

Local Hardware connectivity

Wisej applications can also become fully local thanks to our self-hosting platform. Using the "single source - multiple targets" approach, Wisej applications can be deployed to a number of different platforms:

• Web servers (public and private)
• Cloud services (AWS, Azure, …)
• Embedded servers (self-hosting)
• Desktop (self-hosting with Web view)
• Android and iOS (using Wisej Mobile)

A single Wisej app can run as a local desktop application, and access local resources otherwise unavailable through the browser, using one of our 4 frames: Chromium, Edge, IE, and Firefox. The following screenshot illustrates the same application shown above running as a local desktop application using the same source code and just a different deployment method:

Conclusion

Wisej has been used by a number of SCADA-based applications around the world across different industries: from managing glass-production, tire manufacturing, to packaging and corrugator plants. Its embedded real-time protocol makes it an ideal choice for web-based applications of any complexity.

To learn more about Wisej and how it is being used in connection with SCADA and OPC setups, please review the following case studies:

• https://wisej.com/case-studies/goodyear/
• https://wisej.com/case-studies/amtech-erp/
• https://wisej.com/case-studies/eme-gmbh/

For further information please contact the Wisej Sales team:
sales@wisej.com