Manual Qhmi

User manual
QuickHMI Software
Modern SCADA/HMI visualization
Table of contents
New functions of the current version
QuickHMI Editor
Request and activate licenses
Create and edit a new project
User interface
Using control elements
View manager
Adding database connections
Adding data sources
Adding variables
External logging
JavaScript & HTML
Translation texts
User, group and right management
Integration of medias
Chart manager
Recipe management
Runtime mode
Standalone Runtime
QuickHMI Viewer
QuickHMI Android App
Installing on Linux systems
System requirements and overview of functions
QuickHMI V8 (Falcon) R6
Table of contents
Table of contents .......................................................................................................................................................... 2

1 Introduction .......................................................................................................................................................... 5
2 QuickHMI Falcon - That´s new! ............................................................................................................................ 6
3 QuickHMI Editor ................................................................................................................................................... 7
3.1 Licenses .........................................................................................................................................................8
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 .....................................................................................................................................................28
3.7 Edit Page .....................................................................................................................................................29
3.7.1 Changing page size .............................................................................................................................30
3.7.2 Adding views .......................................................................................................................................32
3.7.3 Add a new page / Header & footer ....................................................................................................34
3.7.4 Group several pages ...........................................................................................................................37
3.8 Project settings ...........................................................................................................................................39
3.9 The Project explorer ...................................................................................................................................43
3.10 Working with control elements ..................................................................................................................45
3.10.1 Using of the control elements ............................................................................................................47
3.10.1.1 Assignment of properties ...........................................................................................................48
3.10.1.2 Move and rotate control elements.............................................................................................49
3.10.1.3 Rules............................................................................................................................................50
3.10.1.4 Actions ........................................................................................................................................52
3.10.1.5 Drag&Drop Function ...................................................................................................................56
3.10.1.6 Align multiple control elements .................................................................................................58
3.10.2 PlugIn Manager...................................................................................................................................60
3.10.3 SVG controls .......................................................................................................................................62
3.10.3.1 Basics about SVG´s ......................................................................................................................63
3.10.3.2 SVG´s in the QuickHMI Editor .....................................................................................................67
3.10.3.3 Add actions and properties ........................................................................................................75
3.10.3.4 Constants ....................................................................................................................................83
3.10.3.5 Using of classes and ID´s .............................................................................................................85
3.10.3.6 Example 1: Barrier ......................................................................................................................86
3.10.3.7 Example 2: Storage and retrieval unit ........................................................................................87
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 .......................................................................................................109
3.12.2.3 Creating TWINCAT data sources ...............................................................................................115
3.12.2.4 Creating MODBUS data sources ...............................................................................................119
3.12.2.5 Creating KNX data sources........................................................................................................128
3.12.2.6 Creating DataBase data sources ...............................................................................................131
3.12.2.7 Creating File system data sources ............................................................................................137
3.12.2.8 Creating MQTT data sources ....................................................................................................142
3.12.2.9 Creating Allen-Bradley data sources.........................................................................................146
3.12.3 External Logging................................................................................................................................149
3.12.3.1 External logging in the database ..............................................................................................149
3.12.3.2 External logging in the file system ............................................................................................155
3.12.4 Adding variables ...............................................................................................................................163
3.12.4.1 Adding S7 Variables ..................................................................................................................163
3.12.4.2 Adding OPC UA Variables..........................................................................................................167
3.12.4.3 Adding TWINCAT variables .......................................................................................................171
3.12.4.4 Adding MODBUS Master variables ...........................................................................................175
3.12.4.5 Adding MODBUS Slave variables ..............................................................................................178
3.12.4.6 Adding KNX variables ................................................................................................................179
3.12.4.7 Adding DataBase variables .......................................................................................................181
3.12.4.8 Adding File system variables.....................................................................................................184
3.12.4.9 Adding MQTT variables.............................................................................................................186
3.12.4.10 Adding Allen-Bradley variables.................................................................................................189
3.12.4.11 Value manipulation ..................................................................................................................191
3.12.4.12 Adding Alarm variables.............................................................................................................192
3.12.4.13 Internal variables ......................................................................................................................195
3.12.4.14 Text view of variables ...............................................................................................................198
3.12.4.15 Variables with control elements ..............................................................................................201
3.12.5 Reading variables ..............................................................................................................................201
3.12.6 Writing variables ...............................................................................................................................201
3.13 JavaScript & HTML ....................................................................................................................................202
3.13.1 HTML Manager .................................................................................................................................202
3.13.1.1 Adding HMTL blocks .................................................................................................................203
3.13.1.2 Delete HMTL blocks ..................................................................................................................204
3.13.2 JavaScript ..........................................................................................................................................205
3.13.2.1 Definition ..................................................................................................................................205
3.13.2.2 Assignment ...............................................................................................................................212
3.14 Translation texts .......................................................................................................................................215
3.15 Security .....................................................................................................................................................216
3.15.1 Adding users .....................................................................................................................................216
3.15.2 Adding groups ...................................................................................................................................217
3.15.3 Manage right ....................................................................................................................................220
3.16 Integration of media resources ................................................................................................................222
3.16.1 Integrate image resources ................................................................................................................222
3.16.1.1 Adding image controls ..............................................................................................................224
3.16.2 Integrate audio resources.................................................................................................................228
3
3.16.2.1 Audio recourses related to control elements and alarm variables ..........................................229
3.17 Chart Manager ..........................................................................................................................................233
3.17.1 Adding and edit charts ......................................................................................................................233
3.17.1.1 Lines and bars ...........................................................................................................................236
3.17.1.2 Pie chart ....................................................................................................................................241
3.17.2 Chart control elements .....................................................................................................................242
3.17.3 Create and run a sample chart .........................................................................................................242
3.17.3.1 Run the chart in runtime mode ................................................................................................247
3.18 Recipe Manager ........................................................................................................................................250
3.18.1 Create a new recipe ..........................................................................................................................250
3.18.2 User management ............................................................................................................................251
3.19 Runtime mode ..........................................................................................................................................253
3.19.1 Starting runtime mode .....................................................................................................................253
3.19.2 Loading screen ..................................................................................................................................257
3.20 Export the project for the server ..............................................................................................................259
3.21 Tips & Tricks ..............................................................................................................................................260
4 QuickHMI Standalone Runtime ........................................................................................................................ 261
4.1 Setting up the server with the QuickHMI Runtime Manager ...................................................................261
4.1.1 Runtime Manager - Start page .........................................................................................................261
4.1.2 Runtime Manager - Configure the project .......................................................................................263
4.1.3 Runtime Manager - User management ............................................................................................264
4.1.4 Runtime Manager - Recipe management.........................................................................................265
4.1.5 Runtime Manager - Settings .............................................................................................................266
4.1.6 Runtime Manager - Data sources .....................................................................................................268
4.1.7 Runtime Manager - Help ..................................................................................................................269
4.2 Using QuickHMI on the Raspberry Pi........................................................................................................270
4.3 Installing the QuickHMI Runtime on Linux-Systems.................................................................................273
5 QuickHMI Viewer .............................................................................................................................................. 276
5.1 Desktop Viewer.........................................................................................................................................276
5.1.1 Desktop Viewer - Start page .............................................................................................................277
5.1.2 Desktop Viewer - Main menu ...........................................................................................................278
5.1.3 Desktop Viewer - Start project .........................................................................................................279
5.1.4 Desktop Viewer - Open project ........................................................................................................280
5.1.5 Desktop Viewer - Executing the runtime..........................................................................................281
5.1.6 Desktop Viewer - Start parameters ..................................................................................................284
5.1.7 Installing the QuickHMI Viewer on Linux-Systems ...........................................................................285
5.2 Web Viewer ..............................................................................................................................................286
5.2.1 Web Viewer - Executing the runtime ...............................................................................................287
5.2.2 Web Viewer - On-screen keyboard...................................................................................................288
5.3 QuickHMI Android App .............................................................................................................................292
5.3.1 Android App - Open a new connection ............................................................................................294
5.3.2 Android App - Executing the runtime ...............................................................................................296
6 Overview ........................................................................................................................................................... 299
6.1 System requirements for QuickHMI .........................................................................................................299
6.2 Connection to PLC and devices.................................................................................................................301
6.3 Overview of the functions ........................................................................................................................302
6.4 Configuration in 3 steps ............................................................................................................................303
7 Do you have any questions? ............................................................................................................................. 305
4
1 Introduction
Thank you very much for buying
In order to help you to get to know you’re 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.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.Systems GmbH
Copyright © 2020 Indi.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.
5
2 QuickHMI Falcon - That´s new!

