Project settings

In the Project explorer, click on “Project settings”.





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




  • Runtime | On-screen keyboard

Here you can set the layout of the on-screen keyboard. Secondly, you can determine the size of the displayed on-screen keyboard.

To do this, simply change the percentage. So, you can adjust the size of the keyboard optimally to your end device.

In the Dropdownbox for "Textbox focus behaviour", you can set whether the cursor should be after the last letter when clicking in a text box (default) or whether the entire text in the text box should be highlighted (select all).




  • Runtime | Zoom & pan

Here you can set the initial zoom level. Choose “Fit” for display the full site or zoom to 100% (like in the editor).


You can also deactivate the Zoom & pan function completely.  This can be especially useful on touch devices to prevent accidental panning or zooming.

To enable and disable Zoom & pan, use the corresponding checkbox. By default, the function is activated.




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




  • Runtime | Compression

Data sent between server and client, can be compressed to improve transfer speed.

How the data is compressed, is set here. The performance depends on the compression.




  • Runtime | Java

The Java maximal heap size determines how much memory the JVM (Java Virtual Machine), and therefore our server, can allocate.

Given too much memory the server might don't start at all. Given to less it might later. Java settings need only be changed if recommended by the software.

Otherwise usually no changes need to be made.


How much memory is needed mainly depends on the project size. We recommend to only these values with caution.




  • Runtime | Responsive

With QuickHMI, you can easily adapt your visualisation for different end devices. 

The editor provides you with 3 different layouts (small, medium, large) in which you can optimise the arrangement of control elements for display on different screen widths, among other things.

By clicking on the question mark, you can see the logical width of the current device.




  • Data management | Charts

Here you can specify how many days the data should be saved and thus be visible. "Save" your setting to continue.




  • Data management | Alarms

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

An "Alarm.db" database is automatically created at C:\ProgramData\QuickHMI\QuickHMI Server Jellyfish\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 a period in days and the maximum number of alarms that should be saved in the table.




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:



If you want to use any other database to save variables, create a database in the Project Explorer under Connections. Please note that the user in the JDBC string has the authorisation to create a table. 

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 define the complete design of the user login mask so that it fits your company or project.

You can customize the logo as well as the colors and the texts. By default, the QuickHMI design is active. 




  • Corporate Design | Common

Here the "Accent color" can be determined. This includes, for example, all the individual buttons.

You can also change the "Favicon" here. The favicon is the small icon in the upper left corner of the browser.

Most websites have their own favicon. To change the favicon, you can use previously implemented image resources

as well as a graphic uploaded under "New". All settings made here affect the complete viewer.





  • Corporate Design | Login

Here, the "Title", "Subtitle", "Background Color" and an own "Logo" can now be determined. To change the logo,

previously implemented image resources can be used as well as a graphic uploaded under "New". All settings made here affect the user login mask.





  • Corporate Design | Loading screen

This is about the loading animation. The “Background color” can be selected, as well as the loading animation.

This is a gradient animation of two graphics. Therefore, two graphics must be selected here. A start graphic that

is always shown and a target graphic that overlays the start graphic step by step. An animated preview below the

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





  • Corporate Design | Execution of the example

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





  • Data sources

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


- MQTT

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


       

       


- OPC

For OPC data sources you can select which time stamp is to be used for a variable change. By clicking on the "DropDownBox" (arrow) you can choose between 3 possibilities:

  • QuickHMI - The time when the variable change was received in the QuickHMI system.
  • Source - Source Timestamp from the OPC Server.
  • Server - Server Timestamp from the OPC Server.


       

       


  • AutoSave

Here you have the option to set an automatic save for individual projects.


By default, the checkbox (blue arrow) "Use editor settings" is selected. In this case, the time interval is taken from the Editor AutoSave. >>Editor

If you want to make AutoSave settings for an individual project that differ from the editor standard, remove the tick from the checkbox "Use editor settings" (blue arrow). Then you can make project-specific settings. For example, you can activate or deactivate the AutoSave independently of the editor via then checkbox "Activate" (red arrow).


       



When all settings have been made, click on "Save".

In the status bar you can check if the AutoSave is really activated.



If you have not yet selected a save location, you will be prompted to specify one during the first automatic save operation.

Ten seconds before each automatic save you will get the information "AutoSave in: [s]. Click here to skip once." at the bottom of the status bar. You have the

possibility to cancel single automatic saving processes by clicking directly on the information in the status bar.



Whether the AutoSave was successful or failed, you can see attachment of the information in the status bar.

In case of successful saving: