Web HMI Using Sencha Ext JS for Industrial Gas Analyzer

Project Description

The Context

A leader in industrial gas analysis was looking to introduce a new and improved instrument into the market, to replace their existing product. Having extensively worked with gas analyzers, Tismo was tasked with the development of the control software for the instrument.

The Problem

The analyzer was designed to be mounted directly on industrial exhaust pipes to measure the sulphur content in emissions. False analysis and inaccurate data from sensors were salient problems due to the corrosive gases and the harsh working conditions. In addition to this, the software had to work around the physical constraints of the instrument and the need for low energy usage, while still providing a good user experience. Moreover, the client wanted to control the instrument remotely, using a PC, that provided the same user interface.

The Solution

To provide a modern user interface, accessible on the instrument and on a PC, Tismo recommended a Web HMI control app for the Industrial Gas Analyzer. Web HMI on an embedded instrument is an inexpensive implementation that leverages connectivity to provide a refined user experience. It combines a modern Graphical User Interface (GUI) and universal connectivity to mobile, tablet, desktop etc., to provide accessibility and future-readiness with minimal hardware changes. Web HMI is rapidly gaining ground within the analytical instrument industry, due to its technological and economic merits.

Tismo understood that the best approach was to stick to the basics and design a Web HMI control that demanded the very minimum in terms of system resources while delivering optimal performance under the harsh working conditions.

Architecture diagram of Web HMI using Sencha Ext JS for industrial gas analyzer

Architecture diagram of Web HMI using Sencha Ext JS for industrial gas analyzer

The team developed a Web HMI using Sencha Ext JS architecture. This allowed Tismo to develop a remotely accessible control software that could run on embedded devices, desktops, tablets, and smartphones. Additionally, the pre-integrated and tested high-performance UI components provided by the Sencha JS architecture was leveraged to implement a modern user interface.The design followed Model View – View Model (MVVM) architectural pattern. Filezilla, a free, cross-platform FTP application was used for the remote updates of the instrument UI.

Features

The web app developed by Tismo supported the following features:

  • Automatic flow control for quick response to unfavourable process conditions
  • Remote PC Web enabled interface
  • Remote User Interface updates
  • Smart diagnostic models to identify and react to potential problems
  • Extended ‘over range’ measurement for informed response to process conditions

About Sencha Ext JS

Sencha Ext JS is one of the most powerful application development platforms and supports both Model View Controller (MVC) or Model View – View Model (MVVM) frameworks. It is component based (Grid, Tree, Forms, Charts) and follows object oriented principles. It possesses plugin free charting features, modern UI widgets and great cross-browser compatibility. Sencha Ext JS comprises of the following features:

  • Rich, modern UI widgets
  • Clean component model
  • Cross platform browser compatibility
  • Plugin-free charting
  • Modern application framework
  • Sencha Cmd

Sencha Cmd provides comprehensive lifecycle management features such as code minification, scaffolding, production build generation etc and forms the bedrock for building Sencha Ext JS and Sencha Touch applications.

Related Read: Web HMI: A Low-Cost, Modern and Remotely Accessible User Interface for Instruments

Summary

The Tismo team leveraged its experience to deliver a remotely accessible Web HMI using Sencha Ext JS to serve as the control software for an industrial gas analyzer, designed to be mounted directly on industrial exhaust pipes to measure the sulphur content in emissions. The app was designed to work around the physical constraints of the instrument and the need for low energy usage, and provided a top-notch user experience on both the embedded display and other connected user devices. The Web HMI using Sencha Ext JS followed the MVVM pattern. Sencha Ext JS offered a range of user interface widgets including high performance scalable grids, trees, menu etc.that aided the development process.

Back to Top