The eighth version of the visualization software QuickHMI comes along with not only a further optimization of the
workflow, but also internal fine-tuning. The software also offers powerful new tools that let you visualize more
independently, more individually and faster.
Completely Independence with your own controls
In QuickHMI you are used to choosing from 2,000 vector-based graphics based on HTML5. However, as of QuickHMI
Falcon, you will be able to visualize your own SVG controls. For these, you can then define properties and actions.
This makes your project visualization even more individual and independent.
All about the SVG control elements topic you will learn under in the “SVG controls” sub-chapter.
Create variables as text view
Now, created variables can no longer be displayed only in the table view, but also as a text view in a list. In this text
view, new variables can also be created faster by copying existing variables, paste them and redefined. It is no
longer necessary to use the usual variable creating procedure.
All about the variables as text view topic you will learn in the “Text view of variables” sub-chapter.
Quickly align multiple controls
Several controls can be fast aligned anywhere on the user interface as of QuickHMI Falcon. For this, all elements to
be aligned must be selected. With just one click on the corresponding buttons, all controls are aligned either verti-
cally or horizontally, either left-justified, right-justified, centered etc.
All about the align multiple control elements topic you will learn in the “Align multiple control elements” sub-chap-
ter.
Other
As of QuickHMI Falcon, no OPC DA or S7 with PPI is supported anymore. In addition, only 64-bit systems are sup-
ported.
6
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 collec-
tion is available for the connection of many data source types.
7
3.1 Licenses
The QuickHMI license model - No runtime license required
Build your QuickHMI projects in any number and size. With the acquisition of the QuickHMI system, you do not
have to worry about further licensing of the runtime environment.
The following license types with the following range of functions are available:
Community- Private- Basic- Professional-

Function range
Edition Edition Edition Edition
License is
expandable
Number of
No Yes No No
data sources
Number of variables
Number of hits
max. number of
1 1 Unlimited Unlimited
data sources
max. number of
100 300 1500 Unlimited
variables
Unlimited within Unlimited within
max. number of the maximum the maximum
10 Unlimited
alarms number of number of
variables variables
max. number of
3 6 6 Unlimited
sites (views)
Possibility
No Yes Yes Yes
additional views
external
No No No Yes
logging interfaces
User management No No No Yes
Translation texts No No No Yes
Recipe management No No No Yes
Audio resources No Yes No Yes
Header & footer No Yes Yes Yes
Use within server op-
erating systems No No No Yes
(editor and server)
concurrent requests 2 2 5 Unlimited
S7 data sources Logo und 1200er All All All
Modbus Modbus-Master Modbus-Master Modbus-Master
Modbus-Master
data sources Modbus-Slave Modbus-Slave Modbus-Slave
Filesystem
Yes Yes Yes Yes
data source
OPC data sources No Yes Yes Yes
8
TwinCat data sources No Yes Yes Yes

Allen-Bradley
Yes Yes Yes Yes
data sources
MQTT data sources Yes Yes Yes Yes
Database
Yes Yes Yes Yes
data sources
KNX data sources Yes Yes Yes Yes
commercial use
No No Yes Yes
possible
Note text "no com-
mercial use" at Yes Yes No No
runtime
Automatic updates
of the editor within
Yes Yes Yes Yes
the current major
version
QuickHMI USB-Dongle (Optional)

USB dongle for bypassing license activation. > One dongle per PC.
You have the option of obtaining your license as a dongle (a copy-protected USB stick). If this is connected to the PC
or server, the license is automatically activated. Until the dongle is removed.
QuickHMI Individual training

You will receive an individual training from a QuickHMI developer in which your questions and requirements are
addressed directly. The training is done remotely and is limited to 3 hours. Implementation by TeamViewer Meet-
ing in German.
Test License
With the trial license, you can try QuickHMI for 14 days for free. After expiration this can be converted into a full
license.
How to request and activate licenses you can see in the "Request a test license" and "Activation of licenses"
chapters.
9
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 con-
verted 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.
Important: 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.
Please note: 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 back-
ground 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
1 4
3
Start the runtime in the mode, which you have selected in

the "Runtime" menu beforehand to simulate the behavior
of the project in the server environment.
2
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”, 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.
Important:
If a project is saved as of version 6.4.0.0, it is no longer backwards compatible.
Server export
File needed by the QuickHMI Runtime Manager (Part of the QuickHMI Standalone Runtime) in order to config-
ure 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 de-
leted 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 "Pro-
ject".
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.
24
This will open the window "License info", with all information’s about the used license.
Copy the license ID
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.
Update settings
Here you can determine the update behavior of your software.
Backup & Restore
Here, you can create a backup and store it locally as a file. You can restore this backup file on the corresponding
header.
25
Save & Load
Save:
Here, you can save the layout you have created in order to ensure easy access.
Load:
Here, you have the option of restoring a previously saved layout.
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.
26
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”.
Log files
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 located in the following directories:
Windows:
 Server: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\server

 RuntimeManager: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\rm
