MANUAL. QuickHMI Software. Modern SCADA/HMI visualization

Transcription

1 MANUAL QuickHMI Software Modern SCADA/HMI visualization Secure and resource-friendly client/server architecture Platform independent Android App available Secure encrypted communication QuickHMI-Viewer as open source Compatible with HTML5, JavaScript and CSS3 Drag & Drop Scalable and flexible Unlimited extension possibilities Extensive compatibility Graphics for any application Comfortable integrated recipe management Usage of audio file resources Interfaces for external data supply On-the-Fly-Switching between editor and runtime mode User management Alarm reporting system Trending Multilingualism Cost-effective and easy licensing Indi.Systems GmbH Universitätsallee Bremen info@indi-systems.de support@indi-systems.de

2 Table of contents Table of contents Introduction QuickHMI Editor Licenses Request a test license Activation of licenses Automatic license activation Manual license activation Editor start page Creating a new project Header and footer Open project Editor user interface Editor main menu File Runtime Project Edit Editor License information Update settings Backup & Restore Save & Load Factory settings Window Language Help Edit Page Changing page size Adding views Add a new page / Header & footer Project settings The Project explorer Working with control elements Using of the control elements Assignment of properties Move and rotate Rules Actions PlugIn Manager Working in different layers Communication Creating database connections

3 Free SQL databases integration JDBC Strings Creating data sources Creating S7 data sources Creating OPC data sources Creating TWINCAT data sources Creating MODBUS data sources Creating KNX data sources Creating DataBase data sources Creating File system data sources Creating MQTT data sources Creating Allen-Bradley data sources External Logging External logging in the database External logging in the file system Adding variables Adding S7 Variables Adding OPC UA Variables Adding OPC Classic DA variables Adding TWINCAT variables Adding MODBUS Master variables Adding MODBUS Slave variables Adding KNX variables Adding DataBase variables Adding File system variables Adding MQTT variables Adding Allen-Bradley variables Adding Alarm variables Internal variables Drag&Drop Function Variables with control elements JavaScript & HTML HTML Manager Adding HMTL blocks Delete HMTL blocks JavaScript / Definition Scripts for component events Scripts for variable change events Assignment Visibility of functions and variables QuickHMI JavaScript - API Translation texts Security Adding users Adding groups Manage right Integrate and use media resources Integrate image resources Adding image controls

4 Integrate audio resources Audio recourses related to controls Audio recourses related to alarm variables Chart Manager Adding and edit charts Lines and bars Pie chart Chart control elements Recipe Manager Create a new recipe Recipe manager - User management Runtime mode Starting runtime mode Loading Time The runtime Export the project for the server Tips & Tricks QuickHMI Server Setting up the server with the QuickHMI Runtime Manager Runtime Manager - Start page Licenses & certificates Runtime Manager - Configure the project Runtime Manager - User management Runtime Manager - Recipe management Runtime Manager - Settings Runtime Manager - Data sources Runtime Manager - Help Using QuickHMI on the Raspberry Pi Using the QuickHMI Raspbian image Installing QuickHMI on Linux-Systems QuickHMI Viewer QuickHMI Desktop Viewer Desktop Viewer - Start page Desktop Viewer - Main menu Desktop Viewer - Start project Desktop Viewer - Open project Desktop Viewer - Project view Desktop Viewer - Start parameters QuickHMI Android App Android App - Open a new connection Android App - Project view QuickHMI in the browser System requirements for QuickHMI Connection to PLC and devices Overview of the functions Configuration in 3 steps Do you have any questions?

5 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 2018 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

6 2 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, Linux or MacOS. With the scalable QuickHMI create small projects with a Raspberry Pi up to a large visualization of industrial landscapes. 2.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. You can choose between the following types of licenses: QuickHMI Private Edition Use the QuickHMI Editor to create and maintain your private QHMI projects. QuickHMI Private Edition License for private persons Max. number of data sources 1 Max. number of variables 100 External interfaces --- Simultaneous accesses 2 Commercial use --- Delivery ONLY within the EU 1 year free software updates No runtime licenses necessary 6

7 QuickHMI Professional Single License Use the QuickHMI Editor to create and maintain your private QHMI projects. QuickHMI Professional Edition License for 1 PC Workstation Max. number of data sources Unlimited Max. number of variables Unlimited External interfaces Simultaneous accesses Commercial use Unlimited Delivery ONLY within the EU year free software updates No runtime licenses necessary QuickHMI Professional Site License Use the QuickHMI Editor to create and maintain your private QHMI projects. QuickHMI Professional Site License License for 1 company location Max. number of data sources Unlimited Max. number of variables Unlimited External interfaces Simultaneous accesses Commercial use Unlimited Delivery ONLY within the EU year free software updates No runtime licenses necessary 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 Meeting in German. 7

8 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. More information about the QuickHMI license model, can be found on our homepage: 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. 8

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

10 The download area contains the QuickHMI Software Package, the Update Package and the image for the Raspberry Pi. You can also call the help here. To request a trial license, click on "Request trial". 10

11 In the following dialog, select whether you require a Private trial license or a Professional trial license. As described in the dialog, a private license may only be used privately and not for commercial or commercial purposes. 11

12 The trial license will be sent to you within 5 minutes by . With this trial license, you can use QuickHMI 14 days for free. Compatibility of the license models The private trial license can be converted to a private full license and the trial license for businesses can be converted into a full license for businesses. Other combinations are not possible. How to import and activate licenses, you will find in the chapter "Activation of licenses". 12

13 2.1.2 Activation of licenses After you have download QuickHMI and start the QuickHMI Editor, you must activate a valid license to continue. Activate via "Import" in the opened window, your demo license, which you automatically received with your download of QuickHMI or your purchased full license. Would you like to purchase a full license? Then you can contact us via our homepage: For license activation, click on "Import" and select either your full license or the demo license. 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 Automatic license activation To automatic activation, an existing connection to the Internet is required because the license will be registered on our "QuickHMI Server". Only your hardware ID and license will be transferred. Click "Yes" to activate your license automatically. The license was activated successfully. 13

14 If you have exceeded the maximum number of license activations, the following dialog will appear, and you will need to purchase a new license 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. 14

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

16 2.3 Creating a new project Determine the most basic features that your new project will have. Choose a name for the first page, the background color, and the screen ratio. You can also create a header and footer here. 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. 16

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

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

