Manual Qhmi

User Manual
QuickHMI Software
Modern SCADA/HMI visualization
Version 9 Gazelle
QuickHMI - V9 (Gazelle) R2 05.07.2021
Table of contents
Table of contents .......................................................................................................................................................... 2

1 Introduction .......................................................................................................................................................... 6
2 QuickHMI Gazelle - That´s new! ........................................................................................................................... 7
3 QuickHMI Editor ................................................................................................................................................... 9
3.1 Licenses .......................................................................................................................................................10
3.1.1 Request a test license .........................................................................................................................10
3.1.2 Activation of licenses ..........................................................................................................................14
3.2 Editor start page .........................................................................................................................................17
3.3 Creating a new project ...............................................................................................................................18
3.3.1 Header and footer ..............................................................................................................................19
3.4 Open project ...............................................................................................................................................20
3.5 Editor user interface ...................................................................................................................................21
3.6 Editor main menu .......................................................................................................................................22
3.6.1 File.......................................................................................................................................................22
3.6.2 Runtime ..............................................................................................................................................23
3.6.3 Project.................................................................................................................................................23
3.6.4 Edit ......................................................................................................................................................23
3.6.5 Editor ..................................................................................................................................................24
3.6.6 Help .....................................................................................................................................................27
3.7 Edit Page .....................................................................................................................................................28
3.7.1 Changing page size .............................................................................................................................29
3.7.2 Adding views .......................................................................................................................................32
3.7.3 Add a new page / Header & footer ....................................................................................................33
3.7.4 Group several pages ...........................................................................................................................36
3.8 Project settings ...........................................................................................................................................38
3.9 The Project explorer ...................................................................................................................................44
3.10 Working with control elements ..................................................................................................................47
3.10.1 Using of the control elements ............................................................................................................49
3.10.1.1 Assignment of properties ...........................................................................................................50
3.10.1.2 Move and rotate control elements.............................................................................................51
3.10.1.3 Rules............................................................................................................................................52
3.10.1.4 Actions ........................................................................................................................................58
3.10.1.5 Drag&Drop Function ...................................................................................................................63
3.10.1.6 Align multiple control elements .................................................................................................65
3.10.2 PlugIn Manager...................................................................................................................................67
3.10.3 SVG controls .......................................................................................................................................69
3.10.3.1 Basics about SVG´s ......................................................................................................................69
3.10.3.2 SVG´s in the QuickHMI Editor .....................................................................................................73
3.10.3.3 Add actions and properties ........................................................................................................80
3.10.3.4 Constants ....................................................................................................................................88
3.10.3.5 Using of classes and ID´s .............................................................................................................90
3.10.3.6 Example 1: Barrier ......................................................................................................................91
3.10.3.7 Example 2: Rack feeder ..............................................................................................................92
3.11 Working in different layers .........................................................................................................................94
3.12 Communication ..........................................................................................................................................97
2
3.12.1 Creating database connections ..........................................................................................................97

3.12.1.1 JDBC Strings ................................................................................................................................99
3.12.2 Creating data sources .......................................................................................................................100
3.12.2.1 Creating S7 data sources ..........................................................................................................101
3.12.2.2 Creating OPC data sources .......................................................................................................110
3.12.2.3 Creating TWINCAT data sources ...............................................................................................116
3.12.2.4 Creating MODBUS data sources ...............................................................................................119
3.12.2.5 Creating KNX data sources........................................................................................................127
3.12.2.6 Creating DataBase data sources ...............................................................................................130
3.12.2.7 Creating File system data sources ............................................................................................136
3.12.2.8 Creating MQTT data sources ....................................................................................................142
3.12.2.9 Creating Allen-Bradley data sources.........................................................................................146
3.12.2.10 Creating Webservice data sources ...........................................................................................149
3.12.3 External Logging................................................................................................................................155
3.12.3.1 External logging in the database ..............................................................................................155
3.12.3.2 External logging in the file system ............................................................................................161
3.12.4 Adding variables ...............................................................................................................................169
3.12.4.1 Adding S7 Variables ..................................................................................................................169
3.12.4.2 Adding OPC UA Variables..........................................................................................................173
3.12.4.3 Adding TWINCAT variables .......................................................................................................177
3.12.4.4 Adding MODBUS Master variables ...........................................................................................181
3.12.4.5 Adding MODBUS Slave variables ..............................................................................................184
3.12.4.6 Adding KNX variables ................................................................................................................185
3.12.4.7 Adding DataBase variables .......................................................................................................187
3.12.4.8 Adding File system variables.....................................................................................................190
3.12.4.9 Adding MQTT variables.............................................................................................................192
3.12.4.10 Adding Allen-Bradley variables.................................................................................................195
3.12.4.11 Adding Webservice variables ...................................................................................................197
3.12.4.12 Status variables ........................................................................................................................200
3.12.4.13 Value manipulation ..................................................................................................................202
3.12.4.14 Adding Alarm variables.............................................................................................................203
3.12.4.15 Internal variables ......................................................................................................................206
3.12.4.16 Text view of variables ...............................................................................................................209
3.12.4.17 Variables with control elements ..............................................................................................212
3.12.5 Reading variables ..............................................................................................................................212
3.12.6 Writing variables ...............................................................................................................................212
3.13 Database queries ......................................................................................................................................213
3.14 JavaScript & HTML ....................................................................................................................................217
3.14.1 HTML Manager .................................................................................................................................217
3.14.2 JavaScript ..........................................................................................................................................220
3.14.2.1 Definition ..................................................................................................................................220
3.14.2.2 Assignment ...............................................................................................................................227
3.14.2.3 JavaScript Debugging ................................................................................................................230
3.15 E-mail function..........................................................................................................................................240
3.15.1 Sending e-mail by control events .....................................................................................................242
3.15.2 Sending e-mail by variable change ...................................................................................................243
3.15.3 Sending e-mail by activating alarms .................................................................................................244
3.15.4 Placeholders .....................................................................................................................................245
3.15.4.1 Placeholder: @changedvariable ...............................................................................................245
3
3.15.4.2 Placeholder: @triggeredalarm .................................................................................................246

3.15.4.3 Placeholder: @tag ....................................................................................................................247
3.15.4.4 Placeholder for single values ....................................................................................................248
3.15.4.5 Placeholder for displaying variables .........................................................................................250
3.15.4.6 Placeholder: @cache ................................................................................................................252
3.16 Translation texts .......................................................................................................................................253
3.17 Security .....................................................................................................................................................254
3.17.1 Adding users .....................................................................................................................................254
3.17.2 Adding groups ...................................................................................................................................255
3.17.3 Manage right ....................................................................................................................................259
3.18 Integration of media resources ................................................................................................................260
3.18.1 Integrate image resources ................................................................................................................260
3.18.1.1 Adding image controls ..............................................................................................................262
3.18.2 Integrate audio resources.................................................................................................................266
3.18.2.1 Audio recourses related to control elements and alarm variables ..........................................267
3.19 Chart Manager ..........................................................................................................................................271
3.19.1 Adding and edit charts ......................................................................................................................271
3.19.1.1 Lines and bars ...........................................................................................................................274
3.19.1.2 Pie chart ....................................................................................................................................279
3.19.2 Chart control elements .....................................................................................................................280
3.19.3 Create and run a sample chart .........................................................................................................280
3.19.3.1 Run the chart in runtime mode ................................................................................................285
3.20 Recipe Manager ........................................................................................................................................288
3.20.1 Create a new recipe ..........................................................................................................................288
3.20.2 User management ............................................................................................................................289
3.21 Runtime mode ..........................................................................................................................................291
3.21.1 Starting runtime mode .....................................................................................................................291
3.21.2 Loading screen ..................................................................................................................................295
3.22 Export the project for the server ..............................................................................................................297
3.23 Tips & Tricks ..............................................................................................................................................298
4 QuickHMI Standalone Runtime ........................................................................................................................ 299
4.1 Setting up the server with the QuickHMI Runtime Manager ...................................................................299
4.1.1 Runtime Manager - Start page .........................................................................................................299
4.1.2 Runtime Manager - Configure the project .......................................................................................301
4.1.3 Runtime Manager - User management ............................................................................................303
4.1.4 Runtime Manager - Recipe management.........................................................................................304
4.1.5 Runtime Manager - Settings .............................................................................................................305
4.1.6 Runtime Manager - Data sources .....................................................................................................307
4.1.7 Runtime Manager - Help ..................................................................................................................308
4.2 Installing the QuickHMI Runtime on Linux-Systems.................................................................................309
5 QuickHMI Viewer .............................................................................................................................................. 312
5.1 Desktop Viewer.........................................................................................................................................312
5.1.1 Desktop Viewer - Start page .............................................................................................................313
5.1.2 Desktop Viewer - Main menu ...........................................................................................................314
5.1.3 Desktop Viewer - Start project .........................................................................................................315
5.1.4 Desktop Viewer - Open project ........................................................................................................316
5.1.5 Desktop Viewer - Executing the runtime..........................................................................................317
5.1.6 Desktop Viewer - Start parameters ..................................................................................................320
5.1.7 Installing the QuickHMI Viewer on Linux-Systems ...........................................................................321
4
5.2 Web Viewer ..............................................................................................................................................322

5.2.1 Web Viewer - Executing the runtime ...............................................................................................323
5.2.2 Web Viewer - On-screen keyboard...................................................................................................324
5.3 QuickHMI Android App .............................................................................................................................328
5.3.1 Android App - Open a new connection ............................................................................................330
5.3.2 Android App - Executing the runtime ...............................................................................................332
6 Overview ........................................................................................................................................................... 334
6.1 System requirements for QuickHMI .........................................................................................................334
6.2 Connection to PLC and devices.................................................................................................................336
6.3 Overview of the functions ........................................................................................................................337
6.4 Configuration in 3 steps ............................................................................................................................338
7 Do you have any questions? ............................................................................................................................. 339
5
1 Introduction
Thank you very much for buying QuickHMI.
To help you to get to know you are newly purchased product and to allow you to start using the software as quickly
as possible, we have compiled the most important information for you in this QuickHMI documentation. Please
read this information carefully. It contains important instructions on how to operate the software, which will help
you to take full advantage of our product.
Copyright:
This QuickHMI documentation is copyright protected.
All rights, in particular, the right to reproduce, distribute and translate this documentation, remain reserved.
Without prior written consent from the copyright holder, no part of this documentation may be reproduced by
means of photocopying, microfilm, or other processes,
or transcribed or translated into another language or computer language in any form.
All reproduction rights reserved. Indi.An Systems GmbH is not liable for any inaccuracies resulting from errors or
from subsequent changes to the content or program.
QuickHMI is a registered trademark of Indi.An Systems GmbH.
Copyright © 2021 Indi.An Systems GmbH.
All product names or other names or brands referred to in this documentation are the trademarks or registered
trademarks of their respective owners.
and are the property of those copyright owners. All rights are reserved.
6
2 QuickHMI Gazelle - That´s new!

The ninth version of the visualization software QuickHMI, comes with the following new features.
 The QuickHMI E-Mail-Function

QuickHMI now allows you to send automatically generated e-mails when variable values change, alarms
are triggered, or when communicating with control elements. All about this topic you will find in the “E-
mail function” chapter.
 Webservice data sources / Webservice variables

A new Webservice data source type and Webservice variables have been added and can be used. All about
this topic you will find in the “Communication” chapter.
 Status variables
From version 9.1.0.0 Gazelle, you can display the status of variables in the visualization. You can interact
with these status variables as with all other variables. All about this topic you will find in the “Status
variables” chapter.
 Database queries
Display entire table contents from databases on the interface.
All about this topic you will find in the “Database queries” chapter.
 Corporate Design
Here you can define the complete design of the user login mask so that it fits your company or project. You
can customize the logo as well as the colors and the texts. This function is only available in QuickHMI
Professional. All about this topic you will find in the “Project settings” chapter.
7
 New interface design and darkmode

With the new version of QuickHMI, comes a new and more modern interface design. In addition, the high
demand from users was responded to, and an eye-friendly and stylish dark mode is integrated. The screen
shots in this documentation will be adapted to it step by step. All about this topic you will find in the
“Editor” (“Theme” section) chapter.
Darkmode
8
3 QuickHMI Editor
QuickHMI | Your software for data and machine visualization.
Create your data or machine visualization with QuickHMI Editor in a few easy steps. Run your project in a Browser,
QuickHMI Android App or Desktop Application on Windows and Linux. With the scalable QuickHMI create small
projects with a Raspberry Pi up to a large visualization of industrial landscapes.
In addition to the graphical drag and drop environment, the possibilities of scripting with JavaScript have been
further developed. It is also possible to use external file and database content. Also, a comprehensive driver
collection is available for the connection of many data source types.
9
3.1 Licenses
How to request and activate licenses you can see in the "Request a test license" and "Activation of licenses" sub
chapters.
3.1.1 Request a test license
To request a trial license, visit our website and log in with your data. If you don’t have any log-in data, you can
register for free.
10
Enter your login details and click on "LOGIN".
After login, you have direct quick access to the software download and the purchase of licenses. To download
QuickHMI and request a 14-day trial license, click on "DOWNLOAD".
11
The download area contains QuickHMI Software Packages, Update Packages and the image for the Raspberry Pi.
You can also call the help here.
To request a trial license, click on "Request trial".
12
In the following dialog click on "Request trial license bundle via email".
As described in the dialog, 3 different QuickHMI versions will be sent to you via email for testing. A private license
is provided for private use only, commercial use is prohibited.
The trial license will be sent to you within 5 minutes by e-mail.
With this trial license, you can use QuickHMI 14 days for free.
Compatibility of the license models
The private trial license can be converted to a private full license and the trial license for businesses can be
converted into a full license for businesses. Other combinations are not possible.
How to import and activate licenses, you will find in the "Activation of licenses" chapter.
13
3.1.2 Activation of licenses
After downloading QuickHMI and staring the QuickHMI Editor, you must import a valid license to continue. Click
on the "Import" button and select your previously received license.
If you don´t have a license, you can get it on our website, or click on the "Request a trial license" link.
Then you have the option of deciding whether to activate the license automatically or manually.
Information:
There is no longer a separate license for the QuickHMI Runtime Manager. There is only ONE editor license
that applies to everything.
14
Automatic license activation
To automatic activation, an existing connection to the Internet is required because the license will be registered on
our QuickHMI Server (Part of the QuickHMI Standalone Runtime).
Only your hardware ID and license will be transferred.
Click "Yes" to activate your license automatically.
The license was activated successfully.
If you have exceeded the maximum number of license activations, the following dialog will appear, and you will
need to purchase a new license.
Information:
A license can be activated up to 5 times per year. So, on 5 devices. A license is bound to the hardware
signature of a device.
15
Manual license activation
Do you want to activate your license manually, because you don't have access to the Internet, select “No” in the
“Confirmation” window.
The "License Activation" window opens with an "Activation key". You can enter it from another Internet-enabled
device on our QuickHMI activation website.
Then you will receive an "Activation Code", which you can then enter on your device again in the "Activation code"
area. Click "Activate" to continue.
This allows you to activate your license manually without an Internet connection.
16
3.2 Editor start page

After starting QuickHMI, you will be on the start page.
On this dynamic HTML start page, you will find the latest news about QuickHMI, as well as information about this
software. You will also find our program documentation and video tutorials.
Additional services:
 Start a new project
 Open an existing project
 FAQ
 Request features
 Report errors
 Contact
17
3.3 Creating a new project

Determine the most basic features that your new project will have. Choose a name for the first page, the
background color, and the screen ratio.
You can also create a header and footer here.
How to create headers and footers is explained in the "Header and footer" chapter.
Aspect ratio
In the "Presets" section, you can choose between many of preset aspect ratios. These are divided into dimensions
for the desktop version and for the mobile app version. Of course, you can also specify an individual aspect ratio by
simply entering the width and height manually. By disabling the lock icon, you can change the width and height
independently.
18
3.3.1 Header and footer
You can create a header and footer directly in the first project page. You can also select a header and footer already
created in the other project, which should now also be available in the new project.
From a newly created header and footer, then the height can be determined. Created headers and footers appear
as red lines in the preview.
By activating the checkbox, you can reduce the page by the height of the header and footer. So, the set aspect ratio
includes the header and footer, and the effective page size shrinks.
Click "OK" to continue.
19
3.4 Open project

Click “Open project” and select the project you want.
Alternatively, you can go to “File / Open” where you can choose between already existing projects. The “Recently
opened projects” appear here too.
20
3.5 Editor user interface

After you have set the basic properties of your new project, the user interface will open, which you can then adapt
to your needs.
1. Control elements with search function
2. Layers
3. Editor desktop and display area
4. Project explorer
5. Properties
4
3
Start the runtime in the mode, which you have selected in

the "Runtime" menu beforehand to simulate the behavior
2 of the project in the server environment. 5
For each window, you can set the properties.
In addition to properties such as "Dockable", you can also detach the

window "Controls" from the grid or completely close them.
These operations apply to all windows of the editor's user interface.
21
3.6 Editor main menu

Navigate in the main menu for quick access to the basic program features.
3.6.1 File
If you click on “File” above on the left site, you will have the following options in the main menu:
 New project
A new project will be created.
 Open
An already existing project can be selected and opened.
 Save
The project will be saved.
 Save as…
The project will be saved using a name to be entered.
Information:
QuickHMI Gazelle is backward compatible with projects from QuickHMI Falcon.

However, projects saved in Gazelle can no longer be opened with Falcon.
 Server export
File needed by the QuickHMI Runtime Manager (Part of the QuickHMI Standalone Runtime) to configure
the project.
 Close project
The project will be closed.
 Recently opened projects

Recently opened projects are listed and can be selected with a single click. Grayed-out files have been
deleted and can therefore no longer be selected.
 Exit
QuickHMI will close.
22
3.6.2 Runtime
All information’s about the runtime mode, can be found in the “Runtime mode” chapter.
3.6.3 Project
All operations that you find in the "Project explorer" can also be called up directly in the main menu under
"Project".
3.6.4 Edit
If you click on "Edit”, you can perform the following operations:
 Cut
Cuts selected control elements.
 Copy
Copies selected control elements.
 Paste
Paste copied and cut control elements with all before defined properties.
 Delete
Deletes selected control elements.
 Arrangement
Align multiple control elements
23
 View Manager / Page properties

The basic properties of the page can be set.
 Navigation
Shows all created views and sites from the project.
 Zoom & Pan

If this mode is activated, the Editor desktop can be zoomed and panned as needed. To select elements, the
mode must be deactivated. (Can also be activated using the “CTRL” key)
3.6.5 Editor
Click on "Editor" in the menu bar and you have the following options:
License information
To get information about your currently used license, click on "Editor" --> “License info” in the menu bar of the
QuickHMI Editor.
This will open the window "License info", with all information’s about the used license.
Copy the license ID
24
Here you also have the option to change licenses, with click on the corresponding button. Because the license is
tied to the current hardware signature of the device when it is activated, it is necessary to deactivate the license
on the current system before the hardware will change or before installing QuickHMI on another computer. So, the
license can then be reactivated on the new system without any problems.
To change or deactivate licenses, the opened project must first be closed.
Save & Load
Here you can save the created layout to reload it later.
Factory settings (standard layout)
If you have made significant modifications to the layout to suit your needs, it may be necessary or practical to
restore the standard layout. This way, you have immediate access to all Editor windows.
Window
Here, you can reopen any windows you closed earlier to use the space for another purpose.
For instance, if you close the “Layers” window, you can restore the layers window in the Editor under “Window”.
25
Log messages from the editor are logged in the designated “messages” window.
The QuickHMI Server and the QuickHMI Runtime Manager (Parts of the QuickHMI Standalone Runtime) are logging
to their respective files which are in the following directories:
Windows:
 Server: %PROGRAMDATA%\QuickHMI\QuickHMI Server Gazelle\logs\server

 RuntimeManager: %PROGRAMDATA%\QuickHMI\QuickHMI Server Gazelle\logs\rm
Linux:
 Server: /usr/share/QuickHMI/QuickHMI Server Gazelle/logs/server

 RuntimeManager: /usr/share/QuickHMI/QuickHMI Server Gazelle/logs/rm
Language
Select the desired language and restart the editor for the settings to take effect.
Theme
From QuickHMI Gazelle version, you can easily switch between the normal mode and a dark mode here.
26
3.6.6 Help
Here, you can open the help file (QuickHMI Documentation) and information about the QuickHMI version you are
using with integrated diagnostic tools. In addition, you can check for available updates.
27
3.7 Edit Page

Click with the left in a free place on the editor workspace.
You can, for instance, assign a new background color. Click on the color wheel at the right side of the “Settings”
window to assign a new color. Set the desired properties for your page. The “Default view” property lets you select
which page should be the start page at runtime.
If you right-click a vacant space on the Editor workspace, you can switch to View Manager. For a detailed
description of the View Manager, go to the link below.
You can also open the properties window by holding down the “Alt” key.
28
3.7.1 Changing page size
Here you have the option to change the page size. In this case, proceed as follows: If you are in the "Side
properties", you will find "Page size" in the "Settings" area.
29
If you click on "Change page Size", the current page ratios are displayed. These can be changed as desired. Please
note that components which are outside the new size range will be deleted.
Confirm with "OK".
* A new page size has been defined.
Before the components which are outside the new size range will be deleted, you still have the option to cancel the
operation. In this case, click "No". Otherwise, continue with "Yes".
30
In this example, only “Button 1” remains. All other buttons were outside the new size range.
Before change size After change size
31
3.7.2 Adding views
You have the options of dividing your project into organized sections to make navigation within the large project
significantly easier.
This works with the QuickHMI View Manager.
To set up a view, select “Edit” from the “Main menu” and then “Page properties”. Alternatively, hold down the ALT
key with the page selected on the Editor desktop.
The control elements can be hidden and replaced using the “Views” tab. The view can be placed on the Editor
desktop, where its size can be adjusted and selected like any other control element via Drag&Drop. Selected views,
like other objects in the Editor, have their own properties.
These can also be modified via the Properties window for the selected view.
All of the views can be selected under the menu item “Edit” / “Navigation”.
32
3.7.3 Add a new page / Header & footer
Add a new page
To add new pages, click “Add page” in Project explorer.
Then proceed as described in the "Creating a new project" chapter.
33
Adding header & footer
Select "Header/Footer" as "Type". Now you can choose one of the templates or enter individual values. Then
continue with "OK".
“Page2” has been defined as a page with a header and footer. You can edit these headers and footers and display
them on all other pages.
34
To do this, select a page that should contain a header and footer.
In the “Properties” click the selection button in the “Header” line. Then all the pages that you have previously
defined as headers and footers will appear.
Proceed in the same way for the “Footer”. So, you can select which page should be shown as the header and which
as the footer.
For “Page”, “Page2” is defined as the header.
The header is now displayed by default in “runtime mode”. The same would apply to the footer if you had defined
“Page2” as the footer in the properties beforehand.
35
3.7.4 Group several pages
In QuickHMI it is possible to group several pages together. This guarantees an even better overview, especially in
larger projects. To do this, select a page and go to its settings. In the "Properties" window, set a group name in the
"Group" column and confirm with Enter. This will create the group and automatically assign the selected page to
that group.
In this example, the group “Group 1” was created and the selected “Page3” was assigned to it. Once a group has
been created, you can drag and drop additional pages into this group.
Drag additional pages into the created group.
To remove them from the group, just drag the page

to the “Pages and sections”.
To delete groups again, simply remove the group name of the group folder. All pages contained in it are removed
from the group but are retained. These can then be deleted individually if necessary.
36
In runtime mode, the group appears in the page overview and can be opened to get to the pages it contains.
37
3.8 Project settings

In the Project explorer, click on “Project settings”.
Information:
All project settings are saved in the project and automatically applied to the QuickHMI Runtime Manager
when it is executed.
 Common