Linux:
 Server: /usr/share/Indi.Systems/QuickHMI Server v6/logs/server

 RuntimeManager: /usr/share/Indi.Systems/QuickHMI Server v6/logs/rm
27
Language
Select the desired language.
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.
Open system information’s or check if drivers are digitally signed.
28
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.
If you right-click a vacant space on the Editor workspace, you can switch to View Manager. For a detailed descrip-
tion of the View Manager, go to the link below.
You can also open the properties window by holding down the “Alt” key.
29
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 proper-
ties", you will find "Page size" in the "Settings" area.
30
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".
31
In this example, only the red button remains. All other buttons were outside the new size range.
Before change size After change size
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.
32
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” / “Page properties” / “Navigation” and under “Navi-
gation targets” in Project explorer.
33
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.
34
Adding header & footer
Select "Header/Footer" as "Type". Now you can choose one of the templates or enter individual values. Then con-
tinue 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.
35
To do this, select a page in which a header and footer should be inserted and navigate to “Edit” / “Page proper-
ties”. In the “Properties” window, click on the selection button in the “Header” column. All the pages you previously
defined as headers and footers will appear. Follow the same steps for “Footers”. 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 visible by default in the "runtime mode". The header you can hide, by clicking on the button "Hide
Header". The same would apply for the footer, you would "Page2" defined in advance in the properties as a footer.
Hide or show the header.
36
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 "Settings" 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" has been created and the selected "Page2" has been 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.
37
In runtime mode, the group appears in the page overview and can be opened to get to the pages it contains.
38
3.8 Project settings

In the Project explorer, click on “Project settings” in the Settings section.
Important: All project settings are saved in the project and automatically applied to the QuickHMI Runtime Man-
ager 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".
39
Runtime | Miscellaneous
Here you can set the initial zoom level. Choose “Fit” for display the full site or zoom too 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.
40
Runtime | Compression
Data sent between server and client, can be compressed to improve transfer speed. How the data is com-
pressed, 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.
When all settings have been made, click on "Save".
41
Charts
Here you can specify how many days the data should be saved and thus be visible. "Save" your setting to
continue.
42
3.9 The Project explorer
43
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
You can set up external data connections and create translations for freely definably texts here.
You will also find the HTML Manager here to use HTML independently in the project.
Chart manager
The chart manager is used to manage various chart configurations, which then can be displayed inside a
chart control element.
JavaScript
Create and link JavaScript functions. More complex visualization and dynamic data linking are possible with
the innovative HTML5-Manager in conjunction with the JavaScript-Manager. Please refer to the HTML /
JavaScript documentation for further information.
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.
Alarm message
The alarm servers, and alarm variables, and settings for how the corresponding notifications are displayed
can be set up here.
Security
In this area you can Create users into groups and assign rights.
Settings
Overview and editing of project-specific settings.
PlugIn Manager
Add and remove extensions
Recipe Manager
Create and select recipes
44
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.
45
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
46
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 en-

large or reduce its size.
Adjust the display:
Zoom in, out or display the entire display area.
47
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.
Important: Always name your control ele-

ments, to be able to assign actions and com-
mands 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".
48
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
49
3.10.1.3 Rules
Rules are meant to dynamically change the values of properties. For example, binding a string variable to the text
property of a textbox. Every property in the property window now has a little gear icon next to it. With this icon
you can from now on access the rule-editor.
This icon can either be gray (no rules assigned) or green (at least one rule assigned).
2
3
50
At the top of the rule editor you can switch between components and properties (1). When clicking the gear icon
next to a property, the editor will start with the corresponding property preselected. If you’d want to, you could
now switch between components and properties without closing the rule editor.
By using the icons (2) you can add, edit or delete rules. Furthermore, you can change the order of rules and ena-
ble/disable conditions.
The order is important because the rule processing terminates with the first rule, which either has no con-
dition or whose condition applies. This can be easily explained using the example above:
There are two rules for the visible property of QHMIButton1. The first binds the variable var1 of the s7 data
source to this property. This rule is having a condition to it. It only takes effect if this condition is true. In
this case if the current hour is between 9 and 18. If this is the case, the rule will take effect, and rules after
this rule won’t be processed. If the condition isn’t true, the processing will continue until either a rule is
reached which condition is true, or all rules have been processed.
This continues until a rule is reached that has no condition or whose condition applies, or all rules have
been processed.
A yellow exclamation mark indicates rules that can

never be reached due to a missing condition on a
previous rule.
The working area itself (3) is disabled until a rule is to be edited (pencil icon) or created (plus icon).
On the left side you can set your condition, that is if the checkbox Condition is checked. If it’s not, this area won’t
be visible.
To the right, you can set the rule itself. This is where you can assign constant values, variables or other properties.
For Boolean values there is a negate option as well. This will not change the original value, but just the value which
is written to the target.
Note:
Rules are processed every time any connected variable changed.
51
3.10.1.4 Actions
Actions are used to respond to certain events. By selecting a component and switching to the Actions tab you see
a list of all available actions for this type of component.
To edit actions, you basically to the same you’d do to edit rules. In this case the icon isn’t little pair of gears, but a
little thunderbolt.
For instance: To assign an action to a control element, triggered at pushing the right mouse button, accordingly
select "OnRightButtonClick".
The action editor has the exact same layout as the rule editor. So, we’ll limit this section to the things that are
different.
For example, the little icon below, you’ll find for the functions SET_VARIABLE and SET_PROPERTY.
In older versions of QuickHMI there were action functions like ADD, SUBTRACT, MULTIPLY and so on. These are
now ‘sub functions’ of SET_VARIABLE and SET_PROPERTY.
These can be accessed by clicking this icon.
52
The dropdown menu is filled depending on the selected datatype of the variable.
Is the variable a Boolean you can use logical operands like AND, OR, XOR or NOT.
If the variable isn’t a Boolean, you can use functions like ADD, SUB, MUL, DIV or MOD.
If the variable isn’t a Boolean, you can use functions like ADD, SUB, MUL, DIV or MOD. These sub functions don’t
have any effect on the original value. They just change the outcome.
Another difference to rules, is the fact that the processing of actions won’t stop after an action took effect. So, all
actions are processed every time irrespective of conditions linked to actions.
In addition, can also adding rights for the actions.
How to add and manage rights, you see in the "Manage rights" chapter.
53
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.
54
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 trig-
gered. 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.
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.
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.
55
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.
56
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
57
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" tab.
58
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 Arrange-
ment-Buttons (for vertical alignment) are relevant. These can be recognized by the vertical line.
Now align your controls as you like.
* left-justified * right-justified * centered
59
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 “PlugIn Manager”.
Now you can select the "Available" extensions by clicking. Selected extensions are marked in grey. If you hover the
mouse cursor over an entry, the control elements under that item will appear as images.
Once you are satisfied with the selection, select the green arrow for "add".
Click on „Add all“ to select all extensions
60
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 "re-
move".
By clicking on „Remove all“ all extensions are remove
Note:
It is recommended that you do not enable all extensions at once, which can significantly increase the load times of the
editor.
61
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.
62
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 represen-
tation, 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
63
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
64
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 abso-
lute 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>
65
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>
66
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.
67
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".
68
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.
69
How you define actions and properties you see in the “Add actions and properties” chapter.
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.
Important: The following code line causes the element in the editor to adapt to the desired scaling range. Oth-
erwise, it may cause elements to be cropped graphically.
For more information, see the "ViewBox" sub topic.
70
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
71
To finally create the SVG control, click on the left diskette icon above the "SVG" section. With the right diskette icon
(with the red X), you can undo previously made entries and changes.
72
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 "X-Icon" in the "SVG