19 2.5 Editor user interface After you have defined 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. 0Properties 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 define 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. 19

20 2.6 Editor main menu Navigate in the main menu for quick access to the basic program features 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 , it is no longer backwards compatible. Server export File needed by the QuickHMI Runtime Manager in order to configure the project. Close project The project will be closed. Recently opened projects Recently opened projects are listed and can be selected with a single click. Grayed-out files have been deleted and can therefore no longer be selected. Exit QuickHMI will close Runtime All information s about the runtime mode, can be found in the chapter Runtime mode. 20

21 2.6.3 Project All operations that you find in the "Project explorer" can also be called up directly in the main menu under "Project" Edit If you click on "Edit, you can perform the following operations: Cut Cuts selected control elements. Copy Copies selected control elements. Paste Pastes copied and cut control elements. Insert with assignment Maintains the properties of the copied element; please note that the function Insert does not do this and instead assigns the standard values for the properties. Delete Deletes selected control elements. Page properties The basic properties of the page can be defined. 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) Important: The copy and delete and cut functions can only be edited within the Editor desktop. 21

22 2.6.5 Editor Click on "Editor" in the menu bar and you have the following options: License information To get information about your currently used license, click on "Editor" --> License info in the menu bar of the QuickHMI Editor. This will open the window "License info", with all information s about the used license. Here you also have the option to change licenses, with click on the corresponding button. To change licenses, the open project must first be closed. 22

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

24 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 are logging to their respective files which are located in the following directories: Windows: Linux: Server: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\server RuntimeManager: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\rm Server: /usr/share/indi.systems/quickhmi Server v6/logs/server RuntimeManager: /usr/share/indi.systems/quickhmi Server v6/logs/rm 24

25 Language Select the desired language Help Here, you can open the help file (QuickHMI Documentation) and information about the QuickHMI version you are using with integrated diagnostic tools. Open system information s or check if drivers are digitally signed. 25

26 2.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 description of the View Manager, go to the link below. You can also open the properties window by holding down the Alt key. 26

27 2.7.1 Changing page size Here you have the option to change the page size. In this case, proceed as follows: If you are in the "Side properties", you will find "Page size" in the "Settings" area. 27

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

29 In this example, only the red button remains. All other buttons were outside the new size range. Before change size After change size Adding views You have the options of dividing your project into organized sections to make navigation within the large project significantly easier. To set up a view, select Edit from the Main menu and then Page properties. Alternatively, hold down the ALT key with the page selected on the Editor desktop. The control elements can be hidden and replaced using the Views tab. The view can be placed on the Editor desktop, where its size can be adjusted and selected like any other control element via Drag&Drop. Selected views, like other objects in the Editor, have their own properties. These can also be modified via the Properties window for the selected view. 29

30 All of the views can be selected under the menu item Edit / Page properties / Navigation and under Navigation targets in Project explorer Add a new page / Header & footer To add new pages, click Add page in Project explorer. Then proceed as described in chapter "Creating a new project". 30

31 Adding header & footer Select "Header/Footer" as "Type". Now you can choose one of the templates or enter individual values. Then continue with "OK". Page2 has been defined as a page with a header and footer. You can edit these headers and footers and display them on all other pages. 31

32 To do this, select a page in which a header and footer should be inserted and navigate to Edit / Page properties. 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. 32

33 2.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 Manager when it is executed. Common Here, you can set up project protection by assigning a password of your choosing. 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. 33

34 Runtime Compression Data sent between server and client, can be compressed to improve transfer speed. How the data is compressed, is define 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. The settings for the 32bit version only affect the editor. 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". 34

35 2.9 The Project explorer You can set project-specific settings here: Pages and sections Add new pages and selections. 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. (Please refer to the chapter "JavaScript & HTML" for further information) 35

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

37 2.10 Working with 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. Buttons and Inputs Variety types of buttons and input elements Charts Variety types of charts 37

38 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 Timer and Trigger Variety types of timers and triggers Tanks Variety types of tanks Valves Variety types of valves 38

39 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 (Explanation: Layers section). Now you can assign the control elements properties, actions, and rules. Pull the control element corners to enlarge or reduce its size. Adjust the display: Zoom in, out or display the entire display area. 39

40 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 elements, to be able to assign actions and commands later. For this click on the button "..." at the column "Name". Name the control element in the opening window "Edit name" as desired. Continue with "OK". 40

41 Move and rotate 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 41

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

43 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 enable/disable conditions. The order of rules is very important. Rules will be processed from top to bottom, one after another. The processing will stop when a rule is reached, which condition is true. Rules after this rule won t have any effect. For the example above that means: 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. 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 define 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 define 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 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. 43

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

45 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 rights, can be found in the chapter "Manage rights". 45

46 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. How this works is explained in the chapter "Translation texts". The language can then be selected in drop down box below. 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. LOGOUT If this command is executed, the currently logged-in user is logged out. 46

47 OPEN This command can open a previously created view (using View Manager) or a dialog when the action is triggered. These can be selected in the drop down boxes below. How to create views with the View Manager is shown in the chapter "Adding views". 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 chapter "Integrating and using media resources". 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 chapter "JavaScript & HTML". SET_VARIABLE This command assigns a new value to a variable. Which value is assigned to which variable, can be defined 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 defined 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 defined in the drop down boxes below. 47

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

49 The selected extensions have been added and the control elements which contained in them are available. If you want to remove selected control elements, select them in the "Installed" section and click the red arrow for "remove". By clicking on Remove all all extensions are remove Note: It is recommended that you do not enable all extensions at once, which can significantly increase the load times of the editor. 49

50 2.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". 50

51 The new folder "Project 1" has been added successfully. Now 2 more control elements and a new folder "Project 2" have been added. 51

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

53 2.12 Communication Communication between database connections, data sources and variables This chapter discusses the communication between and between database connections, data sources, and variables. All of these can be set up, edited or deleted. International users can also create and manage translation texts here Creating database connections A variety of types of database connections can be set up here. For instance, Oracle and MSSQL databases. Database 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 chapter "JDBC Strings". Also listed are the installed JDBC drivers whose folders you can view with "Open driver directory". Continue with Add. 53