Here, you can set up project protection by assigning a password of your choosing.
Project ID:
Generating a project-dependent ID has the meaning that databases for saving the chart data no longer
depend on the saved project name, but on the generated "Project ID". So, the same data can be accessed
in several projects using the ID. (Previously, a new database was created for each new project.)
To do this, enter the "Project ID" of the project whose data is to be used and confirm with "Save". The
reverse case is also conceivable: If a project becomes "Save as", the “Project ID” is also included. By default,
the same data would be used as the basis for the charts, as for the old project.
If you want to start with the new project but with a fresh database, simply generate a new random "Project
ID" with the button "Generate".
38
 Runtime | Miscellaneous
Here you can set the initial zoom level. Choose “Fit” for display the full site or zoom to 100% (like in the
editor).
 Runtime | Ports
Here you can specify which ports should be used. For each port, you can determine if it should be HTTPS
secured or not. This is done simply by activating or deactivating a check box.
39
 Runtime | Compression
Data sent between server and client, can be compressed to improve transfer speed. How the data is
compressed, is set here. The performance depends on the compression.
 Runtime | Java
The Java maximal heap size determines how much memory the JVM (Java Virtual Machine), and therefore
our server, can allocate. Given too much memory the server might don´t start at all. Given to less it might
later. Java settings need only be changed if recommended by the software. Otherwise usually no changes
need to be made.
How much memory is needed mainly depends on the project size. We recommend to only these values with caution.
40
 Charts
Here you can specify how many days the data should be saved and thus be visible. "Save" your setting to
continue.
 Corporate Design
Here you can define the complete design of the user login mask so that it fits your company or project. You
can customize the logo as well as the colors and the texts. By default, the QuickHMI design is active.
41
 Corporate Design | Common

Here the "Accent color" can be determined. This includes, for example, all the individual buttons. You can
also change the "Favicon" here. The favicon is the small icon in the upper left corner of the browser. Most
websites have their own favicon. To change the favicon, you can use previously implemented image
resources as well as a graphic uploaded under "New". All settings made here affect the complete viewer.
 Corporate Design | Login

Here, the "Title", "Subtitle", "Background Color" and an own "Logo" can now be determined. To change
the logo, previously implemented image resources can be used as well as a graphic uploaded under "New".
All settings made here affect the user login mask.
42
 Corporate Design | Loading screen

This is about the loading animation. The “Background color” can be selected, as well as the loading
animation. This is a gradient animation of two graphics. Therefore, two graphics must be selected here. A
start graphic that is always shown and a target graphic that overlays the start graphic step by step. An
animated preview below the settings illustrates the principle. It is recommended that both graphics have
the same size. In the best case a dimension of 256px x 256px.
 Corporate Design | Execution of the example

To illustrate this, here is the execution of the viewer with the login mask defined above, compared to the
default settings.
* Standard * New defined
When all settings have been made, click on "Save".
43
3.9 The Project explorer
44
Here you can make project-related settings:
 Pages and sections

Add new pages and selections.
 Header and footer

Headers and footers which created under "Pages and sections" appears here.
 Communication
Create data sources, variables, and alarm variables.
 Database
Here you can create database connections, as well as display entire table contents from databases on the
interface.
 Translation texts
You can create translations for different languages here. Your project can thus be used by an international
team.
 Charts
The chart manager is used to manage various chart configurations, which then can be displayed inside a
chart control element.
 E-mail templates
In QuickHMI you have the possibility to send automatically generated e-mails by variable values change,
alarms are triggered, or communicating with controls.
 Scripting
Create and link JavaScript functions. With the innovative HTML5 manager, individual representations and
scripting can also be implemented in just a few steps. It is possible to integrate external HTML services. For
more information, please refer to the HTML / JavaScript documentation.
 Media
Imported images and audio files can be used for user-defined image control elements and variables. It’s
also possible to create your own SVG controls.
 Security
In this area you can create users into groups and assign rights.
45
 PlugIns
Add and remove extensions with the PlugIn Manager.
 Recipes
Create and select recipes with recipe management.
 Project settings
Overview and editing of project-specific settings.
46
3.10 Working with control elements

Control elements
Control elements are interactive elements in a graphic user interface, for

instance a button or a scroll bar. They are linked to functions in the
program which are executed as soon as the element is activated, for
instance, with a mouse click. A variety of control elements are available to
you. Depending on the control element, the applicable actions for all
elements, individual element-specific actions, and properties are also
available to you.
The default controls elements are sorted into different groups. If you know
the name of your desired element, you can enter it into the search
function. Your searched control element is immediately available to you
without a long searching.
47
 Buttons and Inputs

Variety types of buttons and input elements
 Charts
Variety types of charts
 Conveyor Systems
Conveyor technology elements
 Cutaways
Variety types of cutaways
 Displays
Variety types of displays
 Fluidics
Variety types of guidance symbols
 Graphic Symbol
Variety types of technical symbols
 Graphics
Variety types of graphic symbols
 HTML
Html Box
 Lamps
Variety types of lamps
 Motors
Variety types of motors
 Pictures
Image control elements
 Safety Signs
Variety types of warning and safety signs
 Sensors
Variety types of sensors
 SVG
Create your own SVG controls in QuickHMI
 Timer and Trigger

Variety types of timers and triggers
 Tanks
Variety types of tanks
 Valves
Variety types of valves
48
3.10.1 Using of the control elements
Use the control elements by pulling the selected element on to the Editor desktop via Drag&Drop. Here, the control
elements can be arranged, combined, assigned functions, and linked in any way you wish. Control elements can
also be selected, edited, deleted, or copied in this environment.
Group selections and distribution of elements into different layers are also possible.
How to do this, you see in the “Working in different layers” chapter.
Now you can assign the control elements properties, actions, and rules.
Pull the control element corners to

enlarge or reduce its size.
Adjust the display:
Zoom in, out or display the entire

display area.
49
3.10.1.1 Assignment of properties
To assign properties, actions, and rules to a control element, which you want to edit, it must be marked at the
editor workspace. (A Red border appears) To select all elements that are on the surface at the same time, select
the key combination CTRL + A.
You can specify the properties in the window "settings", now. By choosing the tab "settings" you can specify all
the characteristics that your control element will receive. According to the control elements, those may vary. Use
the search function.
In addition, you can determine the "PositionX" and "PositionY". So, the elements can be arranged exactly on the
editor desktop. "PositionX" and "PositionY" can also be addressed via rules and scripts.
Information:
Always name your control elements, to be able to assign actions

and commands later. For this click on the button "..." at the
column "Name".
Name the control element in the opening window "Edit name" as desired. Continue with "OK".
50
3.10.1.2 Move and rotate control elements
When a control element is selected, it can be moved with the mouse to a desired position.
However, if you want to position the control element more precisely, you can move it step-by-step with the arrow
keys.
You also have the option to rotate the control element.
To do this, you determine the "ElementRotationPoint" in the "Settings". This is the point from which the rotation
originates. Then you can rotate the element with the mouse wheel. If you use the mouse wheel without the shift
key, the element rotates 10 degrees per step. With pressed Shift key, it´s even more accurate with 1 degree per
step. Also, you can select the degree of rotation in the "ElementRotation" property. This is applied to the element.
Choose the
ElementRotationPoint.
Choose the rotation.
51
3.10.1.3 Rules
Assignment rules are used to link properties of controls with variables, properties etc.. For example, to display the
value of a string variable in a text field. Rules can be created for each property that has a gear icon.
Clicking on the gear icon for open the rule editor for the selected property.
The rule editor opens. Here, the property of the component with which the rule editor was opened is preselected
first ("Visible" in this case). To create a new rule, click on the plus icon in the toolbar.
52
You have the possibility to add a condition to the rule. The input field for the conditions is permanently visible in
the rule editor. To create a new condition, use the plus icon next to "Condition".
By clicking on the arrow next to the text box opens a list of all available objects that are available for
selection. These can be identified by the corresponding symbol. This applies to all text boxes. The selection
is made by clicking. A search function is also possible here by writing directly into the text box to search
for terms. So, all matching objects of the search are displayed.
Constant HTML
Variable Audio file
Property View
53
Depending on what was selected, the icon in front changes. In the example below the variable “System.hour” was
selected. With a click on the pipette symbol the selection can be made in the old input system, if this is desired. This
applies everywhere where the pipette symbol is displayed.
* Old input system
After defining the condition, another condition can be added from version Gazelle. This was not possible in previous
versions. For another condition, repeatedly use the plus icon next to "Condition". So, you can add as many
conditions as you like. With a click on the garbage can icon on the right, conditions can be deleted again.
In addition, you have the option to decide whether it is sufficient that at least ONE of the created conditions applies
or whether ALL conditions must apply. Use the "OR" and "AND" switches for this purpose. The use of the switch is
available from the second condition. Before it´s grayed out.
54
Within the conditions you can also add groups. More conditions can then be added to the groups. In the following
example this would mean: Either if the time is 10 OR (switch to "OR") if the group block applies. Within a group it
is possible to choose between "OR" and "AND" again and to interact with the same options. If the first switch would
be set to "AND", then the first condition AND the group block would have to be fulfilled with at least ONE of the
conditions contained therein.
This way complex conditions can be defined.
When all the entries have been made and the rule defined, click on the check-mark to create the rule.
Created rules can be edited or deleted via the toolbar. In addition, the order can
be changed. The order is important in that rule processing stops with the first
rule that either has no condition or whose condition applies. The rules are always
processed one after the other, in the order you have defined.
55
For properties that have been assigned a rule, the name of the property is written in bold and the gear icon is
highlighted in blue.
To negate values, use the exclamation mark button to the left of the value when creating a rule. When this button
is clicked, it is highlighted in blue and the value is negated.
56
If you want to output a value directly as text instead of as an element, it is enough to click on the element name.
The respective element symbol then changes to quotation marks. In the example below, a property becomes a text.
So, not the text that is in Button 2 is output, but the text “Page.Button2.Text” itself as a string. This would be useful
if two identifiers in the system have the same name and you don´t want to have the element itself, but the name
at this time.
57
3.10.1.4 Actions
Actions are used to react to certain events. If you have selected a control and switch to the “Actions” tab in the
“Properties”, you will see all the actions available for this control.
To create an action, click the “Actions” tab for the selected control. Then select a click event by clicking on the
lightning bolt icon.
For example, to assign an action to a control that is triggered when the mouse button is clicked, select "Clicked".
In the action editor that opens next, you act in the same way as in the rule editor. It is structured in the same way.
For details, please refer to the chapter "Rules".
However, there is one difference. For the functions “SET_VARIABLE” and “SET_PROPERTY”, you will see the
following icon next to the value selection:
Additional functions can be selected here. Clicking on this icon opens the “Value manipulation” window.
58
The drop-down menu is filled depending on the output value. If the output value is a Boolean, only logical operators
as AND, OR, XOR or NOT are available here.
If the value is not a Boolean, only mathematical functions such as ADD, SUB, MUL, DIV or MOD are available.
These additional functions have no effect on the original value, but only change the value that is written to the
target.
Another difference to the rules is that the processing of the actions is not aborted as soon as a condition of an
action is true. All actions are always executed.
The actions can also be assigned rights via the corresponding tab in the properties window.
How to add and manage rights, you see in the "Manage rights" chapter.
Actions added to a click event can be recognized by their bold name and lightning bolt icon.
59
3.10.1.4.1 Explanation of commands for actions
 CHANGE_LANGUAGE
This command changes the language of the HMI. In order to be able to use this, translation texts must be
created in advance for the desired language. The language can then be selected in drop down box below.
How to create translation texts, you will learn in the “Translation texts” chapter.
 CLOSE_DIALOG
This command closes a previously opened dialog, which can be selected in the drop-down boxes below.
 CLOSE_PROJECT
If this command is executed, the current project is closed.
 EXECUTE_DATABASE_QUERY
This command executes a database query.
To learn how to create database queries, see the “Database queries” chapter.
60
 LOGOUT
If this command is executed, the currently logged-in user is logged out.
 OPEN
This command can open a previously created view (using View Manager) or a dialog when the action is
triggered. These can be selected in the drop-down boxes below.
How to create views with the View Manager is shown in the "Adding views" chapter.
 PLAY_AUDIO
You can also include audio files in QuickHMI and play these during runtime. In the down box below, you
can choose between previously included audio files.
How to integrate audio files (but also image files) in QuickHMI, you can see in the "Integrating and using
media resources" chapter.
 SCRIPT
This command executes a previously defined JavaScript function as soon as the action is executed. In the
drop-down box below, you can select a previously defined function.
Everything about JavaScript and HTML can be found in the "JavaScript & HTML" chapter.
 SEND_MAIL
This command is used to have automatically generated mails sent.
All about automatically generated e-mails in QuickHMI, you will learn in the chapter “E-mail function”.
 SET_VARIABLE
This command assigns a new value to a variable. Which value is assigned to which variable, can be set in
the drop down boxes below.
61
 SET_POINTER
This command assigns a new target variable to a pointer. Which variable is assigned to which pointer, can
be set in the drop down boxes below.
 SET_PROPERTY
This command assigns a new value to a property of a component. Which value is assigned to which property
can be set in the drop down boxes below.
62
3.10.1.5 Drag&Drop Function
You can drag a created variable to the editor workspace by Drag&Drop. This is a new feature in QuickHMI and
allows you to work with variables more easily.
By dragging the variable to the editor workspace, automatically creates a textbox control element which is already
linked to the selected variable in the properties.
63
If you drag and drop with the right mouse button, several types of control elements are offered, which can be linked
to the variable. In this example, an LED has been selected as the control element.
Once a control element type is selected, it is the new standard for a Drag&Drop with the left mouse button. Until
this is changed again, a Drag&Drop of a variable is linked to an LED.
Drag & Drop
64
3.10.1.6 Align multiple control elements
In the QuickHMI Editor, you have the option of aligning several controls at the same time. To align controls, select
all the elements you want to align and use the arrangement buttons under "Edit" / “Arrangement”.
65
Via the arrangement buttons now you can align your controls either left-justified, right-justified or centered. Either
vertically or horizontally. In this example, the controls are vertically aligned with each other, so the top 3
arrangement buttons (for vertical alignment) are relevant.
Now align your controls as you like.
* left-justified * right-justified * centered
66
3.10.2 PlugIn Manager
With the QuickHMI PlugIn Manager, as well as having access to the elements already in the editor, you can add
additional control elements.
In the Project explorer, click on the “PlugIns”.
Now you can select the "Available" extensions by clicking. Selected extensions are marked in blue. Once you are
satisfied with the selection, select the green arrow for "add".
Click to “Add all” for select all extensions.
If you hold the mouse pointer over

an entry, the contained controls will
be displayed as preview image.
67
The selected extensions have been added and the control elements which contained in them are available. If you
want to remove selected control elements, select them in the "Installed" section and click the red arrow for
"remove".
By clicking on “Remove all” all extensions are removing.
Information:
It is recommended that you do not enable all extensions at once, which can significantly increase the load
times of the editor.
68
3.10.3 SVG controls
In addition to the large selection of integrated controls, you have the option to create your own controls too. After
this you can define properties and actions for the new controls. So, you are completely independent in your project
visualization.
In the following chapters you will learn everything about the creating your own control svg elements.
3.10.3.1 Basics about SVG´s
SVG (Scalable Vector Graphics) are special vector-based drawings that can be created even in a simple text editor
(with a little skill). But there are also some free or inexpensive tools, that make your job easier.
SVG's offers the advantage over "normal" pixel graphics, that they can be scaled to any size. So, you can zoom in as
far as you want in such a graphic, without it being pixelated. In addition, SVG´s offer the possibility to address and
edit individual parts of the graphic. (If these have been developed accordingly.)
Here's an example of what such an SVG can look like. Above, the source code of the SVG, and below the
representation, as you can expect in the editor, viewer or browser:
The picture shows the three parts (1 to 3) of the SVG in a color matching the highlighting in the source code above.
3
3
3
2 3
Coloring to explain the different parts within
the SVG.
1
69
All parts of the graphic that will later be controlled by properties are therefore contain as individual elements in the
SVG. This is important because otherwise, for example, the arm of the barrier wouldn´t rotate separately from the
rest of the graphic. Or the color of the arm couldn´t be changed separately to the color of the post.
For further explanation of the individual elements of an SVG graphic, you can visit the following external website:
* https://www.w3schools.com/graphics/svg_intro.asp
This basic knowledge is necessary if SVG´s are to be created without the help of an appropriate editor.
But even without this basic knowledge it is possible to easily create SVG´s. For example, with tools like “Boxy SVG”:
* https://boxy-svg.com/ ---> this is a cheap tool for developing SVG´s.
Document Type Definition
QuickHMI doesn´t support a DTD for XML. If you receive an error message related to DTD when saving / importing
an SVG, please remove the reference to the DTD document. (Usually at the beginning of the XML file)
For more information about DTD, visit the following external website:
* https://www.w3schools.com/xml/xml_dtd.asp
70
ViewBox
The ViewBox defines an internal coordinate system for the SVG. Without a defined ViewBox, all measurements
within the SVG are understood to be absolute pixels:
<svg style="height:100vh;width:100vw;">
<qhmi>

</qhmi>
<g>
<rect width="200" height="100" fill="#8AC5E1" />
</g>
</svg>
The red frame (300px x 300px) represents the total size of the SVG. As you can see in the picture, the rectangle
takes up only a part (200px x 100px) of the total size.
To get a rectangle that adapts to the size of the control element, a ViewBox must be defined to translate the
absolute size (300px x 300px) to an internal coordinate system.
In this example, 200 x 100 "units":
<svg style="height:100vh;width:100vw;" viewbox="0 0 200 100">

<qhmi>
</qhmi>
<g>
</g>
</svg>
71
In principle the red frame now has 2 sizes. On the outside it has the dimensions of 300px x 300px, which it takes
both in the editor, as well as at runtime. Inside, the frame for the SVG has a size of 200 x 100 units defined by the
ViewBox.
Now you would think that a rectangle of 200 x 100 units, completely fills a frame of 200 x 100 units. In the example
above, this is not the case.
Why? The ViewBox, in its default setting, tries to preserve the aspect ratio of the elements in it. If this behavior is
not desired, this can be changed by another attribute "preserveAspectRatio":
<svg style="height:100vh;width:100vw;" viewbox="0 0 200 100" preserveAspectRatio="none">

<qhmi>
</qhmi>
<g>
</g>
</svg>
72
These are the basics of ViewBox. For further understanding, you can learn more about this topic at the following
website:
* https://css-tricks.com/scale-svg/
* | We have no influence on the content of external websites
3.10.3.2 SVG´s in the QuickHMI Editor
Create easily your own custom controls with the QuickHMI Editor. How to do this you will learn in the following
chapters.
73
Create and delete SVG controls
To create a new SVG control, click on "SVG controls" in the Project explorer.
It opens the „SVG Control Manager“, which is like the HTML Manager. With the plus icon you have the option to
create a new SVG.
Then determine the name of your new SVG and continue with "OK".
74
An empty SVG is created for which properties, actions and contents can be defined via syntax. This happens in the
"SVG" area of the "SVG Control Manager". QuickHMI shows you which code lines are responsible for this.
How you define actions and properties you see in the “Add actions and properties” chapter.
75
The SVG can now be defined via syntax. All changes are applied in real time and are visible in the "Preview" area.
Here the control element is displayed as an image. The “Detected properties” section lists all the properties and
actions that you have defined for the SVG.
Information:
The following code line causes the element in the editor to adapt to the desired scaling range. Otherwise, it
may cause elements to be cropped graphically.
For more information, see the “ViewBox” sub chapter.
76
In addition, you can specify which section of the "SVG Control Manager" should be highlighted. Use the small frame
icon in the top corner of each section.
Highlight the "Preview" section Highlight the "SVG" section
77
To finally create the SVG control, click on the disk button in the toolbar of the SVG Control Manager. With the undo
button to the right, you can undo previously made entries and changes.
The created SVG control appears under "SVG" with the other controls. With these SVG controls you can interact
like all the other controls.
How to use SVG controls and standard controls, you see in the “Using the control elements” chapter.
To delete created SVG controls, click on the delete button or selected

the SVG and press the delete button. This disappears again from the
list of SVG controls.
78
Export and import SVG´s
To export a created control, simply click the export button within the toolbar. Then select the file path and export
the SVG. This will be exported under the same name as created in the "SVG Control Manager".
For example, the SVG can be opened in a browser.
To import an existing control, click on the import button. Then select your desired SVG and confirm. This will be
loaded into the "SVG Control Manager" and can be edited.
79
3.10.3.3 Add actions and properties
Actions and properties are defined directly in the SVG. There must be a qhmi element at any point within the SVG.
This element can contain several property or action elements that define individual properties and actions.
Here is an (incomplete) example of a SVG with one action and 2 properties:
<svg>
<qhmi>
<action … />
<proprety … >…</property>
<proprety … >…</property>
</qhmi>
// Here the rest of the SVG

</svg>
3.10.3.3.1 Syntax for actions
Like properties, actions are also defined directly in the SVG. For these to be interpreted correctly by QuickHMI, the
syntax explained here must be adhered to.
Syntax diagram for actions
This diagram illustrates the general syntax of all actions. Square brackets behind attributes/elements indicate how
often an element or attribute must occur. If no quantity is specified, the element/attribute must exist exactly once.
<action
name
elements
triggers >
80
Element: Action
An action element can be present any number of times in the qhmi element.
Here is an example of an action element:
<action name="OnPaletteClicked" elements="palette" triggers="click" />
This example action is listed in the editor named OnPaletteClicked and triggered when you click (click) on an
element with the class palette inside the SVG.
All actions have the same structure and differ only in the values of the three attributes name, triggers and
elements.
Action Attribute: Name
The name attribute determines under which name this action is displayed in the editor. The example of the action
from above would look like this in the editor:
Action Attribute: Elements
Specifies one or more elements within this SVG which trigger this action. The assignment is done via class names.
So, in this example Within the SVG, there must be at least one element with the class palette.
Several class names in the elements attribute must be separated by spaces.
Action Attribute: Triggers
Specifies one or more events (in example. “click“ or “mousedown”) that should trigger this action. JavaScript events
can be specified here with spaces separated. A list of JavaScript events, you can find within the following website:
* https://www.w3schools.com/jsref/dom_obj_event.asp
81
3.10.3.3.2 Syntax for properties
The property syntax is more extensive than the actions because of the wide variety of different property
requirements.
Syntax diagram for properties
This diagram illustrates the general syntax of all properties. Square brackets behind attributes or elements indicate
how often an element/attribute must occur. If no quantity is specified, the element/attribute must exist exactly
once.
<property
name
datatype
defaultvalue >
<target
type
element
selector
template >
<linearmap
inmin
inmax
outmin
outmax
precision />
<condition
eq
neq
gt
gte
lt
lte
output />
</target>
</property>
82
Element: Property
Like the action element, the property element can appear any often.
Here is an example of a property element:
<proprety name="BoomColor" datatype="Color" defaultvalue="#FF9523" >…</property>
So, defines a property called BoomColor. This has the data type Color, which ensures that in the editor a color picker
for this property is available. If no other value has been set, this property is # FF9523.
All properties have the same 3 mandatory attributes name, datatype and defaultvalue. The content of the
properties (shown above by ...) differs from property to property.
Property Attribute: Name
The attribute name identifies the property in the editor. The name is displayed in the lower right corner of the
“Properties” window:
Property Attribute: Datatype
The datatype attribute specifies the data type of the property.
Available data types can be found in the "Constants" chapter.
Property Attribute: Datavalue
The defaultvalue attribute specifies the default value of this property. This value initializes the control when it
loads for the first time.
83
Element: Target
The target element, which must occur at least once within a property, specifies a specific section of the SVG, which
should be changed with this property. If several parts of a SVG are to be changed, then simply several target
elements can be used in parallel.
Here is an example of a target element within a property element:
<target element="boombg" type="Attribute" selector="fill" />
This example describes that by changing this property (BoomColor) changes all elements with the class name
boombg. More precisely, the fill attribute is changed for all these elements.
Since neither a template, linearmap nor condition is defined for this target element, the input value is written
unchanged to the fill attribute.
For more information’s about template, linearmap and conditionnsee below.
Target Attribute: Element
The element attribute refers to one or more elements within this SVG. This reference works by class name. In the
above example, SVG must have an element with the class name boombg. Otherwise, the editor will issue an error
message.
Target Attribute: Type
The type attribute specifies what is to be changed within the per element attribute selected element. There are 3
possible values for this attribute:
 Attribute
 Style
 Content
