In this part of the series we will configure the PyScada HMI using the web interface.

PyScada HMI Structure.

The PyScada HMI has a display structure based on a hierarchy of:

• Views – Collections of pages
• Pages – Collections of widgets that make up a single page
• Widgets – Objects that control the layout of the page and the position of the various HMI components
• HMI components – The actual objects that make up the HMI, charts, control panels  or custom html panel

The following diagrams shows the relationship the various items using an example implementation.

Views

The diagram below shows two separate views, the intention here is that the views group pages into two groups, one designed for operators and the other for engineers.

Pages and Widgets

In the diagram below the relationships formed on a single page are shown. This page for motors will contain four objects, a control panel and a chart each for two motors. When building pages the objects are laid out by containing them in widgets, the widget positions are defined by their position in a row/column relationship.

HMI Components

We can now discuss the three types of HMI components.

Charts

Simply graphs of the data recorded in PyScada for the points selected.

Control Panels

Again a hierarchy is applied here with a Control Panel being a collection of Control Items. A number of Control Items are available shown in the screenshot below:

Note: as the only devices I have connected to PyScada at the time of writing are the temperature sensors I do not have digital inputs to test the indicators below with. I hope the information below on the labels is not misleading.

Label Blue

A blue text label that background changes colour based on the input variable (shown in deactivated state above).

Label Light Blue

A light blue text label that background changes colour based on the input variable (shown in deactivated state above).

Label OK

A green text label that background changes colour based on the input variable (shown in deactivated state above).

Label Warning

A yellow text label that background changes colour based on the input variable (shown in deactivated state above).

Label Alarm

A red text label that background changes colour based on the input variable (shown in deactivated state above).

Label Alarm Inverted

A red text label that background changes colour based on the input variable (shown in deactivated state above).

Control Element

A collection of displays and update buttons to set a value in the host device.

Display Value

A simple string based text display of the variable.

Custom HTML Panels

These will require a topic of their own due to the complexity but as an overview you can write your own HTML to be inserted into the page and have PyScada render some components. As a basic example the following table, note the temperature column is realtime measurements from PyScada.

This was generated using the code below

<table>
<tr>
<th>Sensor Number</th>
<th>Sensor Location</th>
<th>Temp</th>
</tr>
<tr>
<td>01</td>
<td>Bedroom 1</td>
<td><span class="type-numeric var-Var-Temp-01">NaN</span></td>
</tr>
<tr>
<td>02</td>
<td>Bedroom 2</td>
<td><span class="type-numeric var-Var-Temp-02">NaN</span></td>
</tr>
<tr>
<td>03</td>
<td>Bedroom 3</td>
<td><span class="type-numeric var-Var-Temp-03">NaN</span></td>
</tr>
<tr>
<td>04</td>
<td>Lounge Room</td>
<td><span class="type-numeric var-Var-Temp-04">NaN</span></td>
</tr>
<tr>
<td>05</td>
<td>Kitchen</td>
<td><span class="type-numeric var-Var-Temp-05">NaN</span></td>
</tr>
<tr>
<td>06</td>
<td>Office</td>
<td><span class="type-numeric var-Var-Temp-06">NaN</span></td>
</tr>
<tr>
<td>07</td>
<td>Front Door</td>
<td><span class="type-numeric var-Var-Temp-07">NaN</span></td>
</tr>
<tr>
<td>08</td>
<td>Old Kitchen</td>
<td><span class="type-numeric var-Var-Temp-08">NaN</span></td>
</tr>
<tr>
<td>09</td>
<td>Outside</td>
<td><span class="type-numeric var-Var-Temp-09">NaN</span></td>
</tr>
<tr>
<td>10</td>
<td>Attic</td>
<td><span class="type-numeric var-Var-Temp-10">NaN</span></td>
</tr>
</table>

PyScada HMI Implementation.

Now that we have the basics of the PyScada system this section will build a HMI for monitoring our temperature sensors. The diagram of the PyScada implementation is shown below.

As shown in the diagram above we will create a single view containing one page. On this page will be three HMI components, a “Control Panel”, a “Custom HTML Panel” and a chart. To create this system we will work form the inside out, creating the three HMI components, setting up a new page then its contents using widget definition and finally defining a view to hold them all.

Control Panel – List of temperatures

Log into the web interface as described in Part 3 (Link) scroll down on the administration menu to find the HMI section.

Click the “Control Items – Add” button and create a display value for each of the 10 temperatures. The first one is shown below, the position field allows for control of the order when there is more than one of these used in a control panel.

I repeated this process for the other 9 variables to build a list of control items as shown below.

Now we can combine them into a Control Panel, from the administration menu choose “Control Panels – Add”

Create a new Control Panel and add all the DV-Temp-xx display values we just created to it.

Click save and that is our “Control Panel” complete.

Custom HTML Panel

This panel will be generated in the next post in this series, mostly because I have not written it yet but I expect it to be large enough to demand its own post. For now we will simply place a simple rectangle with a line in it using the code below.

<h1>Testing</h1>
<canvas id="HouseCanvas" width="300" height="150"></canvas>
<script>
var c = document.getElementById("HouseCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

From the administration menu

Click the “Custom HTML Panels – Add” button and complete the form as shown below, I just added a single variable but for the moment we are not defining any references to the temperature.

This completes our placeholder Custom HTML panel.

Chart

This chart will show the historical data for all the 10 temperature sensors.

From the administration menu

Click the “Charts – Add” button and complete the form as shown below.

Click save and the chart configuration is complete.

Page

Create a page to hold the widgets that assemble the page, from the administration menu

Click the “Pages – Add” button and name it as shown below.

Click save and then move on to the Widget configuration

Widget

Create the first widget, from the administration menu

Click the “Widgets – Add” button and name it as shown below.

Then complete the other two based on the details below.

We now have our page configured with three widgets containing items. Now we need to add a view to provide access to the page.

View

Create a view to hold the page, from the administration menu

Click the “Views – Add” button and name it as shown below (the other fields further down can be left as default)

Review the results

The configuration is now complete, head back to the main page and the new view should be visible.

Click on the “Home Temperatures” link to access our new page. This looks as expected however some tidy up is definitely required.