54 Free SQL databases integration Other new feature in QuickHMI is the possibility to integrate JDBC-driver for SQL Databases 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 MyService> SQL Server jdbc:sqlserver://<host>:<port>;databasename=<mydbname>;user=<myuser>;password=<mypassword> Firebird jdbc:firebirdsql:<host>/<port>:<pfadinklusivedatenbankname>?encoding=utf8&username=<myuser>&password=<mypassword PostgresSQL jdbc:postgresql://<host>/test?user=<myuser>&password=<mypassword>&ssl=true Sqlite jdbc:sqlite:<pfadinklusivedatenbankname> 54

55 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 Creating data sources You can create various data sources in QuickHMI. The following data source types are available for selection: S7 OPC *1) TWINCAT *1) MODBUS Master / MODBUS Slave KNX DataBase Filesystem MQTT Allen-Bradley *1) OPC Classic DA and TWINCAT data sources are not executable under Linux and Mac-OS. If these are to be executable under Linux and Mac OS, the use of OPC UA data sources is recommended. 55

56 To add data sources, click in the Project explorer in the Communication section on Data sources. How to create data sources for each type, you will learn in the following chapters 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. 56

57 Additional information: If the window opens, the S7 data source is selected by default as "Type". 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. 57

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

59 The S7 data source is created and subsequently displayed in the data source overview. 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 chapter "Adding S7 variables" 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 59

60 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 Logo! Controllers This chapter is intended to provide you with information about the functionalities provided to connect to a Logo! 0BA7 or 0BA8 controller. This is not a complete documentation, but a guide to help you getting started. All information is supplied without any liability. All rights reserved and subject to change. The contents of this document are protected under international copyright laws. Without prior written consent from the copyright holder, no part of this documentation may be reproduced by means of photocopying, microfilm or other processes, or transcribed or translated into another language or computer language in any form. Note: All product names or other names or brands referred to in this documentation are the trademarks or registered trademarks of their respective owners and are the property of those copyright owners. There 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: 60

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

62 Memory organization 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 Blocktype From VM adress To VW adress Data type DI Digital-Input Byte Byte Bit A1 Analog-Input Byte 926 Byte 940 Word Q Digital-Output Byte Byte Bit AQ Analog-Output Byte 944 Byte 946 Word M Digital-Flag Byte Byte Bit AM Analog-Flag Byte 952 Byte 982 Word 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. 62

63 VM memory can be accessed with QuickHMI by reading or writing to data block 1 (DB1). Furthermore, you can access memory ranges directly via the QuickHMI library and data types. Logo! Range Block type From VM adress To VW adress Data type DI Digital-Input Byte Byte Bit A1 Analog-Input Byte 1032 Byte 1063 Word Q Digital-Output Byte Byte Bit AQ Analog-Output Byte 1072 Byte 1103 Word M Digital-Flag Byte Byte Bit AM Analog-Flag Byte 1118 Byte 1245 Word NI Digital-Networkinput Byte Byte Bit NAI Analog- Networkinput Byte 1262 Byte 1389 Word NQ Digital-Networkoutput Byte Byte Bit NAQ Analog- Networkoutput Byte 1406 Byte 1469 Word er/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 S and S controller is deactivated by default. You need to perform the following steps to allow the access. 1. Allow general access. To do so, activate the option Connection mechanism Allow access PUT/GET communication from remote partner in the protection settings. 2. Enable access to you DBs. For this you have to deactivate the optimized access in the DB properties. 3. Load changes to PLC and you re done! 63

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

65 You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. OPC Specific: Connection type Here you can choose between OPC Classic DA and OPC UA. 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". 65

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

67 ---> Connection test is successful. 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". The OPC UA data source is created and subsequently displayed in the data source overview. 67

68 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 OPC UA data source. You can find out how to add variables for the OPC UA data source in the chapter "Adding OPC UA variables". A more detailed explanation of the individual security modes, can be found in the chapter: Explanation of the security modes of the OPC data sources Creating OPC Classic DA data sources If the connection type "Classic" (OPC Classic DA) is selected, the "Endpoint URL" can be manually entered manually, or automatically by clicking on the bracket icon. In the window that opens you will see all local OPC servers. Here you can now "Select" one. 68

69 The "Endpoint URL" was thus entered automatically. Once all entries have been made, click on "Add" to create the OPC Classic DA data source. Important: OPC Classic DA is Windows-specific and therefore only available under Windows 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) 69

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

71 After this, the data source-specific settings adapt automatically to the TWINCAT data source. You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. 71

72 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". After entering the information relevant for the connection, click on "Add". The TWINCAT data source is created and subsequently displayed in the data source overview. 72

73 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 TWINCAT data source. You can find out how to add variables for the TWINCAT data source in the chapter: "Adding TWINCAT variables" 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 already preselected as the data source type. (This works with all data source types). 73

74 After this, the data source-specific settings adapt automatically to the MODBUS data source. You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. 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. 74

75 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. All settings must be taken from the counterpart specifications here. ASCII Runs on a Com port and the data is transmitted in Ascii format. All settings must be taken from the counterpart specifications here. 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. Registermode Defines the register size set on the slave. 75

76 Merge data sources The ability to aggregate data sources is essential for RTU and ASCII when multiple devices are on the same bus. Otherwise, there is no way to use multiple data sources from the same bus. Therefore, we recommend that you do not change this setting. PDU Limitation Defines the register size set on the slave. After entering the information relevant for the connection, click on "Add". The MODBUS Master data source is created and subsequently displayed in the data source overview. 76

77 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 MODBUS Master data source. You can find out how to add variables for the MODBUS Master data source in the chapter: "Adding MODBUS Master variables" 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. All settings must be taken from the counterpart specifications here. RTU over TCP Runs through TCPIP and the data is transmitted in RTU format. All settings must be taken from the counterpart specifications here. ASCII Runs on a Com port and the data is transmitted in Ascii format. All settings must be taken from the counterpart specifications here. UDP Network connection without guarantee that it will receive. 77

78 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 Defines 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. Therefore, we recommend that you do not change this setting. 78

79 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. After entering the information relevant for the connection, click on "Add". 79

80 The MODBUS Slave data source is created and subsequently displayed in the data source overview. 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 MODBUS Slave data source. You can find out how to add variables for the MODBUS Slave data source in the chapter: "Adding MODBUS Slave variables" 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. 80

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

82 You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. 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. After entering the information relevant for the connection, click on "Add". 82

83 The KNX data source is created and subsequently displayed in the data source overview. 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 KNX data source. You can find out how to add variables for the KNX data source in the chapter "Adding KNX variables". 83

84 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 chapter "Creating database connections". 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. 84