controls" section or selected the SVG and press the delete button.
This disappears again from the list of SVG controls.
73
Export and import SVG´s
To export a created control element, click on the dedicated button in the "SVG controls" section. 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 dedicated button in the "SVG controls" section. Then select your desired
SVG and confirm. This will be loaded into the "SVG Control Manager" and can be edited.
74
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 >
75
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 ele-
ments.
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
76
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 require-
ments.
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>
77
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 prop-
erties (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.
78
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.
79
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.
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 to 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.
Important: A linearmap is executed before evaluating any potentially existing condition elements.
80
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)" />
81
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)" />

Important: All condition elements are only checked after applying a possibly existing linearmap.
82
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
83
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
>=
84
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>
85
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.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 100" style="height: 100vh;width:

100vw;">
<qhmi>
<property name="Color" datatype="Color" defaultvalue="#FF9523">
<target type="Attribute" element="boombg" selector="fill" />
</property>
<property name="Open" datatype="Boolean" defaultvalue="False">
<target type="Attribute" element="boom" selector="transform">
<condition eq="True" output="rotate(-120 25,60)" />
<condition eq="False" output="rotate(-90 25,60)" />
</target>
</property>
</qhmi>
<g>
<rect stroke="#000000" height="50" width="10" y="48" x="20" rx="2" ry="2" stroke-
width="2" fill="#477fb7" />
<rect class="boom boombg" stroke="#000000" transform="rotate(-90 25,60)"
height="100" width="10" y="48" x="20" rx="2" ry="2" stroke-width="2" fill="#FF9523" />
<g class="boom" transform="rotate(-90 25,60)">
<rect height="10" width="10" y="68" x="20" fill="#000000" />
</g>
</g>
</svg>
86
3.10.3.7 Example 2: Storage and retrieval unit
Property: 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 repre-
sented by a red frame and a rotation of the palette.
Level
Sets the height of the slide. To do this, translate a per-
centage value to another value space to position the
carriage and cables in the graphic.
87
88
89
90
91
92
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.
Name the folder 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 call up these functions via the right mouse
button.
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 varia-
bles. 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.
In the Project explorer, click on “Database connection” in the Communication section, to create a new Database
connection.
Click “Add data source”.
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>
Important: 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.
Here you can also copy your own JDBC drivers.
99
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
To create an S7 data source, click on the button for "Add 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.
Additional 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 a data source:
General for all data source types:
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 manu-
ally 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.)
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.
S7 Specific:
Model
Select which S7 model you want to connect to.
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“
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".
102
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 about the "Read timeout":
200 milliseconds until the "Read timeout" is a recommended value. Only if you know that more is needed, we
recommend changing the value.
After entering the information relevant for the connection, click on "Add".
The S7 data source is created and subsequently displayed in the data source overview.
103
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 Explanation of the S7 model types
S7_200 | S7_300_400:
Only 1 access can be made to this controller at the same time.
S7_1200 | S7_1500:
The most widely used controls

Multiple accesses possible at the same time
Logo0BA7 | Logo0BA8:
They are predominantly used in the home sector (technical schools, authorities etc ...)
WinAC_RTX_2010
Real-time capable SIMATIC Software PLC for PC-based automation solutions.
104
3.12.2.1.2 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 doc-
ument 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.
Note: All product names or other names or brands referred to in this documentation are the trademarks or regis-
tered trademarks of their respective owners and are the property of those copyright owners. There’s no connection
between any of the mentioned trademarks or trademark owner and the Fa. Indi.Systems GmbH. Any mention of
brands serves purely as an indication to the intended purpose.
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:
105
2. Setup the connection as follows:
3. Save your settings and load them to your PLC.
Please note:
When using a Logo! 0BA7 you can only establish one connection at a time.
106
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 address To VW address 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
107
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 has 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 address To VW address 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.3 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 com-
munication 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’re done!
108
3.12.2.2 Creating OPC data sources
To create an OPC data source, click on the button for "Add 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.
109
You now have the following settings options for creating a data source:
Simulation
runtime mode.)
Text encoding

visualization.
OPC Specific:
Connection type
Here OPC "UA" is preselected.
Endpoint URL
The endpoint URL describes the server network address.
Discovery URL
The Discovery URL connects you to the server and provides information about which destination addresses
are available with which settings.
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".
110
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.
111
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.
After entering the information relevant for the connection, click on "Add" (after editing an already created data
source click "Save").
112
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.
113
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.
114
3.12.2.3 Creating TWINCAT data sources
To create a TWINCAT data source, click on the button for "Add 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.
115
Simulation
runtime mode.)
Text encoding

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".
116
After entering the information relevant for the connection, click on "Add" (after editing an already created data
source click "Save").
The TWINCAT data source is created and subsequently displayed in the data source overview.
117
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
To create a MODBUS data source, click on the button for "Add 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
Simulation
runtime mode.)
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.
Connection details
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.
121
Registermode
Sets the register size set on the slave.
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. There-
fore, 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.
122
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
variables” chapter.
123
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.
Connection details
Port
502 is the default port here.
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
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. There-
fore, we recommend that you do not change this setting.
124
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.
125
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 varia-
bles” chapter.
126
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’s 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.
127
3.12.2.5 Creating KNX data sources
To create a KNX data source, click on the button for "Add 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.
128
Simulation
runtime mode.)
Text encoding

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.
129
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.
130
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.
To create a DataBase data source, click on the button for "Add 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.
131
Simulation
runtime mode.)
Text encoding

