A Cutting Edge Solution for Real-Time Data Visualization


In 2017 the School of Engineering Practice & Technology at McMaster University contracted databright to engage in collaborative research and development related to Industry 4.0 and open industrial systems.

The first project of this partnership originated from discussions between McMaster professors and executives from Linamar regarding an open architecture and platform for data visualization and human-machine interaction. There was interest in developing a web-based HMI package for high-speed streaming data which leveraged common and open-source technologies such that an internal knowledgebase would be developed and reliance on third party solutions could be minimized.

Our colleagues at McMaster asked us to conduct preliminary research, compile a proposal, and develop a beta version of such a product.

The result of this research and development was a suite of software applications and libraries which fulfilled these requirements.


The premise of this project was to develop a near real-time system for streaming of high-speed data between various devices on a network. This would enable both data visualization and human-machine interaction allowing for an interface to lower level industrial automation.

Two primary motivations where:

  1. Leverage the WebSockets protocol to allow for connection-based streaming of data between nodes.
  2. Utilize open-source and common web frameworks and technologies for the front end software. This would allow for ease of modification by the owner and allow the front-end components to evolve in parallel with general web technologies.


The software solution is comprised of the following components:

Core Data Server
  • The core data server accepts connections from producer clients and consumer clients and allows for connection-based streaming of data between them.
  • A producer client is a device which primarily provides data. This could include PLCs, DCSs, or any generic computing system.
  • A consumer client is a device which primarily receives and displays data and allows for user interaction with the underlying systems. This would be any device with a modern web browser such as a personal computer, mobile phone, or tablet.
  • Producer client connections are typically TCP/IP with an option for OPC.
  • Consumer client connections use the WebSockets protocol.
  • The data server receives TCP/IP messages from the producer clients and translates those messages into JSON. This JSON message is then sent to the consumer clients via a WebSocket connection.
  • Data can be sent in a bi-direction fashion between producer clients and consumer clients. The naming is simply for convention and ease of discussion.
  • The data server is written in C# and implements the Fleck library for WebSockets.
Web Client
  • The consumer client consists of HTML and CSS templates, the popular Bootstrap framework, the Chart.js charting library, and a custom JavaScript library for the client functionality itself.
  • The client software is developed with fully open-source, freely available, and very common libraries, tools, and frameworks.
  • It should be very easy for individuals to extend the client software with minimal training or effort given some proficiency with basic software development.
  • Data can be streamed in excess of 1 kHz however visualization of that data for a user is not practical.
Test Client
  • A test client was developed for simulation purposes to allow for testing or demonstration of the system.
  • This test client mimics the operation of an industrial automation device such as a PLC, DCS, or a higher level generic server system.

Results & Recommendations

Some interesting findings and conclusions have been made during development of the proof-of-concept which should be noted for consideration if a prototype or product is to be developed.

  1. Provisions are made in the WebSockets protocol for secure WebSockets (encryption via SSL/TSL much like HTTPS).
    • This may prove useful in industrial application of a web-based HMI.
  2. It should be possible to design the software such that it is highly extensible and maintainable by anyone with a basic software background.
    • The server software is pure C# .NET with the only exception being the Fleck WebSocket library.
    • The front-end HMI client software is standard HTML and JavaScript using the most common libraries found in nearly all web applications today.
    • There is extensive support available online for all the software contained in this solution.
  3. It should be possible to write automated build scripts for the more complex tasks a user may have to complete in order to streamline the workflow of extending the software.
    • An example of this would be extending the existing TCP/IP messages.
    • Templates could be created and packaged with the application to give users a guideline of how to go about making changes.
  4. There are significant benefits to having a purely web-based front-end for the HMI.
    • As the HMI screens themselves are pure HTML, CSS, and JavaScript there is no limit to the appearance or functionality which can be created.
    • HMI screens will always have a familiar feel and appearance to the user thanks to the Bootstrap framework.
    • As web technologies evolve (Bootstrap, Chart.js, etc.) the HMI package will evolve as well. An HMI package of this sort will never become obsolete.

This was a fantastic collaborative project with McMaster and we look forward to evolving and growing this software project together through further research.

We currently leverage this web-based data visualization and HMI software for use in many of our consulting projects. If you’re interested in an HMI or real-time data visualization software product please feel free to get in touch!