85 You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. DataBase Specific: Connection Select the previously created database connection here. After entering the information relevant for the connection, click on "Add". 85

86 The Database data source is created and subsequently displayed in the data source overview. 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 DataBase data source. You can find out how to add variables for the DataBade data source in the chapter: "Adding DataBase variables" You can find out how to perform external logging for the DataBase data source in the chapter: External logging in the database 86

87 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 What are the requirements for the database data source? To use the QuickHMI database data source you have to have an existing and administered database and a corresponding JDBC driver. The database has to be accessible by the QuickHMI processes. The connection must not interrupt by a firewall or likewise things. The network connection between QuickHMI and database should use the speed of 100Mbit/s. 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 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. Settings In the Project explorer, click on Database connection in the Communication section, to create a new database connection. 87

88 How to create a new database connection is described in the chapter "Creating database connections". Insert your data into the table QHMI_VARIABLES. Example: Create a matching data source by clicking on "Data source" in the project explorer. 88

89 You can find out how to create a new data source in the chapter "Creating data sources". 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. 89

90 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 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 File system data source. 90

91 You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. 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. After entering the information relevant for the connection, click on "Add". 91

92 The File system data source is created and subsequently displayed in the data source overview. 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 File system data source. You can find out how to add variables for the File system data source in the chapter: "Adding File system variables" You can find out how to perform external logging for the File system data source in the chapter: External logging in the file system 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. 92

93 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 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 can access 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). Settings In the Project explorer, click on Data sources in the Communication section. 93

94 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 Creating MQTT data sources To create a MQTT data source, click on the button for "Add data source". 94

95 The data source input mask opens, in which you can select the MQTT data source as "Type" as a first step. However, if you first assign a name to the data source and if this contains the word "mqtt", then "MQTT" is already preselected as the data source type. (This works with all data source types). After this, the data source-specific settings adapt automatically to the MQTT data source. You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. 95

96 MQTT Specific: Host Enter here the host (broker) to be used with the corresponding port. User name Enter your username Password Enter your desired password. Persistent Session Here you can activate the persistent session with the checkbox. You can also activate the "Persistent Session". When using a persistent session, an identifier is exchanged between the QuickHMI server and the MQTT broker. This identifier is used to recognize the QuickHMI server from the MQTT broker if you temporarily shut down the QuickHMI server or if a connection is lost. When reconnecting to the broker, any variable changes that have been missed in the meantime are transferred. After entering the information relevant for the connection, click on "Add". 96

97 The MQTT data source is created and subsequently displayed in the data source overview. 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 MQTT data source. You can find out how to add variables for the MQTT data source in the chapter: "Adding MQTT variables" 97

98 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 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 Allen-Bradley data source. 98

99 You now 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 manually fill the variables you created later with values in order to check the correctness of your functionalities. 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. Allen-Bradley Specific: IP adress Enter the desired destination IP address. Slot Enter the slot of the data source. After entering the information relevant for the connection, click on "Add". 99

100 The Allen-Bradley data source is created and subsequently displayed in the data source overview. 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 Allen-Bradley data source. You can find out how to add variables for the Allen-Bradley data source in the chapter: "Adding Allen-Bradley variables" 100

101 External Logging The external logging describes the possibility of creating a data image. You can log into a database as well as into a file system. External logging is always set to the entire data source, with all its variables included. There are 2 options for external logging: 1. Data image A subtraction of the current value of the variable from the data source is created. 2. Data log A log is created which shows the changes of the variables External logging in the database Additional QuickHMI interfaces with just a few clicks. The interface for databases gives the QuickHMI developer an easy way to provide an interface for an existing database with following features: Data-Archiving Every QuickHMI incoming data from devices will be written in a table. Data-Image Complete Image of variables their current value and timestamp of last change 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 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 chapter "Creating database connections". 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. 101

102 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. Important: 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 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 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. 102

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

104 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. Following information will be written: Column Column type Information ID NUMBER(*, 0) Not Null Consecutively numbered ID, Primary key TS TIMESTAMP(6) Not Null Time, Timestamp DATASOURCE VARCHAR2(50) Not Null Data source name DATATYPE VARCHAR2(50) Not Null Data type VARNAME VARCHAR2(100) Not Null NAME of VARIABLE VALUE VARCHAR2(2048) Null Value of VARIABLE QUALITY VARCHAR2(50) Null Quality (GOOD, if QuickHMI-connection to target device regulatory works, BAD, if problems appear (e.g. Timeouts)) 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. 104

105 It exists one row in the table for each variable. Following information will be written: 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 device regulatory works, BAD, if problems appear (e.g. Timeouts)) 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. 105

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

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

108 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 define a password. Click OK to continue. 108

109 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 _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. Following information will be written: 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)) 109

110 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: Files will be created in this format: <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. Following information will be written: 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)) 110

111 Structure XML file data image: Files will be created in this format: <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. Following information will be written: 1. Flag if file is encrypted 2. Timestamp incl milliseconds 3. Sender (Name of data source) 4. Data type 5. Name of Variable 6. Current Value 7. Quality (GOOD, if QuickHMI-connection to target device regulatory works, BAD, if problems appear (e.g. Timeouts)) For encrypted files, the XML format has remained preserved. Only the field contents are encrypted 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. 111

112 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 Adding variables 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. 112

113 Adding S7 Variables 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. For more information on fast entry, see the chapter "S7 syntax for fast entry". 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 113

114 The variable for the S7 data source was created successfully and can now be used. Another option is to read variables from a CSV file. A CSV file describes the structure of a text file, for storing or exchanging simply structured data. A suitable guide for importing CSV files can be found in the chapter S7 CSV - Import S7 CSV - Import To add variables to the S7 data source via an S7 CSV import, select the Import button and click on the "S7 CSV - Import". Under "Data Source", select your previously created data source as well as the CSV file from which the variables should be read. CSV files can have different encodings. Therefore, in the "File settings" section, you will be given the opportunity to select the correct encoding and see if all the characters are correct. This should be done before the CSV file is selected. If the characters are wrong, the CSV file cannot be read or is displayed incorrectly. In addition, you can set, that blank lines will be skipped, control characters removed, spaces removed, and the assignment of columns. 114

