Creating a HMI for an external 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.

Unipi 1.1


External webserver terminal is a virtual device in the Mervis IDE containing data about controllers used by the said project. During configuration, you need to set properties needed to connect and upload of the webserver onto a PLC. An external webserver is always stored only on a single PLC and uses the SSCP protocol to communicate with other PLCs included in the terminal definition and to read into or write from a specific variable.

Create a new project or integrate into an already existing project. The external webserver is suited primarily for two and more PLCs sharing a single HMI interface. To add an additional PLC, you need to switch the project into the Full Mode first. Doing so disables the Autogen (automatic variable generator), which you will need to use manually; alternatively, you can create your variable definition. Follow the tutorial below:

Creating a terminal structure and its description

Initial Mervis IDE configuration with two PLCs:

Add a new terminal by clicking on System and selecting Add Terminal.

A list will appear. Select Controller as External Webserver rev. 2.0.

Click on the newly created terminal and name it. Make sure the Language (WEB) property matches configuration of the PLC to which you want to upload the webserver. After that, the only thing remaining is to set SSCP Parameters used for communication with the PLC and uploading of the webserver.

SSCP Parameters:

  • User: a unique name for the PLCs user (Engineering)
  • Password: your unique password for the PLC (Engineering)
  • SSCP address: set according to the PLCs address
  • Target address: enter an IP address or the PLCs domain
  • TCP port: set to 12346

More info about users is available in the Creating a showcase project, chapter Securing a PLC.

Right-click on the “terminalChannel” channel and select Assign Device.

A dialogue window will appear. Select PLCs you want to control using a common HMI interface. Confirm by clicking on OK.

You now have a complete project structure. It should look like this:

The last important step is to set SSCP Parameters for specific PLCs. These serve for reading/writing variables from the PLCs added in the previous steps. For each PLC the settings are more or less the same, only with different data. Finally, let's move to the configuration itself.

If the PLC storing the external server is also added to the terminal, it needs to have all local connection properties set (username, password, SSCP address, TCP address, port). Don't use the proxy server in this case - doing so would result in a slower communication, as you would still connect to the same PLC through external servers.

Click on PLC in the terminal channel and move into the right column, where you can set Connection Name. After that, look for SSCP Parameters and set it as following:

SSCP Parameters:

  • EndPoint: Custom
  • Device Address: select according to the PLC's address
  • User: name of the PLC user - Full Control will be enough
  • Password: password of the PLC's user
  • Proxy ID: if the PLC is connected to a different network, you can communicate with it using a proxy server - in that case, enter your Proxy ID

TCP Parameters:

  • Device Hostname: enter an IP address, PLC domain or proxy connection address - '''
  • Device Port: 12346 (proxy: 12348)

Configuration using an IP address:

Configuration using a proxy:

More info about users is available in the Creating a showcase project, chapter Securing a PLC.

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 also recommend to use a prefix separated by underscore, ie. EXTERNAL_name
  • Display Type determines the template type → Graphic
  • Template Type - select Terminal
  • Terminal - select the external webserver's terminal for which the template is created

Now you need to assign the template to the terminal. Click on the terminal, go into its properties in the right column and select Device Template. Here you need to upload the template you created in the previous steps.

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 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.

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).