So, it can be controlled whether with this target a certain attribute, a certain style or the content of the element
should be changed. In the chase that an attribute or style is to be changed, a third attribute (the selector attribute)
must be specified which determines the specific attribute or style.
Target Attribute: Selector
The selector attribute is only used if as type selected is either Attribute or Style. In these cases it is still necessary
to define which attribute or which style should be changed.
84
Target Attribute: Template
The template attribute can be used to further edit the value before it is written to an attribute, style, or content.
In the example above, this attribute is not used because the value should be given unchanged to the attribute.
Here is an example with this attribute:
<target element="boom" type="Attribute" selector="transform"

template="rotate{value} 25,60)" />
The expression {value} is a placeholder, which is replaced with the received value. So, in the example above, the
value 90 in the above example will rotate (90 25,60). This corresponds to a rotation of 90 ° about the point 25.60.
Element: Linearmap
The linearmap element is used to linearly translate a value from one scale to another.
As an explanation here's an example, the slightly more complex property Level of our example SVG control RGB,
which you can find in the "Examples" chapter of this documentation:
<linearmap
inmin="0"
inmax="100"
outmin="300"
outmax="-400"
precision="0" />
The input value here is expected to be 0 to 100. This value should be translated linearly to an output value in the
range of 300 to -400. An input value of 0 results in an output value of 300 and an input value of 100 results in an
output value of -400.
Information:
A linearmap is executed before evaluating any potentially existing condition elements.
85
Linearmap Attribute: Inmin
Lower limit of the input value.
Linearmap Attribute: Inmax
Upper limit of the input value.
Linearmap Attribute: Outmin
Lower limit of the output value.
Linearmap Attribute: Outmax
Upper limit of the output value.
Linearmap Attribute: Precision
Specifies the number of decimal places to which the result of the translation is rounded. This attribute is optional.
If omitted, the result will not be rounded.
Element: Condition
condition elements are used to write a specific value (usually deviating from the input value) to the target
depending on the input value.
Here is an example of a condition element:
<condition eq="True" output="rgb(246, 0, 0)" />
This condition causes the value rgb(246, 0, 0) to be written to the target if the input value is True instead of the
input value.
However, this would mean that nothing is done when an input value of False because the condition eq="True" is
not fulfilled. For this case, there is the possibility of hanging any number of condition elements together:

<condition eq="False" output="rgb(170, 170, 170)" />
86
So, the problem would be solved and all possible input values for this property (These are only True and False since
this is a property of the Boolean type) are covered. However, the following example would have the same result:

<condition output="rgb(170, 170, 170)" />
Because a condition element doesn´t need a single consumption operator. In that case, this condition acts as an
else case and defines the value that is written if no previously tested condition was met.
Another possible but in this case illogical syntax is:

<condition />
A condition element without any attribute also serves as an else case. Since no output is defined here, the input
value remains unchanged.
All conditions are processed from top to bottom. Once a condition is met, the following conditions will not be
checked.
Thus, this example would result in always writing rgb(170, 170, 170). Even if the input value is True:
<condition output="rgb(170, 170, 170)" />

Information:
All condition elements are only checked after applying a possibly existing linearmap.
87
Condition Attribute: Comparison operators
There are 6 attributes for the condition element that are used to check the input value.
 eq (=)
 neq (!=)
 lt (<)
 lte (<=)
 gt (>)
 gte (>=)
Since several of these attributes can be used at the same time, contradictions can occur. Such contradictions are
not displayed as errors but cause this condition to never be executed.
If no comparison operator is specified, this condition is always met.
Condition Attribute: Output
Defines which value should be written when the condition applies. If no output is specified, the input value is
adopted unchanged.
3.10.3.4 Constants
This chapter provides an overview of the types of constants.
Constants: Data types
A list of data types available for properties:
 String
 Boolean
 Color
 Single
 Double
 Int8
 Int16
 Int32
 Int64
88
Constants: Target types
A list of target types available for properties:
 Attribute
Changes the value of an attribute of the element.
 Style
Changes the value of the style of the element.
 Content
Changes the content of the element.
Constants: Comparison operators
A list of comparison operators for conditions available for properties:
 eq
=
 neq
!=
 lt
<
 lte
<=
 gt
>
 gte
>=
89
3.10.3.5 Using of classes and ID´s
If you use classes or ID´s, either to specify styles or to link to other parts of the SVG within the SVG, problems can
occur if an SVG control is used multiple times in the project.
The problem arises because the SVG content is loaded multiple times in the browser/viewer when using multiple
controls, resulting in multiple definitions of the same class or ID.
To prevent this, you can add the prefix _elementid_ to class and ID names. This prefix is automatically replaced at
runtime by the unique ID of each control. This results in unique classes and ID names for each individual control.
Here is an excerpt from a syntax as an example:
<g>
<defs>
<radialGradient id="_elementid_c1" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stop-color="#F7F7F7"></stop>
<stop offset=".5" stop-color="#C0C0C0"></stop>
<stop offset="1" stop-color="#898989"></stop>
</radialGradient>
<linearGradient id="_elementid_c2" x1="0" y1="0.5" x2="1.2" y2="0.6">
<stop offset="0" stop-color="#F7F7F7"></stop>
<stop offset=".5" stop-color="#C0C0C0"></stop>
<stop offset="1" stop-color="#898989"></stop>
</linearGradient>
<linearGradient id="_elementid_c3" x1="0" y1="0.5" x2="1.2" y2="0.6">
<stop offset="0" stop-color="#FF0000"></stop>
<stop offset=".3" stop-color="#F2F2F2"></stop>
<stop offset=".4" stop-color="#FFFFFF"></stop>
</linearGradient>
</defs>
90
3.10.3.6 Example 1: Barrier
Properties Actions
Color
None
Set the color of the barrier.
Open
Sets whether the barrier is open or closed.
Barrier code:
To see the code, klick on "Barrier" in the "SVGControlManager".
91
3.10.3.7 Example 2: Rack feeder
Properties Actions
AccentColor OnPaletteClicked
Sets the color of various SVG elements. Triggered when the palette is clicked.
RBGName
Sets the name of the RBG that will be displayed above
the graphic.
VerticalMovement
Sets the vertical speed. Depending on the value (less
than 0, 0, greater than 0), the color of the motor and
the direction of an arrow are adjusted.
HasPalette
Sets if a palette is on the RBG.
PaletteStuck
Sets if the palette is wedged. This condition is
represented by a red frame and a rotation of the
palette.
Level
Sets the height of the slide. To do this, translate a
percentage value to another value space to position
the carriage and cables in the graphic
92
Rack feeder code:
To see the code, klick on "Rack feeder" in the "SVGControlManager".
93
3.11 Working in different layers

The option of working on different layers is intended to make keeping an overview easier. This is especially practical
for large projects.
In this example, a switch and an LED have been added to the page. These control elements appear in the “Layers”
section.
Click the right mouse button in the "Layers" section. So, you can create a new folder.
Then, name the folder you want to create and continue with “OK”.
94
The new folder "Project 1" has been added successfully.
Now 2 more control elements and a new folder "Project 2" have been added.
95
Now you have the option to move the control elements to desired folders. You can do this via drag & drop. In this
example, "BreakerButton1" and "LEDTop1" were moved to the "Project 1" folder and "BreakerButton2" and
"LEDTop2" were moved to the "Project 2" folder.
Now you can hide individual items as well as the complete contents of folders. This is done via the eye icon next to
the elements and folders. You can activate or deactivate it. You can also access these functions via the right mouse
button by right-clicking on an item or folder.
In this example the folder "Project 2" has been hidden and with it all control elements contained within it as well
as individually the element "BreakerButton1".
96
3.12 Communication
This chapter discusses the communication between and between database connections, data sources, and
variables. All of these can be set up, edited, or deleted.
International users can also create and manage translation texts here.
In the following chapters, you will learn all about communication between database connections, data sources,
and variables.
3.12.1 Creating database connections
A variety of types of database connections can be set up here. For instance, Oracle and MSSQL databases. Data-
base connections that have been set up can be modified or deleted at any time.
To create a database connection, click "Connections" under "Database" in the Project explorer.
Click on the “Add database connection” button.
Name the data source. Depending on the database type, select the correct JDBC string.
An overview of JDBC strings can be found in the “JDBC Strings” chapter.
97
Also listed are the installed JDBC drivers whose folders you can view with "Open driver directory".
Continue with “Add”.
Free SQL databases integration
Other new feature in QuickHMI is the possibility to integrate JDBC-driver for SQL Databases.
98
3.12.1.1 JDBC Strings
QuickHMI contains the following JDBC drivers whose strings must be configured as follows:
 MariaDB (MySQL)
jdbc:mariadb://<host>:<port>/DB?user=<MyUser>&password=<MyPassword>
 Oracle
jdbc:oracle:thin:<MyUser>/<MyPassword>@<host>:<port>:< MyService>
 SQL Server
jdbc:sqlserver://<host>:<port>;databaseName=<MyDBName>;user=<MyUser>;password=<MyPassword>
 Firebird
jdbc:firebirdsql:<host>/<port>:<PfadInklusiveDatenbankName>?encoding=UTF8&userName=<MyUser>&pass-
word=<MyPassword
 PostgresSQL
jdbc:postgresql://<host>/test?user=<MyUser>&password=<MyPassword>&ssl=true
 Sqlite
jdbc:sqlite:<PfadInklusiveDatenbankName>
Information:
If you create a new database connection in the QuickHMI Editor, you can open the driver directory to access
the JDBC drivers are installed in QuickHMI.
99
Here you can also copy your own JDBC drivers.
3.12.2 Creating data sources
You can create various data sources in QuickHMI. The following data source types are available for selection:
 S7
 OPC UA
 TWINCAT *1)
 MODBUS Master / MODBUS Slave
 KNX
 DataBase
 Filesystem
 MQTT
 Allen-Bradley
*1) TWINCAT data sources are not executable under Linux. If these are to be executable under Linux, the use of OPC UA data
sources is recommended.
To add data sources, click in the Project explorer in the Communication section on “Data sources”.
How to create different types of data sources, you will learn in the following chapters.
100
3.12.2.1 Creating S7 data sources
After selecting “Data sources” in the Project explorer, click on the button for "Add data source" button for creating
the S7 data source.
The data source input mask opens, in which you can select the S7 data source as "Type" as a first step. However, if
you first assign a name to the data source and if this contains the word "s7", then "S7_Compatible" is already
preselected as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the S7 data source.
Information:
If the window opens, the S7 data source is selected by default as "Type".
101
Now you have the following settings options, for creating the data source:
General for all data source types:
 Active
Via checkbox you can activate or deactivate the data source. Deactivating a data source is useful to avoid
that data sources that are not accessible constantly try to reconnect, cause error messages and thus
unnecessarily fill up the log. All controls that then want to use this data source will get a one-time message
that the data source is disabled. During the startup process (loading window), a corresponding icon shows
the deactivations of the data source. By default, the data source is always activated.
 Name
Name the data source.
 Type
You have the possibility to create different data sources in QuickHMI.
 Simulation
If you do not have access to the data source, you have the option of having it simulated. To do this, select
the "True" property under "Simulation". In this case, when starting the runtime, you will be able to
manually fill the variables you created later with values to check the correctness of your functionalities.
(Created data sources can also be released for simulation by activating them in the simulation
configurations for runtime mode.)
 Text encoding
Here you can select the text encoding selected in the S7. This is set to "Western European (Windows)" by
default and therefore does not need to be customized.
 Update interval (ms)

The update interval indicates the interval at which you receive variable changes from the data source in the
visualization.
102
S7 Specific:
 Model
Select which S7 model you want to connect to.
 Connection type
Here you can decide between the connection type "TCP" and "MPI". Whether both or only one of the
connection types is available depends on the selected "model".
 Connection details
 Here you assign the connection information that is relevant for the desired S7.
 Enter the "IP address", "Rack" and "Slot".
 The default value for „Rack“ is „0“.
 The default value for „Slot“ is „0“
 Read timeout
The "Read timeout", which can also be set, always involves milliseconds. By default, this stands on 200
milliseconds. After this time, the read attempt would be aborted if the variable could not be read within
these 200 milliseconds. A to slow controller responses, connection errors to the controller, or non-existence
of the variable, may be grounds for a read abort. The "Read timeout" thus indicates, how long the variable
is searched until the read attempt is aborted.
Information:
200 milliseconds until the "Read timeout" is a recommended value. Only if you know that more is
needed, we recommend changing the value.
 Read optimization
Here you can choose between different optimization methods:
 NONE
No read optimization, all requests are not written one after the other, stable but slow. Only
recommended for troubleshooting.
 CROSS_AREAS
Read requests are merged across areas. Advantage: Fragmented areas (e.g., data across multiple
data blocks) can be read and written simultaneously.
 COMBINE_AREAS
Read requests from identical areas are combined. Advantage: Fast and high-performance access to
data of the same areas (for example, data in the same data block).
 AUTO
Selects the best optimization method. Only the minimum required PLC read access are carried out.
103
After entering the information relevant for the connection, click on "Add". And after editing an already created
data source, click on "Save".
The S7 data source is created and subsequently displayed in the data source overview.
104
Created data sources can be edited or deleted. You do this via the corresponding buttons. You also have the option
of viewing all internal data sources. This works by activating the checkbox "Show internal data sources".
Below you can create variables for the S7 data source.
You can find out how to add variables for the S7 data source in the “Adding S7 variables” chapter.
3.12.2.1.1 Specials of Logo! Controllers
This chapter is intended to provide you with information about the functionalities provided to connect to a Logo!
0BA7 or 0BA8 controller. This is not a complete documentation, but a guide to help you getting started.
All information is supplied without any liability. All rights reserved and subject to change. The contents of this
document are protected under international copyright laws. Without prior written consent from the copyright
holder, no part of this documentation may be reproduced by means of photocopying, microfilm or other processes,
or transcribed or translated into another language or computer language in any form.
Information:
All product names or other names or brands referred to in this documentation are the trademarks or
registered trademarks of their respective owners and are the property of those copyright owners. There is
no connection between any of the mentioned trademarks or trademark owner and the Fa. Indi.An Systems
GmbH. Any mention of brands serves purely as an indication to the intended purpose.
105
Prepare Logo! Controller for access via TCP/IP
With QuickHMI it’s possible to access input, output, and flags as well as accessible data blocks. The access of Logo!
controllers is deactivated by default. You need to perform the following steps to allow the access.
1. Choose Extras -> Ethernet connection and create a new connection by right clicking:
106
2. Setup the connection as follows:
3. Save your settings and load them to your PLC.
Information:
When using a Logo! 0BA7 you can only establish one connection at a time.
107
Logo! 0BA8 connection timeout
When using a Logo! 0BA8 please note that the controller will close the connection after 10 seconds if no data was
requested from the PLC. The countdown resets after each request. We recommend to not open the connection
manually, but letting the driver manage the connection via auto-connect.
Logo! controller memory organization
The memory organization of Logo! controllers is significantly different to that of other Siemens controllers. The
main difference is that all variable ranges are within the VM memory. The VM memory can be accessed with
QuickHMI via DB1.
Memory ranges of a Logo! 0BA7 controller
The following table shows the memory ranges of a Logo! 0BA7 controller. VM memory can be accessed with
QuickHMI by reading or writing to data block 1 (DB1). Furthermore, you can access memory ranges directly via the
QuickHMI library and data types.
Logo! Range Block type From VM adress To VM adress Data type
DI Digital Input Byte 923.0 Byte 927.7 Bit

AI Analog Input Byte 926 Byte 940 Word
Q Digital Output Byte 942.0 Byte 943.7 Bit
AQ Analog Output Byte 944 Byte 946 Word
M Digital Flag Byte 948.0 Byte 951.2 Bit
AM Analog Flag Byte 952 Byte 982 Word
108
Memory ranges of a Logo! 0BA8 controller
The following table shows the memory ranges of a Logo! 0BA8 controller. In contrast to the Logo! 0BA7 controller
memory ranges have been expanded.
VM memory can be accessed with QuickHMI by reading or writing to data block 1 (DB1). Furthermore, you can
access memory ranges directly via the QuickHMI library and data types.
Logo! Range Block type From VM adress To VM adress Data type
DI Digital Input Byte 1024.0 Byte 1031.7 Bit

AI Analog Input Byte 1032 Byte 1063 Word
Q Digital Output Byte 1064.0 Byte 1071.7 Bit
AQ Analog Output Byte 1072 Byte 1103 Word
M Digital Flag Byte 1104.0 Byte 1117.7 Bit
AM Analog Flag Byte 1118 Byte 1245 Word
NI Digital Network input Byte 1246.0 Byte 1261.7 Bit
NAI Analog Network input Byte 1262 Byte 1389 Word
NQ Digital Network output Byte 1390.0 Byte 1405.7 Bit
NAQ Analog Network output Byte 1406 Byte 1469 Word
3.12.2.1.2 Specials of 1200er/1500er Controller
Set up the 1200/1500 controller for TCP/IP access
With PLCcom it’s possible to access input, output, and flags as well as accessible data blocks. The access of S7-1200
and S7-1500 controller is deactivated by default. You need to perform the following steps to allow the access.
1. Allow general access. To do so, activate the option “Connection mechanism - Allow access PUT/GET
communication from remote partner” in the protection settings.
2. Enable access to you DBs. For this you have to deactivate the “optimized access” in the DB properties.
3. Load changes to PLC and you are done!
109
3.12.2.2 Creating OPC data sources
the OPC data source.
The data source input mask opens, in which you can select the OPC data source as "Type" as a first step. However,
if you first assign a name to the data source and if this contains the word "opc", then "OPC" is already preselected
as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the OPC data source.
110
 Active
 Name
 Type
 Simulation
manually fill the variables you created later with values in order to check the correctness of your
functionalities. (Created data sources can also be released for simulation by activating them in the
simulation configurations for runtime mode.)

visualization.
111
OPC Specific:
 Connection type
Here OPC "UA" is preselected.
 Discovery URL
The Discovery URL connects you to the server and provides information about which destination addresses
are available with which settings.
 Endpoint URL
The endpoint URL describes the server network address.
 Security mode
Various security modes for communication with the server.
You can choose between "None", "Sign" and "Sign & Encrypt".
 Authentication
This regulates the possibilities of authentication.
You can choose between "Anonymous", "UserName" and "Certificate".
3.12.2.2.1 Creating OPC UA data sources
If the "Connection type" "UA" is selected, the server address can be entered under "Discovery URL". The same will
automatically appear under "Endpoint URL". If you then click on the parenthesis icon, you will see in a separate
window all the endpoints provided by the server with the different security levels.
112
If you select a security level, either via the "Select" button or double-click, the security mode in the main screen
automatically changes to "Sign". Now, under the "Authentication" "UserName", a username can be entered, as
well as a password.
If the authentication "Certificate" is selected, the user will use a certificate to log in. The same applies to the
"SignAndEncrypt" security mode, in which it is also possible to select whether anonym, with user name, or via
certificate is logged on.
113
The OPC UA data source is created and subsequently displayed in the data source overview.
Below you can create variables for the OPC UA data source.
You can find out how to add variables for the OPC UA data source in the “Adding OPC UA variables” chapter.
A more detailed explanation of the individual security modes can be found in the “Explanation of the security
modes of the OPC data sources” chapter.
114
3.12.2.2.2 Explanation of the security modes of the OPC data sources
The main screen provides 3 different security modes for communicating with the server.
Security mode „None“:

 Possibility of "Authentication" as anonymous or with username and password.
(Depending on the configuration of the OPC UA server)
 Connection to the server, without encryption of the transmission.

(Username and password are transmitted unencrypted)
Security mode „Sign“:

 Possibility of "Authentication" as anonymous or with username, password, or certificate.
 Data is transmitted in plain text but signed.
Security mode „SignAndEycrypt“:

 Possibility of "Authentication" as anonymous or with username, password, or certificate.
 Data is signed and transmitted encrypted.
115
3.12.2.3 Creating TWINCAT data sources
the TWINCAT data source.
The data source input mask opens, in which you can select the TWINCAT data source as "Type" as a first step.
However, if you first assign a name to the data source and if this contains the word "twin", then "TWINCAT" is
already preselected as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the TWINCAT data source.
116
 Active
 Name
 Type
 Simulation

visualization.
TWINCAT Specific:
 Connection type:
Here you can choose between "TWINCAT2" and "TWINCAT3". This is only differentiated by the "Port" to
be used. (TWINCAT2 = Port 801 / TWINCAT3 = Port 851)
 AMS address:
The AMS address is usually the address of the server or the address of the TWINCAT device.
 Port:
The port depends on the "Connection type".
117
The TWINCAT data source is created and subsequently displayed in the data source overview.
Below you can create variables for the TWINCAT data source.
You can find out how to add variables for the TWINCAT data source in the “Adding TWINCAT variables” chapter.
118
3.12.2.4 Creating MODBUS data sources
the MODBUS data source.
The data source input mask opens, in which you can select the MODBUS data source as "Type" as a first step.
However, if you first assign a name to the data source and if this contains the word "modbus", then "MODBUS" is
After this, the data source-specific settings adapt automatically to the MODBUS data source.
119
 Active
 Name
 Type
 Simulation
 Text encoding

visualization.
MODBUS Specific:
 Role:
From the MODBUS data source there are 2 variations. The MODBUS Master and the MODBUS Slave. The
master is the client, and the slave is the server. The master gives commands to the slave.
120
3.12.2.4.1 Creating MODBUS Master data sources
MODBUS Master Specific:
 Connection type
 TCP
Connection via a network in direct communication.
 RTU
Runs through a Com port and the data is transmitted in RTU format.
All settings must be taken from the counterpart specifications here.
 RTU over TCP

Runs through TCPIP and the data is transmitted in RTU format.
 ASCII
Runs on a Com port and the data is transmitted in Ascii format.
 UDP
Network connection without guarantee that it will receive.
Here, both the IP address to the server (slave) are specified, as well as the port of the slave.
 Advanced settings
 Address offset
The entered value is added here as an offset to the base address.
 Byte order
Also stored in the slave and ensures data exchange. Here you can set the order in which the bytes
are transmitted. Either in the normal order (AB_CD_BigEndian), or backwards
(DC_BA_LittleEndian).
 Slave ID
Enter the slave ID set at the slave.
 Registermode
Sets the register size set on the slave.
121
 Merge data sources

The ability to aggregate data sources is essential for RTU and ASCII when multiple devices are on
the same bus. Otherwise, there is no way to use multiple data sources from the same bus.
Therefore, we recommend that you do not change this setting.
 PDU Limitation
The MODBUS Master data source is created and subsequently displayed in the data source overview.
Below you can create variables for the MODBUS Master data source.
You can find out how to add variables for the MODBUS Master data source in the “Adding MODBUS Master
122
3.12.2.4.2 Creating MODBUS Slave data sources
MODBUS Slave Specific:
 Connection type
 TCPIP
Connection via a network in direct communication.
 RTU
Runs through a Com port and the data is transmitted in RTU format.
 RTU over TCP