115 Once all entries have been made, click "Import" to add the variables to the S7 data source. The variables for the S7 data source were created successfully via an S7 CSV import and can now be used. They will also be listed in the variable overview. You can also create alarm tags via an S7 CSV - Import. The appropriate instructions can be found in the chapter: "Adding alarm tags via an S7 CSV - Import" S7 Syntax for fast entry S7 (and MODBUS) variables can also be added with a fast entry. Fast entry for variables With a correct syntax, whit a single entry, a variable can be created here. By pressing the Enter key once, the values are transferred to the remaining fields. By pressing the Enter key twice, the variable is also added immediately. 115

116 S7 Syntax for fast entry: S7 Syntax General: <name>=<area><data type><start address> Exception for Boolean and strings. Here the bit or the length has to be given too: <name>=<area><data type><start address><.bit> <name>=<area><data type><start address><.length> If the range is a data building block or the instance is a building block: <name>=<area><data block><.data type><start address> Here too you must give the bit or the length at the end for Booleans or strings: <name>=<area><data block><.data type><start address><.bit> <name>=<area><data block><.data type><start address><.length> Important: The dots in the places shown are absolutely essential if the values are to be correctly processed. The range to the left of "=" is taken as the name and the range to the right of "=" gives the variable address. The abbreviations for the data types are: BCD2u BCD4p BCD4u BCD16 Boolean DInt DWord Float Int ShortString String UByte Word BCD BCD BCD BCD X, none DI DW R I G S B W 116

117 The abbreviations for the range are: Data building block Instance building block Flag Timer Counter Input Output Periphery input Periphery output DB DI F, M T C, Z I, E Q, A PI/PE PQ/PA You can choose between two types of syntax for the fast entry of a MODBUS variable. Either the standard syntax or the MODBUS syntax Adding OPC UA Variables Adding variables to the OPC UA data source Enter Add external variable. 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". 117

118 The variables for the OPC UA data source have been created successfully and can now be used. 118

119 Adding OPC Classic DA variables In order to add variables to the OPC Classic DA 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 "Path". This can also be imported automatically by clicking on "Browse". In the window that opens, all available variables are listed, which you can then simply select via checkbox. Then confirm your selection by clicking on "Import" and close the window with "Close". 119

120 The variables for the OPC Classic DA data source have been created successfully and can now be used Adding TWINCAT variables Enter Add external variable. 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. 120

121 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 "Add" to create the variable. The window remains open so that you can create additional variables. "Close" the window to finish. 121

122 The variables for the TWINCAT data source have been created successfully and can now be used Adding MODBUS Master variables Enter Add external variable. 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. 122

123 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 MODBUS Syntax for fast entry MODBUS (and S7) variables can also be added with a fast entry. Fast entry for variables 123

124 The fast entry for a MODBUS variable, can be decided between two types of syntaxes. Once the standard syntax and once the MODBUS syntax. With a correct syntax, whit a single entry, a variable can be created here. By pressing the Enter key once, the values are transferred to the remaining fields. By pressing the Enter key twice, the variable is also added immediately. Data source MODBUS - standard syntax General: <name>=<type><data type><address> Exception if selected data types are a Boolean or string. Here the bit or the length has to be given too: <name>=<type><data type><address><.bit> <name>=<type><data type><address><.length> The abbreviations for the type in the standard syntax are: HoldingRegister InputRegister Coil Input H I C D The abbreviations of the data types in the standard syntax are: Boolean Byte Int I DInt LInt Word DWord LWord Double Float String BCD32 X B I DI LD W DW L D R S X 124

125 Data source MODBUS - MODBUS syntax <name>=<type><address><data type> Here too there are exceptions if the data type is a Boolean or a string. The bits or the length must be given too. <name>=<type><address><:bit><data type> <name>=<type><address><:length><data type> Except for the types Input and Coil. They always have the data type Boolean but with these two the bit is not added. Important: In MODBUS syntax, numbers are used instead of letters for the types. And there must be a colon before the bit/length. The abbreviations for the data types are the same as for standard syntax. The abbreviations of the types are: HoldingRegister 4 InputRegister 3 Coil 0 Input 1 The address must be 5 digits, e.g. address 1 is It is also possible to import variables via different file formats Adding MODBUS Slave variables Enter Add external variable. 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. The following link takes you to the chapter "Adding MODBUS Master Variables". 125

126 Adding KNX variables Enter Add external variable. 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). To confirm your entries, continue with "Add". The window remains open so that you can create additional variables. "Close" the window for finish. The variables for the KNX data source have been created successfully and can now be used. 126

127 Adding DataBase variables Enter Add external variable. 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. 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 can not 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 "How to setup the database". 127

128 Adding File system variables Enter Add external variable. 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. The variables for the File system data source have been created successfully and can now be used. 128