visualization.
DataBase Specific:
Connection
Select the previously created DataBase connection here.
132
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.
133
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 corre-
sponding 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.
Important: QuickHMI do not provide database servers or database licenses. It only gives access possibilities to
existing databases. Requisite database licenses and access licenses have to 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.
134
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:
135
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.
136
3.12.2.7 Creating File system data sources
To create a File system data source, click on the button for "Add 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.
137
Simulation
runtime mode.)
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.
138
The File system data source is created and subsequently displayed in the data source overview.
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.
Further information about the file system data source:
 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 form 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 Choose a name for the data source

(This name must be unique among other data sources.)
2 Choose Filesystem as the data source type
3 Select the path where your database file is located

(Please note that the path on the server must be present / reachable.)
4 Select a separator which separated the variable name from its value within the file.
141
3.12.2.8 Creating MQTT data sources
To create a MQTT data source, click on the button for "Add 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 prese-
lected 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
Simulation
runtime mode.)
Text encoding

visualization.
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 Ses-
sion". 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 tem-
porarily 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.
143
The MQTT data source is created and subsequently displayed in the data source overview.
144
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
To create an Allen-Bradley data source, click on the button for "Add 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
Simulation
runtime mode.)
Text encoding

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.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 op-
tions 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 data-
base 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.
149
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 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.
Downscaled speed can courses lower performance to write archive data.
Important: QuickHMI do not provide database servers or database licenses. It only gives access possibilities to
existing databases. Requisite database licenses and access licenses have to 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.
150
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.
151
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".
152
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.
153
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 de-
vice 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.
Coulumn 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 de-
vice regulatory works, “BAD”, if problems appear, e.g.
Timeouts.)
154
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.
155
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’s 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 Editors runtime.
Additionally, these rights are necessary for the production environment for the user which runs the data source
service.
Important:
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.
156
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.
157
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.
158
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.)
159
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
Timeouts.)
160
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
Timeouts.)
For encrypted files, the XML format has remained preserved. Only the field contents are encrypted.
161
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 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.
162
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
Adding variables to the S7 data source
Enter “Add external variable”.
In order to add variables to the S7 data source, it must be selected in the variable input mask under "Data source".
Then, enter a name for the variable under "Name" and select the "Data type". Depending on the "Data type", the
"S7 Specific" area adapts automatically so that the relevant operations are available for the different data types.
When assigning a name, the fast entry is automatically adjusted.
If this button is activated (button is highlighted in blue), the name automatically adjusts to the vari-
able address. If the variable name and the address are to be different, the button must be deac-
tivated.
For more information on fast entry, go to the "S7 syntax for fast entry" chapter.
163
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.
Automatic adaptation of the S7 specific area
The variable for the S7 data source was created successfully and can now be used.
164
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
165
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
166
3.12.4.2 Adding OPC UA Variables
Adding variables to the OPC UA data source
In order 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".
tivated.
167
The variables for the OPC UA data source have been created successfully and can now be used.
168
OPC variables can also be created using the Variable Import button.
In the following window you can choose between already created TwinCat or OPC data sources.
169
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
170
3.12.4.3 Adding TWINCAT variables
Adding variables to the TWINCAT data source
In order 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.
tivated.
171
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.
172
TwinCat variables can also be created using the Variable Import button.
In the following window you can choose between already created TwinCat or OPC data sources.
173
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
174
3.12.4.4 Adding MODBUS Master variables
Adding variables to the MODBUS Master data source
In order to add variables to the MODBUS Master data source, it must be selected in the variable input mask under
"Data source". 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". Depending on the "data type", the
"S7 Specific" area adapts automatically so that the relevant operations are available for the different data types.
tivated.
175
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.
The variables for the MODBUS Master data source have been created successfully and can now be used.
176
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
177
3.12.4.5 Adding MODBUS Slave variables