Runs through TCPIP and the data is transmitted in RTU format.
 ASCII
Runs on a Com port and the data is transmitted in Ascii format.
 UDP
Network connection without guarantee that it will receive.
 Port
502 is the default port here.
 Address offset
The entered value is added here as an offset to the base address.
 Byte order
Also stored in the slave and ensures data exchange. Here you can set the order in which the bytes
are transmitted. Either in the normal order (AB_CD_BigEndian), or backwards
(DC_BA_LittleEndian).
 Slave ID
Enter the slave ID set at the slave.
 Registermode
 Merge data sources

The ability to aggregate data sources is essential for RTU and ASCII when multiple devices are on
the same bus. Otherwise, there is no way to use multiple data sources from the same bus.
Therefore, we recommend that you do not change this setting.
123
The offset within an array or data structure object is an integer indicating the distance (displacement) between the
beginning of the object and a given element or point, presumably within the same object.
124
The MODBUS Slave data source is created and subsequently displayed in the data source overview.
Below you can create variables for the MODBUS Slave data source.
You can find out how to add variables for the MODBUS Slave data source in the “Adding MODBUS Slave
125
3.12.2.4.3 Merging MODBUS data sources
This option allows the merging of multiple data sources into one on server side.
This is most important for RTU and ASCII MODBUS data sources which are accessed via the same COM-Port but
with different Slave-IDs. Since every COM-Port can only be opened once, those data source have to be merged into
a single data source. This merging has no effect on the functionality of those data source. They will operate like
they are single entities.
The option „Merge datasources“ is only available for TCP/IP and UDP data source. That is because only for those
data sources this procedure is optional. This options effects all TCP/IP and UDP data sources in the project that have
the exact same settings except for the Slave-ID.
With this option enabled all data sources with identical options (except for the Slave-ID) will be merged to a single
entity. This way only one connection is established to the data source. If the option is disabled, all data sources will
establish their own connection.
126
3.12.2.5 Creating KNX data sources
the KNX data source.
The data source input mask opens, in which you can select the KNX data source as "Type" as a first step. However,
if you first assign a name to the data source and if this contains the word "knx", then "KNX" is already preselected
as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the KNX data source.
127
 Active
 Name
 Type
 Simulation

visualization.
KNX Specific
 IP adresse:
Here, the IP address is entered from the starting point of the bus.
 Port:
Here the port to be used is specified.
128
The KNX data source is created and subsequently displayed in the data source overview.
Below you can create variables for the KNX data source.
You can find out how to add variables for the KNX data source in the “Adding KNX variables” chapter.
129
3.12.2.6 Creating DataBase data sources
Before you can create a DataBase data source, you must first create a DataBase connection. You can find out how
to create DataBase connections in the "Creating DataBase connections" chapter.
the DataBase data source.
The data source input mask opens, in which you can select the DataBase data source as "Type" as a first step.
However, if you first assign a name to the data source and if this contains the word " DataBase ", then " DataBase
" is already preselected as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the DataBase data source.
130
 Active
 Name
 Type
 Simulation

visualization.
DataBase Specific:
 Connection
Select the previously created DataBase connection here.
131
The DataBase data source is created and subsequently displayed in the data source overview.
Below you can create variables for the DataBase data source.
You can find out how to add variables for the DataBase data source in the “Adding DataBase variables” chapter.
You can find out how to perform external logging for the DataBase data source in the “External logging in the
dataBase” chapter.
132
3.12.2.6.1 What is the intended purpose for the database data source?
You can storage external data to a database table and the QuickHMI system will use this data for visualization.
For example:
You want to show statistic company data on your QuickHMI visualization. You just need the database table
“QHMI_VARIABLES” and update rights on this database table. Transfer your data to this table and connect the data
to your QuickHMI project.
3.12.2.6.2 What are the requirements for the database data source?
To use the QuickHMI database data source you have to have an existing and administered database and a
corresponding JDBC driver.
The database has to be accessible by the QuickHMI processes. The connection must not interrupt by a firewall or
likewise things. The network connection between QuickHMI and database should use the speed of 100Mbit/s.
Information:
QuickHMI do not provide database servers or database licenses. It only gives access possibilities to existing
databases. Requisite database licenses and access licenses must be given by the customer.
3.12.2.6.3 How to setup the database?
Before you can use the QuickHMI database data source you have to create a database object.
The following database objects have to be created:
 Table QHMI_VARIABLES
 Column NAME VARCHAR(200)
 Column VAR_VALUE VARCHAR(250)
The connection created in QuickHMI project needs update rights. Are these rights missing data source malfunctions
are possible.
133
Settings
In the Project explorer, click on “Database connection” in the “Communication” section, to create a new database
connection.
How to create a new database connection is described in the "Creating database connections" chapter.
Insert your data into the table QHMI_VARIABLES.
Example:
134
Create a matching data source by clicking on "Data source" in the Project explorer.
You can find out how to create a new data source in the "Creating data sources" section.
Now, you can create variables which equals your data.
Example:
You can relate the variables with control elements on your project and the data will be shown or written.
135
3.12.2.7 Creating File system data sources
the File system data source.
The data source input mask opens, in which you can select the File system data source as "Type" as a first step.
However, if you first assign a name to the data source and if this contains the word "file", then "Filesystem" is
After this, the data source-specific settings adapt automatically to the File system data source.
136
 Active
 Name
 Type
 Simulation
 Text encoding

visualization.
Filesystem Specific:
 File
Select here via "..." button, an existing file.
 Separator
Here you can enter with which separator the contents of the file should be separated. (Also * VariableName
* * Separator * * Value of the variable *) This is freely selectable. The standard separator is the semicolon.
137
The File system data source is created and subsequently displayed in the data source overview.
138
Below you can create variables for the File system data source.
You can find out how to add variables for the File system data source in the “Adding File system variables”
chapter.
You can find out how to perform external logging for the File system data source in the “External logging in the
file system” chapter.
Information:
Note that the path to the selected file must be the same on the server. There are no data types in a .csv file
or in your file system data source --> It is always a string. For example, if you create a Boolean, all you need
to know is that it should be a Boolean.
139
3.12.2.7.1 What is the intended purpose for the file system data source?
The .csv-file can be filled and updated by external applications. QuickHMI will then use the variables to display the
desired output in your visualization.
This obviously is one of the simplest forms of a data source. It can be created and used without and additional tools.
Furthermore, there are a lot of tools which are able to export data as .csv-files. These files, if formatted correctly,
can then be used to feed your visualization with data.
3.12.2.7.2 What are the requirements for the file system data source?
In principle every operating system can fulfill the requirements to run a filesystem data source. All you need is a
.csv file in a location on that the QuickHMI Server (Part of the QuickHMI Standalone Runtime) can access.
3.12.2.7.3 How to setup the database?
You have 2 options:
1. Use an already existing .csv-file
2. Let QuickHMI generate one
In the first case, you must make sure that the file is formatted accordingly. QuickHMI expects variable names and
values in a specific format. One variable is expected per line. Name and value must be separated according to the
data source settings (see Making settings).
140
Settings
In the Project explorer, click on “Data sources” in the Communication section.
In the opening window “Create or edit data source”, you can determine the following things:
1 Specify whether the data source should be active or inactive.
2 Choose a name for the data source.

(This name must be unique among other data sources.)
3 Choose “Filesystem” as the data source type.
4 Select a save path for the csv file.

(Please note that the path on the server must be present / reachable.)
5 Select a separator which separated the variable name from its value within the file.
1
2
3
4
5
141
3.12.2.8 Creating MQTT data sources
the MQTT data source.
The data source input mask opens, in which you can select the MQTT data source as "Type" as a first step. However,
if you first assign a name to the data source and if this contains the word "mqtt", then "MQTT" is already
preselected as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the MQTT data source.
142
 Active
 Name
 Type
 Simulation
 Text encoding

visualization.
143
MQTT Specific:
 Host
Enter here the host (broker) to be used with the corresponding port.
 User name
Enter your username
 Password
Enter your desired password.
 Persistent Session
Here you can activate the persistent session with the checkbox. You can also activate the "Persistent
Session". When using a persistent session, an identifier is exchanged between the QuickHMI Server and
the MQTT broker. This identifier is used to recognize the QuickHMI Server from the MQTT broker if you
temporarily shut down the QuickHMI Server or if a connection is lost. When reconnecting to the broker,
any variable changes that have been missed in the meantime are transferred.
144
The MQTT data source is created and subsequently displayed in the data source overview.
Below you can create variables for the MQTT data source.
You can find out how to add variables for the MQTT data source in the “Adding MQTT variables” chapter.
145
3.12.2.9 Creating Allen-Bradley data sources
the Allen-Bradley data source.
The data source input mask opens, in which you can select the Allen-Bradley data source as "Type" as a first step.
However, if you first assign a name to the data source and if this contains the word "allen", then "Allen-Bradley" is
After this, the data source-specific settings adapt automatically to the Allen-Bradley data source.
146
 Active
 Name
 Type
 Simulation

visualization.
Allen-Bradley Specific:
 IP adress
Enter the desired destination IP address.
 Slot
Enter the slot of the data source.
147
The Allen-Bradley data source is created and subsequently displayed in the data source overview.
Below you can create variables for the Allen-Bradley data source.
You can find out how to add variables for the Allen-Bradley data source in the “Adding Allen-Bradley variables”
chapter.
148
3.12.2.10 Creating Webservice data sources
the Webservice data source.
The data source input mask opens, in which you can select the Webservice data source as "Type" as a first step.
However, if you first assign a name to the data source and if this contains the word "webservice", then
"Webservice" is already preselected as the data source type. (This works with all data source types)
After this, the data source-specific settings adapt automatically to the Webservice data source.
149
 Active
 Name
 Type
 Simulation

visualization.
150
Webservice Specific:
The Webservice data source is used to exchange information with a web service. Data must be transferred in
“JSON”, “XML” or “URLEncoded” format.
- READ -
 Request Method
Some web services expect certain request methods for reading data. Here you determine the request
method for reading the data source. The request methods “GET”, and “POST” are available here.
 URL
The URL that will be called to read data from the web service.
The use of placeholders (see below) is allowed.
 Parameters
Additional parameters to be transferred to the web service together with the read request. Supported
formats here are also “JSON “, “XML”, and “URLEncoded”. The use of placeholders (see below) is allowed.
To enlarge the input field and thus write better, use the glass icon next to the text field.
- WRITE -
 Request Method
Some web services expect certain request methods for writing data. Here you determine the request
method for writing the data source. The request methods “GET”, “POST” and “PUT” are available here.
 URL
The URL that will be called to send data to the web service (write variables). If no different write URL is
specified, the read URL will also be used for writing. The use of placeholders (see below) is allowed.
If there are problems processing the data in the web service, this can be communicated to the QuickHMI
system so that it can display a corresponding error message. For this, the server's response is expected in
a certain format. Response examples in the 3 supported formats can be found below. As soon as the
transmitted Quality deviates from “GOOD”, an error message with corresponding message is displayed in
QuickHMI.
151
Example for „URLEncoded”: quality=XXXXXXXX&message=XXXXXX
Example for „JSON”: {

"quality": "XXXXXXX",
"message": "XXXXXX"
}
Example for „XML“: <response>

<quality>XXXXXX</quality>
<message>XXXXXX</message>
</response>
 Parameters
Parameters that are sent to the web service together with a write request. By using placeholders (see
below) the variable to be written as well as the value to be written can be passed.
Examples of possible parameters for each format can be found below.
To enlarge the input field and thus write better, use the glass icon next to the text field.
Example for “URLEncoded”: path=@var_path&value=@var_value
Example for “JSON”: {

"path": "@var_path",
"value": "@var_value"
}
Example for “XML”: <?xml version= "1.0"?>

<write_request>
<path>@var_path</path>
<value>@var_value</value>
</write_request>
Information:
If the data source is also to be used for writing, this logic must be implemented accordingly by you
on the web server.
QuickHMI only calls the defined URL with the defined parameters.
152
- PLACEHOLDERS -
Placeholders can be used in the URLs and parameters to call up variable-specific URL´s or send variable-specific
parameters.
The following placeholders are available:
 @var_name
Contains the name of the variable in the QuickHMI system.
 @var_path
Contains the path within the “JSON” or” XML” structure. In case of “URLEncoded” data only the key is
included.
 @var_value (Only for write requests)

Contains the value to be written.
By using placeholders in the read URL or the read parameters, a separate request is sent to the web server for each
variable. For many variables, the use of such placeholders can lead to performance losses. This restriction does not
apply to writing, since a single request is sent for each variable anyway, regardless of the use of placeholders.
153
The Webservice data source is created and subsequently displayed in the data source overview.
Below you can create variables for the Webservice data source.
You can find out how to add variables for the Webservice data source in the “Adding Webservice variables”
chapter.
154
3.12.3 External Logging
The external logging describes the possibility of creating a data image. You can log into a database as well as into a
file system. External logging is always set to the entire data source, with all its variables included. There are 2 options
for external logging:
1. Data image
A subtraction of the current value of the variable from the data source is created.
2. Data log
A log is created which shows the changes of the variables.
3.12.3.1 External logging in the database
Additional QuickHMI interfaces with just a few clicks.
The interface for databases gives the QuickHMI developer an easy way to provide an interface for an existing
database with following features:
 Data-Archiving
Every QuickHMI incoming data from devices will be written in a table.
 Data-Image
Complete Image of variables their current value and timestamp of last change.
3.12.3.1.1 What is the intended purpose for the database interface?
There are countless possibilities of using the interface. Every time if you need an “outside” access to the QuickHMI
or connected devices (e.g. PLCs or MODBUS devices) you can use this interface. You can use the data for analyses,
charting, reporting or just to archiving.
155
3.12.3.1.2 What are the requirements for the database interface?
Before a database interface can be operated, a database connection must be created.
How to do this, you will learn in the "Creating database connections" chapter.
To use the QuickHMI interface you have to have an existing and administered database and a corresponding JDBC
driver.
The database must be accessible by the QuickHMI processes. The connection must not interrupt by a firewall or
likewise things. The network connection between QuickHMI and database should use the speed of 100Mbit/s.
Downscaled speed can courses lower performance to write archive data.
Please note:
QuickHMI do not provide database servers or database licenses. It only gives access possibilities to existing
databases. Requisite database licenses and access licenses must be given by the customer.
If the amount of data from the QuickHMI is too high and the data cannot be written to the archive, the data will be
held on RAM by the system and write the data back-to-back. If the data reaches more than 50000 data records for
each data source, new data will be deleted. This problem could appear while hardware working to capacity or
missing resources (e.g., virtual servers).
Before using check, the performance of your target database system. It is also necessary that the target system has
enough (at least 20 GB) free disk space. This always depends on the incoming data and the time of archiving.
156
3.12.3.1.3 How do I have to prepare the database interface?
Before you can use the QuickHMI database interface you have to create a set of database objects.
The following database objects will be created after executing the script:
 Table QHMI_DATAIMAGE incl.
 Primary key PK_QHMI_DATAIMAGE
 Index IDX_QHMI_DATAIMAGE_DATASO_NAME
 Table QHMI_DATALOG incl.
 Primary key PK_QHMI_DATALOG
 Index IX_QHMI_DATALOG_DATASOURCE
 Index IX_QHMI_DATALOG_TS
 Trigger TR_QHMI_DATALOG_BI
 Sequence SEQ_QHMI_DATALOG
The database connection configured in the project requires insert, update and delete rights within the created
tables. If these rights are not available, malfunctioning of the interface processes may occur.
157
3.12.3.1.4 Settings for the database interface
The following QuickHMI database interface settings are available:
1. Target database connection
2. Archive function on/off
3. Creating a variable image on/off
Click on “Data sources” in the Project explorer and select "Add data source" or "Edit data source". Then continue
with click on "External logging".
158
If you activate the checkbox in the "Database" area in the window that opens, you will get the log. If you also want
to have the image of the current variables, you can activate "Create Image". In other words: the data log is always
executed, the data image only if you want it.
Click “OK” to continue.
3.12.3.1.5 Data archiving for database interface
By the data archiving all incoming data changes will be logged in the archive table. You can use this data for any
purposes.
The data will be logged in table QHMI_DATALOG.
159
Following information will be written:
Column Column type Information

ID NUMBER(*, 0) Not Null Consecutively numbered ID, Primary key
TS TIMESTAMP(6) Not Null Time, Timestamp
DATASOURCE VARCHAR2(50) Not Null Data source name
DATATYPE VARCHAR2(50) Not Null Data type
VARNAME VARCHAR2(100) Not Null NAME of VARIABLE
VALUE VARCHAR2(2048) Null Value of VARIABLE
QUALITY VARCHAR2(50) Null Quality (“GOOD”, if QuickHMI-connection to target
device regulatory works, “BAD”, if problems appear, e.g.
Timeouts.)
MESSAGE VARCHAR2(1024) Null Message
Current data image
The data image provides the QuickHMI variables and their current value for external applications.
The data will be logged in table QHMI_DATAIMAGE.
It exists one row in the table for each variable.
Column Column type Information

TS TIMESTAMP(6) Not Null Time, Timestamp
DATASOURCE VARCHAR2(50) Not Null Data source name
DATATYPE VARCHAR2(50) Not Null Data type
VARNAME VARCHAR2(100) Not Null NAME of VARIABLE
VALUE VARCHAR2(2048) Null Value of variable
QUALITY VARCHAR2(50) Null Quality (“GOOD”, if QuickHMI-connection to target
device regulatory works, “BAD”, if problems appear, e.g.
Timeouts.)
160
3.12.3.2 External logging in the file system
The interface for File system gives QuickHMI developer an easy way to provide an interface for an existing Oracle
database with following features:
 Data-Archiving
Every QuickHMI incoming data form devices will be written in Files day by day. The maximum size and the
maximum count of records are adjustable.
 Data-Image
Complete Image of variables their current value and time stamp of last change. One File for each data
source.
 Optional encrypting
Incoming data will be encrypted. Tools for an easy decrypting are added.
 Automatically data reorganization (optional)
For example: A self-created application could get access to the data of the QuickHMI and connected devices. It
could use the data for analyses.
It is possible to encrypt all data with a 256-Bit AES-cryption, for best protection. Only user/application who knows
the decryption key have access to the data.
3.12.3.2.1 What is the intended purpose for the file system interface?
There are countless possibilities of using the interface. Every time if you need an ‘outside’ access to the QuickHMI
or connected devices (e.g. PLCs or MODBUS devices) you can use this interface. You can use the data for analyses,
charting, reporting or just to archiving.
For example: A self-created application could get access to the data of the QuickHMI and connected devices. It
could use the data for analyses.
You do not have to learn different scripting languages, just use your favorite programming language.
161
3.12.3.2.2 How to prepare the file system interface?
You have to create an available folder in you file system. The folder should be existing if it is not the system try to
create it.
The process needs read, write, and delete access to this folder. Are these rights missing it could course
malfunctions?
Particularly the delete rights are needed to reorganize the old data. This could course a full disk or a windows crash.
The same could happened if external processes blocking the tables permanently. Check if the target system has
enough free disk space.
The rights have to be existed for the current windows user while development, therefore the file can be written
and read while Editor’s runtime.
Additionally, these rights are necessary for the production environment for the user which runs the data source
service.
Please note when preparing the target system:
The archiving to the file system high performed and tested with merchantable hardware and 1000 variable changes
per 100 milliseconds. If the amount of data from the QuickHMI much higher and the data cannot be written to the
archive, the data will be held on RAM by the system and write the data back-to-back. If the data reaches more than
50000 data records for each data source, new data will be deleted. This problem could appear while hardware
working to capacity or missing resources (e.g., virtual servers).
Before using check, the performance of your target Oracle database system. It is also necessary that the target
system has enough (at least 20 GB) free disk space. This always depends on the incoming data and the time of
archiving.
162
3.12.3.2.3 Settings for the file system interface
The following QuickHMI File system interface settings are available:
1. Target path (Note, that the destination path is also present on the server.)
2. Archive function on/off
3. (Option) max count data records within target table. While reaching this count the old data records will be
deleted.
4. (Option) max age of files indication in hours. While reaching the age range the old files will be deleted.
5. Maximum size of each archive file indication in MB. If the file reaches the size, a new file will be created
with next sequence number. If you do not set a max size the file will reach a max size of 2 GB.
6. Automatic reorganize the archive on/off. If deactivated, the old data records stay in the table. The user has
to delete the old data by themselves.
7. Creating a variable image on/off optionally as flat- or XML format.
8. Enable or disable the receipt of write commands through the file system.
9. Enable or disable file encryption
10. (Option) Passing a password for encryption. When switching on the encryption, the password transfer is
obligatory. Please keep the password inaccessible to others and do not give it away.
163
You can find the options for archiving in the “Data sources” window accessible through the Project explorer. By
creating or editing a data source the options will be opened by pressing the “External logging” button.
In the opened window you can select “File” by activate the checkbox and choose the path where the file should be
saved.
Determine if an image should be created, set the different settings, and set a password.
Click “OK” to continue.
164
3.12.3.2.4 Data archiving for the file system interface
By the data archiving all incoming data changes will be logged in the archive table. You can use this data for any
purposes.
Files will be created in this format:
<date>_<sequence 5-digit>_<datasource name>.log

e.g. 20140112_00001_DataSource1.log
Optional encrypted archive files have the same name with the ending *.logx
If the file reaches the set max size or 2 GB, a new file will be created with next sequence number.
The fields in the file are separated with a semicolon. The first row gives you the column names.
1. Timestamp incl milliseconds
2. Sender (Name of data source)
3. Data type
4. Name of Variable
5. Current Value
6. Quality (“GOOD”, if QuickHMI-connection to target device regulatory works, “BAD”, if problems appear, e.g.
Timeouts.)
165
Current data image
The data image provides the QuickHMI variables and their current value for external applications there are two
options for the data image format. Text file or XML-file.
Structure text file data image:
<Data source name>.dat

e.g. DataSource1.dat
Optional encrypted archive files have the same name with the ending *.datx
The fields in the file are separated with a semicolon. The first row gives you the column names.
It exists one row in the file for each variable.
3. Data type
4. Name of Variable
5. Current Value
6. Quality (“GOOD”, if QuickHMI-connection to target device regulatory works, “BAD”, if problems appear, e.g.
Timeouts.)
166
Structure XML file data image:
<Data source name>.xml

e.g. DataSource1.xml
Optional encrypted archive files have the same name with the same ending *.xml
It exists one row in the file for each variable.
1. Flag if file is encrypted
4. Data type
5. Name of Variable
6. Current Value
7. Quality (“GOOD”, if QuickHMI-connection to target device regulatory works, “BAD”, if problems appear,
e.g. Timeouts.)
For encrypted files, the XML format has remained preserved. Only the field contents are encrypted.
167
3.12.3.2.5 Encryption and decryption
To provide optimal data security, the QuickHMI file interfaces are equipped with optional encryption. Encryption is
carried out directly if you have set up the necessary settings within the data sources.
Please note:
You must assign a password for encryption. Please keep this password up! If it is lost, the encrypted files can no
longer be opened. We can´t help in this case. The encryption routines require CPU resources! Plan slightly higher
computing power. Especially when you are very many variables are changed in very short intervals. However, you
can test the load in the editor during the runtime mode.
Your QuickHMI system includes a command line program for encryption and decryption. You can find it under
[QuickHMI-Home] /qhmisecu.exe within the editor or server installation.
You can carry out the following actions:
1. Log files in logx-format or decrypt image files in the datx format
To do this, open the program qhmisecu.exe with the following parameters:

qhmisecu.exe -d <source file> <target file> <your password>
The decrypted file will be created.
2. Decode image files in xml format
Open the program qhmisecu.exe with the following parameters:

qhmisecu.exe -x <source file> <target file> <your password>
The decrypted file will be created.
168
3.12.4 Adding variables
Add variables to the data sources
You have the option to add variables for all previously created data sources.
To add a variable to a data source, click on “Variables” in the “Project explorer”.
The following chapters will show you how to create variables for the different data sources.
3.12.4.1 Adding S7 Variables
Enter “Add external variable”.
To add variables to the S7 data source, it must be selected in the variable input mask under "Data source".
Depending on which data source type is selected, the input mask adjusts automatically.
Then, enter a name for the variable under "Name" and select the "Data type.
If this button is activated (button is highlighted in blue), the name automatically adjusts to the
variable address. If the variable name and the address are to be different, the button must be
deactivated.
For more information on fast entry, go to the "S7 syntax for fast entry" chapter.
169
If all entries have been made, click on "Add" to create the variable. The window remains open so that you can
create additional variables. If you finish, “Close” the window.
By selecting the data type, the creation mask and

the specific area are automatically adjusted.
The variable for the S7 data source was created successfully and can now be used.
170
3.12.4.1.1 S7 address syntax for fast entry
S7 variables can also be added with a fast entry. With a correct syntax, a variable can be created here with a single
field entry.
In general, the following syntax applies to S7 addresses:
 [Region][Data type][Start address]
For variables from the data block and instance data block areas, the number of the data block must be separated
from the data type with a Point(.):
 [DB/DI][Number].[Data type][Start address]
If it is a string or Boolean variable, the length of the string or the position of the bit must be specified at the end:
 [Region][Data type][Start address].[BitPositionOrLenght]
Regions:
Shorthand Symbol Description

DB Data block
DI Instance data block
F Flag
T Timer
C Counter
I Input
O Output
PI/PO Peripheral input/output
171
Data types:

X Boolean
I Int
D DInt
B Byte
W Word
DW Dword
R Float
S String
BCDB BCD8
BCDW BCD16
BCDDW BCD32
BCDLW BCD64
DT DateTime
S5T S5Time
G S7String
T Time
TOD TimeOfDay
D Date
172
3.12.4.2 Adding OPC UA Variables
To add variables to the OPC UA data source, it must be selected in the variable input mask under "Data source".
The variable can be created manually by assigning it a "Name" and entering the "NodeID". However, since this is a
bit cumbersome, you also have the option to browse the server by clicking on "Browse". In the window that opens,
all variables are listed (displayed as a tree structure), which you can then simply select via checkbox. Then confirm
your selection by clicking on "Import" and close the window with "Close".
deactivated.
173
The variables for the OPC UA data source have been created successfully and can now be used.
174
OPC variables can also be created using the Variable Import button.
In the following window you can choose between already created TwinCat, OPC UA, Allen Bradley, or Webservice
data sources.
175
3.12.4.2.1 OPC address syntax for fast entry
OPC variables can also be added with a fast entry. With a correct syntax, a variable can be created here with a single
field entry.
In general, the following syntax applies to OPC addresses:
 [Data type].[NodeID]
Data types:

X Boolean
I1 Byte
UI1 Ubyte
I2 Short
UI2 Ushort
I4 Integer
UI4 UInteger
I8 Long
UI8 ULong
F Float
D Double
S String
V Variant
176
3.12.4.3 Adding TWINCAT variables
To add variables to the TWINCAT data source, it must be selected in the variable input mask under "Data source".
Under "Name" you can enter the name of the variable directly if it is known.
deactivated.
177
You also have the option to search for the variable. Click on "Browse". Everything the controller has is listed below.
Here you can now select a desired variable.
When all entries have been made, click on "Import" to create the variable.
The variables for the TWINCAT data source have been created successfully and can now be used.
178
TwinCat variables can also be created using the Variable Import button.
In the following window you can choose between already created TwinCat, OPC UA, Allen Bradley, or Webservice
data sources.
179
3.12.4.3.1 TWINCAT address syntax for fast entry
TWINCAT variables can also be added with a fast entry. With a correct syntax, a variable can be created here with
a single field entry.
In general, the following syntax applies to TWINCAT addresses:
 [Data type].[SymbolPath]
Data types:

X Boolean
I1 Byte
UI1 Ubyte
I2 Short
UI2 Ushort
I4 Integer
UI4 UInteger
I8 Long
UI8 ULong
R4 Real 4 Byte
R8 Real 8 Byte
R10 Real 10 Byte
S String
WS WString
V Variant
180
3.12.4.4 Adding MODBUS Master variables
To add variables to the MODBUS Master data source, it must be selected in the variable input mask under "Data
source". Depending on which data source type is selected, the input mask adjusts automatically.
MODBUS has areas in the control that are read only and cannot be written. If this is the case, an indication of this
appears. Then enter a name for the variable under "Name" and select the "Data type".
deactivated.
You also have the option of selecting the individual areas of the controller. In this example, we have a string named
"string1". This is located in the "HoldingRegister" 10, with a "Length" of 15. Once all entries have been made, click
on "Add" to create the variable. The window remains open so that you can add additional variables. “Close” the
window to finish.
181
The variables for the MODBUS Master data source have been created successfully and can now be used.
182
3.12.4.4.1 MODBUS address syntax for fast entry
MODBUS variables can also be added with a fast entry. With a correct syntax, a variable can be created here with
In general, the following syntax applies to MODBUS addresses:
 [Region][Address].[Data type]
If it is a string or Boolean variable, the length of the string or the position of the bit must be specified at the end:
 [Region][Address].[Data type].[BitPositionOrLength]
Are they variables from the coil or input regions, the syntax is simplified as follows:
 [Regions][Address]
Regions:

HR Holding register
IR Instance register
C Coil
I Input
Data types:

I1 Byte
UI1 Ubyte
I2 Short
UI2 Ushort
I4 Integer
UI4 UInteger
I8 ULong
UI8 Float
F Double
D Date
183
3.12.4.5 Adding MODBUS Slave variables

To add variables to the MODBUS Slave data source, it must be selected in the variable input mask under "Data
Creating a variable for MODBUS slave data sources works like creating a variable for MODBUS master data sources.
184
3.12.4.6 Adding KNX variables
To add variables to the KNX data source, it must be selected in the variable input mask under "Data source".
Then give a “Name” to the variable and select the "Data type". To complete the entry, enter the KNX - specific
address (Bus / Device ID / Addressing of the variable).
deactivated.
To confirm your entries, continue with "Add". The window remains open so that you can create additional variables.
"Close" the window for finish.
185
The variables for the KNX data source have been created successfully and can now be used.
3.12.4.6.1 KNX address syntax for fast entry
KNX variables can also be added with a fast entry. With a correct syntax, a variable can be created here with a single
field entry.
In general, the following syntax applies to KNX addresses:
 [Data type].[Adrdess1].[Adrdess2].[Address3]
Data types:

X Boolean
I4 Integer
F Float
S String
186
3.12.4.7 Adding DataBase variables
To add variables to the DataBase data source, it must be selected in the variable input mask under "Data source".
Now all you must do is give a "Name". By clicking on "Add" the variable is created. The window remains open to
create additional variables. “Close” the window to finish the entry.
deactivated.
The “Key” value is used to uniquely identify a single table row of which the value of the “VAR_VALUE” column is
used as the value for the variable.
187
The variables for the DataBase data source have been created successfully and can now be used.
Information:
In contrast to the file system data source, the variables for the DataBase data source cannot simply be
created, but the name of the variable must be entered in the SQL Server to be able to query it.
How to prepare the database can be found in the chapter for adding DataBase data sources:
188
3.12.4.7.1 DataBase address syntax for fast entry
DataBase variables can also be added with a fast entry. With a correct syntax, a variable can be created here with
In general, the following syntax applies to DataBase addresses:
 [Data type].[Key]
Data types:

X Boolean
I1 Byte
UI1 Ubyte
I2 Short
UI2 Ushort
I4 Integer
UI4 UInteger
I8 Long
UI8 ULong
F Float
D Double
S String
V Variant
189
3.12.4.8 Adding File system variables
To add variables to the File system data source, it must be selected in the variable input mask under "Data source".
Choose a “Name” for your variable and click "Add". Once added, the window remains open, and you can add more
variables. “Close” the window to finish typing.
deactivated.
The “Key” value is used to uniquely identify a single row of the file of which the value of the “VALUE” column is
used as the value for the variable.
190
The variables for the File system data source have been created successfully and can now be used.
3.12.4.8.1 Filesystem address syntax for fast entry
Filesystem variables can also be added with a fast entry. With a correct syntax, a variable can be created here with
In general, the following syntax applies to Filesystem addresses:
 [Data type].[Key]
Data types:

X Boolean
I1 Byte
UI1 Ubyte
I2 Short
UI2 Ushort
I4 Integer
UI4 UInteger
I8 Long
UI8 ULong
F Float
D Double
S String
V Variant
191
3.12.4.9 Adding MQTT variables
To add variables to the MQTT data source, it must be selected in the variable input mask under "Data source".
Now all you must do is give a "Name". By clicking on "Add" the variable is created. The window remains open to
create additional variables. “Close” the window to finish the entry.
deactivated.
The variable can be created manually by entering a "Topic".
It's easier if you click on "Browse" to use the "Search Topic" function to select the existing variables. The "Search
Topic" works by tree structure. If only a "#" is entered, all will be searched, which may take some time. So, it is
recommended if you already know in which topic you want to search for the variables.
192
Enter the desired topic (*Name of topic**Slash**#*) and click on "Update". Thus, the topic is searched for the
variables (all variables are strings) from which you can select the desired ones. By clicking on "Import" the selected
variables are created and the window closes.
The variables for the MQTT data source have been created successfully and can now be used.
193
3.12.4.9.1 MQTT address syntax for fast entry
MQTT variables can also be added with a fast entry. With a correct syntax, a variable can be created here with a
single field entry.
In general, the following syntax applies to MQTT addresses:
 [Data typ].[Topic]
Data types:

X Boolean
I1 Byte
I2 Short
I4 Integer
I8 Long
F Float
D Double
S String
194
3.12.4.10 Adding Allen-Bradley variables
To add variables to the Allen-Bradley data source, it must be selected in the variable input mask under "Data
The variable can be created manually by assigning it an "Address".
deactivated.
It is easier if you click on "Browse" and select the existing variable and confirm with "Import".
195
The variables for the Allen-Bradley data source have been created successfully and can now be used.
When entering manually, enter the name of the variable in the "Address" field (The address is the name stored in
the Allen-Bradley data source). In the field "Name" you can rename the variable internally and set the "File type"
in the line below. With "Add" you create the variable.
3.12.4.10.1 Allen-Bradley address syntax for fast entry
Allen-Bradley variables can also be added with a fast entry. With a correct syntax, a variable can be created here
with a single field entry.
In general, the following syntax applies to Allen-Bradley addresses:
 [Data type].[Path]
Data types:

X Boolean
I1 SInt
I2 Int
I4 DInt
F Real
S String
196
3.12.4.11 Adding Webservice variables
To add variables to the Webservice data source, it must be selected in the variable input mask under "Data source".
Assign a name for the variable and specify the "Path". Now the variables can be imported via the "Browse" button,
or you know the path of the desired node and can enter it manually.
For the JSON format, sub nodes are separated from the main node with a dot (.). Individual elements in an array
are accessed with curly brackets and by specifying the index X. ([X])
The path for accessing the variable marked in the graphic is to serve as an illustration:
Path: LOREM.SIT.ELIT[1].UTILITATIS
197
deactivated.
By a variable import, the data type in which the selected variables are to be imported can be selected. Per variable
import, only one data type can be selected. If variable A is to be imported as string and variable B as Boolean, the
import procedure must be start again for each variable. If both variables are to be imported as the same data type,
this is done all at once.
The variables for the Webservice data source were created successfully and can now be used.
198
3.12.4.11.1 Webservice address syntax for fast entry
Webservice variables can also be added with a fast entry. With a correct syntax, a variable can be created here with
In general, the following syntax applies to Webservice addresses:
 [Data type].[Path]
Data types:

X Boolean
I1 Byte
I2 Short
I4 Integer
I8 Long
F Float
D Double
S String
199
3.12.4.12 Status variables
In QuickHMI, from version 9.1.0.0 Gazelle, you can display the status of data sources in the visualization. For each
data source created, corresponding system variables are automatically created in the background.
 ds_“Name Der Datenquelle“_last_read_status

Type: String / Status message of the last read operation
 ds_“Name Der Datenquelle“_last_read

Type: DataTime / Timestamp of the last read operation
 ds_“Name Der Datenquelle“_ status

Type: String / General status of the data source
 ds_“Name Der Datenquelle“_is_running

Type: Boolean / Is the data source running or not / True or False
The status variables can now be used like all variables in QuickHMI. For example, a breaker button can be used to
indicate whether a data source is running or not. For this purpose, a rule must be created for the control.
200
In the rules of the element, the system variable to be accessed must be selected at “Value”. Thus, a rule is created
on the “On” property of the control, which displays the “ds_webservice dq_is_running” status of the web service
variable.
These variables are read-only -> So, they cannot be written. Switching the data source is therefore not possible
with this.
201
3.12.4.13 Value manipulation
In QuickHMI it is possible to manipulate values of variables. This is useful whenever values from a data source needs
to be converted prior to rendering it on the visualization. To do so click on the formula icon when creating or editing
a variable. This will open the “Value manipulation” window.
Then select the operation to be applied to the variable. Finally, specify the value with which the operation should
be performed. In this case the variable value is always multiplied by 2.7 before further processing. Click “Save” to
complete the process.
Information:
If the value of this variable is written back, the counteraction is executed beforehand. This is, in this case,
before writing to the controller, the value would be divided by 2.7. If the data source outputs a 10 a 27 is
displayed in the visualization. If the value is changed to 54 by the user and is written back to the data source
the value will be divided by 2.7 beforehand. A 20 is therefore written to the data source.
202
3.12.4.14 Adding Alarm variables
Alarm notification
In QuickHMI, you can view notifications and define alarm variables.
Adding alarm variables
To create alarm variables, you need to have created at least one data source. This can be assigned to the new alarm
variables. You can do this under “Data sources” in the Project explorer.
How to create data sources, you will learn in the "Creating data sources" chapter.
To add alarm variables, click on “Variables” in the “Project explorer”. After this click the button for “Add variables”.
Then select your "Data source" and set a "Name" for the variable. In order to define the created variable to be an
alarm variable, select the type of alarm under "Alarm type". Here you can decide between "Message", "Warning"
and "Error". By default, "No alarm" is selected here and thus no alarm variable.
203
By clicking on the button that activates afterwards, you will be taken to the further alarm settings. Here you have
the following options:
 Make the alarm variable "Linkable". This will be made available for rules and actions.
 Another feature is the option to use "Messages" from translation texts. To do this, you can use the
corresponding button, or you can write before and after the text "%" in order to use translation texts
manually.
 It is also possible for you to specify a "Location". This is just a text for information about where the alarm
is triggered.
 Determine a "Navigation target". This navigates when selecting the alarm directly to a component (for
example, a control) on the surface or to a desired view.
 A sound created under "Audio resources" can be selected, which will be played when the alarm variable is
triggered.
 Select a created e-mail template that you want to link to the alarm.
More about the QuickHMI E-mail function you will find in the “E-Mail-Function” chapter.
 Decide whether the alarm variable is triggered by "True" or "False".
204
Use previously created translation

texts for “Message”.
Created alarm variables can be edited, updated, and deleted. They can then be used by control elements.
205
3.12.4.15 Internal variables
Internal variables are only available in QuickHMI and can only be used in there. To communicate with external data
sources, use external variables.
You have the choice between local and global variables. Whereas local variables only refer to a selected client on
the server, global variables are directed to all clients on the server.
Changes to local variables only affect the client on which the change was made. Changes to global variables, are
visible for all clients.
Create, edit, and delete internal variables
So, select whether you want to create a local or a global variable. Use the corresponding buttons.
Then select all the specifications for the variable, such as "Name", "Data type" and "Value". The value here is the
initial value of the variable.
An overview of the different data types can be found below in this sub-chapter.
Click on "Add" to create the variable. If you do not want to create further variables "Close" the window.
206
All created variables appear detailed in the table. Here you will also see the start value of the individual variables.
To edit or delete a created variable, select it and interact with the corresponding buttons. Alternatively, you can
also double-click (edit) or use the Delete (delete) key.
207
Data types:
Data type Definition
Boolean True / False

DateTime 64bit Time stamp
Byte 8bit signed
Short 16bit signed
Integer 32bit signed
Long 64bit signed
UByte 8bit unsigned
UShort 16bit unsigned
UInteger 32bit unsigned
ULong 64bit unsigned
Float 32 Floating point
Double Floating point
Color Color
Address syntax for internal variables
Internal variables can also be added with a fast entry. With a correct syntax, a variable can be created here with a
single field entry.
In general, the following syntax applies:
 [Data type]
Data types:

X Boolean
I2 Short
I4 Integer
I8 Long
F Float
S String
208
3.12.4.16 Text view of variables
Created variables can be displayed both in the table view and in the text view in a list. In this text view, new variables
can be created faster, for example by copying, pasting and redefining existing variables.
Change to text view
To switch from the regular table view to the text view, use the corresponding button. All previously created
variables, which are displayed by default in a table, are then listed as a text line in a list.
* Variables in the table view
* Variables in the text view
To return to the table view, use the arrow button.
In addition, you can also change the text size. For this, use the text size buttons.
209
3.12.4.16.1 Adding variables in the text view
The text view offers the possibility to create variables even faster. For this it is absolutely necessary that you exactly
familiar with the matter, since it can come here faster to mistakes.
Open the text view for variables as described in the previous chapter. You can simply copy and paste an existing
variable (the complete text line). Then, you can redefine added variable by changing the all required values of the
new variable.
A variable is divided into the following elements, which can be defined manually.
This area only applies to alarm variables.

1018|s7 dq|alarm|DB1.X0.0|[Format]|[Value Manipulation]|Error|False|[Message]|[Location]|[NavigationTarget]|True|[Sound]
| ---> Pipe
All elements are separated by the pipe symbol.
1018 ---> ID
The ID is the number for uniquely identifying a variable. However, when copying a line or writing a new line, you
don´t have to assign a new ID yourself. Just leave the field empty (so that the line starts with a pipe) or just leave
the copied ID standing. By saving the software automatically assigns the next free ID.
s7 dq ---> Data source
Here, the name of an already created data source must be specified.
alarm ---> Name of the variable to be created
Here, a unique name must be specified for the variable to be created.
DB1.X0.0 ---> Address syntax
Write the address of the variable.
210
[Format] (Brackets serve as placeholders)
Only interesting for data types. The syntax for this is based on the Java date formatting syntax.
See external Website: * https://docs.oracle.com/javase/10/docs/api/java/text/SimpleDateFormat.html
[Value Manipulation] (Brackets serve as placeholders)
This area must contain the operation, space key, and then the value. So, for example ADD 5.
See also the sub-chapter "Value manipulation" sub-chapter.
Error ---> Alarm type
If an alarm variable is created, the alarm type must be specified here. This can be "Message", "Warning" or "Error".
If it´s not an alarm variable, simply enter "None" here. Then, the following steps will be omitted.
False ---> Linkable
Indicates whether the variable should be linkable or not. This will be defined here by "True" or "False". Variables
are thereby made available for rules and actions.
[Message] (Brackets serve as placeholders)
Set here the message to be output when the alarm is active (alarm type "Message").
[Location] (Brackets serve as placeholders)
This is just a text for information about where the alarm is triggered.
[Navigation Target] (Brackets serve as placeholders)
Here, the navigation target is specified. This navigates when selecting the alarm directly to a component (for
example, a control element) on the surface or to a desired view.
True ---> Trigger
Determine whether the alarm variable is triggered by "True" or "False".
[Sound] (Brackets serve as placeholders)
Here, a sound can select that will be played when the alarm sounds. The complete name of the sound file must be
entered including file extension.
211
It is also possible to create the variables from the beginning within the text view. To do this, click directly on the
text view and start creating the variables by manual entry as described.
3.12.4.17 Variables with control elements
Created variables can be linked to control elements via rules and actions.
How it works, is explained in the "Rules" and "Actions" sub-chapters.
3.12.5 Reading variables
The reading of variables can be done by rules and by JavaScript (Variable-Change and API function "getVariable")
For the desired option, see the sup chapters “Rules”, “Scripts for variable change events” and “API functions” in
this documentation.
3.12.6 Writing variables
Variables can be written using actions (SET_VARIABLE) and the JavaScript API function "setVariable" and
"setVariableSync".
For the desired option, see the sup chapters “Actions” and “API functions” in this documentation.
212
3.13 Database queries

In QuickHMI you have the possibility to display whole table contents from databases on the user interface. To create
a database query (SQL statement), you need a database connection, of course.
First, click on “Database” / “Queries” in the Project explorer.
In the window that opens, click on the plus icon to create a new database query.
Then assign a "Name", select the "Connection" and choose the execution mode. Then enter the desired SQL and
save your entries.
There are 2 execution modes available for database queries. The modes differ on the one hand in when and by
whom they are triggered and on the other hand in which users get which data displayed.
Interval
The database query is automatically executed by the server at a specified interval (fastest interval 500ms). All users
always get the same current data automatically.
Manual
The database query is executed once when the server is started to obtain an initial data status. After that, this query
is only executed during a user interaction (by means of a created action, e.g. when a button is pressed).
The table is now filled with the current data of the database and is not updated until the action is executed again.
If other users perform an action that affects this database query during this time, this has no effect on other users.
In SQL, you can use placeholders that are replaced by the contents of variables at the time of query execution. In
this example we want to use the number of currently connected clients in an email.
We can find this value in the system variable "current_session_count". The data source name of the system data
source is "System".
213
Placeholders for variables consist of curly brackets into which an "@" + data source name + variable name is written.
Data source name and variable name are separated by a dot. So, in this case {@System.current_session_count}.
Information:
Not all variables can be used in placeholders! Only global variables can be used.
Global variables are:
1. Variables from data sources that have been created by the user, i.e., by you.
2. Internal variables that have been created as global.
3. The system variables "current_session_count", "active_alarm_count" and all data source status
variables.
Not global variables are:
1. all variables of the system data source (except those mentioned above).
2. internal variables that have been created as local.
Placeholders can only be used where JDBC parameters (?) can normally be used. At runtime, all placeholders
are replaced by JDBC parameters. So, data types of variables play a role here.
214
Under "Controls" on the left side, the new element "DatabaseTable" appears, which can be dragged onto the
surface like all the other elements. In the “Properties” for the control under "DatabaseQuery", select the previously
created database query.
When all entries have been made and the runtime has been executed, the table from the database is displayed.
The datas can be sorted by the columns as desired. (The representation can vary in the detail in the future)
215
Explanation of the element-specific properties:
 Info
When this option is enabled, information’s about the table are displayed, including information about
filtered data. This option can be used to enable or disable this function.
 Ordering
Enables or disables the ability to sort the data in the table by desired column.
 Filtering
Enables or disables the search function within the table.
 Paging
Controls whether the user can change the number of records displayed on a page at runtime. If this option
is disabled, all records are always displayed.
 PageSize
A sequence of numbers (separated by commas) can be specified here to indicate which selection options
the user has when paging is enabled.
In the example below, paging is enabled, and the page size is set to 50. So, the user is not given the option
to adjust the page size at runtime.
By entering "50, 100, -1", a selection could be made between 50, 100, and all entries. With the exception
of -1 (This represents all records on a page), numbers must be positive.
216
3.14 JavaScript & HTML

In QuickHMI you enjoy unlimited extension possibilities through HTML and Java Script scripting. The following
subchapters give you an insight into the possibilities.
3.14.1 HTML Manager
To define an area in your project where HTML is to be displayed, drag an HtmlBox onto the editor desktop. This can
be found in the controls, in the category “HTML”. HTML content can now be displayed in this box. However, only if
these were defined before in the “HTML Manager”.
In the HTML Manager, which can be accessed via the Project explorer, HTML blocks can be created, edited, and
deleted. HTML blocks can be displayed later in the HtmlBox. Click on “HTML” under “Scripting” in the Project
explorer to open the HTML Manager.
217
To create HTML blocks, click on the cross button.
On the right side of the HTML Manager, you can now enter a “Name” for the new HTML block to be created, as
well as the code. To save the entries, use the disk button in the toolbar. You can either save the individual HTML
block by selecting it, or all blocks created in the HTML Manager together.
To edit HTML blocks, click on the desired entry on the left side and simply edit the entries on the right side. After
this, save the entries. You can delete the entries selected on the left side via the trash can button in the toolbar.
218
To link the HTML box with a created HTML block, select the HTML box and choose the desired entry in the
“Properties” under “Html”.
The content of the HTML block is now displayed in the HTML box as a preview and can then be executed in runtime.
219
3.14.2 JavaScript
Like the HTML blocks, JavaScript is also maintained in a central location. For JavaScript, two masks are available to
us. One is the definition mask and the other is the assignment mask.
3.14.2.1 Definition
The mask for the “Definition” of the JavaScript can be reached via the Project explorer under “Scripting” /
“JavaScript” / "Definition". It consists of a JavaScript editor.
By clicking the - button, you can access API function we have provided so you can interact with the project.
The dropdown box above the editor offers quick access to all declared functions.
With the of the Script Definition toolbar, you can create a new script, change font sizes, save scripts, change the
order of multiple scripts (make sure they are in the correct order), and delete created scripts.
220
3.14.2.1.1 Scripts for component events
JavaScript functions which are to be executed as an action function - that is, called up as the result of an event -
must correspond with a specific pattern. Such functions must either have no parameters or only one specific
parameter. This parameter is the args parameter which is filled with information about the current event (page,
component, event).
Valid JavaScript action functions include, for instance:
 function showSlotData(args)
 function anyFunctionName(args)
 function anyFunctionName()
But not:
 function anyFunctionName(args, secondParameter)

 function anyFunctionName(par1)
The args parameter can be read out within the function as follows:
args[„page“] Returns the name of the page on which the component triggering the event is located.
(args.page) If this component does not have a name, only the ID of the page will be returned.
args[„element“] Returns the name of the component triggering the event. If this component does not
(args.element) have a name, only its ID will be returned.
args[„event“] Returns the name of the event. E.g. “Clicked”, “OnMouseDown”, etc.
(args.event)
221
3.14.2.1.2 Scripts for variable change events
In QuickHMI it´s possible to execute JavaScript’s because of a variable changed event. These functions must follow
the same regulations as Scripts for component events.
The only difference is the content of the args-parameter. In the case of a variable change event, it contains a
variable object. Its properties can be accessed as follows:
args[„variable“][„name“] Returns the name.

(args.variable.name)
args[„variable“][„datasource_name“] Returns the current value.

(args.variable.name)
args[„variable“][„value“] Returns the current value.

(args.variable.value)
args[„variable“][„lastvalue“] Returns old current value.

(args.variable.lastvalue)
args[„variable“][„quality“] Returns the current quality.

(args.variable.quality)
args[„variable“][„timestamp“] Returns last change timestamp.

(args.variable.timestamp)
222
3.14.2.1.3 API functions
The following API functions are available to you in JavaScript:
mainInterface.getProperty(property)
This function returns the value of a component property.
Parameter
 property
The property parameter specifies the name of a property.
A property name always needs to meet one of the following syntaxes:
o pagename.componentname.propertyname
o componentId.propertyname
In order to, for instance, read out the text from a text box with the name edit1 on the main page,
the parameter to be transmitted must be: “Mainpage.edit1.Text“
The syntax including the IDs only comes in to play when using the args-parameter mentioned earlier.
(This parameter provides you with the needed IDs, in case you didn’t specify a name for the
questioned component.)
mainInterface.setProperty(property, value)
This function sets the value of a component property to a specific value. To set a value, the component must have
a name.
Parameters
 property
The full name of the property to be set. (See function getProperty)
 value
The value to be assigned to the property
mainInterface.getVariable(variable)
This function returns the value of a variable.
Parameter
 variable
The name with which the variable was created.
If the variable name exists in several data sources, the data source name must be specified
beforehand.
Example: DataSourceName.VariableName
223
mainInterface.setVariable(variable, value)
This function sets the value of a variable asynchronously.
This process is asychron. This means that a call for “getVariable” immediately afterwards might not return the
updated value. Best practice to work with this behavior is to save the value beforehand in a local JavaScript-Variable
to use it later in the script.
If, for some reason, you really need the function “getVariable” to return the updated value immediately afterwards
there is a (highly discouraged) way of doing this: Using “setVariableSync” instead of “setVariable”. The big
disadvantage of setting a variable synchronously is the impact on the user interface. If the synchronous function is
called frequently it might lead to the user interface freezing for a few seconds.
Parameters
 variable
beforehand.
 value
The value to be assigned to the variable
mainInterface.setVariableSync(variable, value)
This function sets the value of a variable synchronously.
Information:
Only use this function when absolutely necessary. (See the important note for the function „setVariable“.)
Parameters
 variable
beforehand.
 value
The value to be assigned to the variable
224
mainInterface.log(logtype, tag, message)
This function writes a log entry. The log can be opened in the QuickHMI Desktop Viewer & Web Viewer via the
- button.
Parameters
 logtype
As log types, the constants “I” for information, “W” for warning and “E” for error are available.
These are displayed in different colors in the log.
 tag
Specifies the origin of the log entry
 message
The message to be logged
mainInterface.playAudio(filename)
This function plays an audio file in the viewer.
Parameter
 filename
The name of the audio file (including file extension) that was previously imported in the QuickHMI
Editor.
mainInterface.openView(viewname)
This function opens a page or view.
Parameter
 viewname
The name of a page or a view.
If a view (a smaller part of a page) is to be displayed, the syntax for this is as follows:
Pagename.Viewname
225
3.14.2.1.4 Events
Using events, you can execute code once certain events are happening in QuickHMI. At the moment there are two
events in QuickHMI. Those two are ProjectLoaded and PageLoaded.
The ProjectLoaded event is fired once the project is initially done loading. Only after that moment it is possible to
use the mainInterface for example to manipulate variable values.
The PageLoaded event is fired every time a page is loaded. This event function can be given a parameter which
contains the name of the page loaded when called.
Usage:
Events.onProjectLoaded.push(function);
Events.onPageLoaded.push(function);
Function can either be declared inline directly in the function call or be declared elsewhere. Here is a little demo
code showing both options:
Events.onPageLoaded.push(function(pagename) {
alert(pagename);
});
Or
Events.onPageLoaded.push(pageLoaded);
function pageLoaded(pagename) {
alert(pagename);
}
Both codes are equally in function. They both show the loaded pages name in a popup message.
226
3.14.2.2 Assignment
You have two options for assigning JavaScript functions to events for different components.
Proceed as you would for all other action functions and manually create a new action function for a specific event
assigned to a specific component. As a command for this action function, you can now select SCRIPT. In the
dropdown box, you can see all available functions from your defined JavaScript which correspond to the pattern.
(no parameters or only args parameters)
If, however, you want to use a JavaScript function on several events of different components, there is an easier
option. Open the assignment mask, which you can also access via the Project explorer under “Scripting”/
“JavaScript” / “Assignment”
The assignment mask is organized into 3 smaller areas:
227
1
3
2
Area 1: displays an overview of all the JavaScript functions that can be used as actions. Here, you can select
the function which you want to assign to the events.
Information:
Renaming functions does not automatically affect already assigned functions. These must
be manually relinked.
Area 2: displays the content of the selected functions. Changes at this point are not possible.
Area 3: lists pages that are currently open and the components on those pages. Via the context menu
(which can be accessed with a right-click), events and functions can be added or deleted.
Caution:
If an event is deleted at this point, this will affect all action functions assigned to that event. Since,
at this point, only script action functions are displayed, it is possible that there are additional action
functions, that are not visible here, associated with an event. These will also be lost if the event is
deleted.
228
To assign several events to a JavaScript function at once, these first have to be selected in Area 1. Then the “Trigger”
button can be pressed. The following dialog box will open:
In the top line, the name of the selected function can be seen. Below that is a dropdown box showing the events.
Depending on which event has been selected, the list of components in the lower section will change since not all
components have the same events. If the event “OnVariableChange” is selected the list will contain all available
variables.
To further filter the list, there is a name filter, as well as the option of only showing components that either do or
do not already have an assignment.
All components with a checkmark have already linked this function to this event. If the checkmark is unmarked, the
link will be removed when saved. Of course, new links can also create in reverse.
229
3.14.2.3 JavaScript Debugging
To find possible errors in your own defined JavaScript, it is a good idea to use the debugging function of your
browser. How this works with the most common browsers is explained in the following chapters.
It is important to note that any changes you make within the debugger at runtime only affect the current browser
session. After refreshing the page or restarting the runtime these changes would be lost.
It is therefore important to copy any changes that you make directly in the Debugger to the editor so that they are
permanent.
When can debugging be helpful?
1. If you become an error message "Error in user Javascript:" at runtime, this always indicates for an error
that was triggered within a user-defined function. The error message contains a description of the error, in
this case "textVariable is not defined" and the name of the function that was called before the error
occurred.
2. If your script does not work as you expect it to. If wrong values are written or read. In this case it helps to
debug the code to get the error faster.
230
3.14.2.3.1 JavaScript Debugging in Google Chrome
The following instructions refer to version 83.0.4103.61 of Google Chrome. This process may vary for future
versions.
To do JavaScript debugging, you need to access the browser's "developer tools". You can do this in Google Chrome
simply by pressing "F12" or via the browser settings:
The developer tool opens and displays each JavaScript that has been created in a .ujs file (User JavaScript) at the
top level in plain text. The name of the file corresponds to the name under which the JavaScript block created in
the editor was saved. In this example it´s saved as "Main". So, for every saved JavaScript block, a separate file would
be created.
231
JavaScript-Block „Main“
Now, the debugging can be done. Breakpoints can be set, and errors can be corrected. In this simple example, you
can already see by highlighting that something is faulty and needs to be corrected.
The debugging procedure can vary from browser to browser.
232
3.14.2.3.2 JavaScript Debugging in Firefox
The following instructions refer to version 76.0.1 of Firefox. This process may vary for future versions.
To do JavaScript debugging, you need to access the browser's "developer tools". You can do this in Firefox simply
by pressing "F12" or via the browser settings:
233
the editor was saved. In this example it is saved as "Main". So, for every saved JavaScript block, a separate file
would be created.
234
3.14.2.3.3 JavaScript Debugging in the Microsoft Internet Explorer
The following instructions refer to version 11 of the Microsoft Internet Explorer.
To do JavaScript debugging, you need to access the browser's "developer tools". You can do this in the Internet
Explorer simply by pressing "F12" or via the browser settings:
235
be created.
236
3.14.2.3.4 JavaScript Debugging in Microsoft Edge
The following instructions refer to version 81.0.416.77 of Microsoft Edge. This process may vary for future versions.
To do JavaScript debugging, you need to access the browser's "developer tools". You can do this in MS Edge simply
by pressing "F12" or via the browser settings:
237
be created.
238
3.14.2.3.5 JavaScript Debugging in Opera
The following instructions refer to version 68.0.3618.125 of Opera. This process may vary for future versions.
To do JavaScript debugging, you need to access the browser's "developer tools". In Opera, this is simply done by
using the key combination "Ctrl + Shift + i".
239
3.15 E-mail function

In QuickHMI, you have the option of sending automatic e-mails when, for example, variable values change, alarms
are triggered, or interacted with controls. To create and set up e-mails, click on “E-mail templates” in the Project
explorer.
Create a new e-mail (E-mail template).
First, name the e-mail under "Common" (Connection data) and set the “Cooldown”. Then enter the login data for
the SMTP server from which the e-mail is to be sent. A more detailed explanation of the *Cooldown (s) can be
found at the end of the “Sending e-mail by activating alarms” chapter.
240
Under "Message" you formulate the actual message with subject. At least one subject is necessary to send an e-
mail. For formatting the text (e.g. bold, italics, color etc.), you must activate HTML via checkbox. Then you can
format the text by using HMTL tags. It is important that if HTML is deactivated, the tags must also be removed
again, otherwise they will be written out as plain text.
Information:
If HTML is activated, HTML-typical, no "normal" line breaks via ENTER are recognized. For a line break please
use the tag "<br/>".
Then select the addresses under "Addressing" (from, to, CC, BCC). Several addresses are separated by a comma.
To check your entries, you can send a test message at any time.
If all entries have been made, confirm with "Add" to save the e-mail template. This template can now be used to
automatically send an e-mail when certain events occur. To do this, first a “Trigger” must be specified. An e-mail
can be sent on events of a control element (for example when a button is clicked), when a variable value is changed,
and when an alarm is activated.
241
3.15.1 Sending e-mail by control events
Select a control for which you want to send an email when it interacts. In this example a button is selected. Add a
desired click event in the "Settings" under "Action" and create a new action function.
A detailed description of the actions of controls can be found in the "Actions" chapter.
Use the command "SEND_EMAIL" and select the previously saved e-mail template.
Confirm the entries with the green Check Icon to save. After this, close the window.
Now, every time you click the button, you will receive an email, with the content you defined. This is the simplest
example of using email templates.
242
3.15.2 Sending e-mail by variable change
To have an e-mail sent when a variable value is changed, click on "E-mail" in the Project explorer. Here you select
the desired variable under "Triggers" by clicking the same named button.
In the opened "Action assignment", select the

"OnVariableChanged" event and choose a variable
whose value change is to be reacted to by sending an
e-mail. Then "Save" to continue.
As a last step "Save" the "EMail template".
If the value of the selected variable changes, an e-

mail will be sent with the content you defined.
By using appropriate placeholders (See the

“Placeholders” subchapter), information about the
changed variable can be attached to the mail.
243
3.15.3 Sending e-mail by activating alarms
To have an e-mail sent when an alarm condition changes, you must assign an e-mail template to the desired alarm.
To do this, go to the alarm settings when creating an alarm variable and select the template under "E-Mail". Then
click "Save" and "Add" to create the alarm variable. Of course, you can add the e-mail function to an already created
alarm variable by editing the variable.
More about alarm variables can be found in the "Adding alarm variables" chapter.
If an alarm is now activated, an e-mail will be sent with the content you defined.
By using appropriate placeholders (see "Placeholders" subchapter) information about the triggered alarm can be
added to the mail.
Information:
*Cooldown (s)
With the QuickHMI e-mail function, mails are sent automatically as described above. In extreme cases, this
would mean that if, for example, a variable changes 20 times per second, 20 mails are also sent per second.
To prevent this, a cooldown can be set. If "10" is entered here as an example, only one mail is sent every 10
seconds.
If further mail-triggering events occur within these 10 seconds, the sending of mails is blocked for this time.
But the information’s are not lost. They are temporarily stored and either written at the end of the mail as
a summary or attached as an attachment (From a size of 5 MB).
To determine where exactly the information should be placed as a summary within the mail, you can use
the placeholder "@cache". More about this in the "Placeholder: @cache" subchapter ".
The cooldown is only relevant for mails that are sent automatically. That is, for variable changes and when
alarms are triggered. When a control is triggered by the user, the mail is sent immediately. From this
moment on, the cooldown time for automatic mails starts from the beginning.
244
3.15.4 Placeholders
In QuickHMI you have the possibility to use placeholders for the e-mails. Placeholders are certain commands that
read a value or property, for example of a variable, and send this status as information in the e-mail. They ensure
that the contents of e-mails are automatically written, depending on the situation. Placeholders can be used both
in the subject of an e-mail and in the message text. There are several placeholders that can be used. They only work
if they are written within curly brackets.
3.15.4.1 Placeholder: @changedvariable
The placeholder “@changedvariable” is replaced when a variable value is changed, by all information of the
changing variable. However, this only works if the mail is sent due to a variable change, as described in the chapter
before. In other cases, this placeholder is not replaced, but written out as plain text.
* Received e-mail
245
3.15.4.2 Placeholder: @triggeredalarm
The placeholder “@triggeredalarm” will be replaced with all information of the alarm when the state of an alarm
changes. However, this only works if the mail is sent due to the state change of an alarm, as described in the above
chapter. In other cases, this placeholder is not replaced but written out as plain text.
* Received e-mail
246
3.15.4.3 Placeholder: @tag
This placeholder is especially useful to use in the e-mail subject. It will be replaced by a short description why the
e-mail was sent. These saves entering a new subject each time and it prevents the same default subject being used
all the time. So, the subject changes automatically, depending on the reason of the mail.
* Received e-mail
247
3.15.4.4 Placeholder for single values
As seen in the previous chapters, the placeholders “@changedvariable” and “@triggeredalarm” are replaced by
whole information blocks. Thus, it is unfavorable to use these placeholders in a continuous text. To avoid large
blocks of information and to be able to read out only individual information of the block, you can add a single value
to one of the placeholders explained.
For example, the placeholder "@changedvariable" is replaced by the information block consisting of "Name",
"Value", "Quality", "Message" and "Timestamp". Now it is possible to read individual information from this block.
For example, if you only want to have the name and value of the variable, write the following placeholders in the
e-mail:
 "@changedvariable.name" and "@changedvariable.value"
Again, "@changedvariable" placeholders are

only replaced when the variable is changed.
Otherwise, they will appear as plain text in the
e-mail. The same principle applies to
"@triggeredalarm" placeholders.
*
Received e-mail
248
Overview of the single values for "changedvariable" placeholders.
 @changedvariable.name
 @changedvariable.value
 @changedvariable.quality
 @changedvariable.message
 @changedvariable.timestamp
Overview of the single values for „@triggeredalarm” placeholders
 @triggeredalarm.name
 @triggeredalarm.type
 @triggeredalarm.is_active
 @triggeredalarm.message
 @triggeredalarm.begin
 @triggeredalarm.end
249
3.15.4.5 Placeholder for displaying variables
By using placeholders, the values of individual variables can also be read out and inserted into the e-mail. To use a
variable as a placeholder, you need the name of the variable as well as the name of the data source to which this
variable belongs. In this example we want to use the number of currently connected clients in an e-mail.
We find this value in the system variable "current_session_count". The data source name of the system data source
is "System".
Information:
Not all variables can be used in placeholders! Only global variables can be used.
Global variables are:
1. Variables from data sources that have been created by the user, i.e., you.
2. Internal variables that have been created as global.
3. The system variables "current_session_count", "active_alarm_count" and all data source status
variables.
No global variables are:
1. All system data source variables (except those mentioned above).

2. Internal variables that have been created as local.
250
Placeholders for variables consist of curly brackets into which an "@" + data source name + variable name is
written. Data source name and variable name are separated by a dot. So, in this case
@System.current_session_count.
* Received e-mail
251
The placeholder “@System.current_session_count” has been replaced with the value of the variable.
Incidentally, placeholders for variables work for control actions as well as for variable changes and triggered alarms.
If you make a mistake or write variables that do not exist, the placeholder is written out in plain text with the
addition that the variable was not found.
3.15.4.6 Placeholder: @cache
This placeholder refers to the possibility to set a cooldown time when creating a mail. It will be replaced by all
information that is created during the cooldown time. If this placeholder is missing, the information will be
written at the end of the mail or attached (From a size of 5 MB).
What is cooldown?
With the QuickHMI e-mail function, mails are sent automatically as described above. In extreme cases, this would
mean that if, for example, a variable changes 20 times per second, 20 mails are also sent per second. To prevent
this, a cooldown can be set. If "10" is entered here as an example, only one mail is sent every 10 seconds.
If further mail-triggering events occur within these 10 seconds, the sending of mails is blocked for this time. But
the information’s are not lost. They are temporarily stored and either written at the end of the mail as a summary
or attached as an attachment (From a size of 5 MB).
252
3.16 Translation texts

Adding translation texts
In this menu, within Project explorer, you can create the translations for different languages. This allows your
project to be used by an international team. To create a translation text, at least one language must be set up.
To create translation texts, click on “Translation texts” in the Project explorer.
After this, select “Add language”.
In the “Select language” window that opens, you can set the desired language.
Continue with “OK”.
Now you can use the following functions: “Add entry”, “Delete entry”, “Update”, or “Add language”.
253
3.17 Security
This is the center for user and rights management. Users can be created, assigned rights, and arranged into groups.
How to add users, groups, and rights, you will learn in the following sub-chapters.
3.17.1 Adding users
In the Project explorer, click on “User” in the Security section, to add new users.
Make sure the security system is activated; this is required in order to use the “User management” functions. To
do this, the checkbox must be activated. Now a new user can be created.
Create a new user in the “User properties” window that appears. Here, you can assign a password to the user. Click
“Save changes” and the “OK” to create the user. Now you can add additional users or edit existing users.
In addition, you can assign the user a "Default language" and a "Default view", to which the user is automatically
directed when they log in. You can choose from the different views you created in advance.
How to create views can be found in the "Add views" chapter.
The "Default language" is used from the translation texts.
254
“Save” your entries to create the new user.
Then, you can add another user or edit existing users.
3.17.2 Adding groups
Groups can be created here in which existing rights and users can be combined. To create and manage groups, click
“Groups” under “Security” in the Project explorer.
Then select “New group”.
255
In the “Group properties” window that then opens, first select a “Group name” in the “Common” tab and, if
necessary, a “Description”. The entries can be “Saved” at any time. It does not matter in which tab you save the
entries. All tabs are always saved.
In the “Rights” tab, all “Available rights” are listed on the right side of the window. You can assign these to the
created group. This is done by selecting one or more rights and clicking on the left arrow. Then they will be
transferred to “Added rights”. To remove the rights from the group again, select the rights to be removed and use
the right arrow.
256
Following exactly the same principle, you can assign previously created users to the created group or remove them
again. This is done in the “Members” tab of the group properties.
“Save” your entries to create the group.
257
To subsequently assign a group to a user, navigate to the “User properties” of the selected user and click on the
“Groups” tab. Via checkbox you can then select a previously created group to which the user should belong. (In this
example only one group is available, because only one group was created).
At this point you can also create a new group without having to go back to the “Group management”. From here,
you can immediately access the “Group properties” and save yourself this small detour. Here you proceed again as
described before.
258
3.17.3 Manage right
Here, new rights can be created, edited, or deleted. Created rights can be assigned to a group under “Groups” as
described above.
In the Project explorer, click on “Right” in the “Security” section, to manage rights.
Create a "New right" or edit an existing right.
In the “Right properties” window you can set your new permission or edit existing ones. Continue with “Save”.
259
3.18 Integration of media resources

Here image resources can be integrated, image control elements can be created, and audio resources can be
implemented.
How to implement image and audio resources, you will learn in the following sub-chapters.
3.18.1 Integrate image resources
Imported images can be used as control elements.
In the Project explorer, click on “Image resources” in the Media section, to add images.
In the “Master data image selection”, you can “Add images”.
260
Here you can find the file dialog box, using which you can access the path to your image files. Import the desired
images by selecting individual image files. You can select several image files by holding down the “CTRL key”.
Confirm the selection by clicking “Open”.
Make sure that image files can have a maximum size of 10 MB.
The images have been successfully imported and appear in the “Master data image selection” window. These
images can be deleted as needed. To do this, select one or more images and click “Delete images”. Once you have
selected the desired images, “Close” the window.
Information:
It is not possible to delete an image that is currently in use. Images that are in use are marked with a red
border.
261
3.18.1.1 Adding image controls
After you have imported the images via “Image resources”, they can then be used as image control elements.
In the Project explorer, click on “Image control” in the Media section, to create new image control elements.
In the “Image controls management”, you can generate a “New image control” by clicking on the button with that
name. You can also create several image control elements in sequence by clicking several times in a row.
262
In this example, three image control elements were created. A new image control element is initially created
without a name or assigned images. To assign a name and an image to a control element, first select the relevant
image control element.
The selected image control element will appear, maximized in the image control management while the others are
minimized on the left side of the window in a list. To edit, for instance, the “Unnamed (1)” image control element,
click on the “Maximize” icon” for the corresponding control element.
Once you have selected the control element, click “Change name”.
Change the name of the image control element and continue with “OK”.
263
Click “Select images” to open the “Image control - selection of images” window. Here, you can assign the images
previously imported using “Image resources” to the control element. To do this, pull the “Available images” via
Drag&Drop into the “Assigned of images”. You can also double assign the images, change their order, or pull them
into the “Recycle bin” to delete them. Once you have made the selection, “Close” the window.
When the image selection is complete, you will see a preview of the selection. Using the “Slider”, to switch between
the selected images. You will also see the numbers assigned to the images. You can perform this process with
additional image control elements.
Click “Close” to exit the image controls management.
264
You will find the image control elements you created in the “Pictures” control element group after leaving the
“Image controls management”. As with the other control elements, these can be pulled, via Drag&Drop, onto the
Editor desktop.
Once the control element is selected, go to “Settings”, to e.g. set which image the control element should
represent. The first image is always assigned the number “0”.
Using the “Slider” in the “Image controls management”, you can see which image is assigned to which number.
You can change this order in any way you like, as described above.
265
3.18.2 Integrate audio resources
You can implement audio files in QuickHMI.
For this, click in the Project explorer on “Audio resources” in the Media section.
In the open dialog, select the plus icon to load the desired audio files into the software.
Select the files and click "Open". Accepted formats are .wav and .mp3.
The files have been implemented in the software and can be used with control elements and alarm variables.
266
3.18.2.1 Audio recourses related to control elements and alarm variables
Audio recourses related to controls elements
Created audio resources can be used in with control elements. For example, a sound can play when you click a
button. To do this, select the control element (in this case, a button) and create a new click event by "Actions" in
the element settings.
Select the command "PLAY_AUDIO".
Then you determine which audio file is to be played when the button is clicked.
267
Audio recourses related to alarm variables
It is also useful to use sounds in conjunction with alarms. This requires only one click.
If you create a new alarm variable, you can already assign a tone to the variable in the create window.
268
Audio recourses in the browser runtime
If you run a project in the browser that contains audio resources, it may be that you first must activate the
authorization to play sounds in the browser settings. Due to some guidelines, the automatic playing of sounds in
the browser is prevented.
Sounds that are activated via the user are not blocked. For example, if the user pushes a button, which activate a
sound. The reason behind this is that when you open several websites, not all of them start playing sounds (music,
effects, etc.) at the same time.
But in the QuickHMI runtime mode, however, this is desired. Alarms with signal tones must be able to activate
themselves as soon as an alarm is triggered.
To give the browser permission to automatically play sounds, proceed as follows: -> The following example relates
to Google Chrome version 80.0.3987.106. With other browsers or future Google Chrome versions, the procedure
can differ from this example!
If a sound is to be played and the authorization has not yet been granted, the following message appears in the
browser: Now you can click on "Confirm" so that the sound can be played.
269
In order to your browser can generally play sounds without requesting authorization again, proceed as follows in
the browser settings:
Settings / Advanced / Site Settings / Sound / Mute sites that play sound --> activate
You can also decide directly which websites may and may not
allow the automatic playing of sounds. To do this, click on "Add"
and insert the relevant URL. Internet Explorer can currently only
play Mp3's.
270
3.19 Chart Manager

The chart manager is used to manage various chart configurations, which then can be displayed inside a chart
control element.
In the Project explorer, click on “Charts”.
How to create and edit new charts is explained in the sub-chapter “Adding and edit charts”.
3.19.1 Adding and edit charts
With the plus button in the toolbar of the chart manager, new chart configurations can be created, or existing
configurations can be edited, duplicated, or deleted. To do this, click on the created chart and select one of the
operations via the corresponding buttons. The same can be done by right-click on the created chart.
After clicking the button to create a new configuration, a new window will pop up. You will have to choose a chart
type first. This can be either a “Colum/Line Chart” or a “Pie chart”.
271
These are the settings common for both types:
 Name
Every chart configuration needs a unique name. Should you choose an already taken name an incrementing
number will be added.
 Legend
Determines if a legend is shown. If it is shown the position can be changed as well.
 Show title
Determines if the name of the chart configuration is shown above the chart.
272
 Show server downtimes

When this feature is selected, you can see when the server was offline. This area is shown in red.
 Disable animations
Disables the animations of the chart to conserve system resources.
 Toolbox
The toolbox offers some tools useful for using the chart. These tools can be switched on or off
independently:
 Data view
Shows the in the chart visualized data as plain text. Useful for copying data to Excel for
example since columns are already present.
 Restore
Restores zoom and pan.
 Save as image
Saves the current chart as a PNG file
 Reset data
Deletes existing records from the charts
273
3.19.1.1 Lines and bars
In the user interface for adding or editing line and bar charts you can see three columns. One column for X-Axis, Y-
Axis, and Data series, respectively. A button located above each column is used to add a new item to the list below.
These elements can be edited and deleted either via their context menu or by pressing the Delete key or double-
clicking
The graphic above shows the configuration of a simple graph representing the value of a single variable over
time.
274
3.19.1.1.1 X-Axis
For now, only a single x-axis is supported. Whether or not multiple x-axis are supported in the future is currently in
discussion.
There are three types of x-axis: Time, category and value. These are their common settings:
 Name
Each x-axis needs a name. Whether this name is shown in the chart later is determined by the checkbox
“Show” right next to the input field.
 Grid lines
Grid lines are lines originating from the corresponding axis. Grid lines help reading values of data points.
To hide grid lines the width can be set to 0.
 Color
The color of the axis line as well as its labels.
Time axis
A time axis displays values over the course of time.
The displayed range of a time axis can be changed. If and if so, how the range can be changed by the user is
determined in the tab “Zoom & Pan”.
The slider is a useful tool to quickly change the zoom level as well as the displayed range.
Instead of using the slider the mouse can also be used to change the displayed range. Different hot keys can be
selected for the zoom and pan features.
275
Category axis
A category axis is used to display bar charts.
Categories
To better understand what is meant by “categories” here a little demonstration:
In this example the categories are “Tank1”, “Tank2”, and “Tank3”. Each category has 2 values assigned to it
(pressure and heat).
Each category therefore can show multiple values.
Value axis
The value axis is the last supported type of x-axis. It is used to show the correlation between two independent
values. So, instead of showing the change of a value over the course of time this type can be used to show the
change of a value over the change of another value.
For example, the change of pressure over the change of height.
Other than other x-axis types the value axis can have a determined value range. For example, the temperature of
liquid water will (under normal conditions) never exceed 100° Celsius or fall below 0°C. So, it’d make sense to limit
the axis to these values.
By default, the range is dynamic and will change depending on the values displayed.
The zoom & pan features are the same as those for the time axis.
276
3.19.1.1.2 Y-Axis
 Name
Since a chart can have multiple y-axis it is necessary for every axis to have unique name. If a name is already
taken you will be notified when trying to save.
Whether this name is shown in the chart later is determined by the checkbox “Show” right next to the input
field.
 Position
Determines whether the axis is displayed to the left or the right of the chart.
 Range
Just like the x-axis (of type value) the y-axis can either have a dynamic or static range. By default, the range
is set to be dynamic.
 Color
The color of the axis line as well as its labels.
 Grid lines
Grid lines are lines originating from the corresponding axis. Grid lines help reading values of data points.
To hide grid lines the width can be set to 0.
 Zoom & Pan

For zoom and pan please refer to point “Time axis”.
277
3.19.1.1.3 Data series
The options available for data series depend on the selected x-axis type. So, please note the comments in the
documentation below describing which options are available for which types.
 Name
The name of a data series must be unique within a chart configuration. This name will be used in the legend.
 X-axis
Determines which x-axis to use for this data series.
 Value (only for x-axis of type „Value“)

Determines the variable which value will be used.
 Y-axis
Determines which y-axis to use for this data series.
 Value
Properties of the line can be changed under the line tab. Furthermore, there are options to limit the maximum
amount of data stored in a single series.
In the upper part there are options to change the “Width”, “Color” and “Type” of the line. Also, you can set whether
the area under the lines should be filled in or not. For this, use the relevant checkbox.
You have the option of having incorrect

values displayed. This can e.g., a missing
connection to the PLC or variable values
with bad quality.
To do this, activate the "Indicate"

checkbox and select a color. The
erroneous values then are displayed as a
line in the selected color.
278
The different types are illustrated here:
Step Smooth Normal /Straight
The data limit determines the maximum age of data points and/or the amount of all data points in this series. These
options can be used to limit the amount of data for a single series. This is useful since very large amounts of data
can affect the performance of the Viewer.
By default, there is a time limit set as well as a maximum amount. Whatever limit is reached first will lead to the
first data points being deleted. To disable this limitation use “0” as the limit.
In the lower part there are options to customize the “markers”. The size as well as the shape of markers can be
changed. To hide markers the size can be set to “0”.
The checkbox “Show values” determines whether the value of the corresponding data point is shown next to the
marker.
3.19.1.2 Pie chart
Pie charts are a lot simpler to configure. There is only one column on the user interface to add data areas. Every
data area represents a single value.
The following options are available for data areas:
 Name
The name must be unique within this chart configuration. This name will also be displayed in the legend.
 Value
 Color
Determines the color of the data area.
279
3.19.2 Chart control elements
The chart control element can be dragged and dropped on a page like every other control element.
The chart control element has a property called “ChartConfiguration”. This property is used to determine which
configuration to display on this control element.
3.19.3 Create and run a sample chart
To create a new chart, a data source with variable must be created in advance, which can be displayed in the chart.
After this, the new chart can be created by clicking on the "Chartmanager".
At first set a name for the chart. (In this example "Test".)
280
Set the values for the X-axis and continue with "OK".
Set the values for the Y-axis and continue with "OK".
Finally, under "Data series" in the "Common" tab, select the previously created data source with variable whose
values are to be accessed.
281
In the "Line" tab, you can set further specifications for the diagram. Set both the "Width", "Color" and "Type" of
the chart, as well as the size of the dots on the data lines ("Markers"). Also, you can set whether the area under the
lines should be filled in or not. For this, use the relevant checkbox.
In addition, you can set the "Time" and "Amount" of data for the "Live data limit". The live mode of the chart is the
mode in which the chart is updated every second. Because updating for large amounts of data would require
considerable resources every second, the data volume for live charts can be limited here.
When all entries have been set, continue with "OK" and close the "Chart manager".
In the "Project settings" you can also set, how many days the data should be saved and thus be visible. "Save" your
setting to continue.
282
Also helpful is the generation of a "Project ID".
Project ID:
Generating a project-dependent ID has the meaning that databases for saving the chart data no longer depend on
the saved project name, but on the generated "Project ID". So, the same data can be accessed in several projects
using the ID. (Previously, a new database was created for each new project.)
To do this, enter the "Project ID" of the project whose data is to be used and confirm with "Save". The reverse case
is also conceivable: If a project becomes "Save as", the “Project ID” is also included. By default, the same data
would be used as the basis for the charts, as for the old project.
If you want to start with the new project but with a fresh database, simply generate a new random "Project ID"
with the button "Generate".
283
To display the data in a chart, select the chart control element under "Controls" and drag and drop it onto the
editor desktop. In the "Properties" of this control element, assign the created "ChartConfiguration" "Test".
284
3.19.3.1 Run the chart in runtime mode
Start the runtime mode in the QuickHMI Viewer or in a browser of your choice.
Everything about the runtime mode, you will find in “Runtime mode” sub-chapter.
The runtime mode is executed, and the incoming data are displayed in real time in the chart.
285
Also, you can set which time period is displayed in the diagram. Click with the left mouse button on the diagram
and select the desired period.
Selection of the "Last 24 hours".
Set an individual time period too.
286
For an even better overview, you can "Show server downtimes". To do this, set the relevant check mark in the
advanced settings of the chart editing. It is also possible to disable the animations of the diagram to save system
resources.
The server downtimes are now displayed as a red area.
287
3.20 Recipe Manager

With the “Recipe Manager”, you can create and manage recipes, which can be used by selected users. They are
used to start several functions by one click.
In the Project explorer, click on “Recipe Manager”.
Information:
You can also start QHMI Recipe Manager as an application.
3.20.1 Create a new recipe
In the opened "recipe editor" you can create a new recipe. At first you can set the name. Continue with clicking on
the Green Cross icon for "Add recipes entry".
Specify the "Descriptions", "Variables" and their "Values".
Use the TAB key to move to the

next line.
288
3.20.2 User management
By clicking on the user icon, you will be taken directly to the user management. Here, you can determine which user
has access to created recipes.
The user "Administrator" is created automatically.
Information:
The administrator is assigned by default the login "admin" and the password "admin". To change the
password, click in the user's column "Administrator" and select "Change admin password ...".
Continue with "OK".
289
To create a new user, select "New user".
In addition, you can determine by the activation of the checkbox, to authorize the user only a readability. If all
information about the new user has been entered, "Apply" the data.
By clicking on the Red Cross icon, users can be removed.
Continue with "OK".
The user “Paul Smith” was added.
Select "save recipe ..." to complete the process.
To carry out the saving process, the user has to log in.
The recipe is saved as a .qre file and can be loaded in
the recipe management.
Recipes can then be provided in the QuickHMI

Runtime Manager and run via the QuickHMI Viewer.
By activating the checkbox, the client can´t change

values in the QuickHMI Viewer.
290
3.21 Runtime mode

The runtime mode is used to run and test the project created with the QuickHMI Editor.
3.21.1 Starting runtime mode
To run and test the application, click on "Runtime" in the menu. Here you can start the runtime in different modes.
You have the choice between "Web Viewer", "Desktop Viewer" and "Server only". The 3 runtime buttons are
available for this.
Web Viewer:
The visualization server starts and shows the user interface in a selected browser.
You can set with which browser installed on your system the project is displayed. The selected browser is displayed
as an image for the Web Viewer button.
291
Desktop Viewer:
The visualization server starts and shows the user interface in the QuickHMI Viewer desktop application.
Server only:
The visualization server starts without showing the use interface. You can connect to the server using any browser,
our QuickHMI Desktop Viewer or our QuickHMI Android App.
Ports:
In addition, you have the option to determine which initial zoom level is to be used and which ports are to be used.
You can also set the data compression between the server and the browser and set the maximal java heap size.
To do this, click on "Ports" in the “Runtime” menu.
A detailed description of the settings can be found in the "Project settings" sub-chapter.
Click on "Start" to run the runtime mode.
292
Simulation:
You can use the "Simulation" button to activate the data source simulation. Have random values of your variables
simulated or set them manually. In this window all created data sources appears and can be activated for the
simulation via the checkbox.
Data source simulation in the runtime mode:
If a data source is simulated, the data source

simulation starts in the runtime. You can see the
following: The name of the simulated data source,
the data source type, and the address of the data
source in abbreviated form. All variables with
which the data source interacts are listed here. In
the "Value" column, you can set the values
manually for simulation.
293
On-screen keyboard:
For devices without physical keyboards, it´s possible to show an on-screen keyboard as soon as an input field is
market. Here you can set the layout to be used for this keyboard.
The layout can also be changed directly during runtime. This is done by using a parameter in the URL. How this
works you can find out in the "On-screen keyboard" chapter of this documentation.
294
3.21.2 Loading screen
Directly after starting the runtime mode, a loading window opens with various functions. It shows the status of the
ports and the status of the data sources that were created.
Components are loading:
Components are active:
You have the option to click on the green arrow to go to the

project settings for the runtime. Changes will activate when
the runtime is restarted!
The port is already occupied, or an error occurs:
You have the option to click on the red X to return to the data
source settings in order to make changes here. Changes will
activate when the runtime is restarted!
Error messages are also displayed here directly.
295
The runtime mode starts automatically when all components have been loaded. You can also access the log entries
in the loading window. For stop the runtime mode, use the “Stop” button.
For example, if you start the runtime mode in the browser, it will open automatically when all components are
loaded. You can also open the browser by clicking directly on the active port or copying the web address by clicking
the Document Icon.
This is useful if you want to open the project in a browser other than the default one. Here the address can be
simply inserted, and the project is started.
296
3.22 Export the project for the server

Export project file
To configure a project with the QuickHMI Runtime Manager (Part of the QuickHMI Standalone Runtime) on a
server, the project file must be exported.
Click on "Start" in the QuickHMI Editor and click on "Server Export".
Select the save location and a name for the .qexp file and click Save.
Information:
If you have created own JDBC drivers, they are automatically exported and imported into the server. When
using the security system, users are automatically exported. If users already exist in the Runtime Manager,
in import process will asked if they should be overwritten or not.
297
3.23 Tips & Tricks

Shortcuts
The following shortcuts make the visualization in QuickHMI easier.
Shortcut Function
Crt + N New project
Crt + O Open project
Crt + S Save project
Crt + Shift + S Save as
Crt + P Print displayed page
Crt + C Copy selected elements
Crt + X Cut out selected elements
Crt + V Paste elements
Crt + A Selected all elements
Arrow Key (Left) Move selected element to the left
Arrow Key (Right) Move selected element to the right
Arrow Key (Up) Move selected element to the up
Arrow Key (Down) Move selected element to the down
Delete Delete selected element
F1 Open the online help
F7 Starting runtime
F8 Closing runtime
Crt + Mouse wheel up Zoom in
Crt + Mouse wheel down Zoom out
Crt + Mouse wheel up (by selected element) Rotation + 10°
Crt + Mouse wheel down (by selected element) Rotation - 10°
Crt + Shift + Mouse wheel up (by selected element) Rotation + 1°
Crt + Shift + Mouse wheel down (by selected element) Rotation - 1°
298
4 QuickHMI Standalone Runtime

In the following chapters, you will learn how to set up the server with the QuickHMI Runtime Manager (Part of the
QuickHMI Standalone Runtime)
and all about using the QuickHMI Server (Part of the QuickHMI Standalone Runtime) on the Raspberry Pi.
4.1 Setting up the server with the QuickHMI Runtime Manager

The QuickHMI Runtime Manager (Part of the QuickHMI Standalone Runtime)
You must configure the project on a server to make it accessible by QuickHMI Viewer clients. For this you’ll need
the .qexp file of your project. This can be exported from the QuickHMI Editor. The configuration of a project is done
with the QuickHMI Runtime Manager.
How to export a .qexp file is explained in the "Export the project for the server" chapter.
4.1.1 Runtime Manager - Start page
The QuickHMI Runtime Manager is divided into the regions "Server" and "Project".
299
Section "Server" / Licenses and certificates
In the "Server" section, you have the option to import your own certificates. Licenses, especially for the QuickHMI
Runtime Manager, no longer have to be imported. There is only ONE Editor license that applies to everything.
Therefore, no extra runtime license is needed anymore, and the license tab is greyed out and can no longer be
selected.
Your license as a hardware
You have the option to receive your license as a Dongle (a copy-protected USB stick). When the Dongle is connected
to the PC or server, the license is automatically activated. Until the Dongle is removed again.
Adding certificates
In the "Certificates" region, you can "Select" your own certificates. Standard certificates are included with the
software.
300
4.1.2 Runtime Manager - Configure the project
In the "project" region of the QuickHMI Runtime Manager projects can be configured and start their service. In
addition, users and recipes can be managed. If you are in the "Project" area, you can configure a project created
with the QuickHMI Editor in the "Info" tab.
To do this, click on "Configure project" and select the previously exported qexp. File.
The import was successful.

Now you can "Start" the server.
The service is running and can be stopped at any time. So, your project has been successfully set up and can be
executed with the QuickHMI Viewer.
A detailed description can be found in the “QuickHMI Viewer” sub-chapter.
301
If the service is started, any errors that occur in the data sources are displayed. You can view these in detail by
clicking on the warning symbol.
If the configured project and the QuickHMI Runtime Manager have a different version, a corresponding info will
show. This usually does not affect the function but should be corrected by a software update.
302
4.1.3 Runtime Manager - User management
If you have created users in your project, you can access the user management directly.
Double-click on a “user” to edit their user data. Assign a new password to the user and set the maximum number
of incorrect login attempts. "Save" to continue.
303
4.1.4 Runtime Manager - Recipe management
"Recipes" gives you the possibility to select recipes which were created in advance. Click “Browse” and navigate to
the location where the recipe is saved.
304
4.1.5 Runtime Manager - Settings
Here you get to the settings and have the following options:
Ports:
Set the ports over which your project should be accessible. Multiple ports must be separated by semicolons.
Compression:
Data sent between server and client, can be compressed to improve transfer speed. How the data is compressed,
is set here. The performance depends on the compression.
305
Java:
The Java maximal heap size determines how much memory the JVM (Java Virtual Machine), and therefore our
server, can allocate. Given too much memory the server might don´t start at all. Given to less it might later.
Java settings need only be changed if recommended by the software. Otherwise usually no changes need to be
made.
How much memory is needed mainly depends on the project size. We recommend to only these values with
caution.
306
4.1.6 Runtime Manager - Data sources
Here you will find all data sources of the project. You can edit these at any time. Change the IP, as well as the rack
and slot values. When you finish, click on "Refresh".
For the changes to take effect, the server must be restarted.
307
4.1.7 Runtime Manager - Help
Here you will find information about the current version of the QuickHMI Runtime Manager, contact details and
support.
Click on “Help” / “Info”.
If you have any questions, use our free support.
 Log files
Log messages from the editor are logged in the designated “messages” window.
The QuickHMI Server and the QuickHMI Runtime Manager are logging to their respective files which are
located in the following directories:
Windows:
 Server: %PROGRAMDATA%\QuickHMI\QuickHMI Server Gazelle\logs\server

 RuntimeManager: %PROGRAMDATA%\QuickHMI\QuickHMI Server Gazelle\logs\rm
Linux:
 Server: /usr/share/QuickHMI/QuickHMI Server Gazelle/logs/server

 RuntimeManager: /usr/share/QuickHMI/QuickHMI Server Gazelle/logs/rm
308
4.2 Installing the QuickHMI Runtime on Linux-Systems

A ready-made image (8GB) is available for download for use on a Raspberry Pi. This image is already set up with the
QuickHMI Runtime and access options via SSH and VNC.
You can find the download for the image in our download section at
https://www.quickhmi.com/download.html
The image is delivered with the following standard login information for theuser "pi":
User: pi
Password: raspberry
Of course, you can also perform the manual installation on a Raspberry as described below.
The installation of the QuickHMI - Server on a Linux distribution is done via the terminal. Please note the system
requirements for Linux! Open a terminal or connect to your Linux system via SSH access.
The commands to be executed may differ from distribution to distribution. The commands in this manual are based
on Linux Ubuntu.
1. Install an openJDK runtime environment. Runtime environments from version 11 on are supported.
sudo apt-get install openjdk-11-jre
2. If you want to use the graphical runtime manager, install openjfx. Otherwise, you can skip this step.
sudo apt-get install openjfx
3. Create a new user quickhmi with the password indi. This user will be used to start the QuickHMI Server.
username="quickhmi"
password="indi"
pass=$(perl -e 'print crypt($ARGV[0], "password")' $password)
sudo useradd -m -p $pass $username
4. Change to directory „/home/quickhmi“.

cd /home/quickhmi
309
5. Download the QuickHMI Server package. Instead of using the wget command, you can of course
download the file on another computer first, and then copy it into the current directory
(/home/quickhmi).
sudo wget https://www.quickhmi.de/linux/gazelle/QuickHMIServer.tar
6. Unpack the QuickHMI Server package to /home/quickhmi

sudo tar -xvf QuickHMIServer.tar
You should now find the following folder structure: /home/quickhmi/QuickHMIServer
7. Delete the QuickHMI Server package
sudo rm QuickHMIServer.tar
8. Set the user quickhmi as owner of the folder QuickHMIServer.

sudo chown quickhmi QuickHMIServer
9. Create a symbolic link to the file /home/quickhmi/QuickHMIServer/qhmiRM.sh in /usr/bin/qhmiRM.
sudo ln -s /home/quickhmi/QuickHMIServer/qhmiRM.sh /usr/bin/qhmiRM
10. Copy the folder /home/quickhmi/QuickHMIServer/usr/ to /usr/.

The cp -a command copies the folder with all its contents.
Important for this command is the / after specifying the source directory!
sudo cp -a QuickHMIServer/usr/. /usr/
11. You can now delete the folder /home/quickhmi/QuickHMIServer/usr. It is no longer needed here.
sudo rm -rf QuickHMIServer/usr
310
12. Copy the folder /home/quickhmi/QuickHMIServer/etc/ to /etc/.

The cp -a command copies the folder with all its contents.
Important for this command is the / after specifying the source directory!
sudo cp -a QuickHMIServer/etc/. /etc/
13. You can now delete the order /home/quickhmi/QuickHMIServer/etc. It is no longer needed here.
sudo rm -rf QuickHMIServer/etc
And with that the installation is completed.
For example, enter sudo qhmiRM to get a list of possible commands.
311
5 QuickHMI Viewer
The QuickHMI Viewer allows you to view and simulate the projects configured in the QuickHMI Runtime Manager
(Part of the QuickHMI Standalone Runtime) to check their functions. Projects can be viewed using the QuickHMI
Desktop Viewer, the QuickHMI Android App, or in the browser.
5.1 Desktop Viewer

With the QuickHMI Desktop Viewer, you can execute the projects configured in the QuickHMI Runtime Manager.
The QuickHMI Viewer as an Open Source Project.
The QuickHMI Viewer is now available to you as an open source project and can be freely adapted to your
corporate design or integrated into your existing software.
Graphic: Copyright © Indi.An Systems GmbH
312
5.1.1 Desktop Viewer - Start page
After starting the QuickHMI Desktop Viewer you are on the home page, from which you can execute basic
functions.
These include:
 Create a new connection
 Open a connection
 Quick access to the most recently opened connections
 Opening the FAQ
 Submit suggestions for optimization
 Displays contact information’s
313
5.1.2 Desktop Viewer - Main menu
The main menu offers you quick access to the basic program and project functions.
File
Here you will find the settings for selecting a language as well as determining the update behavior. After changing
the language, the QuickHMI Viewer has to be restarted. Now it effectively changed.
Also, here you can close the QuickHMI Viewer.
Help
By clicking on “Help” / “Info”, you can display information on the QuickHMI version you are using. You can also
contact us here. You can exit the “Info” by clicking on “OK” or closing the window.
314
5.1.3 Desktop Viewer - Start project
To open a project, a connection to an already configured project must be established.
Start a new connection
To open a new connection, click on “New connection”.
The window “New connection” opens.
Now you can determine the name, the host, and the desired port.
Here you decide whether the layout of the

on-screen keyboard should be selected
according to the project settings, or you
select your desired layout directly here.
315
5.1.4 Desktop Viewer - Open project
To open an already established connection, click on “Open connection”.
In the window that then opens, you have the option of choosing between the existing connections.
Confirm your selection by pressing the “OK” button.
In addition, recently opened connections appear on the home page for quick access.
If you hover the mouse over the displayed connections, icons will appear via which you can edit or remove the
connection.
316
5.1.5 Desktop Viewer - Executing the runtime
Now you can execute and visualize the actions you have assigned to the control elements. To exit the runtime
mode, stop the application as described in the "Loading screen" chapter.
317
1 2 3 4
1. Shows the current status.
2. Shows the logged in user.
3. Here you have the option of navigating to views with just one click, which you previously created in the
“Quick HMI Editor”. With the arrows you can go back one step before and one step.
4. Zoom on complete page = Displays the complete page with all elements.
318
5 6 7 8
5. Here you activate the on-screen keyboard. For more information, see the "Starting runtime mode" and
"Web Viewer - On-screen keyboard" chapters in this documentation.
6. Here you will find the log entries that you can show and hide. These can be messages of any kind.
7. In case of incoming alarms, you can open and view the QuickHMI Alarm Centre here. In addition, you have
the option to download the alarm list as an Excel file via the "CSV" button. You can find this button in the
upper right corner of the alarm center.
8. Here you have the possibility to change the display language.
Scroll & Zoom
To zoom, you can use the slider in the lower left corner or by holding CRTL and turning the wheel on the mouse.
The zoom level is displayed in the lower left corner.
To move the screen, move the image with the left mouse button while holding down the Ctrl key.
319
5.1.6 Desktop Viewer - Start parameters
You have the option of starting the Desktop Viewer with the following start parameters:
 „-locahost“
The viewer automatically connects to the localhost at startup (127.0.0.1).
 „-address=127.0.0.1“ (Any address)

With the parameter "address" the Viewer can automatically connect to any address at startup. In this
example, 127.0.0.1 (equivalent to -localhost).
 „-port=1234“ (Any port)

With the parameter "port" a port different from the standard (6064 = default port / 6063 = port for
community edition) can be specified. The port 1234 is just an example.
 „-ssl“
If this parameter is given at the start, the connection is established automatically secured seted up.
 „-connection=Name" (A name that already exists as a connection)

With the parameter "connection", the connection to an already established connection can be made
automatically when the Viewer is started.
 „-machinemode=Password“ (Any password)

With the parameter "machinemode" the Viewer can be started in the machine mode. In this the Viewer is
automatically active in full screen mode, which can´t be left. Also close the Viewer with Alt + F4 or Alt + Tab
or similar is then no longer possible.
The parameter "machinemode" must be given a password. (In the example above "Password"). Only by
entering this password, the machine mode can be stopped. The password does not have to be entered in
any text field. It can be entered in each form.
To start the Viewer with parameters you must do the following:
 Windows
Create a shortcut to the QHMIViewer.exe. Open the properties of this shortcut (Right click -> Properties).
In the input field „Target“, you can see the path to the exe file. After this path you can add the parameters
described above separated by whitespaces.
 Linux
Depending on the desktop environment, creating a shortcut will be different. After creating the link, expand
the command at the end (after "..qhmi_viewer.jar") by the desired parameters.
320
5.1.7 Installing the QuickHMI Viewer on Linux-Systems
The installation of the QuickHMI Viewer on a Linux distribution is done via the terminal. Please note the system
requirements for Linux!
Open a terminal or connect to your Linux system via SSH access.
The commands to be executed may differ from distribution to distribution. The commands in this manual are based
on Linux Ubuntu.
1. Install an openJDK runtime environment. Runtime environments from version 11 on are supported.
sudo apt-get install openjdk-11-jre
2. Install openjfx.
sudo apt-get install openjfx
3. Change into a directory where you want to install the QuickHMIViewer.
4. Download the QuickHMI Viewer package. Instead of using the wget command, you can of course
download the file on another computer first, and then copy it into the current directory
(/home/quickhmi).
sudo wget https://www.quickhmi.de/linux/gazelle/QuickHMIViewer.tar
5. Unpack the QuickHMI Viewer package.
sudo tar -xvf QuickHMIViewer.tar
6. Delete the QuickHMI Viewer package.
sudo rm QuickHMIViewer.tar
And with that the installation is completed.
For example, enter ./qhmiViewer.sh -r to get a list of possible commands.
If you want to make the command qhmiViewer directly executable from any directory, create a symbolic link to the
file qhmiViewer.sh in the directory /usr/bin/.
321
5.2 Web Viewer

With the QuickHMI Web Viewer, you can start your projects even faster and more conveniently. This ensures even
more mass compatibility and protects your resources. Prerequisites are only the low performance specifications
which required for a web browser. A separate program installation is no longer necessary.
Starting runtime in the browser
Select in the “Runtime” menu “Web Viewer” as a runtime mode. Now you can determine which browser on your
system will be started to run the application. You can also open the application in all browsers.
Click “Start”.
The project will open in a browser of your choice. Supported browsers are currently Firefox, Chrome, Opera,
Microsoft Internet Explorer, and Microsoft Edge.
The project view of the Web Viewer is identical to the project view of the Desktop Viewer.
322
Access to the published visualization
Start your browser and enter the address of your server in the address bar, with the information you have set:
HTTPS - Connection example:
 https://YourServerIpOrHostname:Port
HTTP - Connection example:
 http://YourServerIpOrHostname:Port
5.2.1 Web Viewer - Executing the runtime
The Java application will be started and will run in runtime mode.
Now you can execute and visualize the actions you have assigned to the control elements. To exit the runtime
mode, stop the application as described in the "Loading screen" chapter.
The user interface of the Web Viewer is identical to that of the Desktop Viewer.
For details see the chapter "Desktop Viewer - Executing the runtime".
323
Information:
If you use the QuickHMI Viewer as a runtime mode and close it again, the runtime will also be closed
automatically. By the Web Viewer, the Runtime must be stopped manually. The runtime mode is only
available for checking the development and ends after 30 minutes automatically.
5.2.2 Web Viewer - On-screen keyboard
To activate the on-screen keyboard, use the button for the on-screen keyboard as shown in the chapter "Web
Viewer - Executing the runtime" chapter. Alternatively, you can also activate them using the parameter in the URL.
https://indi_laptop_user:6062/?onscreenkeyboard=qwertz
A new parameter is initiated with the "?". This is entered after the URL (separated from the URL with a "/"). The
parameter "onscreenkeyboard", which is entered after the "?", causes the runtime to be started with the activate
on-screen keyboard. Depending on the country and language, you can enter the relevant keyboard layout.
You can also change the layout directly in the runtime menu of the QuickHMI Editor. For information on how to do
this, see the section "Starting runtime mode" in this documentation.
324
A list of all keyboard layouts:
 alpha
 qwerty
 international
 colemak
 dvorak
 ms-Albanian
 ms-Arabic (101)
 ms-Arabic (102)
 ms-Arabic (102) AZERTY
 ms-Armenian Eastern
 ms-Armenian Western
 ms-Assamese-INSCRIPT
 ms-Azeri Cyrillic
 ms-Azeri Latin
 ms-Bashkir
 ms-Bosnian (Cyrillic)
 ms-Belarusian
 ms-Belgian (Comma)
 ms-Belgian French
 ms-Bengali
 ms-Bengali - INSCRIPT (Legacy)
 ms-Bulgarian (Phonetic Traditional)
 ms-Bulgarian (Phonetic)
 ms-Bulgarian (Typewriter)
 ms-Canadian French
 ms-Canadian French (Legacy)
 ms-Canadian Multilingual Standard
 ms-Chinese Bopomofo IME
 ms-Chinese ChaJei IME
 ms-Czechms-Czech (QWERTY)
 ms-Czech Programmers
 ms-Danishms-Devanagari - INSCRIPT
 ms-Divehi Phonetic
 ms-Divehi Typewriter
 ms-Dutchms-Estonian
 ms-Faroese
 ms-Finnish
 ms-French
 ms-Gaelic
 ms-Georgian
 ms-Georgian (Ergonomic)
 ms-Georgian (QWERTY)
 ms-Germanms-German (IBM)
 ms-Greek
 ms-Greek (220)
 ms-Greek (220) Latin
 ms-Greek (319)
 ms-Greek (319) Latin
 ms-Greek Latin
 ms-Greek Polytonic
325
 ms-Greenlandic
 ms-Gujarati
 ms-Hausa
 ms-Hebrew
 ms-Hindi Traditional
 ms-Hungarian
 ms-Hungarian 101-key
 ms-Icelandic
 ms-Igbo
 ms-Inuktitut - Latin
 ms-Inuktitut - Naqittaut
 ms-Irish
 ms-Italian
 ms-Italian (142)
 ms-Japanese Hiragana
 ms-Kannada
 ms-Kazakh
 ms-Korean
 ms-Kyrgyz Cyrillic
 ms-Lao
 ms-Latin American
 ms-Latvian
 ms-Latvian (QWERTY)
 ms-Lithuanian
 ms-Lithuanian IBM
 ms-Lithuanian Standard
 ms-Luxembourgish
 ms-Macedonian (FYROM)
 ms-Macedonian (FYROM) - Standard
 ms-Malayalam
 ms-Maltese 47-Key
 ms-Maltese 48-Key
 ms-Maori
 ms-Marathi
 ms-Mongolian Cyrillic
 ms-Mongolian (Mongolian Script)
 ms-Nepali
 ms-Norwegian
 ms-Norwegian with Sami
 ms-Oriya
 ms-Pashto (Afghanistan)
 ms-Persian
 ms-Polish (214)
 ms-Polish (Programmers)
 ms-Portuguese
 ms-Portuguese (Brazilian ABNT)
 ms-Punjabi
 ms-Romanian (Legacy)
 ms-Romanian (Programmers)
 ms-Romanian (Standard)
 ms-Russian
 ms-Russian (Typewriter)
326
 ms-Sami Extended Finland-Sweden

 ms-Sami Extended Norway
 ms-Serbian (Latin)
 ms-Serbian (Cyrillic)
 ms-Setswana
 ms-Setswana (Sesotho sa Leboa)
 ms-Sinhala
 ms-Sinhala - Wij 9
 ms-Slovak
 ms-Slovak (QWERTY)
 ms-Slovenian
 ms-Sorbian Standard
 ms-Sorbian Extended
 ms-Sorbian Standard (Legacy)
 ms-Spanish
 ms-Spanish Variation
 ms-Swedish with Sami
 ms-Swedish
 ms-Swiss German
 ms-Syriac
 ms-Syriac Phonetic
 ms-Tajik
 ms-Tamil
 ms-Tatar
 ms-Telugu
 ms-Thai Kedmanee
 ms-Thai Kedmanee (non-ShiftLock)
 ms-Thai Pattachote
 ms-Thai Pattachote (non-ShiftLock)
 ms-Tibetan (PRC)
 ms-Turkish F
 ms-Turkish Q
 ms-Turkmen
 ms-Ukrainian
 ms-Ukrainian (Enhanced)
 ms-United Kingdom
 ms-United Kingdom Extended
 ms-Urdu
 ms-US-Dvorak
 ms-US-Dvorak for left hand
 ms-US-Dvorak for right hand
 ms-US English (Latin)
 ms-US English (IBM Arabic 238_L)
 ms-US-International
 ms-Uyghur
 ms-Uyghur (Legacy)
 ms-Uzbek Cyrillic
 ms-Vietnamese
 ms-Wolof
 ms-Yakut
 ms-Yoruba
327
5.3 QuickHMI Android App
With the QuickHMI Android App, you can run the projects configured in the QuickHMI Runtime Manager. Go to
the Google Play Store and download the QuickHMI Android App.
* App pictures
328
Android App start page
On starting the app, you will find yourself on the home page from which you can execute basic functions.
These include:
 Open existing connections
 Create new connections
 Edit and delete existing connections

The context menu for these options opens when you click and hold (long click) on a connection.
329
5.3.1 Android App - Open a new connection
To open a new connection, use the Blue Cross icon. The mask for entering a new connection open.
The standard port is automatically stored in the mask. This usually does not have to be changed. Unless different
projects are running on the device at the same time.
Under "Host" first select the host (private ID) on which the project was configured. The name of the connection is
the same as the host name by default. However, the name can be changed individually. To do this, write the host
name directly in the "Name" section.
330
Furthermore, you have the option of activating SSL encryption for the connection you have created. Use the
checkbox. The same applies to the option to let the created connection open automatically when starting the app.
If all settings have been made, "connect".
331
5.3.2 Android App - Executing the runtime
In order to connect to the project with the QuickHMI Android App, the interface must first be activated. This can
be done either in the QuickHMI Editor under "Runtime" or in the QuickHMI Runtime Manager.
The app connects to the project and you have following options.
Scroll & Zoom
Within a project, you can navigate by manually swiping the screen.
Fast switch to previously created views
332
View the full page
Open the alarm center by clicking on the bell and get a detailed overview of all alarms.
Open the overview of the log entries by clicking on the corresponding icon and get a detailed overview of all log
entries.
Headers and Footers
If your project has headers and footers, they can be shown/hidden by clicking the buttons on the upper and lower
edges of the screen.
Information:
If you leave the app when a project is open, it will continue in the background. So, you remain logged in and
informed by alarm notification. This also means that you are still logged in to the server and occupy a slot.
(Note maximum number of clients) If you leave the project via the back button and leave the app from the
main menu, you will be logged out and the slot on the server will be free.
333
6 Overview
6.1 System requirements for QuickHMI
Hardware system requirements
Generally, it should be either modern, commercially available computer hardware.

The following list gives an overview of the recommended equipment:
QuickHMI Editor:
 CPU: at least 1.6 GHz or higher with 64-bit

 RAM: at least 2 GB, recommended 4-8GB
 Network: 100 Mbps
 Graphics: 3D-capable graphics chip with DirectX 9.0 support.
A 3D-capable graphics card with its own 512 MB graphics memory is recommended.
QuickHMI Standalone Runtime

 Raspberry Pi: Execution of the software on the Raspberry Pi from version 3 possible
QuickHMI Viewer or execution in the browser:

 Graphics: 3D-capable graphics chip
 Raspberry Pi: Execution of the software on the Raspberry Pi from version 3 possible

334
Operating systems
QuickHMI Editor:
The QuickHMI Editor is executable under Windows 7 or Windows Server 2008 R2 or higher. The .NET Framework
4.5.2 is required for the execution. If this is not available, you will be informed during the setup and you will continue
to be given the option of an installation. Depending on the operating system, it may be necessary to activate the
.Net framework 3.5 before installing it under Windows. must be done manually. In this case, you will receive a
message from the setup.
QuickHMI Standalone Runtime and QuickHMI Viewer:
The QuickHMI Standalone Runtime and the QuickHMI Viewer work on Windows and Linux, if the Java OpenJRE 12
is supported by the operating system. Furthermore, there is an app available for Android, which can be executed
from version 4.4 (Kitkat). For the execution of the QuickHMI Standalone Runtime and the QuickHMI Viewer
requires Java OpenJRE 12 or later.
Execution by browser:
The system can be invoked by all operating systems that provide an HTML5-capable browser. The following
browsers are tested and released for the compatibility with QuickHMI:
 Chrome version 54 or higher
 Mozilla Firefox version 46 or higher
 Opera version 41 or higher
The use of other browsers may be limited, but not recommended. The browser should be installed in the newest
possible version and kept up to date.
335
6.2 Connection to PLC and devices

What type of PLC and devices can I connect with QuickHMI?
 Siemens S7 controllers (200, 300, 400, 1200, 1500 series and SoftSPS WinAC RTX), Logo!0BA7 and
Logo!0BA8 and CPU´s of other manufacturers (eg VIPA 100V / 200V / 300V / 300S)
 OPC UA interface
 TWINCAT2 from version 2.1 and TWINCAT3 is supported *1)
 MODBUS TCP, RTU, RTU over TCP or ASCCI
 Allen-Bradley “Control Logix” or “Compact Logix” PLCs via the Ethernet/IP protocol
 KNX/EIB
 MQTT-Protocol
 SQL databases using JDBC
 Files from the file system with the file system data source
 Native migration of additional protocols is planned.
