The fourth industrial revolution has arrived. Businesses turn to IoT and the cloud to optimize their operations and costs. In this post, we’ll discuss how data can be sent to a server in real-time and then visualized on the front-end with the help of a GoJS library.
Machines are increasingly chit-chatting with each other and logging errors generated by cloud-based apps. The Internet of Things allows for monitoring the activity of various devices in many industries without having to use special tools.
Obtaining data is one thing, but it’s what you do with it actually matters. GoJS, a JavaScript library with extensive features, allows you to visualize the collected information.
See below for a diagram we created, showcasing the workings of a house's central heating and hot water systems.
Visualizing and simulating a house heating system
Our diagram shows measuring devices such as a furnace pressure gauge, furnace and boiler thermometer, as well as air temperature thermometer in particular rooms.
We employed .NET Core and SignalR to create the simulation since they allow for real-time presentation of (collected) data.
The visualization involves the heating system at a single-family house. There are two rooms with radiators and thermometers, and a basement with a furnace, pumps, and boiler.
To showcase the workings of the system without connecting the driver to sensors, we developed a simple desktop that facilitates the sending of data to a .NET Core Web API. In actuality, this type of driver could be developed using Raspberry PI, PLC Driver, or even the simplest AVR microcontroller connected to a communication module allowing HTTP requests to be sent to the server.
Communication between components
Communication between our simulator and the front-end diagram created on the GoJS library is a rather simple process.
The information exchange can also be two-way. The temperature can be set to your liking using a GoJS diagram which transfers this information to the driver via API.
There can be multiple front-end apps receiving data from the API. This allows for more people to control the system. A dedicated database can be set up for this particular aspect of the project, however, we omitted the part.
What’s the code?
The WebAPI controller accepts a Json HttpPost object which contains all of the information sent by the driver. Then, it uses the SignalR library to send data to all its clients.
However, the front-end app contains code that opens a connection via the SignalR library and then opens a definition of the function that is performed after a “UpdateDiagram” message is sent along with a SystemState object.
Conclusions
Not every process will demand a system as complicated as SCADA.
We’ve turned to a rather simple example on purpose just to show the advantages of real-time visualization. Still, an app developed using GoJS is highly scalable and delivers clear data.