Adding variables to the MODBUS Slave data source
In order to add variables to the MODBUS Slave data source, it must be selected in the variable input mask under
"Data source". Creating a variable for MODBUS slave data sources works like creating a variable for MODBUS
master data sources.
178
3.12.4.6 Adding KNX variables
Adding variables to the KNX data source
In order 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).
tivated.
To confirm your entries, continue with "Add". The window remains open so that you can create additional variables.
"Close" the window for finish.
179
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
180
3.12.4.7 Adding DataBase variables
Adding variables to the DataBase data source
In order to add variables to the DataBase data source, it must be selected in the variable input mask under "Data
source". Now all you have to 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.
If this button is activated (button is highlighted in blue), the name automatically adjusts to the varia-
ble address. If the variable name and the address are to be different, the button must be deac-
tivated.
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.
181
The variables for the DataBase data source have been created successfully and can now be used.
Important: 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 in order to be able to query it.
How to prepare the database can be found in the chapter for adding DataBase data sources:
182
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
183
3.12.4.8 Adding File system variables
Adding variables to the File system data source
In order 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.
If this button is activated (button is highlighted in blue), the name automatically adjusts to the varia-
ble address. If the variable name and the address are to be different, the button must be deac-
tivated.
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.
184
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
185
3.12.4.9 Adding MQTT variables
Adding variables to the MQTT data source
In order to add variables to the MQTT data source, it must be selected in the variable input mask under "Data
source". Now all you have to 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.
tivated.
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.
186
Enter the desired topic (*Name of topic**Slash**#*) and click on "Update". Thus, the topic is searched for the varia-
bles (all variables are strings) from which you can select the desired ones. By clicking on "Import" the selected varia-
bles are created and the window closes.
The variables for the MQTT data source have been created successfully and can now be used.
187
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
188
3.12.4.10 Adding Allen-Bradley variables
Adding variables to the Allen-Bradley data source
In order to add variables to the Allen-Bradley data source, it must be selected in the variable input mask under
"Data source". The variable can be created manually by assigning it an "Address".
tivated.
It is easier if you click on "Browse" and select the existing variable and confirm with "Import".
189
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
190
3.12.4.11 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.
Important: 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 the 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.
191
3.12.4.12 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.
192
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 corre-
sponding 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 ex-
ample, 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.
Decide whether the alarm variable is triggered by "True" or "False".
193
Use previously created translation

texts for "Messages".
Created alarm variables can be edited, updated, and deleted. They can then be used by control elements.
194
3.12.4.13 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.
195
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.
196
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
197
3.12.4.14 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 varia-
bles, 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 green arrow button.
In addition, you can also change the text size. For this, use the text size- buttons.
198
3.12.4.14.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.
199
[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 exam-
ple, 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.
200
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.15 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 "setVar-
iableSync".
For the desired option, see the sup chapters “Actions” and “API functions” in this documentation.
201
3.13 JavaScript & HTML

HTML
To set a section in your project in which HTML should be displayed, pull a QHMIHtmlBox onto the interface. This
can be found in the “HTML” category. HTML can now be displayed in this box. However, this applies only to HTML
blocks which have been previously defined in the “HTML Manager”. These can be selected in the HTML property
for the QHMIHtmlBox.
3.13.1 HTML Manager
HTML blocks can be created, edited, and deleted in the “HTML Manager”, which can be accessed on the top right
via Project explorer. HTML blocks can be subsequently displayed in the QHMIHtmlBox.
In the Project explorer, click on the “HTML Manager”.
On the left side of the HTML Manager, you will find a list of all the HTML blocks you have already created. By left-
clicking on the respective entry, the content will open in the editor on the right side.
You can also open a help video.
202
3.13.1.1 Adding HMTL blocks
To create additional HTML blocks, click on the relevant button.
Then, a dialog window will open in which you must set a new, clear, name for the HTML block. The program will
notify you if a name already exists.
Continue with “OK”.
Bold entries in the list represent HTML blocks which have not yet been saved. You can save blocks in the following
ways:
„CTRL + S“ or (saves he current block) (saves all unsaved blocks)
203
3.13.1.2 Delete HMTL blocks
To delete additional HTML blocks, use the Delete-Button.
Confirm the dialog window that opens by clicking “Yes” if you really want to delete the block. Otherwise, the pro-
cess can be canceled by clicking “No”.
204
3.13.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.13.2.1 Definition
The mask for defining the JavaScript can be accessed via Project explorer. It consists merely of a JavaScript editor.
In the Project explorer, click on “Definition” in the JavaScript section, to open the mask.
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.
Create a new element
Delete the selected element
Here you can change the order in which the elements are processed at runtime. It is important to
pay attention to the correct order.
205
3.13.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 pa-
rameter. This parameter is the args parameter which is filled with information about the current event (page, com-
ponent, 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)
206
3.13.2.1.2 Scripts for variable change events
Since QuickHMI 4.0 (Bonobo) it is possible to execute JavaScript’s as a result 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)
207
3.13.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 compo-
nent.)
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 before-
hand.
Example: DataSourceName.VariableName
208
mainInterface.setVariable(variable, value)
This function sets the value of a variable asynchronously.
Important note:
This process is asychron. This means that a call for “getVariable” immediately afterwards might not return the up-
dated 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 disad-
vantage 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
hand.
value
The value to be assigned to the variable
mainInterface.setVariableSync(variable, value)
This function sets the value of a variable synchronously.
Important note:
Only use this function when absolutely necessary. (see the important note for the function „setVariable“.)
Parameters
variable
hand.
value
The value to be assigned to the variable
209
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: Page-
name.Viewname
210
3.13.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.
211
3.13.2.2 Assignment
You have two options for assigning JavaScript functions to events for different components.
1) 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).
2) 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.
The assignment mask is organized into 3 smaller areas:
212
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.
Important notice:
Renaming functions does not automatically affect already assigned functions. These have to 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.
213
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.
214
3.14 Translation texts

Adding translation texts
In this menu, within Project explorer, you can create the translations for different languages. This allows your pro-
ject to be used by an international team. To create a translation text, at least one language must be set up.
In the Project explorer, click on “Translation texts” in the Communication section.
Then, 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”.
215
3.15 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.15.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 properties” 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" will be used from the trans-
lation texts.
216
The "standard language" is used from the translation texts.
3.15.2 Adding groups
In the Project explorer, click on “Groups” in the Security section, to add new groups.
217
In the “Group properties” window that appears, enter a name for the group to be created and, if necessary, a note.
Then click “Save group data changes”. In this example “GROUP 1” was created.
After this has been completed, all “Available rights” you can assign to the created group will be listed on the left
side of the window. This is done by selecting a right and clicking on the green arrow. In this example, the “LOGIN”
right will be selected.
The selected right was thus assigned to “GROUP 1” and now appears on the left side of the window under “Added
group rights”.
You can undo this by selecting the right and clicking on the red arrow. Save the changes and then close the “Group
properties”. Groups can be edited or deleted.
218
To assign users to a group, click, as described above, on “Users” in Project explorer, select the user you want to
assign and select “User properties”. Select the “Groups” tab and continue by clicking “Add”.
In
The "Groups” tab can only be selected if at least one

group has already been created.
In the “Group selection” window, you can select from the groups you created in advance. In this example, only
“GROUP 1” has been created and selected. To do this, activate the checkmark under “Selection”.
However, you also have the option of creating a new group by clicking “New Group”. The “Group properties” win-
dow will open, in which you can then proceed as described above.
Confirm with “Add”.
219
The user has thus been assigned to “GROUP 1”. All user assignments to groups can be deleted under “User prop-
erties”. A whole group cannot, however, be deleted if users and/or rights are assigned to it.
The users assigned to a group can also be quickly assigned and unassigned under the “Members” tab in the “Group
properties”.
3.15.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.
220
In “Right properties” you can set the new right or edit an existing right. In addition, you have the option of creating
rights for “Super-users”. Continue with “Save changes”.
Once you have created all the rights, close the window by clicking “OK”.
221
3.16 Integration of media resources

Here image resources can be integrated, image control elements can be created, and audio resources can be im-
plemented.
How to implement image and audio resources, you will learn in the following sub-chapters.
3.16.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”.
222
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”. Con-
firm the selection by clicking “Open”.
Thereupon the dialog window "Compress Picture" is opening. In this QuickHMI offers you, to increase the efficiency
of processing by changing image size and quality manually. For this, use the Slider.
Here it’s important to note the size limit of the compression. The optimized image can´t be larger than 512 KB. Then
an import wouldn´t be possible. Starting with a size of 256 KB, you will be warned by an appropriate symbol.
The images have been successfully imported and appear in the “Master data image selection” window. These im-
ages 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.
Important: It isn’t possible to delete an image that is currently in use. Images that are in use are marked with a
red border.
223
3.16.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.
224
In this example, three image control elements were created. A new image control element is initially created with-
out 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 (2)” 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”.
225
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.
Delete
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.
226
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 repre-
sent. 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.
227
3.16.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.
228
3.16.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.
229
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.
230
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 author-
ization 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 QuickHMI runtime mode, however, this is desired. Alarms with signal tones must be able to activate them-
selves 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.
231
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.
Important: Internet Explorer can currently only play Mp3's.
232
3.17 Chart Manager

