Joshua Mcguigan Tue Oct 24

Building a Web Front-End for Ignition SCADA using React and the Web Dev Module

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.

Configure Ignition

  1. Install Ignition 7.9.4 or later.
  2. Install the Ignition Web Dev Module.
  3. Restore the Ignition Gateway backup located here.

 

Set up your React development environment

  1. Install Node by downloading and following the instructions here.
  2. After installing Node, install Create React App by running the following command in your terminal / command line: npm install -g create-react-app.
  3. Using the terminal / command line, change directories to the directory where you want to keep your web project, then run the following commands:

create-react-app ignition-web
cd ignition-web
npm start

4. Open a web browser and navigate to http://localhost:3000 to see the React application.

 

Create a React component using ignition-web-hoc

  1. Install ignition-web-hoc by running the following line in your terminal / command line (ensure you are still in the root directory of your project).

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 modifications
    • After the other import statements, add the following line.

import TagValueDisplay from './TagValueDisplay';

  • Paste the following line just above the </div>.

<TagValueDisplay tagPath="Air Temperature"/>

6. Reset your Ignition trial timer if necessary.
7. Open a web browser and navigate to http://localhost:3000 to see Ignition data displayed by a React web application.
8. Launch the Ignition designer and modify the value of the “Air Temperature” tag, and you’ll see the value change on the web application.

 

Next Steps

  1. Explore ignition-web-example

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.
Get the PDF

 

COMMENTS

RELATED ARTICLES

SUBSCRIBE TO OUR BLOG

Sign up to get the latest from Vertech delivered right to your inbox.