129 Adding MQTT variables Enter Add external variable. 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. 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. Enter the desired topic (*Name of topic**slash**#*) and click on "Update". Thus, the topic is searched for the variables (all variables are strings) from which you can select the desired ones. By clicking on "Import" the selected variables are created and the window closes. 129

130 The variables for the MQTT data source have been created successfully and can now be used Adding Allen-Bradley variables Enter Add external variable. 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". 130

131 It is easier if you click on "Browse" and select the existing variable and confirm with "Import". The variables for the Allen-Bradley data source have been created successfully and can now be used. 131

132 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 define the "File type" in the line below. With "Add" you create the variable 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 chapter "Creating data sources". In the Project explorer, click on Alarm-variables in the Alarm message section, to create alarm variables. Select Add variable. Select a created alarm data source and define the Name, Data type, Alarm type, and the Message to be issued when the alarm is triggered. In addition, you can specify a Navigation targe to which you are automatically forwarded when alarm notification is clicked in the Alarm Manager. So, you are immediately at the problem source and can fix it. You can also specify a Location. By activate alarm this navigates directly to a component on the surface or a desired view. 132

133 Another feature is the option to use "Messages" from translation texts. To do this, you can either use the button or you can write before and after the text "%" to manually use translation texts. Then click Add to create the alarm variable. This window will remain open after creating a variable so that further alarm variables can be created in sequence. Click Close to exit the entry. Created alarm variables can be edited, updated, and deleted. They can then be used by control elements. Use translation texts for "Messages" which was previously created. 133

134 Adding alarm variables via an S7 CSV - Import To add alarm variables via an S7 CSV import, click on "Alarm-variables" in the Project explorer under Alarm message and select the button for the CSV import. In the opening "Import CSV file" window, you can now select your desired CSV file via the "*" button in the "File name" column. In the upper area you can see how the content of the file is displayed. CSV files can have different encodings. Therefore, at the bottom, you will be given the option to select the correct encoding and see if all the characters are correct. This should be done before the CSV file is selected. If the characters are wrong, the CSV file can t be read or is displayed incorrectly. It can also be set to skip blank lines, remove control characters, remove spaces, and assign columns. In the setting "Start with row:", you also have the option to specify from which line the CSV file is read to skip information that you do not want to import. Under "Import", you can associate the messages with contents of the file. To do this, select a message (For example, "Alarm Location") and then click on the table column whose contents are to be ejected on this message. Then select the data source for which the variables are created. 134

135 Once all entries have been made, import the variables. 135

136 Then, the "Import result" is displayed. Continue with "OK" and "Close" the "Import CSV file". The alarm variables were thus created via a CSV import and can now be used 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. 136

137 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 for the different data types you can find in the chapter "Data types". Click on "Add" to create the variable. If you do not want to create further variables "Close" the window. All created variables appear detailed in the table. Here you will also see the start value of the individual variables. 137

138 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 Data types Data type Boolean DateTime Byte Short Integer Long UByte UShort UInteger ULong Float Double Color Definition True / False 64bit Time stamp 8bit signed 16bit signed 32bit signed 64bit signed 8bit unsigned 16bit unsigned 32bit unsigned 64bit unsigned 32 Floating point Floating point Color 138

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

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

141 Variables with control elements Created variables can be linked to control elements via rules and actions. Please refer to the relevant chapters "Rules" and "Actions" JavaScript & HTML To define 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 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. 141

142 On the left side of the HTML Manager, you will find a list of all the HTML blocks you have already created. By leftclicking on the respective entry, the content will open in the editor on the right side. You can also open a help video Adding HMTL blocks To create additional HTML blocks, click on the relevant button. Then, a dialog window will open in which you must define 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) 142

143 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 process can be canceled by clicking No JavaScript / Definition 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. 143

144 JavaScript / 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. Again you can start a help video Scripts for component events JavaScript functions which are to be executed as an action function that is, called up as the result of an event must correspond with a specific pattern. Such functions must either have no parameters or only one specific parameter. This parameter is the args parameter which is filled with information about the current event (page, component, event). Valid JavaScript action functions include, for instance: function showslotdata(args) function anyfunctionname(args) function anyfunctionname() But not: function anyfunctionname(args, secondparameter) function anyfunctionname(par1) 144

145 The args parameter can be read out within the function as follows: args[ page ] (args.page) Returns the name of the page on which the component triggering the event is located. If this component does not have a name, only the ID of the page will be returned. args[ element ] (args.element) Returns the name of the component triggering the event. If this component does not have a name, only its ID will be returned. args[ event ] (args.event) Returns the name of the event. E.g. Clicked, OnMouseDown, etc 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 ] (args.variable.name) args[ variable ][ datasource_name ] (args.variable.name) args[ variable ][ value ] (args.variable.value) args[ variable ][ quality ] (args.variable.quality) args[ variable ][ timestamp ] (args.variable.timestamp) Returns the name. Returns the current value. Returns the current value. Returns the current quality. Returns last change timestamp. 145

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

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

148 Visibility of functions and variables If you want to declare global variables, make sure that these are not created globally for the project, but are instead reinitialized for each page of your project. A global counter across several pages is therefore not possible. In addition, variables are reinitialized when switching from one page to another QuickHMI JavaScript - API The following API functions are available to you in JavaScript: maininterface.getproperty(property) This function returns the value of a component property. Parameters property The property parameter specifies the name of a property. A property name always needs to meet one of the following syntaxes: o pagename.componentname.propertyname o componentid.propertyname In order to, for instance, read out the text from a text box with the name edit1 on the main page, the parameter to be transmitted must be: Mainpage.edit1.Text The syntax including the IDs only comes in to play when using the args-parameter mentioned earlier. (This parameter provides you with the needed IDs, in case you didn t specify a name for the questioned component) maininterface.setproperty(property, value) This function sets the value of a component property to a specific value. To set a value, the component must have a name. Parameters property The full name of the property to be set. (See function getproperty) value The value to be assigned to the property 148

149 maininterface.getvariable(variable) This function returns the value of a variable. Parameters variable The name with which the variable was created. If the variable name exists in several data sources, the data source name must be specified beforehand. Example: DataSourceName.VariableName 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 updated value. Best practice to work with this behavior is to save the value beforehand in a local JavaScript-Variable to use it later in the script. If, for some reason, you really need the function getvariable to return the updated value immediately afterwards there is a (highly discouraged) way of doing this: Using setvariablesync instead of setvariable. The big disadvantage of setting a variable synchronously is the impact on the user interface. If the synchronous function is called frequently it might lead to the user interface freezing for a few seconds. Parameters variable The name with which the variable was created. If the variable name exists in several data sources, the data source name must be specified beforehand. Example: DataSourceName.VariableName 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.) Parameter variable The name with which the variable was created. If the variable name exists in several data sources, the data source name must be specified beforehand. Example: DataSourceName.VariableName 149

150 value The value to be assigned to the variable 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 2.14 Translation texts In this menu, within Project explorer, you can create the translations for different languages. This allows your project to be used by an international team. To create a translation text, at least one language must be set up. In the Project explorer, click on Translation texts in the Communication section. Then, select "Add language". 150

151 In the Select language window that opens, you can define the desired language. Continue with OK. Now you can use the following functions: Add entry, Delete entry, Update, or Add language 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 chapters 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. 151

152 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 chapter "Add views". The "Default language" will be used from the translation texts Adding groups In the Project explorer, click on Groups in the Security section, to add new groups. 152

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

154 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 window will open, in which you can then proceed as described above. Confirm with Add. 154

155 The user has thus been assigned to GROUP 1. All user assignments to groups can be deleted under User properties. 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 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. 155

156 In Right properties you can define 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 Integrate and use media resources How to implement image and audio resources, you will learn in the following chapters. 156

157 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. Here you can find the file dialog box, using which you can access the path to your image files. Import the desired images by selecting individual image files. You can select several image files by holding down the CTRL key. Confirm the selection by clicking Open. 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. 157

158 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 images can be deleted as needed. To do this, select one or more images and click Delete images. Once you have selected the desired images, Close the window. 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. 158

159 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. In this example, three image control elements were created. A new image control element is initially created without a name or assigned images. To assign a name and an image to a control element, first select the relevant image control element. 159

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