The chart manager is used to manage various chart configurations, which then can be displayed inside a chart con-
trol element.
In the Project explorer, click on the “Chart manager”.
How to create and edit new charts is explained in the sub-chapter “Adding and edit charts”.
3.17.1 Adding and edit charts
Use the buttons at the top of the screen to add new chart configurations or edit, duplicate or remove existing ones.
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”.
233
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.
Advanced settings
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.
234
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
235
3.17.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.
To delete elements from each list, use the context menu or the Delete button. To edit elements, use the context
menu as well or double click in the item.
This screen shot show a configuration used to display a single value over time.
236
3.17.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 deter-
mined 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.
237
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.
238
3.17.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.
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”.
239
3.17.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 doc-
umentation 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" check-

box and select a color. The erroneous val-
ues then are displayed as a line in the se-
lected color.
240
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.17.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.
241
3.17.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.17.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".)
242
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.
243
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 con-
siderable 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.
244
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".
245
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".
246
3.17.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.
247
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.
248
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.
249
3.18 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.18.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.
250
3.18.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.
Important: 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".
251
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.
252
3.19 Runtime mode

The runtime mode is used to run and test the project created with the QuickHMI Editor.
3.19.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.
253
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.
254
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 sim-
ulation 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.
255
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.
256
3.19.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.
257
The runtime mode starts automatically when all components have been loaded. However, you can force a prema-
ture start by clicking “Force start”. 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.
258
3.20 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.
Informations:
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.
259
3.21 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°
260
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 have to 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.
4.1.1 Runtime Manager - Start page
The QuickHMI Runtime Manager is divided into the regions "Server" and "Project".
261
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 soft-
ware.
262
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.
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.
263
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.
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.
264
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.
265
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.
266
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.
267
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.
268
4.1.7 Runtime Manager - Help
Here you will find information about the current version of the QuickHMI Runtime Manager, contact details and
support.
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%\Indi.Systems\QuickHMI Server v6\logs\server

 RuntimeManager: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\rm
Linux:
 Server: /usr/share/Indi.Systems/QuickHMI Server v6/logs/server

 RuntimeManager: /usr/share/Indi.Systems/QuickHMI Server v6/logs/rm
269
4.2 Using QuickHMI on the Raspberry Pi

Using QuickHMI on the Raspberry Pi with the QuickHMI Raspbian Image
At first, download the Raspbian image on the following page:
https://www.quickhmi.com/download.html.
Then You will find a file named " RaspbianWithQuickHMI_Falcon.zip" in the destination folder. After unzipping
them, you will get a file named " RaspbianWithQuickHMI_Falcon.img".
The image " RaspbianWithQuickHMI_Falcon.img" must subsequently be written to a minimum 8 GB SD card. For
this you can use the program "Win32DiskImager".
Plug the SD card into your computer and select the image. Select the drive with your SD card. This example is the
drive "E: \":
Subsequently, press the "Write" button.
Important: Please note that all data currently on the SD card will be deleted! Therefore, only run the image if you
are sure that the contents of the card can be deleted!
270
Now insert the described SD card into the card slot of the switched-off Raspberry Pi and start it. The image was
configured with the following default user data, SSH access is activated and a VNC server is running in the back-
ground:
User: pi
Password: raspberry
The password should be changed, otherwise access is possible via the standard access data of Raspbian! A corre-
sponding error message is displayed until the password is changed on the desktop.
For access via the command line, the tool "putty" has proven itself.
After clicking on "Open", the first connection will ask you if the generated key should be saved. This must be con-
firmed with "Yes".
The QuickHMI Runtime is located in the folder "/home/quickhmi/QuickHMIServer", here is the startup script. Un-
like the Windows version, the runtime environment does not have a graphical interface for importing a project or
starting the runtime environment.
271
The import of a project is executed via the following command line:

sudo bash qhmiRM -i /home/quickhmi/QuickHMIServer/Projectname.qexp
After importing the project, the runtime environment can be started from the program directory by
sudo ./qhmi_startscript.sh start
The stopping takes place via:

sudo ./qhmi_startscript.sh stop
During the runtime environment is running, any browser can access the running project:
https://localhost:6064/
272
4.3 Installing the QuickHMI Runtime on Linux-Systems

The installation of the QuickHMI Server on a Linux distribution is always done via the terminal. Please note the
system requirements for Linux!
Open a terminal or connect via SSH access to your Linux system.
This will be used to download the installation scripts below.
This is done via the following command:

wget https://www.quickhmi.com/linux/falcon/qhmi_linux_falcon.tar
After confirming the entry, the archive of the installation scripts is downloaded from the Internet and must then be
unpacked.
To unzip, enter the following command:

tar -xvf qhmi_linux_falcon.tar
This command unzips the scripts into the current directory.
If the prerequisite packages for using the QuickHMI Server are not installed on your system, first execute the script
for setting up the requirements (hereinafter called "Requirements").
The requirements for the QuickHMI Server are the following:
OpenJDK 12 OpenJFX
Curl
DirMngr
To execute the requirements, enter the following command:

bash qhmi_Linux_requirements.sh
If you do not have admin permission, you will be notified, and you will need to log in as root.
273
To run the command as root, assume the “sudo” command.
Or change the user inside the terminal.

sudo bash qhmi_Linux_requirements.sh
Subsequently, the password is requested. Enter this and confirm with ENTER.
The missing requirements are installed and configured on your system. During the installation, you will be asked to
confirm the license terms of Java Oracle 8.
After successful installation, you will be asked if you want to proceed directly to the QuickHMI Server installation.
This can be confirmed with "Y" followed by ENTER, or simply with ENTER. The installation is started manually.
The manually entered command for the QuickHMI installation would be:
sudo bash qhmi_Linux_install.sh
The files relevant to the QuickHMI Server are downloaded and installed. After successful installation, you can con-
figure your QuickHMI project on the server.
For the import of a project and the start of the server, an overview with the possible commands and options can
be called, which serves as help.
To call the overview, enter the following command:

