Web-based technology is becoming more prevalent in industrial applications as information technology and operational technology continue to converge. Responsive web applications provide the flexible, high quality user experience that everyone has come to expect in an application. Using web development technologies within an OT platform opens up new potential for industrial user interface by leveraging the same tools used to build traditional web applications.
This blog post outlines a set of steps you can follow to build a web-based HMI using React with an Inductive Automation Ignition back end. React is an open source Javascript library originally built by Facebook, but now used by countless web applications. Ignition is an industrial data platform that excels at connecting plant floor machine data to business level applications.
create-react-app ignition-web
cd ignition-web
npm start
Create a React component using ignition-web-hoc
npm install https://github.com/JoshMcguigan/ignition-web-hoc.git --save
2. Insert the following as the second to last line of the package.json file in your project directory (note the leading comma).,"proxy": "http://localhost:8088"
3. Restart the React development server by pressing control-c then typing npm start and pressing enter within your terminal / command line.
4. Copy and paste the following into your favorite text editor, and then save it in the /src folder in your project directory, with the name TagValueDisplay.jsx.
import React from 'react';
import IgnWeb from 'ignition-web-hoc';
class TagValueDisplay extends React.Component {
constructor(props){
super(props);
let tagPath = props.tagPath;
props.tagReader.setTagPaths([tagPath]);
}
render(){
let tagPath = this.props.tagPath;
return (
<div>
<p>Tag Path: {this.props.tagPath}</p>
{
!this.props.tagReader.loading &&
<p>Value: {this.props.tagReader.data[tagPath].value}</p>
}
</div>
);
}
}
export default IgnWeb(TagValueDisplay);
5. Open /src/app.js with your text editor and perform the following modificationsimport TagValueDisplay from './TagValueDisplay';
<TagValueDisplay tagPath="Air Temperature"/>
6. Reset your Ignition trial timer if necessary.
This is a slightly more advanced demo of some of the functionality of ignition-web-scripts and ignition-web-hoc. You can run the example locally on your own machine by running the following commands from the terminal / command line (assuming you have git installed).
git clone https://github.com/JoshMcguigan/ignition-web-example.git
cd ignition-web-example
npm start
2. Explore the source code of ignition-web-scripts
These are the python scripts running within the Ignition Web Dev module to expose tag data to our web application.
3. Explore the source code of ignition-web-hoc
This is the React component which polls the Ignition Web Dev module for tag data.
Interested in learning how to build awesome user interfaces? Check out our white paper to learn how to apply UI design principles to SCADA development.