161 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 Once the image selection is complete, you will see a preview of the selection. Using the Slider, you can 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. 161

162 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. define which image the control element should represent. The first image is always assigned the number 0. Using the Slider in the Image controls management, you can see which image is assigned to which number. You can change this order in any way you like, as described above. 162

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

164 Audio recourses related to controls 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. 164

165 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 Chart Manager The chart manager is used to manage various chart configurations, which then can be displayed inside a chart control element. In the Project explorer, click on the Chart manager. 165

166 Adding and edit charts Use the buttons at the top of the screen to add new chart configurations or edit or remove existing ones. Existing configurations can also be edited and removed by using the context menu. 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. These are the settings common for both types: 166

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

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

169 X-Axis For now, only a single x-axis is supported. Whether or not multiple x-axis are supported in the future is currently in discussion. There are three types of x-axis: Time, category and value. These are their common settings: Name Each x-axis needs a name. Whether this name is shown in the chart later is determined by the checkbox Show right next to the input field. Grid lines Grid lines are lines originating from the corresponding axis. Grid lines help reading values of data points. To hide grid lines the width can be set to 0. Color The color of the axis line as well as its labels Time axis A time axis displays values over the course of time. The displayed range of a time axis can be changed. If and if so, how the range can be changed by the user is determined in the tab Zoom & Pan. The slider is a useful tool to quickly change the zoom level as well as the displayed range. Instead of using the slider the mouse can also be used to change the displayed range. Different hot keys can be selected for the zoom and pan features. 169

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

171 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 Data series The options available for data series depend on the selected x-axis type. So please note the comments in the documentation below describing which options are available for which types. Name The name of a data series must be unique within a chart configuration. This name will be used in the legend. X-axis Determines which x-axis to use for this data series. Value (only for x-axis of type Value ) Determines the variable which value will be used. Y-axis Determines which y-axis to use for this data series. Value Determines the variable which value will be used. 171

172 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. The different types are illustrated here: Step Smooth Area Normal 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. 172

173 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 Determines the variable which value will be used. Color Determines the color of the data area 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 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. 173

174 Create a new recipe In the opened "recipe editor" you can create a new recipe. At first you can define 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 Recipe manager - 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. 174

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

176 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 Runtime mode The runtime mode is used to run and test the project created with the QuickHMI Editor Starting runtime mode To run and test the application, click on the Runtime menu to start runtime mode. This simulates the behavior of the project in the server environment. You can start the runtime mode Interface only, QuickHMI Viewer or the Web Browser. If you select Web runtime, you can also determine which browser on your system will be started to run the application. Interface only: The interface is started without the project itself being opened. QuickHMI Viewer: The project is opened and executed in QuickHMI's own viewer. 176

177 Web Browser: If you select Web Browser, you can also determine which browser on your system will be started to run the application. You can also open the application with all browsers. In addition, you have the option to determine 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. 177

178 To do this, click on "Ports" in the Runtime menu. 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 define here. The performance depends on the compression. 178

179 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. The settings for the 32bit version only affect the editor. 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". Click to Start. You also have the option of starting the application remotely. With the button "Simulation configuration" you get the opportunity to start your created data sources in the simulation mode. For this you're getting the possibility to get simulated random values of your variables at using the "Runtime". 179

180 Alternatively, you can start the runtime mode using the buttons at the bottom of the window of the Editor workspace Loading Time 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: The port is already occupied: 180

181 The runtime mode starts automatically when all components have been loaded. However, you can force a premature start by clicking Force start. You can also access the log entries in the loading window. 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. 181

182 The runtime The Java application will be started and will run in runtime mode. In this simple example, you can see images of a button, two tanks, and one thermometer. Now you can execute and visualize the actions you have assigned to the control elements. To exit runtime mode, close the application. Logged user Show full site Changing views Show log entries QuickHMI Alarm Center (Show and hide alarms) 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. 182

183 2.20 Export the project for the server To configure a project with the QuickHMI Runtime Manager on a server, the project file must be exported. Click on "Start" in the QuickHMI Editor and click on "Server Export". Select the save location and a name for the.qexp file and click Save. Information s: 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. 183

184 2.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 projekt 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 QuickHMI Server In the following chapters, you will learn how to set up the server with the QuickHMI Runtime Manager and all about using the QuickHMI server on the Raspberry Pi. 184

185 3.1 Setting up the server with the QuickHMI Runtime Manager 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 Runtime Manager - Start page The QuickHMI Runtime Manager is divided into the regions "Server" and "Project" Licenses & 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. 185

186 Adding certificates In the "Certificates" region, you can "Select" your own certificates. Standard certificates are included with the software Runtime Manager - Configure the project Here, projects can be configured and start their service. In addition, users and recipes can be managed. 186

187 Runtime Manager - Configure the project In the "Project" region, you can configure a project which created with the QuickHMI Editor. To do this, click on "Configure project" and select the previously exported qexp. File. The import was successfully 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 chapter QuickHMI Viewer. 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. 187

188 3.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 define the maximum number of incorrect login attempts. "Save" to continue 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. 188

189 3.1.5 Runtime Manager - Settings Here you get to the settings and have the following options: Ports: Define 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 define here. The performance depends on the compression. 189

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

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

192 3.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: Linux: Server: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\server RuntimeManager: %PROGRAMDATA%\Indi.Systems\QuickHMI Server v6\logs\rm Server: /usr/share/indi.systems/quickhmi Server v6/logs/server RuntimeManager: /usr/share/indi.systems/quickhmi Server v6/logs/rm 192

193 3.2 Using QuickHMI on the Raspberry Pi In this chapter, you will learn how to use QuickHMI in conjunction with the Raspberry Pi Using the QuickHMI Raspbian image At first, download the Raspbian image on the following page: Then You will find a file named "RaspbianWithQuickHMI.zip" in the destination folder. After unzipping them, you will get a file named "RaspbianWithQuickHMI.img". The image "RaspbianWithQuickHMI.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! After successfully writing the image to the SD card, you can start the Raspberry Pi as usual and configure the project using the "sudo qhmirm" command. 193

194 3.3 Installing QuickHMI 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 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.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: Oracle Java 8 JavaFx 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. 194

195 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 configure 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 qhmirm --help Subsequently, the password is requested. Enter this and confirm with ENTER. 195