sudo bash qhmiRM --help
Subsequently, the password is requested. Enter this and confirm with ENTER.
274
The following overview of the commands and options appears:
=============================================================================================
qhmiRM -> QuickHMI Runtime Manager
-r | --run QuickHMI console runtime manager will be started.
-rg| --rungui QuickHMI runtime manager GUI will be started.
-c | --check check QuickHMI Server status
-rd| --rundaemon will start the QuickHMI Server
-sd| --stopdaemon will shutdown the QuickHMI Server
-u | --update check and install QuickHMI Server updates
-i | --import direct import a QuickHMI Export File (Project) into the server.
--> Example: qhmiRM --import /path/to/file.qexp
-f | --force forces to import new project file / update the QuickHMI Server
(will shutdown the QuickHMI Server if running)
-s | --start start the server after importing the project file
=============================================================================================
From the above commands and options, you can combine a command chain. You can enter either the long form (-
-run) or the short form (-r) of the relevant commands.
For example, to import a project and start the server, enter the following command:
sudo bash qhmiRM --import /path/to/file.qexp --rundeamon
or
sudo bash qhmiRM -i / path/to/file.qexp -s
"Import successful" -> This successfully publishes the project and makes it accessible.
To stop the server, enter the following command:
sudo bash qhmiRM --stopdaemon
or
sudo bash qhmiRM -sd
275
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 Desk-
top 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 corpo-
rate design or integrated into your existing software.
Graphic:
Copyright © Indi.Systems GmbH
276
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 func-
tions.
These include:
Create a new connection
Open a connection
Quick access to the most recently opened connections
Opening the Indi.Systems web services
Opening the FAQ
Displays contact information’s
277
5.1.2 Desktop Viewer - Main menu
The main menu offers you quick access to the basic program and project functions.
File
Here you'll find the settings for selecting a language as well as determining the update behavior. After changing the
language, the viewer has to be restarted. Now it effectively changed.
Also, here you can close the 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.
278
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 ac-
cording to the project settings, or you se-
lect your desired layout directly here.
279
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.
280
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.
Shows the current status.
Shows the logged in user.
281
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.
If your project has a header and/or footer, let it show or hide.
Zoom on complete page = Displays the complete page with all elements.
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.
Here you will find the log entries that you can show and hide. These can be messages of any kind.
Open the QuickHMI Alarm Center and view alarms.
282
Changing the viewer 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.
283
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 ex-
ample, 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 auto-
matically 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 enter-
ing 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.
284
To start the Viewer with parameters you have to 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.
5.1.7 Installing the QuickHMI Viewer on Linux-Systems
The installation of the QuickHMI Viewer on a Linux distribution is always done via the terminal. Please note the
system requirements for Linux!
Open a terminal or connect via SSH access to your Linux system. This will download the files below.
This is done via the following command:

wget https://www.quickhmi.com/linux/falcon/qhmi_linux_viewer_falcon.tar
Afterwards, the downloaded archive must be unpacked via a corresponding archive manager or the command line:
To unpack, enter the following command:

tar -xf qhmi_linux_viewer_falcon.tar
This command unpacks the required files into the current directory.
The viewer is started out of the folder of the viewer using the supplied script.
This requires root privileges:

sudo bash qhmiViewer.sh -r
285
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.
Then click “Start”.
The project will open in a browser of your choice. Supported browsers are currently Firefox, Chrome, Opera, Mi-
crosoft Internet Explorer and Microsoft Edge. The project view of the Web Viewer is identical to the project view
of the Desktop Viewer.
286
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.
287
More information’s:
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 pa-
rameter "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.
288
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
289
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)
290
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
291
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
292
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.
293
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.
294
Furthermore, you have the option of activating SSL encryption for the connection you have created. Use the check-
box. The same applies to the option to let the created connection open automatically when starting the app.
If all settings have been made, "connect".
295
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
296
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.
297
Important:
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.
298
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
Hard drive: at least 60 GB SATA2
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 (shared
memory is not recommended).
QuickHMI Standalone Runtime

Hard drive: at least 60 GB SATA2
Network: 100 Mbps
Raspberry Pi: Execution of the software on the Raspberry Pi from version 3 possible
QuickHMI Viewer or execution in the browser:

Network: 100 Mbps
Graphics: 3D-capable graphics chip
Raspberry Pi: Execution of the software on the Raspberry Pi from version 3 possible
299
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 con-
tinue 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 re-
quires 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 brows-
ers 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.
300
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.
301
6.3 Overview of the functions

Resource-saving server-client architecture
Will run on 64-bit systems
Command interface (file system, Oracle-or MS SQL database) for writing into the QHMI system from out-
side; upon request with encryption
Secure communication between server and clients due to SSL encryption
SVG Control Manager (Visualization of own svg control elements)
Creating variables in the text view
Graphics operations are performed within the GPU of the graphics card, and relieve the computer CPU
Free WYSIWYG editor
Central configuration tool for setting run-time environment parameters
On-the-fly switching between draft and run-time mode
User and group management
Parameterizable translation texts
Integrated alarm reporting system
Action, rule, recipe and resource management
HTML and JavaScript manager (Infinite expansion capabilities by running custom HTML or JavaScript code)
Fold-down or pinable header and footer lines
Zoomable masks and controls (Over 2000 graphics for free)
Integration of audio and image resources
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)
Native high-performance access on Siemens S7-PLCs
QuickHMI Viewer is available as an open source project
Compatible with S7 control systems (200, 300, 400, 1200, 1500 series and SoftSPS WinAC RTX) and CPUs
from other manufacturers (e.g. VIPA 100V/200V/300V/300S)
Access to S7 PLCs via TCP/IP or MPI
Integrated OPC-UA client
Integrated MQTT interface
Support for Beckhoff TWINCAT2 (from version 2.1) and TWINCAT3
Support for MODBUS protocol
Connecting mobile devices (For Android)
In planning: Migration of other protocols and drivers
302
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.
QuickHMI QuickHMI QuickHMI
Editor Runtime Manager 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 Man-
ager (Part of the QuickHMI Standalone Runtime).
303
Step 3 - Visualize processes with the viewer & app
View and manage all of your system’s processes with the QuickHMI Viewer, Webviewer and the QuickHMI Android
App.
304
7 Do you have any questions?
If you have questions about our product QuickHMI, please contact us.
Free hotline: + 49 421 - 98 97 03 - 30
Email: [email protected]
We will process your request promptly or respond to you directly.
305

Manual Qhmi

Uploaded by

Document Information

Original Title

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

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

Copyright © 2020 Indi.Systems GmbH

2 QuickHMI Falcon - That´s new!

Completely Independence with your own controls

Create variables as text view

Quickly align multiple controls

Community- Private- Basic- Professional-

TwinCat data sources No Yes Yes Yes

QuickHMI USB-Dongle (Optional)

QuickHMI Individual training

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

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.

Here you can determine the update behavior of your software.

Backup & Restore

Save & Load

Factory settings (standard layout)

 Server: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\server

 Server: /usr/share/Indi.Systems/QuickHMI Server v6/logs/server

Select the desired language.

Open system information’s or check if drivers are digitally signed.

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.