*1) TWINCAT data sources are not executable under Linux. If these are to be executable under Linux, the use of OPC UA data
sources is recommended.
336
6.3 Overview of the functions

 Resource-saving server-client architecture
 Graphical operations are performed within the GPU of the graphics card, and relieve the computer CPU
 Central configuration tool for parameterizing the runtime environment
 SVG Control Manager (Visualization of own SVG control elements)
 Creating variables in text view
 Email functionality
 Database queries
 Status variables
 Integration of your own corporate design
 On-the-fly switching between design and runtime modes
 User and group management
 Parameterizable translation texts
 Integrated alarm reporting system
 Action, rule, recipe and resource management
 Integration of audio files
 Integration of own graphics
 Zoom able masks and controls (Over 2000 graphics)
 Low administration effort due to central project location (The project does not have to be installed on
clients, data is transferred from the server when connecting)
 Secure communication between server and clients due to SSL encryption
 The QuickHMI Viewer is available as an open-source project
 Infinite expansion capabilities by running custom HTML or JavaScript code (HTML and JavaScript manager)
 Display of trend data with the chart manager
 Easy to use step-by-step documentations
337
6.4 Configuration in 3 steps
Step 1 - Create a project file with the editor
Illustrate technical processes using the QuickHMI Editor. All data and functions are provided in a .qexp file for the
server.
Editor Runtime Viewer | App
Step 2 - Configure the project file on the system’s server
Set up the project file created in the editor on the system's server. This is done using the QuickHMI Runtime
Manager (Part of the QuickHMI Standalone Runtime).
Step 3 - Visualize processes with the viewer & app
View and manage all your system’s processes with the QuickHMI Viewer, Web Viewer, and the QuickHMI Android
App.
338
7 Do you have any questions?