196 The following overview of the commands and options appears: ============================================================================================= qhmirm -> QuickHMI Runtime Manager -r --run QuickHMI console runtime manager will be started. -c --check check QuickHMI Server status -rd --rundaemon -sd --stopdaemon will start the QuickHMI Server 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 qhmirm --import /path/to/file.qexp --start or sudo 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 qhmirm --stopdaemon or sudo qhmirm -sd 4 QuickHMI Viewer The QuickHMI Viewer allows you to view and simulate the projects configured in the QuickHMI Runtime Manager to check their functions. Projects can be viewed using the QuickHMI Desktop Viewer, the QuickHMI Android App, or in the browser. 196

197 4.1 QuickHMI Desktop Viewer With the QuickHMI Desktop Viewer, you can execute the projects configured in the QuickHMI Runtime Manager. The QuickHMI Viewer as an Open Source Project. The QuickHMI Viewer is now available to you as an open source project, and can be freely adapted to your corporate design or integrated into your existing software. Graphic: Copyright Indi.Systems GmbH 197

198 4.1.1 Desktop Viewer - Start page After starting the QuickHMI Desktop Viewer you are on the home page, from which you can execute basic functions. These include: Create a new connection Open a connection Quick access to the most recently opened connections Opening the Indi.Systems web services Opening the FAQ Displays contact information s 198

199 4.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. Here you can also get to the forum. 199

200 4.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 Desktop Viewer - Open project Desktop Viewer - Open a connection To open an already established connection, click on Open connection. 200

201 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 Desktop Viewer - Project view The QuickHMI Desktop Viewer user interface is identical to runtime mode in the QuickHMI Editor. - Header - 201

202 Shows the current status. Shows the logged in user. 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 header, let it show or hide. The same applies to the footer if it was previously created in the QuickHMI Editor. Zoom on complete page = Displays the complete page with all elements. Here you will find the log entries that you can show and hide. These can be messages of any kind. 202

203 Open the QuickHMI Recipe manager and view recipes. Open the QuickHMI Alarm Center and view alarms. 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 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 ( ). -address= (Any address) With the parameter "address" the Viewer can automatically connect to any address at startup. In this example, (equivalent to -localhost). -port=1234 (Any port) With the parameter "port" a port different from the standard (6062) can be specified. The port 1234 is just an example. -ssl If this parameter is given at the start, the connection is established automatically secured seted up. -connection=name" (A name that already exists as a connection) With the parameter "connection", the connection to an already established connection can be made automatically when the Viewer is started. 203

204 -machinemode=password (Any password) With the parameter "machinemode" the Viewer can be started in the machine mode. In this the Viewer is automatically active in full screen mode, which can t be left. Also close the Viewer with Alt + F4 or Alt + Tab or similar is then no longer possible. The parameter "machinemode" must be given a password. (In the example above "Password"). Only by entering this password, the machine mode can be stopped. The password does not have to be entered in any text field. It can be entered in each form. To start the Viewer with parameters you 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. 4.2 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. 204

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

206 4.2.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. Furthermore, you have the option of activating SSL encryption for the connection you have created. Use the checkbox. The same applies to the option to let the created connection open automatically when starting the app. 206

207 If all settings have been made, "connect" Android App - Project view 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. 207

208 Scroll & Zoom Within a project, you can navigate by manually swiping the screen. Fast switch to previously created views 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. 208

209 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. 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. 4.3 QuickHMI in the browser 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 runtime 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. 209

210 In addition, you have the option to determine which ports are to be used. You can also set the data compression between the server and the browser. To do this, click on "Ports" in the Runtime menu. Which settings you can make here, you can find out in the chapter "Project settings". Then click Start. The project will open in a browser of your choice. Supported browsers are currently Firefox, Chrome, Opera, Microsoft Internet Explorer and Microsoft Edge. The project view of the Web Viewer is identical to the project view of the Desktop Viewer. 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: HTTP - Connection example: 210

211 5 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 32-bit or 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 Server: CPU: at least 1.6 GHz or higher with 32-bit or 64-bit RAM: at least 2 GB, recommended 4-8GB 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: CPU: at least 1.6 GHz or higher with 32-bit or 64-bit RAM: at least 2 GB, recommended 4-8GB Network: 100 Mbps Graphics: 3D-capable graphics chip Raspberry Pi: Execution of the software on the Raspberry Pi from version 3 possible 211

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

213 6 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 CPUs of other manufacturers (eg VIPA 100V / 200V / 300V / 300S) OPC UA or OPC Classic DA interface *1) TWINCAT2 from version 2.1 and TWINCAT3 is supported *1) MODBUS support, various devices can be connected via MODBUS TCP, RTU, RTU over TCP or ASCCI KNX/EIB MQTT-Protocol Various SQL databases using JDBC Files from the file system with the file system data source Native migration of additional protocols is planned *1) OPC Classic DA and TWINCAT data sources are not executable under Linux and Mac-OS. If these are to be executable under Linux and Mac OS, the use of OPC UA data sources is recommended. 213

214 7 Overview of the functions Resource-saving server-client architecture Will run on 32- or 64-bit systems Command interface (file system, Oracle-or MS SQL database) for writing into the QHMI system from outside; upon request with encryption Graphics operations such as animation, zoom, etc. are performed within the GPU or graphics card, and lighten the load on the computer s CPU Free WYSIWYG editor Central configuration tool for setting run-time environment parameters On-the-fly switching between draft and run-time mode User management Translation text parameters can be set Integrated alarm reporting system Central activation management Central rules management Recipe management Fold-down or pinable header and footer lines Zoomable masks and control elements Integrated resource management for images, etc. The most frequently used control elements are included in the delivery package. More than 2000 additional graphics and control elements are available free for download and can be integrated as plug-ins Less administration work is necessary as a central project storage space is used (the project does not have to be installed on the client s hardware as; data is transferred when the server is connected) Native high-performance access on Siemens S7-PLCs 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, MPI or PPI Integrated OPC-DA client Integrated OPC-UA client 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 214

215 8 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 Editor QuickHMI Runtime Manager QuickHMI Viewer & App Step 2 - Configure the project file on the system s server Set up the project file created in the editor on the system's server. This is done using the QuickHMI Runtime Manager. QuickHMI Editor QuickHMI Runtime Manager QuickHMI Viewer & App 215

216 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. QuickHMI Editor QuickHMI Runtime Manager QuickHMI Viewer & App 216