HMI on Browser

Hi all. This is Shubhadeep Banerjee working on Algonics as a Software Developer. This is my first step into the bloggers' world, hence, my first blog. 

So, have you ever heard of HMI? If yes then you may skip the next stanza. If not, then you are going to know about an excellent technology. 




What is HMI?

In simple words, HMI is an interface which permits the interaction between a machine and a human. From nuclear plants to mobile phones, everywhere HMI is used. Basically, an HMI would have two components, the input and the output. The input component is the way to instruct the machine to do some tasks.The task may vary on the type on the machine, and so the input method. The user may give the input by pressing a physical button, by a touch panel, even by some buttons and input fields present on a software. The output component of an HMI is responsible to keep the users updated with the latest values of the system or the current jobs the machine is doing. Now, I will talk about how we have implemented web-based HMI solution in our recent project.

Sample HMI UI

What we do with HMI?

In our most recent developed project Tracksense, we have developed an HMI for Indian Railway, that senses the location of trains on track sections, provides signal status and other signaling information, and shows all the details on an UI (User Interface). This system contains some Control Devices (like PLC, RTU etc.) which are installed on the rail stations, sense the status of the Signals, Rail Tracks and other components and send all those information to a server. The server processes the information and shows the status of the track sections, signals and other signalling information on an UI. Huh!! Too much technical?? Ok, let me explain in details.

A bit more explained...

In automation industry a device named PLC (Programmable Logic Controller) is widely used. According to Wikipedia - A Programmable Logic Controller, PLC or Programmable Controller is a digital computer used for automation of electro-mechanical processes, such as control of machinery on factory assembly lines, amusement rides, or light fixtures. We install these PLCs in the Railway Stations and connect those to the electrical equipments of the Railways, which read the status of the different entities on railway signalling system like Track Sections (a small section of a long rail track), Signals (yellow, red , green etc.) and other electrical components. These PLCs are connected to a LAN or WAN using cables or wireless medium, depending on the distance between the PLCs.

On each station, we establish a server. This computer runs on Linux Ubuntu 12.04. We connect this server to the Network where the PLCs reside (the previously mentioned LAN or WAN). We use Python as the primary programming language in this system. The server contains a Python service,  which continuously collects the signalling information from the PLC devices, process those data and stores the processed information into a MySql database. I will explain these things in details later.

Up to the previous stage, there were no UI related or web-based things. Now, from this stage, web technology will play the main role. As we use Python as the Primary language in this whole system, we use Python Django framework to build the web based services and the UI. The Django framework is an MVC (Model-View-Controller) based web framework built using Python. Django helps us to create web sites which use Python as the Server side language. The diagram will help you to understand the basic of the MVC architecture.

Got it?? Visit this wikipedia link for a detailed explanation on MVC. 

HMI with SVG - Purely technical things...

Okk. Now you should be thinking that how we use this architecture to develop the Web-based HMI application. The answer is simple, we use HTML5 based SVG (Scalable Vector Graphics) technology to do this. SVG is an XML-based 2D graphics rendering technology which is used to design interactive and 2D animation based graphic designs. HTML5 supports SVG to be rendered in the browsers' web page. We combine these two to design our UI and, Bingo!! Users can directly view an interactive web-based HMI on their browser.

I will explain this in a bit details. I previously mentioned that the Python service running on the Linux Server stores the status of the signalling entities into a MySql database. We have developed a Django based web application which reads those data from the MySql database. The application contains some web services which fetch the status of the different entities like Track Sections, Signals, Lock Gates from the Database and Client Side scripting language ike Javascript, Jquery etc. can fetch those information from the web services easily. The web html pages (i.e. the UI) of the web application are designed using HTML5 SVG technology with Jquery as the scripting language. The Jquery functions calls the web services from the Server, gets the detailed information about the different signalling controls and manipulates the UI components accordingly. Hence, the users can view the live status of the signalling system by just hitting an URL.

The last thing to know - The advantages..

The main advantage of this system is the user does not need a dedicated computer to open the HMI. To view the live status of particular station or zone, they need to connect their device (PC, Laptop, even Tab or mobile) to  the Wide Area Network of Indian Railway (this network is called the RailNet), type the IP of the Application server corresponding to that station or zone on the Browser and Open the browser-based HMI without any glitch.

View this video to see the system on work..

So, now say, what do you think?? An excellent piece of technology, isn't it? If you have any further question just put that question in the comment section. And do not forget to comment about my first blog. If you like it, let others also read it, so, share it.

Bye for now. Hope we will meet soon. Till then, happy programming. 

Visit our website | Visit Our LinkedIn Page | Search us on Google