If you have questions about our product QuickHMI, please contact us.
Of course, for free!
0421 - 98 97 03 - 30
info@indi-systems.de
QuickHMI.com
We will process your request promptly or respond to you directly.
339

Manual Qhmi

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual Qhmi

Uploaded by

Copyright:

Available Formats

User Manual

Table of contents .......................................................................................................................................................... 2

3.12.1 Creating database connections ..........................................................................................................97

3.15.4.2 Placeholder: @triggeredalarm .................................................................................................246

5.2 Web Viewer ..............................................................................................................................................322

This QuickHMI documentation is copyright protected.

or transcribed or translated into another language or computer language in any form.

QuickHMI is a registered trademark of Indi.An Systems GmbH.

Copyright © 2021 Indi.An Systems GmbH.

2 QuickHMI Gazelle - That´s new!

 The QuickHMI E-Mail-Function

 Webservice data sources / Webservice variables

 New interface design and darkmode

QuickHMI | Your software for data and machine visualization.

3.1.1 Request a test license

Enter your login details and click on "LOGIN".

To request a trial license, click on "Request trial".

The trial license will be sent to you within 5 minutes by e-mail.

Compatibility of the license models

3.1.2 Activation of licenses

Automatic license activation

Only your hardware ID and license will be transferred.

Click "Yes" to activate your license automatically.

The license was activated successfully.

Manual license activation

3.2 Editor start page

 Start a new project

 Open an existing project

3.3 Creating a new project

You can also create a header and footer here.

3.3.1 Header and footer

Click "OK" to continue.

3.4 Open project

3.5 Editor user interface

1. Control elements with search function

3. Editor desktop and display area

Start the runtime in the mode, which you have selected in

For each window, you can set the properties.

In addition to properties such as "Dockable", you can also detach the

These operations apply to all windows of the editor's user interface.

3.6 Editor main menu

QuickHMI Gazelle is backward compatible with projects from QuickHMI Falcon.

 Recently opened projects

If you click on "Edit”, you can perform the following operations:

 View Manager / Page properties

 Zoom & Pan

Copy the license ID

To change or deactivate licenses, the opened project must first be closed.

Save & Load

Here you can save the created layout to reload it later.

Factory settings (standard layout)

 Server: %PROGRAMDATA%\QuickHMI\QuickHMI Server Gazelle\logs\server

 Server: /usr/share/QuickHMI/QuickHMI Server Gazelle/logs/server

3.7 Edit Page

3.7.1 Changing page size

Confirm with "OK".

* A new page size has been defined.

Before change size After change size

3.7.2 Adding views

This works with the QuickHMI View Manager.

3.7.3 Add a new page / Header & footer

Add a new page

To add new pages, click “Add page” in Project explorer.

Then proceed as described in the "Creating a new project" chapter.