4.3 Adding a user interface (HMI)

The next step in developing a control algorithm is its user interface, or HMI, Human-Machine-Interface. It allows anyone who is unfamiliar with the REX Control System to interact with the algorithm. The HMI of the REX Control System relies on modern web-based technology and the HMI is thus accessible via web browser on desktop PC, tablet or smartphone.

In this tutorial, only a simple HMI called WebBuDi will be created. It provides very simple indicators and input fields to interact with the control algorithm via a web page. See [4] for information on creating more advanced graphical HMI screens.

This is how the HMI will look like and the steps to create it are below.

PIC

In the folder with the project files, create a hmisrc subfolder. Inside this folder, create a file named index.hmi.js and edit it with your favorite text editor. The content should be the following:

REX.HMI.init = function(){  
 
//Indicators displaying the status of switches  
  var switches = {  
    column: 1,  
    title: 'Status of switches',  
    rows: [  
      {alias: 'switch1', desc: 'Switch 1',  
       cstring: 'myproject_task.AND_:U1', type: 'DR'},  
      {alias: 'switch2', desc: 'Switch 2',  
       cstring: 'myproject_task.AND_:U2', type: 'DR'},  
      {type: 'ES'}  
    ]  
  };  
  REX.WebBuDi.addSection(switches);  
 
  //Timer settings and status  
  var timer = {  
    column: 2,  
    title: 'Timer',  
    rows: [  
      {alias: 'interval', desc: 'Timer interval',  
       cstring: 'myproject_task.TIMER_:pt', type: 'AW'},  
      {alias: 'rt', desc: 'Remaining time',  
       cstring: 'myproject_task.TIMER_:rt', type: 'AR'},  
      {alias: 'timerQ', desc: 'Timer output',  
       cstring: 'myproject_task.TIMER_:Q', type: 'DR'}  
    ]  
  };  
  REX.WebBuDi.addSection(timer);  
 
  //Add real-time trend  
  REX.HMI.Graph.addTrend({cstring: 'myproject_task.TRND'});  
  REX.HMI.Graph.setMaxBufferSize(200);  
 
  // Change title of the page  
  REX.HMI.setTitle('My timer - HMI example');  
}

This file will be processed when compiling the project. However, it is necessary to add the EXEC/HMI block into the project main file first.

PIC

Double-click the HMI block to edit its parameters. Set GenerateWebWatch = off and confirm. WebWatch is another type of HMI, which you do not need at the moment. See [4] for details.

PIC

Once you compile the project again, you will see that the compile log contains more information. The HMI files were generated into the hmi subfolder and included in the resulting binary myproject_exec.rex file.

PIC

After you download the project to the target device, you can access the HMI via web browser. The address is http://192.168.1.100:8008/hmi/index.html (use the IP address of your Raspberry Pi). There are only indicators of the Boolean values (physical switches) in this simple example. Creating virtual buttons is also possible, see [4] for details.

The index.html file is generated from the source index.hmi.js file. The default port of the webserver (8008) can be changed in RexCore settings. See [2] for details.

PIC

See also the documentation of RexHMI Designer, which allows you to create graphical user interfaces

PIC

PIC