Creating a HMI for local PLC webserver

HMI (Human-Machine Interface) templates are used to easily control and monitor one or more devices. Graphic HMI interfaces are designed for web browsers, allowing you to monitor the status of automation processes and to control them. The easiest variant of an HMI is a local web template for a PLC. Alternatives are terminal graphic templates for the Mervis SCADA or for an external webserver.

Patron
Neuron
Gate
Unipi 1.1
Axon

Create a new project or integrate into an already existing one.

Creating a template

To add a template a PLC must be attached to your project.

You can create a HMI template by right-clicking on HMI project and selecting Add New HMI Template

A dialogue window will appear. Enter the name of the template and set other properties as needed.

  • Name should be considered carefully. We recommend using a prefix separated by an underscore, ie. LOCAL_name
  • Display type determines the template type → select Graphic
  • Template type - select your PLC
  • PLC - select the PLC the template is created for

Now you need to assign the template to your PLC:

Click on the PLC and in its properties in the right column look for Device template. Insert the previously created template here.

Creating a HMI

In the left panel, double-click on the created HMI template. On the bottomn of this panel, switch to HMI Objects tab - your screen should look like this afterwards:

In the HMI objects window you can see a wide collection of graphic gadgets that can be added to the template. In this tutorial, we will start with the Value Indicator element designed for displaying numeric values. This makes it ideal for displaying the current temperature in an office, for example. Click on the element in the left panel and drag it onto the main panel.

The element will appear on the main panel and will stay highlighted. In the Properties menu, you can now see all available configurations for it. Right now, the most important attribute is Variable placed in the HMI section. Using this setting we will tell the element which variable will be used as a data source. Click on Variable and then click on the button. .

A well-known Select variable dialogue will appear, in which you can search for the needed variable. In this tutorial, we are looking for an already existing office_temperature variable. Look it up, select it from the list and confirm by clicking on OK.

Go back to Properties. Change the Unit setting determining the displayed value's unit. In the HMI, this unit will be automatically added behind the displayed values. As we are talking about a temperature value, set the Unit attribute to °C.

It may be also handy to give the value a suitable name. In the HMI objects menu choose the Text element and place it into the template. In the Properties panel, change the Text attribute to Current temperature.

As the new name is much longer than the default one, you can enlarge the text field by dragging one of the yellow squares around the element to make the whole text visible.

Right now, the element is not legible enough, and its current design makes it look more like a button than a nametag. Let's improve it by changing the text's colour to blue using the Foreground attribute in the Text property section.

Now change the Background colour to white, and Text Horizontal Alignment to Right.

The next step is to add an element that would allow us to display and configure the values of an analogue variable. Theoretically, we could again use the Value Indicator. However, this element can only display values, not change them. A more suitable choice is the Analog Setter. Select it and place it onto the canvas. In the HMI properties, configure it as follows:

  • Variable: choose a suitable variable representing temperature. In our case, we will select threshold_temperature variable
  • Unit should be set to °C as the variable is expressed in degrees Celsius.
  • Min Value will be 18, which will prevent users to set a temperature lower than 18 °C
  • Max Value is 30 to prevent users to set a temperature higher than 30 °C
  • Step Value, or the increment by which the temperature can be adjusted. Set it to 0.5

We will also create a text label for the element in the same way as with Current temperature. You can simply copy and paste the text fields and edit the text afterwards.

The last element we will need is an indication of heating status, eg. if the heating is ON or OFF. Again, we could simply use the Value Indicator, but we won't since this element can display only binary values (0 or 1). A better choice is the Digital Indicator. Select it and place it onto the canvas. Here, you need only to select the correct variable, ie. DI_1.02.

We recommend giving inputs/outputs descriptive names such as light_kitchen, door_bell etc. There are two main reasons:

  1. Such names will make the project much clearer and easier to read
  2. If you decide to plug a sensor to a different input, all you need to do is to rename the input variable with the rest of the program still using the same name

At this point, only a couple of finishing touches is needed. Give the heating status indicator a name and then create another, a larger text field for the name of the entire HMI project. The result can look like this:

Securing a HMI

Securing an HMI is an important step to set users and user groups and grant them access to the HMI. If the default login remains unchanged, any user connected to the network can access the HMI using default passwords and is able to change PLC values. You should never allow users to access the HMI through a public IP, as the webserver on the PLC should be used only on a local network. To access the HMI from the internet, use the Mervis SCADA.

In the properties of each HMI page you can set a group of users able to access the said page. Each user can be assigned to single or multiple groups. Each group can be also set for both read/write or as a read-only.

By double-clicking in the left panel you can open:

  • PLC (local webserver)
  • Terminal (external webserver).

In the bottom panel of the PLC windows, look for HMI User Rights.

A list of users will appear. Change the default passwords immediately. You can also set a separate read-only or write user groups. The last two columns are for setting up which user will have admin rights and which will be the default one. If the default user has no password, the HMI will display with no password needed. If you use this setting, we recommend setting this user as read-only.

If you right-click into the blank space under the user tab, a menu will appear. Here, you can add more users. The rest of the options are for editing existing users and are available via a right-click on any of the users.

By clicking Group Definition tab on the bottom of the PLC window, group settings will open. In this panel you can add or manage user groups the same way as users, including a column for selecting a default group, which will be assigned automatically to every additional user.

All changes need to be confirmed to save them. Confirm by clicking OK in the red bar.

Below you can see an example of user configuration.

In the properties of each HMI page, you can set a user group able to access the page.

Deploying a HMI into a PLC

To deploy a solution, click on Deploy Solution. A deploy dialogue window will appear. Make sure to check the Web box next to the PLC/terminal. With an external web server, check that only the specific web server is being uploaded (eg. not the local one).

Downloads

The entire Mervis IDE project used in this tutorial is available for download on this link

(Still can't find what you're looking for?)