Project settings

To access the project-related settings, click on Project settings” in the“Project Explorer“.

All project settings that you make are saved in the project and automatically applied to the QuickHMI Runtime Manager when it is executed.


General

Here you can set up a new project ID for the project, set up project protection by assigning a password and display outdated control elements.


General | Project ID

The purpose of generating a project-dependent ID is that databases for saving the chart data are not dependent on the saved project name, but on the generated “Project ID“. This means that the same data can be accessed in several projects using the ID. To do this, enter the “Project ID” of the project whose data is to be used in the input field and confirm with “Save“.

The reverse case is also conceivable: If a project is saved with“Save as“, the“Project ID” is also adopted. By default, the same data would therefore be used as the basis for the charts as for the old project.

However, if the new project is now to be started with a fresh database, a new random“Project ID” can simply be generated using the“Generate” button.


Runtime | On-screen keyboard

Here you can specify which layout the on-screen keyboard should have. To deactivate the on-screen keyboard, select the blank layout. This is at the top of the list.

You can also determine the size of the on-screen keyboard displayed. To do this, simply change the percentage. This allows you to optimally adjust the size of the keyboard to your end device.

In the dropdown box for “Focus behavior of text fields”, you can set whether the cursor should be positioned after the last letter when clicking in a text field (default) or whether the entire text in the text field should be selected (select all).


Runtime | Zoom & Pan

Determine the “Initial zoom level” here. You can decide whether the entire page is displayed after the start of runtime mode (select “Fit“) or the zoom to 100% (as in the editor).

You can also completely deactivate the“Zoom & Pan” function. This can be particularly useful on touch devices to prevent accidental panning or zooming.

To activate and deactivate“Zoom & Pan“, use the corresponding checkbox. The function is activated by default.


Runtime | Ports

Here you can specify which ports are to be used. For each port, you can specify whether it should be HTTPS-secured or not. This is done simply by activating or deactivating a checkbox.


Runtime | Compression

Data between the server and browser can be compressed to improve the transmission speed. Whether and how the data is compressed can be set here.


Runtime | Java

The maximum Java heap size determines how much memory the JVM (Java Virtual Machine), and therefore our server, can use. If too much memory is allocated to the process, it may not start at all. If, on the other hand, it is allocated too little, it may crash.

How much memory the server process really needs depends mainly on the size of the project. We recommend only changing these values with appropriate caution.


Runtime | Responsive


Data management | Charts

Here you can specify how many days the data should be stored and thus be visible.


Data management | Alarms

You have the option of saving the alarms in an internal SQLite database.

A database “Alarm.db” is automatically created under C:\ProgramData\QuickHMI\QuickHMI Server Ibex\datastore\projects\“Your Project”\alarms with the tables QHMI_ALARM_HISTORY and QHMI_ALARM_VARIABLE.

All alarms that have been triggered are saved in the QHMI_ALARM_HISTORY table. You can decide how long the period in days and how high the maximum number of alarms to be saved in the table should be.

You can see the table structure and which values you can take from it here:

When the server is started, all alarm variables created in the Editor are created in the QHMI_ALARM_VARIABLE table and updated if necessary.

You can see the table structure and which values you can take from it here:

Wenn Sie eine eigene beliebige andere Datenbank zum speichern von Variablen nutzen möchten, legen im Projekt Explorer unter Verbindungen” eine Datenbank an. Bitte beachten Sie das der Benutzer im JDBC-String die Berechtigung hat eine Tabelle anzulegen.

When starting the server, we try to create the two tables in the database. We support the following drivers:

MySQL JDBC driver (Connector/J)
PostgreSQL JDBC driver
Oracle JDBC driver
Microsoft JDBC driver for SQL Server
SQLite JDBC driver
H2 Database Engine
Derby JDBC driver (JavaDB)
MariaDB JDBC driver
Amazon Redshift JDBC driver
IBM Data Server Driver for JDBC and SQLJ
Firebird ODBC Driver

If an error occurs or you want to use a database other than those listed above, you also have the option of creating the tables manually.

The following example is an SQL statement for a MariaDB. Please note that the SQL statement titles in other databases may differ, for example in the data types.

CREATE TABLE QHMI_ALARM_HISTORY (ID INT AUTO_INCREMENT PRIMARY KEY, VARIABLE_ID INT, START_TS BIGINT, END_TS BIGINT, END_TS_ISACCURATE TINYINT);

CREATE TABLE QHMI_ALARM_VARIABLE (ID INT PRIMARY KEY, NAME VARCHAR(512), TYPE VARCHAR(16), MESSAGE VARCHAR(2048), LOCATION VARCHAR(512));

You can adapt the character size of the VARCHAR(?) data type to your project as required.


Corporate Design

Here you can change the design of the user login screen and the loading screen. The QuickHMI design is active by default. You can customize the logo as well as the color and texts. The QuickHMI design is active by default.


Corporate Design | General

The “accent color” can be determined here. This includes, for example, all the individual buttons.

You can also change the “favicon” here. The favicon is the small symbol at the top left of the browser. Most websites have their own favicon. Both previously implemented image resources and a graphic uploaded under “New” can be used to change the favicon.

All settings made here affect the entire viewer.

Corporate Design | Login

Here you can now enter the “Title, ” Subtitle, the Background color as well as your own “Logo“. Both previously implemented image resources and a graphic uploaded under “New” can be used to change the logo.

All settings made here affect the user login screen.

Corporate Design | Loading screen

This is about the loading animation. On the one hand, the“background color” can be selected again, but also the loading animation itself.

This is a gradient animation of two graphics. This means that two graphics must also be selected here. A start graphic that is always displayed and a target graphic that gradually overlays the start graphic. An animated preview below the settings illustrates the principle.

It is recommended that both graphics have the same size. In the best case a dimension of 256px x 256px.

Corporate Design | Execution of the example

To illustrate this, here is the execution of the viewer with the login mask defined above compared to the standard settings.

*Standard
*Newly defined

Data sources

Here you can make various settings that affect all data sources of a data source type.

MQTT data sources

By clicking on the “…” button (arrow), you have the option of selecting the corresponding file (certificates or keys) directly. This information is only required for MQTT data sources that use TLS and/or provide client authentication via certificate.

OPC data sources

For OPC data sources, you can select which timestamp should be used for a variable change. By clicking on the“DropDownBox” (arrow) you can choose between 3 options:

  • QuickHMI – The time at which the variable change was received in the QuickHMI system.
  • Source – Source timestamp from the OPC server
  • Server – Server Timestamp from the OPC Server

AutoSave

Automatic saving for individual projects can be set here. The“Use editor settings” checkbox (blue arrow) is selected by default. In this case, the time interval is taken from the Editor AutoSave.

If you want to make AutoSave settings for an individual project that differ from the Editor standard, uncheck the“Use Editor settings” checkbox (blue arrow). You can then make project-specific settings. For example, you can activate or deactivate AutoSave independently of the editor using the “Activate” checkbox.

After saving the desired setting, you can check in the status bar whether AutoSave is activated. You will be asked to specify a storage location during the first automatic saving process.