Solutions For HMI Excellence

About This Manual

The Designer Manual describes how to use WebIQ Designer. It explains how

  • you create a new HMI project

  • you use views

  • you layout and style views and widgets

  • you create users, usergroups and accessgroups

  • you localize your HMI

  • you create responsive HMIs

  • you publish your HMI

Finally the Designer Manual describes how you can extend WebIQ Designer by installing additional packages.

Preface

WebIQ is a HMI/SCADA Toolbox for industrial use on machines or digitized production environments, e.g. to operate and visualize machines or to log and display historical data etc. The system is based on 100% HTML5 web technology and consists of a runtime environment (WebIQ Server), which is needed to display the HMI project in a standard web browser on the target device, and the development environment (e.g. laptop computer with WebIQ Designer), which is intended to develop the HMI project.

HMI projects can be created and edited by using the HTML Drag and Drop layout editor of WebIQ Designer. HMI Projects and layouts can be created on the basis of about 50 standard widgets and WebIQ supports fully responsive design and allows to preview for different target systems, e.g. smartphone, tablet, stationary panels with different resolutions and orientations.

With WebIQ Designer you can also create own widgets (composite widgets) and templates and thus create application-related libraries. Fully custom widgets can also be created or UI elements adapted from popular HTML frameworks and used within WebIQ.

For international use or for localization, texts, fonts and units can be switched within the HMI project at runtime.

All widgets and layouts can be easily adapted to customer-specific requirements using the Styling Cockpit or the CSS3 Editor, e.g. to obtain a specific CI design or design template for an individually designed HMI.

Custom logic functions and UI actions can be integrated into the HMI system via the integrated JavaScript editor.

Most important, non-HTML experts can create Web HMI Projects through the WebIQ Designer graphical design tool and all this allows a much easier entry into web-based visualization.

Important Notes

The manual contains relevant information on the use and operation of the WebIQ Visualization System. This manual is intended for technically qualified users who have experience in creating user interfaces for machines or systems.

The manual is provided online and always in the latest available version. Smart HMI reserves the right to make adjustments and additions to the manual at any time.

Access To Online Documentation

We recommend that users of WebIQ are provided with access to the online version of the manual at their workplace. However, the documentation can also be used offline; to download, use the "save as" function, which is offered by right-clicking in most of the current browsers.

Security Information

The security of the HMI is the responsibility of the organization or person who puts the HMI into operation. They must secure the network, in particular the communication between the data source/PLC and WebIQ Server, or between WebIQ Designer and the Web Client, in such a way that access or manipulation from outside is not possible. This includes the use of sufficiently secure passwords and adequate encryption, especially when using WLAN routes within the network. Passwords should be updated regularly. Transfer of information via the public Internet should be avoided. If this is necessary, appropriate security measures must be taken into account (use of a firewall, VPN tunnel, etc.). All measures taken must correspond to the current state of technology.

Encryption

WebIQ has the possibility to encrypt the transfer path between WebIQ Designer and web client using the TLS-specification (TLS = Transport Layer Security). By default, TLS encryption is not enabled. It is the responsibility of the organization or person who puts the HMI into operation to enable TLS encryption.

Note: This product includes software developed by the OpenSSL Project for use in the OpenSSL Toolkit. (http://www.openssl.org/)

1. Introduction

1.1. What Is WebIQ?

WebIQ is the HMI/SCADA system developed by Smart HMI which offers all the advantages of individual web HMIs for various devices and screen resolutions. WebIQ consists of a development version, called WebIQ Designer, and a runtime version, called WebIQ Runtime. Both versions are based on WebIQ Server, which is a web server with HMI/SCADA capabilities, which is installed as a system service and running in the background.

introduction overview
Figure 1. WebIQ Designer and runtime topology

1.2. Runtime Environment

For a runtime system it is sufficient to install WebIQ Server on the target system on which the HMI is to be run in productive operation. After installation, a regular web browser can be used for accessing the system settings and license activation for the runtime version (WebIQ Runtime Manager).

This gives the on-site user, e.g. during commissioning or maintenance, full access to the WebIQ system without having to install another tool.

To start WebIQ Runtime Manager enter the following URL:

http(s)://<localhost>:10123 (for local access) or
http(s)://<ip-addr>:10123 (for remote access) in your browser.

Please note that you can only use HTTPS after you have set up a corresponding listener and installed the TLS certificate and key correctly.

The WebIQ Runtime Manager is the configuration tool for the runtime system. It includes all the necessary functions for commissioning and maintenance:

  • Upload/download of HMI projects

  • System settings, log file download

  • License management

  • Starting (activating) or stopping HMI projects

The WebIQ Runtime Manager can be accessed through

http(s)://<ip-addr>:10123

in a browser on the network.

1.3. WebIQ Designer Environment

WebIQ Designer is the tool for developing and testing HMI/SCADA projects. The user can create and edit HMI projects, parameterize all HMI functions as well as using a drag&drop editor for layouting and navigating the user interface.

All system settings and configuration of the licenses are included here, so access via the WebIQ Runtime Manager is not necessary.

In addition, WebIQ Designer includes a Package Manager, which can be used to carry out system updates and install customer-specific packages. WebIQ Designer also includes a code editor that can be used for adding and editing JavaScript code or editing your own CSS classes.

WebIQ Designer is the engineering program to create and maintain modern web HMIs without web knowledge. WebIQ Designer is a desktop application and includes the following functions:

  • Drag-and-drop editor with more than 60 widgets and layout elements for data input, data output, navigation etc.

  • Complete application modules, e.g. alarm list, recipe manager, trend display, user management, etc.

  • Configuration of OPC-UA interface and browsing and editing process variables and structures through the OPC-UA server (PLC) namespace. Configuring alarms, data logging, user permissions etc.

  • Fast preview and Responsive Inspector for display

1.4. Installation

A unified installer is available for both versions, which can be used to select whether only WebIQ Server (runtime) or the complete package (WebIQ Server and WebIQ Designer) shall be installed.

installer1
Figure 2. Full installation with WebIQ Designer and WebIQ Server
installer2
Figure 3. Runtime target installation: install only WebIQ Server

WebIQ Designer Installation installs development environment as well as the runtime system

Choose the option 'Install ctrlX World extensions for WebIQ' if you want to use the Bosch Rexroth license system for the PC version of WebIQ. Please note that these are only available in the 64 bit version of WebIQ.

1.5. Setting Up WebIQ Designer

After installing WebIQ on your Windows system you will find the following new icon for WebIQ Designer on your desktop:

designer icon
Figure 4. Icon For WebIQ Designer

WebIQ Server has been started as a System Service for Windows and is running in the background. This service is automatically started each time you start your Windows system. Another Windows service named WebIQ License Agent is also started automatically after installation and is responsible for the WebIQ license management.

More information about creating and editing HMI projects with WebIQ Designer is given in the following chapters.

1.6. Activation of WebIQ Designer Licenses (Including 30-Days-Free-Trial License)

After downloading and starting WebIQ Designer for the first time you are automatically taken to the license activation form. Choose Online Activation and enter your license key, preferably via copy & paste. Then the license information will be displayed, and you can select the license with the "Plus" button and then confirm the license activation and installation.

license act
Figure 5. License Activation Form
license sel
Figure 6. Select License with 'Plus' Button and Apply License

Done, now the license should be activated and WebIQ Designer is ready.

Once a license has been activated, it remains valid even if WebIQ is updated.

1.7. Setting Up Runtime Systems

After installing the WebIQ runtime environment on a computer or embedded device, the 'WebIQ Server' component will be running as a background service of your computer’s operating system. There is also a second program 'WebIQ License Agent' installed, which will run as a background process.

You can display these programs e.g. on a Windows computer by starting the Task Manager and then opening the 'Services' tab.

taskmanager
Figure 7. Taskmanager

WebIQ Server is the runtime component of WebIQ and provides all needed HMI/SCADA functionalities:

  • Webserver/websocket server

  • User Manager and access rights

  • IO Handler Manager (OPC-UA or custom IO interfaces)

  • Process Data Manager

  • Data recorder: record historical process data in the integrated SQLite database

  • Alarms: records alarms and messages, stores historic alarms in the SQLite database

  • Recipes: store and retrieve

'WebIQ License Agent' manages the licenses and controls the license resources such as the number of permitted process data tags, number of simultaneously connected users (clients), number of permitted connections to controllers via OPC-UA (IO Handler).

For configuring the runtime system, e.g. for activating license keys, uploading and starting HMI projects, changing system settings etc. the 'WebIQ Runtime Manager' can be used'. This can be accessed in any browser through the following URL:

Here you can upload and start HMI projects, activate the runtime licenses and manage all settings without having WebIQ Designer installed.

WebIQ Runtime Manager is the configuration tool for the WebIQ runtime environment. It contains all functions and tools to set up, maintain and configure the runtime system, e.g. during commissioning, maintenance, updates etc.

1.7.1. WebIQ Runtime Manager Login

For security reasons, since access can also take place remotely via a network, access to the WebIQ Runtime Manager is secured via a user login.

When accessing WebIQ Runtime Manager for the first time after a fresh installation, you will be prompted to define both a username and a password. The default username is "admin" (but you can and should choose a different one for security reasons) and a password that is as secure as possible should then be used. The password must be at least 8 characters long and contain at least one digit.

If possible, the password should contain a combination of uppercase and lowercase letters, and at least 1 special character. We have refrained from making this mandatory, as some embedded devices only have limited keyboards or touch keyboards.

After you have logged in for the first time, you can add other system users or change the passwords, among other settings.

SLM
Figure 8. System and License Manager
Please do not forget this password! Since WebIQ Runtime does not have a connection to the internet, resetting a forgotten password has to be done via the command line on the server and is documented in the FAQ.

You can find more information about the operation and functionality of WebIQ Runtime Manager in the corresponding chapter.

1.8. WebIQ Directory Structure

On Windows machines WebIQ is installed by default in the %PROPGRAMFILES%/WebIQ directory ('c:\Programs\WebIQ' for 64 Bit resp.) resp. %PROGRAMFILES (X86)% ('c:\Programs (x86)\WebIQ` for 32 Bit) directory.

Since WebIQ Server runs as a system service by default, the location for the project repository and all global data (Logs, configuration etc.) is the %PROGRAMDATA%\WebIQ ('c:\ProgramData\WebIQ') directory.

The directory %PROGRAMDATA% (c:\ProgramData\) is by default invisible in the File Explorer view. Go to Explorer → Options → View and uncheck the box under "Hide protected system files".

1.8.1. Project Directory

All HMI projects you have created or imported with WebIQ Designer are stored by default in the %PROGRAMDATA\WebIQ\WebIQ Projects directory on your computer. They are independent of the user and are therefore available at the system level.

1.8.2. WebIQ Designer Working Directory

When a WebIQ Designer instance is started, it creates a local working directory in the Windows user data area (%APPDATA%). All data is in the directory %APPDATA%\webiq-designer.

Within this directory you find the

/workspace directory

HMI project which is currently loaded

/ packages

HMI packages

2. Project List

This chapter describes the Project List that you see automatically after starting WebIQ Designer. All existing HMI projects are displayed as tiles in the Project List and can be edited, started, etc. and new projects can be created.

2.1. Managing HMI Projects with WebIQ Designer

The project list makes all saved HMI projects available as tiles or in list form. From here, HMI projects can be loaded and numerous editing functions are available.

WebIQ demo projects can also be accessed online from here and viewed live, downloaded for explanation and edited ("look and learn").

project list 1
Figure 9. Project List with HMI project tiles

LEGEND

  1. Functions Create, Import (from zip archive), Reload Project List (update if manual changes were made in the project directory) and Manage remote Runtime target systems

  2. Project Tiles with preview image (optional), project name, project folder, last edited date, open context menu

  3. Display update status, the number indicates how many packages in the HMI project have to be updated. When updating WebIQ, the 'visuals' package, which is part of HMI projects, must be updated. When you load the project, you will automatically be taken to the Package Manager, where you can simply update the project and then save it in the new version (Publish).

  4. Context menu with Open (same as clicking on the tile), Duplicate project, Export (as zip archive), Delete or show more Properties

  5. Search filter field

  6. Select tile/list view, sort order

  7. 'Settings' and 'About' screen

  8. Online demo projects and latest news

project list properties
Figure 10. HMI project properties
project list 2
Figure 11. Project List list view

2.2. Loading and Publishing HMI Projects

When you load an HMI project with WebIQ Designer from the Project List by clicking on the project tile or by choosing 'Open' in the context menu, it is downloaded from WebIQ Server and then copied into the local workspace directory of WebIQ Designer and will be edited there (%APPDATA%\webiq-designer\workspace).

"Publish" uploads the contents of the workspace directory back to the project repository and saves the HMI project permanently. It can be exported from there or copied to the runtime system or loaded again.

You need to 'Publish' the HMI project from your WebIQ Designer session to store it permanently!

The "Save" button in the Layout Manager only stores the workspace folder to disk. When exiting WebIQ Designer or shutting down your computer, the changes will also be saved automatically. That’s why you don’t normally need to use the 'Save' function. In addition, the undo history will be cleared on 'Save'.

After you have designed your HMI project with WebIQ Designer and tested it in the preview or preview browser, you want to save it permanently and display it on the runtime environment. To do this, you must first publish the project by returning to the project list.

Close
Figure 12. Publishing the HMI by 'HMI Project List' (going back to project list)

(1) Publish and Close the project, i.e. return to the Project List view. You will be asked if you want to 'publish' or 'discard' the changes. You should choose 'Publish', otherwise all changes of the HMI project you have done will be irretrievably lost:

Close
Figure 13. Confirmation Dialog

If you choose 'Discard', all changes to your currently edited HMI project will be irretrievably lost!

(2) Publish HMI project and stay in the Layout Manager

(3) Publish a copy of the HMI project with a new name and stay in the original project.

2.3. Deleting an HMI Project

An HMI Project can be deleted by choosing 'Delete' in the context menu. WebIQ Designer will display a warning message and ask for confirmation, then the HMI project will be irretrievably deleted.

2.4. Creating a HMI Project

You can create a new HMI project by clicking on the button button plus on the left edge of the Project List.

The dialog "New Project" appears and here you can define all settings of your new HMI project.

project create
Figure 14. Dialog "New Project"

The dialog allows you to define the following settings:

2.4.1. Step 1: Main Settings (Mandatory)

  1. Project Title Name of your HMI project (mandatory input, UTF-8 characters are possible)

  2. Folder Name Name of the folder within the project directory where the HMI project will be stored (mandatory input, must be a valid path & filename)

  3. Fav Icon upload an image file which is used as favicon (not yet supported by the current version of WebIQ)

  4. App Picture: upload an image file which visually represents your HMI project within the project tile (optional)

  5. Description: Optional multiline input of an HMI project’s description (optional, all UTF-8 characters are allowed)

Project Title, App Picture and Description can be changed later in the project via the 'HMI Project Settings' menu

2.4.2. Step 2: User Settings (Mandatory)

Here, you have to specify an initial credentials for the HMI project.

  1. Username: Name of the user (mandatory input)

  2. Password: Password for this user (mandatory input)

  3. Repeat Password: Repetition of the password (mandatory input)

To run the web HMI it is necessary to create at least one user account.

2.4.3. Step 3: Choosing An HMI Starter Template (Optional)

Optionally, you can select an HMI start project (template) here. WebIQ contains ready-made starters, but you can also store your own templates here, see the documentation 'How To Create A Starter App (App Template)'.

Name Description Template Image

app-starter

Simple starter template with a basic navigation
starter template 01

hmi-template-01

Starter template with

  • multiple pages

  • menu bar on top for basic navigation

  • status bar

  • footer bar

  • language switching

  • and responsive behaviour
starter template 02 en

hmi-template-02

Start template as above, only the navigation bar on bottom
starter template 03

hmi-template-03

Start template as above, only the navigation bar on the left
starter template 04

You can create you own HMI Starter Templates, see the documentation area 'How To Create A Starter App (App Template)' on our website (login required)

2.5. Importing/Exporting HMI Projects

WebIQ exports and imports HMI projects as a zip files, which can be copied and distributed to other computers.

  • Import any valid HMI project into the project directory (and project list implicitly) by clicking on the "import" icon in the left bar.

  • Export an HMI project from the context menu of the project tile

2.6. Reloading The Project List

Reload project list, can be used after manual modification in the 'WebIQ Projects' directory.

2.7. Remote Runtime Manager

Optionally you can discover and connect to a remote runtime target system within your local network.

There is a project explorer there, with which you can exchange (upload and download) HMI projects with your local computer. Furthermore, all settings for the remote system can be made and HMI projects can be started and stopped.

The Remote Runtime Manager has been deprecated but is still integrated for compatibility reasons.

All functions can be executed today via the WebIQ Runtime Manager, which can be accessed via a browser (see Runtime Manager).

3. Layout Manager

If you have loaded an HMI project via the project list (see <<>>), you will be taken to the layout manager, where you can develop and test the HMI using the integrated drag-and-drop editor and parameter dialogs. In addition to project processing, the layout editor also contains preview functions via an integrated preview or via the web server contained in the WebIQ Designer also in a remote browser via the network.

3.1. Layout Manager Functions

The Layout Manager consists of an integrated browser that shows all widgets and the current layout of your HMI (WYSIWYG - Waht You See Is What You Get). There are also numerous parameter dialogs on the side edges, which will be explained in the following.

layout manager
Figure 15. Layout manager with WYSIWYG Drag-and-drop editor

LEGEND

  1. Publish or Publish and close, go back to Project List

  2. Store, Fast Preview and Preview in standard web browser

  3. Cut/ Copy/ Paste

  4. Undo/ Redo Buttons

  5. Refresh Project view inside the editor

  6. Select different screen sizes (responsive inspection)

  7. Configuration Cockpit (Widget specific configuration parameter)

  8. Style Cockpit (Layout and Styling Options of the selected Widget)

  9. Hierarchy Cockpit (shows layout Hierarchy)

  10. Manager Selection

  11. Set (optional) layout grid

  12. Open Widget bar

  13. Help

In general, all operator interactions are locked within the HMI editor, since the inputs are intended for editing the layout. If you want to test the interactions, switch to the preview (see the following section).

3.2. Expand and pin Hierarchy Cockpit

To view your HMI in the HMI editor and in the Hierarchy Cockpit at the same time, click on the tab (a) and the hierarchy will be expanded and be permanently visible. This makes it easier to get an overview of more complex HMI projects, but has the disadvantage that a part of the HMI editor is covered (depending on your screen resolution).

layout manager a
Figure 16. Click on the arrow icon
layout manager b
Figure 17. Hierarchy Cockpit is expanded

You have to find out in your practical work which mode is the better for your work, with or without an expanded hierarchy view.

3.3. Saving, Previewing Inside WebIQ Designer and in a Browser

200

LEGEND

  1. Saves the current layout into the internal WebIQ Designer workspace to disk. The undo buffer is reset after this action, so no more undo actions can be performed.

    The 'Save' functionality stores the computers memory to the workspace folder of the disk, it does not store the HMI project!

  2. Shows the fast preview of the HMI Project. Here you can see how your HMI looks in a window and you can test all interactions such as navigation, inputs, etc.

  3. If you press this button, your HMI project will be displayed directly in your computer’s standard browser. However, you can also display the HMI project in a remote browser via your network at any time by entering the following URL:

    http://<ipv4-addr>:10124

10124 is the default port that WebIQ Designer preview server operates on. If you change it (see [WebIQ Designer Settings]) you have to adjust it here accordingly.

The 'Preview in a Browser' feature was introduced with WebIQ V2.12 and allows you to preview your HMI on the target device in the target browser at the same time as editing your HMI project. This is very useful, since you can test your work results live on the target system after each processing step.

To see the latest version after an update it is sufficient to press the F5 key in the target browser or to reload the browser view using another method. It is not necessary to save the HMI project beforehand.

3.4. Layout Editor Cut, Copy, Paste, Delete

200

LEGEND

  1. Cuts the selected Widget or Container

  2. Copies the selected Widget or Container to the Clipboard

  3. Pastes the Clipboard into the selected container. If you try to copy content from the clipboard to another widget, that content will be copied to the next container above.

  4. Deletes the selected Widget or Container

3.5. Layout Editor Undo/Redo

100

LEGEND

  1. Undo previous input

  2. Redo previous input

After Saving the HMI Project, the undo/redo buffer is cleared

3.6. Layout Editor Refresh

50

LEGEND

  1. Refreshes the integrated HMI Editor browser window

Used for defined resetting after errors or unforeseen behavior.

3.7. Layout Editor Preview for Different Layout Sizes (Responsive Design)

320

Used to preview different device classes or resolutions. Here, the view of a special device class, e.g. smartphone portrait, can be simulated in the HMI editor (see chapter Device Specific Styling).

3.8. Shortcut to all HMI Manager Dialogs

layout manager manager
Figure 18. Selection Board for Manager Dialogs

LEGEND

  1. This Layout Manager

  2. Localisation, add new languages, add translations, Import/ Export languages (see Localization) .Code Manager, add and edit code for localScripts, custom UI actions and custom css-classes (see Integrated Code Editor for JavaScript and CSS3)

  3. IO Manager, add and edit IO Handler, e.g. OPC-UA connection and see the connection status (see IO Handler (OPC-UA) )

  4. Process Data Manager, manage Process Data (Tags), Structures, internal variables (Virtual Items), Methods (see Process Data Manager and following

  5. Alarm Manager, define and edit alarm messages (see Use Alarms And Alarm Lists)

  6. Recorder Manager, defines and edits recorder (datalogger), add items to recorder, define trends (see Data Recorder And Trend Display)

  7. Recipe Template Manager, define and edit Recipe Templates (see Recipes Manager And Recipe Widgets)

  8. User Manager, Edit User, Usergroups and Accessgroups (see Managing Users And Access Groups)

3.9. Shortcut to all Package, App-Setting, Publish, Grid Settings HMI Manager Dialogs

200
Figure 19. Selection Board for additional functions

LEGEND

1 Package Manager, manage packages (design, widgets, HMI templates etc), install, update, uninstall (see [packages])

2 App Settings, Name, Preview Picture, default user for a HMI project (see [app-setting])

3 Publish, quick Publish Button to save the actual workspace to the HMI project folder

4 Grid Settings, here a grid size in x- and y-direction can be set

3.10. Widget Bar, Help Menu

85
Figure 20. Widget Bar and Help Menu

LEGEND

1 Open the Widget Bar to instantiate Widgets, Container or other Controls

2 Opens different Help Links like Link to Support, Link to Tutorial, Link to this Manual, Link to Smart HMI website

4. Using Widgets

This chapter describes how you can use widgets which are provided by the HMI/SCADA Toolbox WebIQ within WebIQ Designer.

Refer to the chapter [Integrated Widgets (Visuals)], if you want to get a current list of available widgets.

4.1. Selecting Widgets or Containers

Click on the Hierarchy Cockpit (third tab on the top right corner, keyboard shortcut: Alt + 3) to display the hierachy of you screen layout in the treeview.

In order to select a widget or a container you can just click on it:

  • in the HMI Layout Editor (working area in the middle)

  • or in the Hierarchy Cockpit (right side of your screen)

Within the Layout Editor the widget will get a light-blue selection mark which displays the (internal) name of the widget and the corresponding icon.

Within the Hierarchy Cockpit the widget will receive a light-blue-colored highlighting.

layout editor1
Figure 21. Representation of a widget within the Layout Editor and the Hierarchy Cockpit

4.2. Configure or Style A Widget or Container

Configuration Cockpit (keyboard shortcut: alt + 1)

Click on the configuration cockpit (first tab on the top right corner) to display the settings of the selected widget. Each widget has its own configuration.

Set up the widget according to your needs. The settings will be applied right after leaving the corresponding field.

layout editor2
Figure 22. Selected Widget with corresponding Configuration Cockpit

Style Cockpit (keyboard shortcut: alt + 2)

Click on the Style Cockpit (second tab on the top right corner) to display the style settings of the selected widget.

4.3. Add a Widget to the HMI Layout

In order to add a new Widget into the HMI layout, drag the desired widget from the WIdget Bar into the Layout Editor or into the Hierarchy Cockpit. It doen’t matter where you drag the widget to - choose the target thats suits you best.

init widget1
Figure 23. Dragging the Widget into the Layout Editor
init widget2
Figure 24. Dragging the Widget into the Hierarchy Cockpit

4.4. Move A Widget Inside the HMI Layout

At some point you’ll probably want to change the order of widgets within a container, or move a widget from one container to another. To do this, you can use the drag-and-drop function of the HMI Editor as well as the drag-and-drop function within the Hierarchy Cockpit.

drag widget1
Figure 25. Dragging the Widget within the Layout Editor
drag widget2
Figure 26. Dragging the Widget from the Layout Editor to the Hierarchy Cockpit

4.5. Cut, Copy, Paste, Delete A Widget

Cut (keyboard shortcut: Ctrl + X)

Select a widget, container, panel or overlay in the layout editor or hierarchy cockpit, click the icon icon cut or use the keyboard shortcut Ctrl + X in order to cut the selected widget into the clipboard. The widget which is cutted out will get a cut mark (mark with a dotted line) till the widget is pasted into its new position.

Copy (keyboard shortcut: Ctrl + C)

Select a widget, container, panel or overlayin the layout editor or hierarchy cockpit, click the icon icon copy or use the keyboard shortcut Ctrl + C in order to copy the selected widget into the clipboard.

Paste (keyboard shortcut: Ctrl + V)

Select a widget in the layout editor or hierarchy cockpit, click the icon icon paste or use the keyboard shortcut Ctrl + V in order to paste the content from the clipboard after the position of the currently selected widget.

You can use the functions "Cut", "Copy" and "Paste" only within the same HMI project. Pasting a widget into another HMI project is not possible.

Instead, you can export any structure of the hierarchy, such as a widget or container with multiple widgets, in order to re-import them anywhere in the same project or in any other project (see [Export / Import A Widget]).

Delete (keyboard shortcut: DEL)

Select a widget, container, panel or overlay in the layout editor or hierarchy cockpit, click the icon icon delete or use the keyboard shortcut DEL in order to delete the selected widget.

4.6. Context Menu of A Widget

You can also display the context menu (right click on the widget, container, panel or overlay in the layout editor or hierarchy cockpit). There you will find the Copy, Cut, Paste and Delete functions as well beside some additional functions (see the chapters below).

import export3
Figure 27. Context Menu of A Widget

4.7. Export / Import A Widget or Container with Layout Content

You can export a widget or even a container with multiple widgets, in order to reimport them into the same project at a different position in the hierarchy or into another project.

Select the corresponding widget or container, press the right mouse button and select the entry "Export" in the context menu. A file dialog will be shown allowing you to save the layout. The widget or the container will be saved with the file extension .webiqlayout.

For pasting you have to select a container, where you want to insert the exported object. Press the right mouse button and select the entry "import". Then you have to select the zip file with the desired widget or container content in the file dialog in order to import it.

import export
Figure 28. Import a Widget or a Container Including Multiple Widgets In Order To Re-Import It Anywhere Else

4.8. Outline a Widget or a Container

Sometimes it is important to show the outer border of a widget or container, especially if a container has no border or background color that makes it stand out from the other containers.

For this you can display the outline per widget or container. To do this, call the context menu and select the entry "Show Outline" to enable / disable the outline. The outline will be displayed as a magenta colored frame around the corresponding widget or container.

The "Hide all outlines" entry is used to switch off all outlines in an HMI project in just one step.

outline
Figure 29. Widgets and containers with enabled outlines

The outlines remain in the WebIQ Designers workspace when you save or publish the HMI project. However, the outlines are always automatically removed from the published project.

5. Description of WebIQ Widgets

The following chapter gives an overview of all widgets which are included in WebIQ (Package "Visuals").

 

5.1. Introduction

WebIQ offers more than 50 standard widgets. Included are common UI widgets such as buttons, selection boxes etc. and also output widgets like gauges and value displays. Even very sophisticated widgets such as an alarm list, a trend display and a recipe editor are part of the system by default. This ensures cost efficiency and a fast time-to-market, because they are complete predefined solutions which you simply use.

The widgets are included in the system package "visuals", which is installed by default. All widgets of WebIQ are web widgets which have been optimized for the use in industrial applications and for touch screen operation.

visual package
Figure 30. Widget Package "Visuals" Presented In The Package Manager

5.2. Widget List

400
Figure 31. Widget List with different categories

LEGEND

1 Button to open the Widget List

2 Different Categories

3 Widgets

4 Category With Legacy Widgets )*

The widgets are grouped in categories as follows:

Category

Description

Layout Container

Smart layout containers to define dynamic layout

Overlay

Widgets to create overlays, such as Dialogs, Popups, Slide-Ins

Panel

Widgets to create multi-page content with different views such as Screen Panel, Swipe Panel, Tab Panel

Shapes

Widgets to create geometric Forms

Trend

Widgets to display trends

Widgets

All other Widgets like input-/ output widgets, alarm. recipe,…​.

Widgets (Legacy)

Deprecated Widgets which are included for compatibiliy reasons )*

)* Due to backwards compatibility, deprecated widgets as well as widgets which have been replaced by new versions will be delivered with WebIQ by default. They are grouped together in the widget list under the category "Widgets (Legacy)".

Additional categories can be defined in the widget list for your own widgets, e.g. widget templates or composite widgets, or by loading packages with custom widgets

5.3. Widget Configuration

5.3.1. Layout Variants

Some IQ Widgets have different layout variants. You can choose the variant by browsing through the different layout variants in the Configuration Cockpit. The instance of the widget will be updated immediately to the selected layout variant, so that you can see the result immediately.

Selection Layout Variants of the IQ Rocker Button

config05

5.3.2. Configuration

You can configure the widgets in the Config Cockpit. The Config Cockpit is always structured in the same way. You will find a lot of generic configuration - which is present in most widgets - as well as some very specific configuration, depending on the widget type.

Below is a list of generic configuration functions that are used with many widgets.

In the description of the widgets these features are no longer described in detail, but only listed with a reference to this chapter.

REFERENTIAL ATTRIBUTES

config01

Control Name Defines the local name for the widget instance.

Template Refers to an HTML template inside the templates folder.

Class Name Refers to the CSS class which will be used for the instantiation of the widget (for detailed information see CSS Modifiers)

DATA ATTRIBUTES

config02

Item Refers to the name of the item (process variable) that will be bound to the widget instance.

Type Defines the input type (Boolean, Integer, Float, String, Structure) of the widget. "Auto" means that the widget gets its type from the definition of the bound item.

Label Defines the label of the widget. "Auto" means that the widget will get its label from the definition of the bound item.

If you want to display the widget without a label just leave the field "Label" empty

Unit Defines the label of the widget. "Auto" means that the widget gets its unit from the definition of the bound item.

If you want to display the widget without a unit, just leave the field "Unit" empty

Minimum Value Defines the lower bound of the displayed value range. "Auto" means that the widget gets its minimum from the definition of the bound item.

Maximum Value Defines the upper bound of the displayed value range. "Auto" means that the widget gets its maximum from the definition of the bound item.

Step Defines the step width of discrete values. "Auto" means that the widget gets its step size from the definition of the bound item.

Precision Defines the displayed precision (number of digits) for numeric values. "Auto" means that the widget gets its precision from the definition of the bound item.

APPEARANCE ATTRIBUTES

config03

Show Icon Defines whether an icon for the widget will be displayed or not.

If you want to display the widget without an icon just disable the option "Show Icon"

Icon Source Defines the icon source

Title Defines the title (alternative text) for the icon

Icon Class Defines the icon class when using an icon font

BEHAVIOUR ATTRIBUTES

Lock Condition Defines the condition when the widget will be locked (temporarily deactivated). If you would like to add a lock condition to the widget click 23. You can choose between two types of conditions (Comparison Types):

  • Item Value: the condition is met if the value of an item satisfies the comparison condition.

  • Usergroup: the condition is met if the logged-in user belongs or doesn’t belong to the specified usergroup(s)

More detailed information is available here: Conditional Locking of Widgets or Areas

5.4. Overview of All Widgets

The following tables give you an overview of widgets which are shipped with WebIQ by default. The overview is organized by

5.4.1. Basic Widgets

Table 1. Overview Basic Widgets, Grouped And In Alphabetical Order
ICON NAME CATEGORY DESCRIPTION VARIANTS

BUTTONS

48

IQ Button

Widgets

The user can trigger a variety of different functions with the IQ Button, such as accepting input, starting processes in the controller, calling up a view, confirming an alarm, etc.

The function is triggered by a click (on-click), when the key is pressed (on-press), when the key is released (on-release) or when the key is held (on-while-pressed).

32

3
Example 1. more about variants, configuration and styling

LAYOUT VARIANTS

iq button 01
iq button 02
iq button 03

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • Write on/off values when pressed/released Enables writing specific on/off values to the connected item (instead of writing 1 (true) or 0 (false))

    • On-Value Writes this value to the connected item when the button is pressed

    • Off-Value Writes this value to the connected item when the button is released

APPEARANCE ATTRIBUTES

UI ACTIONS

  • UI Action: onClick Defines the UI action(s) for clicking the button (clicking = press & release)

  • UI Action: onPress Defines the UI action(s) for pressing the button

  • UI Action: onRelease Defines the UI action(s) for releasing the button

  • UI Action: onWhilePressed Defines the UI action(s) while the button is kept pressed

  • UI Action onWhilePressed Trigger Interval Defines the trigger interval for which the UI action will be triggered while the user keeps the button pressed

MONOFLOP

  • Monoflop Activates the monoflop function, which means that the value "1" (true) or the on-value will be written to the connected item continuously when the button is kept pressed

  • Monoflop Interval Defines the interval in which to write the value to the connected item if the monoflop function has been enabled

BEHAVIOUR ATTRIBUTES

  • Disable Item Lock Disables locking the button automatically if the item isn’t writable

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Button

48

IQ Button Toggle

Widgets

The user can use the IQ Toggle button to toggle between two values, such as on/off or open/close.

32

4
Example 2. more about variants, configuration and styling

LAYOUT VARIANTS

iq button toggle 01
iq button toggle 02
iq button toggle 03
iq button toggle 04

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • On-Value writes value to the connected item if the toggle button has been switched on

  • Off-Value writes value to the connected item if the toggle button has been switched off

APPEARANCE ATTRIBUTES: GENERAL

APPEARANCE ATTRIBUTES: ON-STAGE

  • Show Icon, Show Text, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • On-Label Label to use if the toggle button is switched on

APPEARANCE ATTRIBUTES: OFF-STAGE

  • Show Icon, Show Text, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Off-Label Label to use if the toggle button is switched off

BEHAVIOUR ATTRIBUTES

  • On-Action Defines the UI action(s) if the toggle button is switched on

  • Off-Action Defines the UI action(s) if the toggle button is switched off

  • Confirm Off Enables the display of a confirmation message with off-text when the user turns off the toggle button (displayed after button release)

  • Confirm On Enables the display of a confirmation message with on-text when the user turns on the toggle button (displayed after button release)

  • Off-Text Text of the corresponding confirmation message for turning the toggle button off

  • On-Text Text of the corresponding confirmation message for turning the toggle button on

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Label Icon

  • Button

  • Button Icon

  • Button (On State)

  • Button (Off State)

48

IQ Flip Switch

Widgets

With the IQ Flip Switch the user can enable or disable a funktion.

32

3
Example 3. more about variants, configuration and styling

LAYOUT VARIANTS

iq flip switch 01
iq flip switch 02
iq flip switch 03

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • On-Value writes value to the connected item if the flip switch is switched on

  • Off-Value writes value to the connected item if the flip switch is switched off

APPEARANCE ATTRIBUTES

  • Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • On-Label Label to use if the flip switch is switched on

  • On-Label Label to use if the flip Switch is switched off

BEHAVIOUR ATTRIBUTES

  • Confirm Off Enables the display of a confirmation message with off-text when the user turns off the flip switch (displayed after button release)

  • Confirm On Enables the display of a confirmation message with on-text when the user turns on the flip switch (displayed after button release)

  • Off-Text Text of the corresponding confirmation message for turning the flip switch off

  • On-Text Text of the corresponding confirmation message for turning the flip switch on

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Button

  • Button (On State)

  • Button (Off State)

INPUT WIDGETS

48

IQ Button Rocker

Widgets

The user can use the IQ Rocker Button to enter a (numeric) value directly into the input field, or he can use the two buttons to incrementally increase or decrease the value in the input field.

32

10
Example 4. more about variants, configuration and styling

LAYOUT VARIANTS

iq button rocker 01
iq button rocker 02
iq button rocker 03
iq button rocker 04

iq button rocker 05

iq button rocker 06

iq button rocker 07

iq button rocker 08

iq button rocker 09

iq button rocker 10

iq button rocker blank

iq button rocker blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Decimal Delimiter Selection of decimal delimiter for value

  • Numpad Enabled Enables display of the numpad if user touches/clicks on the input field

BEHAVIOUR ATTRIBUTES

  • Repeat Increment / Decrement Defines the interval in which to write the step-value to the connected item while the user presses the increment/decrement button

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Unit

  • Icon

  • Buttons

  • Input

48

IQ Checkbox

Widgets

With the IQ Checkbox the user can activate or deactivate a parameter of a function.

32

3
Example 5. more about variants, configuration and styling

LAYOUT VARIANTS

iq checkbox 01
iq checkbox 02
iq checkbox 03

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • On-Value writes value to the connected item if the checkbox is switched on

  • Off-Value writes value to the connected item if the checkbox is switched off

APPEARANCE ATTRIBUTES

BEHAVIOUR ATTRIBUTES

  • Confirm Off Enables the display of a confirmation message with off-text when the user turns off the checkbox (displayed after button release)

  • Confirm On Enables the display of a confirmation message with on-text when the user turns on the checkbox (displayed after button release)

  • Off-Text Text of the corresponding confirmation message for turning the checkbox off

  • On-Text Text of the corresponding confirmation message for turning the checkbox on

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Option

  • Checkbox

  • Checkbox Bullet

48

IQ Input Field

Widgets

In the IQ Input Field the user enters numeric or alphanumeric data.

32

5
Example 6. more about variants, configuration and styling

LAYOUT VARIANTS

iq input field 01
iq input field 02
iq input field 03
iq input field 04

iq input field 05

iq date time blank

iq date time blank

iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Decimal Delimiter Selection of decimal delimiter for value

  • Numpad Enabled Enables display of the numpad if user touches / clicks on input field

  • Multiline Mode Enables the multiline mode, which means that the user can insert multi-line texts. A resize handle automatically appears in the bottom right position

  • Disable resize handle in multiline mode Disables the resize handle in the bottom right position

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Input

48

IQ Select Box

Widgets

In the IQ Select Box the user can select a single entry from a set of predefined choices.

32

2
Example 7. more about variants, configuration and styling

LAYOUT VARIANTS

iq select box 01
iq select box 02
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • Options Adding options to the select box, which the user can select. The options contain

    • Label

    • Icon (optional)

    • Value/Bitmask for the assigned item

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

  • list-on-top

    Ensures that list of the select box is always displayed on top level

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Input

48

IQ Select Date

Widgets

In the IQ Select Date the user can select a date from a calendar display.

32

2
Example 8. more about variants, configuration and styling

LAYOUT VARIANTS

iq select date 01
iq select date 02
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

BEHAVIOUR ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

  • iq-calendar-on-left

  • iq-calendar-on-top

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Input

48

IQ Select Radio

Widgets

With the IQ Select Radio the user selects exactly one option from several possible options (at least two). IT is always one option activated by default.

32

3
Example 9. more about variants, configuration and styling

LAYOUT VARIANTS

iq select radio 01
iq select radio 02
iq select radio 03

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • Options Adding options to the select radio, which the user can select. The options contain

    • Label

    • Icon (optional)

    • Value/Bitmask for the assigned item

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Radio Box

  • Radio Box (Bullet)

  • Option Text

  • Option Icon

48

IQ Select Time

Widgets

With the help of IQ Time Select the user can set a time. The setting can be accurate to the minute or to the second.

32

4
Example 10. more about variants, configuration and styling

LAYOUT VARIANTS

iq select time 01
iq select time 02
iq select time 03
iq select time 04

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Numpad Enabled Enables display of the numpad if user touches / clicks on input field

  • Display as UTC Time Enables that the time is displayed in UTC (Coordinated Universal Time) instead of browser time

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Buttons

  • Input

48

IQ Slider

Widgets

With the help of the IQ Slider the user sets a (numerical) value. The slider displays the value range of the value graphically and the user can set the value "by feel" (increase value a little, decrease value a little) without having to enter an exact value.

32

4
Example 11. more about variants, configuration and styling

LAYOUT VARIANTS

iq slider 01
iq slider 02
iq slider 03
iq slider 04

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Decimal Delimiter Selection of decimal delimiter for value

  • Initial Text Defines the text that is displayed when the user has not set a value yet

BEHAVIOUR ATTRIBUTES

  • Continuous Enables sending continuous value updates while the user is sliding the handle

  • Send Interval Defines the update interval for continuous value updates

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Unit

  • Handle

  • Background Line

  • Indicator Line

OUTPUT + DISPLAY WIDGETS

48

IQ Date/Time

Widgets

The IQ Date/Time displays the value of a variable as date and/or time. The output format can be set.

32

1
Example 12. more about variants, configuration and styling

LAYOUT VARIANTS

iq date time 01
iq date time blank
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Label (see Generic Data Attributes)

  • Input Format Definition of the input string format which is used for parsing the item value

  • Display Format Definition of the display format which is used for displaying the item value as time/date

    usage of the format parameters, see Use Timestamps In Alarm Texts

  • "Use Value As a Tooltip* Enables the displaying of the date/time as a tooltip

APPEARANCE ATTRIBUTES

  • Invalid Text Defines the text which will be displayed if the item value is invalid

  • Display as UTC Time Enables that the time will be displayed in UTC (Coordinated Universal Time) instead of browser time

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Value

48

IQ Duration Display

Widgets

The IQ Duration Display shows the elapsed time of a process. It shows how much time (Current Time) of a total time (Target Time) has passed.

32

1
Example 13. more about variants, configuration and styling

LAYOUT VARIANTS

iq duration display 01
iq date time blank
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item (see Generic Data Attributes)

  • Current Time Item Refers to the name of the item for the current time

  • Current Time Input Format Definition of the input string format which is used for parsing the current time value

  • Target Time Item Refers to the name of the item for the target time

  • Target Time Input Format Definition of the input string format which is used for parsing the target time value

  • Use Value As a Tooltip Enables the displaying of the duration time as a tooltip

BEHAVIOUR ATTRIBUTES

  • Invalid Text Defines the text which will be displayed if the current time or/and target time is not a valid timestamp

  • Display Preset Selection how the content of the duration display is shown (verbose, compact, minimal)

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Value

48

IQ Heartbeat

Widgets

The IQ Heartbeat shows whether a connection to the control system is currently active. The heartbeat is displayed graphically as an icon.

32

3
Example 14. more about variants, configuration and styling

LAYOUT VARIANTS

iq heartbeat 01
iq heartbeat 02
iq heartbeat 03
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

CONNECTION MONITORING PLC → HMI

  • Item (see Generic Data Attributes)

  • Timeout Interval (ms) Definition of the timeout interval, which means that the heartbeat widget changes to the status "failure" if the value of the item does not change during this time interval

  • Custom Image (Failure) Defines a custom image that will be displayed in the heartbeat widget in case of failure

  • Tooltip (Failure) Defines the tooltip text that will be displayed in the case of a failure

  • Custom Image (OK) Defines a custom image that will be displayed in the heartbeat widget if the connection between HMI and PLC is ok

  • Tooltip (OK) Defines the tooltip text that will be displayed in the heartbeat widget if the connection between HMI and PLC is ok

  • Action (Failure) Defines the UI action(s) to be executed automatically in case of failure

  • Action (OK) Defines the UI action(s) to be executed the connection between HMI and PLC is ok again after a failure

CONNECTION MONITORING HMI → PLC

  • Item (see Generic Data Attributes)

  • Update Interval (ms) Definition of the interval for the update of the item which is used for observing the connection between HMI and PLC (heartbeat)

APPEARANCE ATTRIBUTES

  • Scaling Mode Definition of the scaling mode for the image to be displayed in the heartbeat widget

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

IQ Image

Widgets

The IQ Image shows any image. Different formats (gif, jpeg, png or svg) can be used.

32

1
Example 15. more about variants, configuration and styling

LAYOUT VARIANTS

iq image 01
iq image blank
iq image blank
iq image blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Image Source Defines the image which will be displayed in the image widget

  • Title Defines the title (alternative text) for the image

  • Scaling Mode Definition of the scaling mode for the image source, how it will be displayed in the image widget

UI ACTIONS: ONCLICK

  • UI Action: onClick Defines the UI action(s) if the user touches/clicks on the image widget

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

IQ Image Changer

Widgets

The IQ Image Changer displays different images depending on a process variable. A simple example is the display of a graphic with a green LED if everything is ok, a graphic with a red LED if there is an error and a graphic with a switched off LED if the corresponding function has been deactivated.

32

1
Example 16. more about variants, configuration and styling

LAYOUT VARIANTS

iq image changer 01
iq image blank
iq image blank
iq image blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item (see Generic Data Attributes)

  • Options Adding optional image sources, which are displayed in the Image Changer widget instead depending on the value of the item. The options contain

    • Label

    • Icon (optional)

    • Value/Bitmask for the assigned item

APPEARANCE ATTRIBUTES

  • Image Source Defines the image which will be displayed in the image widget

  • Title Defines the title (alternative text) for the image

  • Scaling Mode Definition of the scaling mode for the image source, how it will be displayed in the image widget

UI ACTIONS: ONCLICK

  • UI Action: onClick Defines the UI action(s) if the user touches / clicks on the image widget

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

IQ Label

Widgets

The IQ Label displays the value of a process variable as text.

32

1
Example 17. more about variants, configuration and styling

LAYOUT VARIANTS

iq label 01
iq date time blank
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Type, Precision (see Generic Data Attributes)

  • Text Defines the text that will be displayed if no value in the list of options applies

  • Options Adding optional texts / icons, which are displayed in the Label widget instead depending on the value of the item. The option

  • Use Value As a Tooltip Enables the displaying of the content of the label as a tooltip

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Value

48

IQ Linear Gauge

Widgets

The IQ Linear Gauge displays a value on a linear scale.

32

6
Example 18. more about variants, configuration and styling

LAYOUT VARIANTS

iq linear gauge 01

iq linear gauge 02

iq linear gauge 03

iq linear gauge 04

iq linear gauge 05

iq linear gauge 06

iq button rocker blank

iq button rocker blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Type, Label, Unit, Minimum Value, Maximum Value, Precision (see Generic Data Attributes)

  • Default Value Defines the value which will be shown if no item is connected or if no value has been received

APPEARANCE ATTRIBUTES

  • Show Text, Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Decimal Delimiter Selection of decimal delimiter for value

  • Duration of Animation Defines the duration of the value change animation

  • Fill from End Enables that the indicator of the gauge is filled from the right or from the top (instead from left or bottom)

  • Invert Gauge Fill Level Enables that indicator and background line will be inverted

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Unit

  • Icon

  • Value

  • Background Line

  • Indicator Line

48

IQ Progress Info

Widgets

The IQ Progress Info shows the progress of a process compared to a target value.

32

3
Example 19. more about variants, configuration and styling

LAYOUT VARIANTS

iq progress info 01

iq progress info 03

iq progress info 02

iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Precision (see Generic Data Attributes)

  • Base Item Defines the item which represents the current value for the progress

  • Comparison Item Defines the item which represents the target value for the progress

  • Default Value Defines the text that is displayed when the user has not set a value yet

APPEARANCE ATTRIBUTES

  • Display Format Definition of the display format which is used for displaying the progress information

  • Decimal Delimiter Selection of decimal delimiter for value

  • Duration of Animation Defines the duration of the value change animation

  • Fill from End Enables that the indicator of the gauge is filled from the right or from the top (instead from left or bottom)

  • Invert Gauge Fill Level Enables that indicator and background line will be inverted

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Value

48

IQ Quality Display

Widgets

The IQ Quality Display shows on a scale the actual value compared to the specified target value.

32

6
Example 20. more about variants, configuration and styling

LAYOUT VARIANTS

iq quality display 01

iq quality display 02

iq quality display 03

iq quality display 04

iq quality display 05

iq quality display 06

iq button rocker blank

iq button rocker blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Type, Label, Unit, Minimum Value, Maximum Value, Precision (see Generic Data Attributes)

  • Item Defines the item which represents the current value

  • Set Item Defines the item which represents the set value

  • Default Value Defines the value which will be shown if no item is connected or if no value has been received

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

  • No-control-value

    Hides the set value below the linear gauge

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Unit

  • Value

  • Value Control

  • Background Line

  • Indicator Line

48

IQ Radial Gauge

Widgets

The IQ Radial Gauge displays a value on a curved scale.

32

3
Example 21. more about variants, configuration and styling

LAYOUT VARIANTS

iq radial gauge 01

iq radial gauge 02

iq radial gauge 03

iq button rocker blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Item, Type, Label, Unit, Minimum Value, Maximum Value, Step, Precision (see Generic Data Attributes)

  • Default Value Defines the value which will be shown if no item is connected or if no value has been received

APPEARANCE ATTRIBUTES

  • Show Text, Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Decimal Delimiter Selection of decimal delimiter for value

  • Duration of Animation Defines the duration of the value change animation

ARC SETTINGS

  • Fill from End Enables that the indicator of the gauge is filled from the right or from the top (instead from left or bottom)

  • Invert Gauge Fill Level Enables that indicator and background line will be inverted

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Unit

  • Value

  • Background Line

  • Indicator Line

48

IQ Text

Widgets

The IQ Text displays textual information. Within the text, values of process variables can also be displayed.

32

1
Example 22. more about variants, configuration and styling

LAYOUT VARIANTS

iq text 01

iq date time blank

iq date time blank

iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Text Defines the text that will be displayed

  • Items Adding items for using in the text. The user can copy a placeholder by clicking on the right mouse button while the mouse pointer is hovering over the corresponding item. Placeholders for value, label and unit of the corresponding item are available.

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Value

48

IQ Text Display

Widgets

The IQ Text Display shows the current actual value of a process variable

32

3
Example 23. more about variants, configuration and styling

LAYOUT VARIANTS

iq text display 01

iq text display 02

iq text display 03

iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Show Text, Show Icon, Icon Source, Title, Icon Class (see Generic Appearance Attributes)

  • Decimal Delimiter Selection of decimal delimiter for value

  • Initial Text Defines the value which will be shown if no item is connected or if no value has been received yet

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • ok

  • preWarn

  • warn

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Unit

  • Icon

  • Value

5.4.2. Navigation + (Multi-)View Widgets

Table 2. Overview Navigation And (Multi-)View Widgets, Grouped And In Alphabetical Order
ICON NAME CATEGORY DESCRIPTION VARIANTS

MENUS

48

IQ Responsive Menu

Widgets

The Responsive Menu creates a hierarchical menu which can be used to navigate to different areas of the HMI. The responsive menu is able to adapt automatically to small and large displays (see Use Responsive Menu).

32

4
Example 24. more about variants, configuration and styling

LAYOUT VARIANTS

iq menu accordion 01

iq menu accordion 02

iq menu accordion 03

iq menu accordion 04

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

Menu Structure Defines the structure of the menu by adding menu items to it. The IQ Responsive Menu contains three types of menu items:

  • Entry: for creating a menu entry

  • Separator: for creating a visible separator between two menu entries (the separator can be used in all levels of the menu. However, it isn’t displayed in case of a horizontal menu bar on the top level)

  • Section: for creating submenus

For menu entries, separators and sections you can define a (localizable) label. In addition, you can specify an icon for each menu entry and section, which will be displayed in front of the label.

You can also select any UI action for the menu item (for details on UI actions, see [Use UI actions]).

  • Select the UI action "setview " if you want to use the menu item to navigate between views in panels. This allows you to configure which view should be displayed when the corresponding menu item is clicked on.

  • Select the UI action "dialog " if you want to use the menu item to display a dialog.

  • Select the UI action "slide-in " if you want to use the menu item to display an area with further information or settings.

  • You can also configure any other UI action for the menu item, e.g. Logout (initiates a logout), Setlocale (initiates a language switch), xyz (starts the individual UI action with the name "xyz").

responsive menu4
Figure 32. Configuration Of A Menu Entry For Setview

APPEARANCE ATTRIBUTES

  • Mobile Layouts Enables for which display widths the mobile layout of the responsive menu should be switched on

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Menu

  • Menu Seperator

  • Level 1

  • Level 2 + 3

  • Burger Menu

PANELS

48

IQ Screen Panel

Panels

The Screen Panel allows the creation of web HMIs or dialogs with multiple views. The user can navigate between the views using the Responsive Menu or special navigation buttons.

32

1
Example 25. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

BEHAVIOUR ATTRIBUTES

  • Initial View Defines the initial view using the view id, which will be displayed when the screen is initiated

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

IQ Swipe Panel

Panels

The Swipe Panel also allows the creation of web HMIs or dialogs with multiple views. Besides the Responsive Menus or Navigation Buttons, the user can navigate between the views with a swipe gesture.

32

1
Example 26. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Show Indicator Enables that the indicator of views will be displayed

BEHAVIOUR ATTRIBUTES

  • Initial View Defines the initial view using the view id, which will be displayed when the screen is initiated

  • Disable Swipe Disables that the user can use the swipe gesture to switch between different views (useful option in case of low graphics performance)

  • Animate Enables that the animation effect is displayed when user swipes between two views (it is helpful to disable this option in case of low graphics performance)

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Page Indicator - Active

  • Page Indicator - Inactive

48

IQ Tab Panel

Panels

The tab panel also creates web HMIs or dialogs with multiple views. The views are distributed on different tabs.

32

1
Example 27. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Tab Labels Defines the labels for the different tabs

BEHAVIOUR ATTRIBUTES

  • Initial View Defines the initial view using the view id, which will be displayed when the screen is initiated

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Active Tab

  • Active Tab - Label

  • Inactive Tab

  • Inactive Tab - Label

OVERLAYS

48

IQ Dialog Box

Overlays

As the name suggests, a Dialog Box is used to initiate a modal (sub-)dialog with the user. The Dialog Box is an area that is displayed above the Web HMI (overlay) and has the appearance of a dialog window. Usually the dialog in the Dialog Box is closed with "OK" or "Apply" or when the user cancels the dialog.

32

1
Example 28. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Title Defines the title text of the dialog box

BEHAVIOUR ATTRIBUTES

  • Insert Top-Level Enables that the dialog box is always on top regardless where the user places the dialog box into the widget hierarchy

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

  • no-close-button

    Ensures that the close button isn’t displayed in the dialog box

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Background - Layer

  • Title Bar - Title

  • Title Bar - Background

  • Title Bar - Icon

48

IQ Popup Menu

Overlays

The Popup Menu briefly displays information or functions above the web HMI. The user can select an appropriate function or close the Popup Menu by touching anywhere.

32

1
Example 29. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

BEHAVIOUR ATTRIBUTES

  • Auto-close on any button click Enables that the popup menu also closes if the user touches/clicks on any button located inside the popup

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

  • menu-on-top

    Ensures that Popup Menu is always displayed on top level

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Background Layer

48

IQ Slide In

Overlays

The Slide In displays information or functions on an area that is - as the name suggests - slid in from the side of the web HMI. The user can select an appropriate function or close the Slide In by touching anywhere else.

32

1
Example 30. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

BEHAVIOUR ATTRIBUTES

  • Auto-close Enables that the slide-in closes as soon as the user touches/clicks somewhere else

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

  • from-right

  • from-left

  • from-top

  • from-bottom

    Defines the direction from which the slide-in enters the screen

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

5.4.3. Layout Containers

Table 3. Overview Layout Containers
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

Horizontal Flex Container

Layout Containers

The Horizontal Flex Container automatically distributes all widgets that are placed in it in horizontal direction with or without wrapping.

32

1
Example 31. more about variants, configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

See Configuring Layout Containers

  • Layout Mode Basic layout mode (direction) of the Container (default: horizontal)

  • Horizontal Alignement (Main Axis) Setting of the alignment along the Main Axis (default: left)

  • Vertical Alignement (Cross Axis) Setting of the alignment along the Cross Axis (default: stretch)

  • Wrap Switch for enabling wrapping

  • Wrap Line Alignement Settings for alignment within the wrap lines (disabled in case of no wrapping)

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

Vertical Flex Container

Layout Containers

The Vertical Flex Container automatically distributes all widgets that are placed in it in vertical direction with or without wrapping.

32

1
Example 32. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

See Configuring Layout Containers

  • Layout Mode Basic layout mode (direction) of the Container (default: vertical)

  • Horizontal Alignement (Cross Axis) Setting of the alignment along the Cross Axis (default: stretch)

  • Vertical Alignement (Main Axis) Setting of the alignment along the Main Axis (default: top)

  • Wrap Switch for enabling wrapping

  • Wrap Line Alignement Settings for alignment within the wrap lines (disabled in case of no wrapping)

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

1) All the smart layout containers only work for widgets which have no position method or the position method "Static" configured.

5.4.4. Alarm Widgets

Table 4. Overview Alarm Widgets
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

IQ Alarm Info

Widgets

The Alarm Info displays the last alarm and the number of current alarms in a compact way.

32

4
Example 33. more about variants, configuration and styling

LAYOUT VARIANTS

iq alarm info 01

iq alarm info 02

iq alarm info 04

iq alarm info 05

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Inactive Text Defines the text which will be shown if no alarm is active

  • Icon - Idle State Defines an icon which will be displayed if no alarm is active

  • Alarm Icon Defines a custom icon for messages of the "Alarm" type

  • Warn Icon Defines a custom icon for messages of the "Warning" type

  • Info Icon Defines a custom icon for messages of the "Info" type

BEHAVIOUR ATTRIBUTES

  • Action Defines the UI action(s) for clicking on the alarm info widget (clicking = press & release)

  • Show alarms: enables that the alarm list displays messages with the "Alarm" type

  • Show warning: enables that the alarm list displays messages with the "Warn" type

  • show infos: enables that the alarm list displays messages with the "Info" type

  • Alarm Group Filter Defines one or more alarm groups by index number (separated by comma). The widget will then only show alarms that belong to one of the alarm groups listed there. If the field is empty all alarms will be displayed.

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Icon

  • Button

  • Message

  • Count

  • Info State - Button

  • Info State - Message

  • Info State - Count

  • Warn State - Button

  • Warn State - Message

  • Warm State - Count

  • Alarm State - Button

  • Alarm State - Message

  • Alarm State - Count

48

IQ Alarm List

Widgets

The Alarm List shows currently active and historic alarms. The list can be filtered and sorted.

32

4
Example 34. more about variants, configuration and styling

LAYOUT VARIANTS

iq alarm list 01

iq alarm list 02

iq alarm list 03

iq alarm list 04

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Display Mode Selection of the display mode (All Alarms, Only Live, Only Historic)

  • Comment Mode Selection whether the user can leave a comment for an individual alarm or the alarm index

  • Headline Defines the headline above alarm list

  • Show Text Enables the display of the alarm headline

  • Custom Template (Alarm Details) Defines the usage of an individual HTML template for displaying the alarm details

  • Alarm Icon Defines a custom icon for messages of the "Alarm" type

  • Warn Icon Defines a custom icon for messages of the "Warning" type

  • Info Icon Defines a custom icon for messages of the "Info" type

  • Column Widths Defines the width of the corresponding column. Column width is flexible if the column width hasn’t been specified (field is empty)

BEHAVIOUR ATTRIBUTES

  • Allow display mode change: enables that the user can change the display mode during runtime

  • Allow group filter change: enables that the user can filter by the alarm groups during runtime

  • Disable acknowledge buttons: disables the acknowledge buttons

  • Alarm Group Filter Defines one or more alarm groups by index number (separated by comma). The alarm list will then only show alarms that belong to one of the alarm groups listed there. If the field is empty all alarms will be displayed.

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Headline

  • Acknowledge Buttons

  • Filter Checkboxes

  • Filter Checkbox Label

  • Filter Button

  • Filter Button Label

  • List

  • List Header Bar

  • List Column Headings

  • List Entry

  • List Entry (date-time)

  • List Footer

  • List Buttons

5.4.5. Recipe Widgets

Table 5. Overview Recipe Widgets
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

Recipe Controller

Widgets

The Recipe Controller is a bar with buttons that provide the user with the most important functions for applying, managing and editing recipes.

1
Example 35. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Recipe Select Instance Selection of the associated widget instance "Recipe Select"

  • Recipe Edit Instance Selection of the associated widget instance "Recipe Edit"

APPEARANCE ATTRIBUTES

  • Show 'Add' button Enables the display of the 'Add' button inside the Recipe Control bar

  • Show 'Duplicate' button Enables the display of the 'Duplicate' button inside the Recipe Control bar

  • Show 'Remove' button Enables the display of the 'Remove' button inside the Recipe Control bar

  • Show 'Edit' button Enables the display of the 'Edit' button inside the Recipe Control bar

  • Show 'Capture' button Enables the display of the 'Capture' button inside the Recipe Control bar

  • Show 'Apply' button Enables the display of the 'Apply' button inside the Recipe Control bar

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

48

Recipe Edit

Widgets

This Recipe Edit gives the user the option to edit a recipe. The widget displays all metadata as well as the process values of a recipe in tabular form.

1
Example 36. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

APPEARANCE ATTRIBUTES

  • View Mode Can be either linear (default) or tree (requires specific item structure)

ATTRIBUTES

  • Definition of recipe values with Select Box selection Here a LocalScript can be specified which defines the values that should be used - see below for an example.

  • Allow editing of recipe name Enables that the user can edit the recipe name

  • Timeout for fetching item info When the Recipe Edit widget is initialized it reads all associated items and corresponding from the PLC. A timeout can be specified which should be set if not all of the items configured in the recipe are available currently. Without setting a timeout in such a case the recipe editor cannot be used

  • Enable Numpad Enables display of the numpad if user touches/clicks on the input field inside the recipe editor

  • Lock Condition (see Generic Behaviour Attributes)

Example: Definition of recipe values with Select Box selection Inside a LocalScript which you assign to this widget you can define the recipe values for each item - this will show a select box for this item instead of a normal input field.

 // MODULE CODE - START

    /* private variables */
     module.dictionary = {
        "itemoptions-myItemName": [{
            "icon-class": null,
            "icon-src": null,
            "icon-title": null,
            "label": "Option 1",
            "value": 1
        },
        {
            "icon-class": null,
            "icon-src": null,
            "icon-title": null,
            "label": "Option 2",
            "value": 2
        }]
    };

So for creating a selection for each item you have to create an entry itemoptions-MYITEMNAME where MYITEMNAME is the name of the item the options should be used for.

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

48

Recipe List

Widgets

The Recipe List displays the currently available recipes.

1
Example 37. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

48

Recipe Select

Widgets

The Recipe Select allows the user to search and select the desired recipe from the list of recipes. The Recipe Select works as a selection box with auto-completion, so that the desired recipe can be found easily.

1
Example 38. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

  • Control Name, Class Name

DATA ATTRIBUTES

  • Label (see Generic Data Attributes)

  • Recipe Template Selection of the associated recipe template defined in the Recipe Manager

  • Default Recipe Name Defines a default recipe name, which is given by default in the search bar

  • Clear recipe selection on focus Enables clearing the search bar when it receives focus. If you disable this option the previously entered search term will remain in the search bar

APPEARANCE ATTRIBUTES

  • Show Result Box Selection whether the box with the search results will be displayed and how many items will be shown

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

5.4.6. Trend Widgets

Table 6. Overview Trend Widgets
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

Trend

Trend

The Trend Widget visualizes process variable values over time as recorded by the data recorder. Both current and the historical values can be displayed

1
Example 39. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Select Trend Selection of the 'Trend' group of the data recorder, which should be displayed in the Trend Widget (see description of data recorder and 'Trend' group objects)

  • Selected Values Defines which values of the trend should be displayed in the trend display (plus button). For each value the following attributes can be defined (button with …​)

    • Style Selection of the color with which the trend curve should be displayed for the corresponding value

    • Fill curve Enables the filling of the area under the curve with a color

    • Draw tolerances Enables the display of the tolerance range of the value (tolerance must be defined in the configuration of the process variable, see Configuration of Variables/Structure members)

    • Limits

      • Mode Selection of the mode for scaling the value axis

        • *Configuration* Uses scale limits provided by the configuration of the according item

        • Automatic Uses currently loaded values to determine scale limits

          Step Defines the minimum and maximum of the scale as a multiple of this value

        • Manual Uses manually provided scale limits

          Min Defines the lower scale limit

          Max Defines the upper scale limit

    • Scale

      • Location Selection of the scale placement (left or right)

      • Hide scale Enables the hiding of the scale

      • Scale Group Allows to create scale group and assign the value to a scale group

  • Display Duration Defines with which time period the trend display should be displayed

  • No Value Text Defines the text which is displayed when no value has been recorded

  • Handle Date Format Defines the date format for the handle

  • Handle Time Format Defines the time format for the handle

  • Handle Time Format (< 1s) Defines the time format for the handle if the time is smaller than one second

  • Comment Timestamp Format Defines the time format of the timestamp within a comment

  • Timeline Start Marker Date Format Defines the date format for the start marker of timeline

  • Timeline Start Marker Time Format Defines the time format for the start marker of timeline

BEHAVIOUR ATTRIBUTES

  • Enable Trend Handles Enables that the user can display a trend handle

  • Enable Secondary Trend Handle Enables that the user can display a second trend handle

  • Enable Comments Enables that the user can enter comments to a specific date/time within the trend

  • Start in Live Mode Enables that the trend display starts in live mode

  • Remember selected values Enables that the user can define different sets of trend curves per HMI client in an associated Trend Select widget

ADVANCED - CURVE STYLES

  • Value Styles Defines the styling of the active trend curve for the selected value

  • Default Value Styles Defines the default styling of a trend curve if no more pre-defined styling is available

  • Inactive Value Styles Defines the styling of the inactive trend curve for the non-selected values

MISCELLANEOUS

  • Available Display Durations [ms] Defines available durations that can be selected for the timeline

  • Available Zoom Stages [%] Defines the available zoom levels for Trend Zoom

  • Timeline Marker Formats Defines the different formats for the markers of the timeline (years, months, weeks, days, hours, minutes, seconds and milliseconds). The definition of the format refers to a localization variable which can be defined in the Localization Manager, see Use Timestamps In Alarm Texts

  • Comment Button Widget Configuration (IQ Button) Defines the Comment Button displayed in the trend handle

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • none

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

Trend Legend

Trend

The Trend Legend labels the displayed trend curves.

1
Example 40. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • IQ Trend Instance Selection of the associated widget instance "Trend"

APPEARANCE ATTRIBUTES

  • Orientation Selection of the orientation of the Trend legend (horizontal or vertical)

  • Show Unit Enables the display of the unit in the Trend Legend

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • none

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

Trend Live

Trend

Trend Live provides two buttons for switching between live mode (play button) and historical trend values display (pause button).

1
Example 41. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • IQ Trend Instance Selection of the associated widget instance "Trend"

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • none

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

Trend Select

Trend

Trend Select allows the user to select the desired recorded process values to be displayed in the Trend Display and for configuring the type of display.

1
Example 42. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • IQ Trend Instance Selection of the associated widget instance "Trend"

APPEARANCE ATTRIBUTES

  • Label Type Selection of the label type (label or alias)

CUSTOMIZATION

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • none

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

Trend Time

Trend

Trend Time provides functions to select specific time periods for visualization in the Trend Display (enter date/time and scaling of the time axis).

1
Example 43. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • IQ Trend Instance Selection of the associated widget instance "Trend"

  • Zoom Axis Selection of the axis which the user can zoom (X Axis = Time Axis, Y Axis)

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • none

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

48

Trend Zoom

Trend

Trend Zoom provides two buttons to zoom in or out of the trend.

1
Example 44. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • IQ Trend Instance Selection of the associated widget instance "Trend"

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • none

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

5.4.7. User Widgets

Table 7. Overview User Widgets
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

User Controller

Widgets

User Controller is a bar with buttons that provide an admin user with the most important functions for managing and editing users which can use the web HMI.

32

2
Example 45. more about variants, configuration and styling

LAYOUT VARIANTS

iq user controls 01
iq user controls 02
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • User Select Instance Selection of the associated widget instance "User Select"

APPEARANCE ATTRIBUTES

  • Show 'Add' button Enables the display of the 'Add' button inside the User Control bar

  • Show 'Duplicate' button Enables the display of the 'Duplicate' button inside the User Control bar

  • Show 'Remove' button Enables the display of the 'Remove' button inside the User Control bar

  • Show 'Edit' button Enables the display of the 'Edit' button inside the User Control bar

  • Show 'Reset Password' button Enables the display of the 'Reset Password' button inside the User Control bar

  • Show 'Change Password' button Enables the display of the 'Change Password' button inside the User Control bar

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Label

  • Icon

  • Button

48

User Info

Widgets

User Info displays some information about the currently logged-in user.

32

1
Example 46. more about variants, configuration and styling

LAYOUT VARIANTS

iq user info 01

iq date time blank

iq date time blank

iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

APPEARANCE ATTRIBUTES

  • Display Name Selection how the information on the currently logged-in user will be displayed (with username or with first and last name)

  • Show/Hide Group Selection whether user group will be displayed or not

BEHAVIOUR ATTRIBUTES

  • UI Action onClick Defines the UI action(s) for clicking the alarm info (clicking = press & release)

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Display Name

  • Group

48

User List

Widgets

UserList contains a list of all users created for the web HMI.

32

1
Example 47. more about variants, configuration and styling

LAYOUT VARIANTS

iq user list 01

iq date time blank

iq date time blank

iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Do not show Superadmin Disables the display of user which belongs to the user group "admin"

APPEARANCE ATTRIBUTES

  • Show 'Last Name' column Enables the display of the column 'Last Name' inside the User List

  • Show 'First Name' column Enables the display of the column 'First Name' inside the User List

  • Show 'User Group' column Enables the display of the column 'User Group' inside the User List

  • Show 'Password Validity' column Enables the display of the column 'Password Validity' inside the User List

  • Show 'Auto-Logout' column Enables the display of the column 'Auto-Logout' inside the User List

  • Show 'Language' column Enables the display of the column 'Language' inside the User List

  • Show 'Description' column Enables the display of the column 'Description' inside the User List

  • Show 'Fake Password' column Enables the display of the column 'Fake Password' inside the User List

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • Widget Box

  • Header Bar

  • Column Headings

  • List

  • List Entry

  • Search Bar: Search Box

  • Search Bar: Label

  • Footer

48

User Select

Widgets

User Select allows the admin user to search and select a desired user from the users available in the HMI. User Select works as a selection box with auto-completion so that the desired user can be found easily.

32

2
Example 48. more about variants, configuration and styling

LAYOUT VARIANTS

iq user select 01
iq user select 02
iq date time blank
iq date time blank

CONFIGURATION

REFERENTIAL ATTRIBUTES

  • Control Name, Class Name

DATA ATTRIBUTES

  • Label (see Generic Data Attributes)

  • Do not show Superadmin Disables the display of users that belong to the user group "admin".

APPEARANCE ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • inverted

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling**

  • Widget Box

  • Label

  • Icon

  • Input

5.4.8. Shapes

All Shapes have the same properties

CONFIGURATION

REFERENTIAL ATTRIBUTES

  • Control Name, Class Name

DATA ATTRIBUTES

  • Rotation Defines the rotation of the shape within the widget box

  • Scale Defines the scaling of the shape within the widget box

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling**

  • Widget Box

  • Shape

Table 8. Overview Shapes
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

IQ Ellipse

Shapes

IQ Ellipse allows the creation of a filled or non-filled circle or ellipse.

32

1

see Generic Shape Configuration

48

IQ Triangle

Shapes

IQ Triangle allows the creation of a filled or non-filled triangle.

32

1

see Generic Shape Configuration

48

IQ Rectangle

Shapes

IQ Rectangle allows the creation of a filled or non-filled square or rectangle.

32

1

see Generic Shape Configuration

48

IQ Pentagon

Shapes

IQ Pentagon allows the creation of a filled or non-filled pentagon.

32

1

see Generic Shape Configuration

48

IQ Hexagon

Shapes

IQ Hexagon allows the creation of a filled or non-filled hexagon.

32

1

see Generic Shape Configuration

48

IQ Octagon

Shapes

IQ Octagon allows the creation of a filled or non-filled octagon.

32

1

see Generic Shape Configuration

48

IQ Left Arrow

Shapes

IQ Left Arrow allows the creation of a filled or non-filled left arrow.

32

1

see Generic Shape Configuration

48

IQ Right Arrow

Shapes

IQ Right Arrow allows the creation of a filled or non-filled right arrow.

32

1

see Generic Shape Configuration

5.4.9. Special Widgets

Table 9. Overview Special Widgets
ICON NAME CATEGORY DESCRIPTION VARIANTS

48

Composite Widget

Widgets

The composite widget combines several standard widgets into a new (custom) widget. You can use a composite widget just like a normal widget.

1
Example 49. more about configuration and styling

CONFIGURATION

REFERENTIAL ATTRIBUTES

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

48

HTML

Widgets

The HTML widget allows arbitrary HTML to be injected into the HMI.

1
Example 50. more about configuration

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • HTML Code Enter valid HTML code here

  • Content Isolation Enables that the HTML code will be placed in its own context (Shadow DOM), which means that CSS styles and modifiers from outside of the widget will not be applied, and that you can’t access the elements of the HTML code via a script

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

48

iFrame

Widgets

The iFrame widget is a container that displays content from other web sites.

1
Example 51. more about configuration

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Source URL URL which should be displayed inside the iFrame. Most often this is an HTML page.

  • Disable Scrollbar Disable the display of iFrame scrollbars

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER see Use Default CSS Modifiers

  • hidden

  • invisible

STYLEABLE ELEMENTS see Manual Styling

  • none

48

Numpad

The Numpad will be displayed for input of numeric values. This widget will not be displayed in the Widget List. Instead, you can define in the corresponding input widgets whether the Numpad should be enabled. If it is enabled, it will be shown automatically if needed.

1
Example 52. more about configuration

CONFIGURATION

  • none

PRE-DEFINED CSS-MODIFIER

  • none

STYLEABLE ELEMENTS

  • none

48

Alphanumerical Keyboard

The Alphanumeric Keyboard will be displayed during text input (name, password, etc.). This widget will not be displayed in the Widget List. Instead, you can define in the App Settings whether the keyboard of the Operating System or the Alphanumeric Keyboard of WebIQ should be displayed. If the Alphanumeric Keyboard of WebIQ is enabled there, it will be shown automatically if required.

1
Example 53. more about configuration

CONFIGURATION

You can define different alphanumeric keyboards for the localizations. The configuration of each keyboard is stored within a separate .json-file in the folder json/locale/keyboard/. You can find details about this in the WebIQ online documentation.

PRE-DEFINED CSS-MODIFIER

  • none

STYLEABLE ELEMENTS

  • none

48

Local Script

Widgets

LocalScript isn’t a real widget. It will not show any content in the HMI. LocalScript contains JavaScript code to be executed as soon as the parent container of the LocalScript is shown in the browser.

1
Example 54. more about configuration

CONFIGURATION

REFERENTIAL ATTRIBUTES

DATA ATTRIBUTES

  • Script Module Name Selection of the LocalScript which should be used. Scripts have to be created in the Code Manager in the "Local-Scripts" area

  • Lock Condition (see Generic Behaviour Attributes)

PRE-DEFINED CSS-MODIFIER

  • none

STYLEABLE ELEMENTS see Manual Styling

  • none

5.5. Widget Anatomy & Grid

The IQ Widgets are all based on an 8 x 8 pixel grid. This greatly simplifies the alignment of the widgets with each other.

anatomy

6. Layouting Your HMI With Containers

This chapter describes in detail how you can layout views and screens within WebIQ Designer.

WebIQ Designer offers you two important features for designing the layout of the HMI:

  • Layout Containers

  • Style Cockpit

6.1. How It Works: Container Layout

6.1.1. Pixel vs. Container Layout

Traditional visualization systems place widgets on a screen at a fixed position. The position of a widget is usually defined by an XY coordinate or by distances from the edges of the screen. This approach has been established for many years. It results in a fixed layout that is optimized for exactly one screen size and orientation.

With web technology and the requirement to develop HMIs for different screen sizes and orientations, a new layout technique for defining screen layouts was established, the so-called Container Layouts. This uses containers to help to create complex layouts in a simple and easy way. For example the screen areas are divided into containers which contain sub-containers or widgets. The container properties, e.g. horizontal, vertical, center, wrap etc., determine how the elements inside a container in it behave.

container mockup
Figure 33. Wireframe of an HMI structured with Containers

6.2. Responsive Design

6.2.1. Flex Container

Another property of containers is the flex property, i.e. containers can grow or shrink depending on the available screen space.

6.2.2. Media Query

As an additional feature, the browser that renders this layout can determine the horizontal width of the displaying device, the so-called media query. On this basis different properties of the containers can be set, e.g. they can be reduced or hidden. This technique, which allows the page layout to be fully adapted to different device classes and resolutions, is called responsive design.

For further information see section Device Specific Styling.

dynamic layout
Figure 34. Example: Automatic Positioning of 3 Radial Gauges Within A Smart Layout Container With the Alignment-Parameters "Horizontal", "Center" and "Top"

6.2.3. Summary: Container Layout

Container layouts are a new, powerful method for designing complex layouts, e.g. in multi-page applications, according to certain rules. The working principle is to design the layout using the properties of the container, e.g. if a container has the "vertical" property, all the elements in it are arranged below each other. If it has the "horizontal" property, the elements are displayed next to each other Containers can also have the flex-grow or flex-shrink property, then adjust their size, i.e. height or width, according to the available space. Last but not least, media queries can be used to select properties such as height, width or attributes such as visible/invisible based on the resolution of the target device.

Working with Layout Containers is initially unusual and new for the user. However, one soon recognizes the advantages and the layout design turns out to be faster and more direct in the end, especially when changes or extensions have to be made.

At the latest with responsive design, when the HMI adapts to the size and resolution of different end device classes, there is no way around Container layout-based systems.

6.3. Configuring Layout Containers

We distinguish between Horizontal Flex and Vertical Flex Containers, i.e. the elements in them align according to the direction. This direction is called 'Main Axis'. The opposite direction, i.e. vertical in a 'Horizontal Flex-Container' we call 'Cross-Axis'

After adding a Container from the Widget Bar into the layout, you will find all relevant parameters in the Configuration Cockpit on the right side.

500
Figure 35. Configuration Cockpit of Layout Container

The Configuration Cockpit of the Layout Container contains the following information and functions.

LEGEND

1 Name of the Widget instance (you can choose it freely, no spaces and special characters, only letters, numbers, dashes and underscores)

2 Class name of the Layout Container (recommendation: Do not change anything here)

3 Basic layout mode (direction) of the Container (horizontal or vertical)

4 Setting of the alignment along the Main Axis (default: left)

5 Setting of the alignment along the Cross Axis (default: Stretch)

6 Switch for enabling wrapping

7 Settings for alignment within the wrap lines (disabled in case of no wrapping)

All settings are described in detail below.

button "Enter"

In the following images, which describe the different settings of the Layout Containers, the Widgets are shown as blue boxes. These represent the Widget box of a Widget.

6.3.1. Layout Mode: Direction of Main Axis

This is the first and most important decision when you are using the Layout Container. It establishes the main axis of the Layout Container, thus defining the line direction Widgets are placed in the Container. The Container is (aside from optional wrapping) a single-direction layout concept. Think of Widgets as primarily laying out either in horizontal rows or vertical columns.

MAIN AXIS DIRECTION

MAIN AXIS DIRECTION

Horizontal: The Layout Container will try to fit all Widgets into one row.

Vertical: The Layout Container will try to fit all Widgets into one column.

Icon "Horizontal Direction"

Icon "Vertical Direction"
Horizontal
Vertical
Horizontal
Vertical

6.3.2. Alignment Along Main Axis

This defines the horizontal or vertical alignment along the main axis. It helps distribute extra free space leftover when either all widgts on a line have a fixed size or have reached their maximum size.

MAIN AXIS: HORIZONTAL DIRECTION

MAIN AXIS: VERTICAL DIRECTION

Left: Widgets are packed from the left side of the main axis.

Top: Widgets are packed from the top of the main axis.

Icon "Left"

Icon "Top"
Left
Top

Right: Widgets are packed from the right side of the main axis.

Bottom: Widgets are packed from the bottom of the main axis.

Icon "Right"

Icon "Bottom"
Right
Bottom

Center: Widgets are centered along the direction of the main axis.

Middle: Widgets are middled along the direction of the main axis.

Icon "Center"

Icon "Middle"
Center
Middle

Space Between: Widgets are distributed evenly in the line or column; first Widget is on the start, last Widget on end.

Icon "Horizontal Space Between"

Icon "Vertical Space Between"
Horizontal Space Between
Vertical Space Between

Space Around: Widgets are distributed evenly in the line or column with equal space around them. Note that visually the spaces aren’t equal, since all the Widgets have equal space on both sides. The first Widget will have one unit of space against the Container edge, but two units of space between the next Widget because that next Widget has its own spacing that applies.

Icon "Horizontal Space Around"

Icon "Vertical Space Around"
Horizontal Space Around
Vertical Space Around

Space Evenly: Widgets are distributed so that the spacing between any two Widgets (and the space to the edges) is equal.

Icon "Horizontal Space Evenly"

Icon "Vertical Space Evenly"
Horizontal Space Evenly
Vertical Space Evenly

It may happen that alignment along the main axis has no effect. This happens when

  • the total size of the Widgets is so large that there is *no free space" leftover along the main axis

  • the flex-grow-value for one or more Widgets, which is placed along the main axis, is set to 1 or greater

6.3.3. Alignment Along Cross Axis

This defines the default behaviour for how Widgets are laid out along the cross axis on the current line direction. Think of it as the vertical or horizontal alignment along the cross-axis (perpendicular to the main-axis).

MAIN AXIS: HORIZONTAL DIRECTION

MAIN AXIS: VERTICAL DIRECTION

Top: Widgets are placed at the top of the cross axis.

Left: Widgets are placed at the left side of the cross axis.

Icon "Top"

Icon "Left"
Top
Left

Bottom: Widgets are placed at the bottom of the cross axis.

Right: Widgets are placed at the right side of the cross axis.

Icon "Bottom"

Icon "Right"
Bottom
Right

Middle: Widgets are middled along the direction of the cross axis.

Center: Widgets are centered along the direction of the cross axis.

Icon "Middle"

Icon "Center"
Middle
Center

Stretch: Stretch the Widgets in order to fill the layout Copntainer (still respect min-width/max-width).

Icon "Stretch"

Icon "Stretch"
Stretch
Stretch

It may happen that alignment along the cross axis has no effect. This happens when wrapping is activated and the Widgets have all the same height or width. Use Wrap Line Alignment instead.

6.3.4. Grow / Shrink

The settings "Grow" and "Shrink" are not made in the Layout Container, but in the Style Cockpit for each Widget that is placed in the respective Layout Container.

This defines the ability for the corresponding Widget to grow or to shrink if necessary. It accepts a unit-less value that serves as a proportion. It dictates what amount of the available space inside the Layout Container the Widget should take up.

The behaviour is as follows:

Flex-grow = undefined

If you have not set any value for "Flex-grow", then the Widget will take its (minimum) default size.

flex grow undef

Width / Height with value

If you have entered a value in px. for the width or height, then the Widget will take exactly this width or height.

Width-value

Flex-grow = 1

If one or more Widgets within the Layout Container have “Flex-grow” set to 1, the remaining space in the Layout Container will be distributed equally to all Widgets, which have set the flex-grow-value.

flex grow 1 1

Flex-grow = 2 or higher

If one of the Widgets has a value of 2 (or higher), the remaining space would take up twice (or more) as much space as the others (or it will try to, at least).

flex grow 2 1

Width / Height with value + Flex-grow

The Widget with the width will take exactly this width. The Widgets with “Flex-grow” set to 1 uses the remaining space in the Layout Container.

flex grow 1 120

Define "Grow" and "Shrink" in the Style Cockpit of the Widgets, which are placed into the corresponding Layout Container

The behaviour for Flex-shrink is the same, except that here the shrink rate is defined.

6.3.5. Wrapping

By default, a Layout Container will try to fit all Widgets into one line. You can change that and allow the Widgets to wrap as needed with the wrap option.

wrap
Figure 36. Wrapping Behaviour According to Different Container Sizes

When wrapping, one or more additional rows or columns are added (Wrap Lines). There are now two types of alignment:

  • The alignment within the wrap line (see Alignment Along Cross Axis above)

  • The alignment of the wrap lines as such (see Wrap Line Alignment below).

Wrap Line Alignment

You have some more settings for the vertical or horizontal alignment of the wrap lines, if you activate "Wrapping":

MAIN AXIS: HORIZONTAL DIRECTION

MAIN AXIS: VERTICAL DIRECTION

Top: Wrap lines are placed at the top of the cross axis.

Left: Wrap lines are placed at the left side of the cross axis.

Icon "Top"

Icon "Left"
Top
Left

Bottom: Wrap lines are placed at the bottom of the cross axis.

Right: Wrap lines are placed at the right side of the cross axis.

Icon "Bottom"

Icon "Right"
Bottom
Right

Middle: Wrap lines are middled along the direction of the cross axis.

Center: Wrap lines are centered along the direction of the cross axis.

Icon "Middle"

Icon "Center"
Center
Center

Space Between: Wrap lines are evenly distributed with first wrap line is on the start, last Widget on end.

Icon "Vertical Space Between"

Icon "Horizontal Space Between"
Space Between
Space Between

Space Around: Wrap lines are evenly distributed with equal space around them.

Icon "Vertical Space Around"

Icon "Horizontal Space Around"
Space Around
Space Around

Stretch: Stretch the wrap lines in order to fill the overlaying containe (still respect min-width/max-width).

Icon "Stretch"

Icon "Stretch"
Stretch
Stretch

6.4. Nested Containers

You can also nest Layout Containers. This allows you to build more complex layouts. For example, you could divide your HMI screen into the following areas:

  • header

  • sidebar

  • footer

  • content areas

Each of these areas is represented by a Layout Container. Then you can then divide the areas with further Layout Containers, e.g. you could insert a Layout Container for the parameters on the left side and a Layout Container for the preview on the right side into the content area, etc. This makes sense because it brings order to your layout. And you can also configure each Layout Container individually, for example with different alignments.

However, don’t make the nesting with Layout Containers too deep. This can confuse you because you won’t be able to find the parameters, which you used to configure the layout, anymore. For the nesting of the Layout Containers, the following applies: as deep as necessary, as flat as possible. This is good practice.

It can be helpful to create a small sketch (wireframe) of your screen beforehand and draw the nested layout containers there (see wireframe below). You should also name your layout containers in a useful (semantic) manner in order to get a good overview in the layout hierarchy (see field "Control Name" in the configuration cockpit of the respective Container).

6.5. Style Cockpit

The styling of Widgets is defined in the Style Cockpit. It distinguishes between

  • Global style settings and

  • Device-specific style settings

The settings are the same, but their effect is different. In the first step, we focus on the global style settings.

style cockpit
Figure 37. Style Cockpit for styling the Widgets

The Style Cockpit contains the following information and functions.

LEGEND

1 Display of the selected Widget’s type, name and size

2 Switch between global and device-specific style settings

3 Setting of position method

4 Setting of layer index

5 Settings for rotation

6 Settings for visibility and opacity

7 Settings for the dimensions

8 Settings for offset, margin and paddings (Box Model Configurator)

9 Setting for overflow behaviour

10 Setting for the styling (see [Style Your HMI])

6.5.1. Info Header

The Info header represents the most important information about the selected Widget:

  • Widget icon

  • Widget type

  • Indicator IQ Widget

  • Current width

  • Current height

The IQ Widgets are the new generation of smart and intelligent web Widgets, distributed with WebIQ. The IQ Widgets are marked with the 24-Indicator.

6.5.2. Global / Device-Specific

Switch, that makes the style settings global or device-specific which can be important for Responsive Design (see Device Specific Styling).

6.5.3. Position Method

Use the position method to define in which way the respective element is positioned. You can decide whether the Widget is automatically positioned according to the layout flow defined by the Container (= Static), or freely positioned anywhere in the Container (= Absolute) or on the viewport (= Fixed). The following position methods are available:

Static

Static means that the Widgets remains in the order according to the layout flow within the corresponding Container (stacked, float, vertical flex, horizontal flex, etc.). Use the position method "Static" and a Container with the desired layout flow if you want to create a responsive design for your HMI. The setting "Static" corresponds to the default value of the position method.

Absolute

With the setting "Absolute" you can remove the corresponding Widget from the layout flow and put it on a free position within the parent Container. Then the Widget is positioned relatively to the parent Container. The position is determined by the x and y offset from the edge of the Container.

The offset is indicated by corresponding pink lines including the respective offset value. You can switch the zero point (anchor) for the offset values, e.g. anchor at top-left or bottom-right, within the context menu of the selection mark. The pink lines change analogously. The anchor top-left corresponds to the x and y coordinates from the upper left corner, and thus to common positioning in pixel-oriented visualization systems.

absolutepos
Figure 38. Absolute Positioning with anchor set top-left of a Radial Gauge Widget with Context Menu

By using the absolute positioning, you are free to define the Widgets position. Open the context menu of the Widget and select the entry "Position". There you can choose one or more of the following options:

Option Description

Center horizontaly

Widget will be centered horizontally

Center vertically

Widget will be centered vertically

Show Grid

Enable or disable grid

Snap to Grid

Widget snaps according to grid size

Anchor to top-left

Sets the zero-point (anchor) of the xy-coordinates to the top left

Anchor to top-right

Sets the zero-point (anchor) of the xy-coordinates to the top right

Anchor to bottom-left

Sets the zero-point (anchor) of the xy-coordinates to the bottom left

Anchor to bottom-right

Sets the zero-point (anchor) of the xy-coordinates to the bottom right

Raise to top

Raises the Widgets towards one layer index to the top

Lower to bottom

Lower the Widgets towards one layer index to the bottom

Fixed

The setting "Fixed" also removes the corresponding Widget from the layout flow. But - in contrast to the position method "Absolute" - you can freely position the Widget anywhere in the viewport (the viewport is the user’s visible area of the HMI). The position is determined by the x and y offset from the edge of the viewport, which is indicated by the top-level-Container of the HMI.

The position method "Fixed" should not be used within a view of a panel. This can lead to a incorrect layout. Use instead the position method "Static" or "Absolute" in views.

By default Widgets are positioned with the position-method "Static" and in the order, that they were added.

Table 10. Overview of the behavior of the Position Methods
Static Absolute Fixed

Order Of Widgets

Widget remains in order

Widget leaves the order

Widget leaves the order

Paddings

Possible

Possible

Possible

Margins

Possible

Possible

Possible

Offsets

Not available

Possible

Possible

The name of the position method is analogous to the style descriptions in web technology, i.e. "Static", "Absolute" and "Fixed" are established terms in CSS. For HMI engineers, who are not familiar with web technology, the terms may seem unusual. However, for reasons of consistency, we decided to keep these terms. We recommend that you search for detailed explanations and examples using the search terms "css position method" on the internet if you want to learn more .

6.5.4. Z-Index

The setting "Z-Index" defines at which level on the z-axis the Widgets are displayed in the HMI and thereby which element may overlap the other. Elements with a large z-index are drawn in the foreground or rather "closer" to the viewer.

6.5.5. Rotation

With Rotation you can set the rotation of the selected Widget. The value is entered in the form of an angle between - 360° and +360°:

  • positive angle: clockwise rotation

  • negative angle: counterclockwise rotation

Under Origin you can define the rotation point.

6.5.6. Visibility

By default a Widget is visible.

visibility visible Visible: This setting turns the visibility explicitly on.

visibility hidden Hidden: This setting hides the Widget. The space required by the Widget remains.

visibility none None: With this setting the Widget, including the space required by the Widget, is completely hidden.

visibility
Figure 39. Example for the setting "Visibility"

6.5.7. Opacity

This setting adjusts the opacity of the corresponding Widget. The higher the value, the greater the opacity.

opacity
Figure 40. Example for the setting "Opacity"

6.5.8. Dimension

By default the size of a Widget is defined automatically, but it is also possible to set the size manually.

You can specify the width and height of a Widget in

  • Grid units (grid)

  • Pixels (px)

  • Percents (%)

  • 100 Percent (100%)

The format of the dimension can be selected as soon as you select the relevant input field "Width" or "Height". The unit of the corresponding dimension will be displayed as a dropdown list, which allows you to change it. 100% is a shortcut for entering the value "100" and selecting the unit "%".

input dimension

Entering a dimension in pixels or grid units define an absolute size, whereas entering the dimension in percent define a size relative to the size of the Container which contains the Widget.

If you use a relative size for an element you need to make sure that its parent element has a valid size set. Otherwise the relative size settings will not take effect.
dimensions
Figure 41. Example for the setting "Dimensions"

LEGEND

Container Width = 400 px.

  1. Width of the slide is undefined (slider uses its predefined width)

  2. Width of the slider is absolutely set to 250 px.

  3. Width of the slider is absolutely set to 20 grids
    Resulting width of the slider is 160 px. (according to a grid size of 8 px.)

  4. Width of the slider is relatively set to 50%
    Resulting width of the slider is 200 px. (according to a Container width of 400 px.)

  5. Width of the slider is relatively set to 100%
    Slider spans from left to right within the Container

You can set the dimension of a any Containers, panels, overlays and views in the same way.

Most of the Widgets still have minimum dimensions in order to avoid display errors.

6.5.9. Offset, Margin, Padding

You can consider all elements like Widgets and Containers as boxes. Essentially you can imagine a Widget Box that wraps around every element (see the illustration below). This model is also commonly known under the name of "CSS box model". It is the direct origin of the Box Model Configurator, a graphical representation for the input of padding, margin and offset.

box model config Widget
Figure 42. Illustration of the "Box Model"

In WebIQ Designer, the box model configurator is used to set up

  • Paddings

  • Margins

  • Offsets

Padding defines an Inner Space and margin defines an Outer Space around the Widget box.

Offset is not available in case of position method "Static". It is only available if you’re using the position methods "Absolute" or "Fixed". In this case you can use the offset value in order to position the Widget absolutely to the surrounding Layout Container.

You can edit the values in the box model configurator as follows:

  1. The input areas of paddings, margins and offsets are highlighted if you enter the corresponding box with the mouse pointer. In addition, the label is displayed in the upper area of the box model configurator (see the image below).

  2. You can enter the value directly if you click on it (see the image below)

  3. The value will be automatically inserted for all four directions if you activate the checkbox "Apply to all directions"

You can also insert negative values for margins or offsets.
box model configurater3
Figure 43. Highlighting of the Padding, Margin and Offset input within the Box Model Configurator
box model configurater5
Figure 44. Entering the values for Padding, Margin and Offset directly

Padding

Padding clears a transparent inner area around the contents of the corresponding widget or container. The padding defines how close content will be displayed to the boundaries of the widget box.

You can add

  • top-padding

  • bottom-padding

  • left-padding

  • right-padding

You might also perceive a larger selection frame, if you select a Widget for which a padding is defined.

Margin

Margins clear a transparent outer area around the widget box in order to keep other widgets at distance (see example "Buttons" and "Radial Gauges" above).

You can add

  • top-margin

  • bottom-margin

  • left-margin

  • right-margin

Offset The offset positions the Widget ("Widget box") absolutely to the surrounding Layout Container.

You can add

  • top-offset

  • bottom-offset

  • left-offset

  • right-offset

6.5.10. Behaviour

These settings are only available for Containers. You can define how a Container behaves in case it has a defined height and/or width and its contents flow out of the Container (=overflow). There are four overflow behaviour possibilities:

  • Visible - The content which flows out of the Container remains visible.

  • Hidden - The content which flows out of the Container becomes hidden as soon as it crosses the Containers boundaries.

  • Scrollbar - A scrollbar will be displayed - no matter if there is a need for it or not.

  • Auto-Scrollbar - A scrollbar will be displayed, but only if it is necessary. If there are no contents which flow out of the Container no scrollbar will be shown.

The scrollbar behaviour is directly based on CSS overflow behaviour. If you add a scrollbar for Overflow Y it usually will not have any effect on Overflow X. Unfortunately this does not work vice versa. If you add a scrollbar for Overflow X this will aloso automatically trigger a scrollbar for Overflow Y. There is no way to avoid it safely as it its a common CSS behaviour.

6.6. Device Specific Styling

You can define a device-specific layout for the HMI if you use the target system selector in combination with the switch Global | Device-Specific. Furthermore you can Widget the device-specific settings with the Responsive Inspector.

device specific
Figure 45. Combination Of Target System Selector And Switch Global | Device-Specific

6.6.1. Target System Selector

The Target System Selector allows you to choose a target system in order to verify the responsive design behavior of your HMI project and in order to define device-specific layouts (see next section).

In the current version of WebIQ Designer the target systems are predefined and fixed. Later you will be able to define your own target systems.
Table 11. Defined Target Systems
Target System Icon Min. Width [px] Max. Width [px]

Mobile

mobile portrait

0 px

479 px

Wide Mobile

mobile landscaape

480 px

767 px

Tablet Portrait

tablet portrait

768 px

1023 px

Tablet Landscape

tablet landscpae

1024 px

1263 px

Wide

wide

1264 px

1919 px

Extra Wide

extra wide

1920 px

unlimited

6.6.2. Switch Global | Device-Specific

This switch has the follwing two settings:

  • Global

  • Device-Specific

global Global

In case of "global" the settings of the Style Cockpit apply equally to all target systems.

device-specific Device-Specific

You can define device-specific style settings, if the switch is set to "Device-Specific". This means that all settings in the Style Cockpit, which you can also use globally, are applied to the currently selected target system only and…​

  • mobile first approach: to all target systems with a larger display

  • desktop first approach: to all target systems with a smaller display

The Mobile First Approach is a way of layouting HMIs for smaller screens, and then progressively adjusts the layout for devices with larger screens.

The Desktop First Approach desribes the opposite: Layouting the HMIs for larger screens, and then progressively adjusts the layout for devices with smaller screens.

In the current version of WebIQ Designer you can only use the mobile first approach.

6.6.3. Responsive Inspector

The responsive inspector displays whether there are any device-specific settings for a selected parameter.

The responsive icon device-specific is displayed for each parameter in the Style Cockpit. It is highlighted as soon as there is a device-specific setting for that parameter. You can click on the icon and the responsive inspector will be displayed. It indicates which target system(s) has a specific setting. Furthermore it displays the approach: mobile first (the arrows points from left to right) or desktop first (the arrows points from right to left).

The Reset button deletes all device-specific settings in one step.
responsive inspector
Figure 46. The Responsive Inspector
Table 12. Device Specific Settings
Label Meaning

---

No setting for the corresponding target system

bold

Setting for the corresponding target system

light-grey

The setting is inherited from another target system

6.6.4. Example

Let’s take a look at the following example (see the picture below). The behavior can be desribed as follows:

When the user views the page on tablet in landscape mode, he sees the graphics of the windmill, as well as the three Containers "Pitch Angle", "Yaw Angle" and "Blade Speed", which are placed in the correct position on the graphic.

If the user turns the tablet and looks at the same HMI in portrait mode, the windmill’s graphic is hidden. Furthermore the three Containers "Pitch Angle", "Yaw Angle" and "Blade Speed" are placed in the upper area from left to right according to the standard order.

responsive example
Figure 47. Example for Device-Specific Style Settings

You can achieve the behavior of the HMI through the following device-specific settings:

Table 13. Device Specific Settings
Mobile Wide Mobile Tablet Potrait Tablet Landscape Wide Extra Wide

mobile portrait

mobile landscaape

tablet portrait

tablet landscpae

wide

extra wide

Image "Plant Scheme"

Visibility

none

→

→

visible

→

→

Container "Pitch Angle"

Position Method

absolute

→

→

Top Offset

10 px

→

→

Left Offset

10 px

→

→

Container "Yaw Angle"

Position Method

absolute

→

→

Top Offset

10 px

→

→

Left Offset

400 px

→

→

Container "Blade Speed"

Position Method

absolute

→

→

Top Offset

250 px

→

→

Left Offset

10 px

→

→

6.7. Deprecated Layout Containers

With version 2.9, we are discontinuing the old Layout Containers (FlexV, FlexH, Float, Stacked, Inline), because they no longer corresponded to the current state of web technology and behaved inconsistently in detail. We are replacing them with the new Containers "Horizontal Flex" and "vertical Flex" with extensively expanded layout options. With the new Containers you can create all layouts that were possible before and get some new ones in addition.

Table 14. How You Can Replace The Old Layout Containers
Old Layout Container Replaced by New Layout Container

FlexH Container

Horizontal Flex

FlexV Container

Vertical Flex

Float Container

Horizontal Flex + Wrapping

Inline Container

Horizontal Flex + Overflow X

Stacked Container

Vertical Flex

Nevertheless the old Layout Containers are not completely gone. For backward compatibility reasons you can still find them in the Widget category "Widgets (Legacy)".

7. Styling Your HMI

This chapter describes in detail how you can style your HMIs within WebIQ Designer.

7.1. How It Works

Each widget of the WebIQ and even each variant of the widgets has its own default style description in form of a CSS stylesheet (CSS = Cascading Style Sheets). The style description is assigned in the field "Class Name" in the configuration cockpit.

class name
Figure 48. Assigned Style Description "iq-button iq-variant-01" For The Button Widget, Variant 01

The default style descriptions have a name similar to the widget name. Additionally, the number of the variant is shown in the term (see figure above: the widget "button" with the first variant has the style name "iq-button iq-variant-01").

Manual Styling vs. CSS Modifier / CSS Classes

You can now override the default style of the widgets and redesign it manually by changing individual Style Options (e.g. the background color, font, border, etc.) To do this you have to go to the "IQ-Styling" section in the Style Cockpit and set the appropriate styling options according to your wishes. The possibilities are described in chapter "Manual Styling Options".

Another, more technical way is to create an additional CSS stylesheet, which summarizes all style options for a widget. Since this stylesheet does not describe the complete design of a widget, but only the desired adjustments, it is called a CSS Modifier. This is assigned to the widget as an additional CSS Style Class. These possibilities are documented in chapter "CSS Modifier / CSS Classes".

CSS modifiers or CSS classes can also be displayed conditionally by a rule (Conditional Styling). More information can be found in the chapter "Conditional Styling".

Priority

Important is the priority of the style options. This means: in which order style options will be overwritten?

The rules are

  • Standard Styles are overwritten by CSS modifiers

  • CSS modifiers are overwritten by manual styling

For Example:

  • In standard styling the background color of the button is "white".

  • If you now apply the CSS modifier "OK" to the button, it will overwrite the background color with "green

  • If you now manually set the background color to "Blue", the background color will be overwritten with "Blue".

Priority of the Style Options

css priority

You can break this order by creating your own CSS modifier (see above) and adding "!important" to the appropriate style option. We recommend that you don’t use this.

Please make sure that you do not override the style description in the field class name by accident.

7.2. Manual Styling

Please note, currently only IQ Widgets are graphically styleable.

You can manually style every instance of a widget in the Style Cockpit. To do this, select the corresponding widget, switch to the style cockpit and move to the section IQ Styling. There you have to select the elements of the widget, which you want to style, in the field "Selector".

Examples for stylable elements:

  • Widget Box: box in which the widget is displayed

  • Label: label of the widget

  • Unit: unit of the widget

  • Icon: icon of the widget

  • Button: if the widget contains buttons

  • Input: if the widget contains input fields

  • Etc.

Table 15. Example: Stylable Elements For The Widget Rocker Button

Widget Box

Icon

Label

Unit
widgetbox rocker
icon1
label
unit

Input

Buttons
input
button1

Below the selector you will find the corresponding styling options, like

  • Background

  • Typography

  • Borders

  • Shadows

  • Etc.

Section "IQ-Styling": Selector + Styling Options

iq styling

Depending on the widget and component, only certain styling options may be available. You have to find it out.

iq styling indicator

The blue indicator icon shows you for which element you have changed a styling option. In the example above, at least one styling option has been modified for both the button and icon selectors.

7.2.1. Element

Background Color

Define the background color for the selected component.

style01

You can enter the background color directly as a hex value or use the color picker to select a color.

Additionally you can set a transparency for the background color (0% = no transparency to 100% = full transparency).

Color Gradient

You can set for the background color the following gradients: - linear gradient - radial gradient

Gradient Popup Dialog

gradient dialog

At least you have to define two different colors for the gradient. But you can add with the plus button - if needed - more colors including transparency for the gradient. With the Stop position you define the point in the gradient where the color in question is reached in pure form. The following stop positions lead to the graphical example shown below:

Table 16. Example 1: Stop Positions of a Gradient
Stop Position Color

0%

Blue

60%

White

80%

Orange
Gradient Example 1 with the Three Stop Positions Above

gradient example

Table 17. Example 1: Stop Positions of a Gradient
Stop Position Color

0%

Blue

40%

White

60%

White

80%

Orange
Gradient Example 2 with the Four Stop Positions Above

gradient example2

In addition, an angle for the gradient can be defined for the linear gradient.

Width

Define the width of the component, which it occupies in the corresponding widget.

"Auto" means that the component will take the default width as the widget was designed. You can also enter an absolute width in pixels or em, or a relative width in %.

7.2.2. Typography

Font Face

Define the font type and font size of the component.

Font Style

Define the font style (bold, italic, underlined) of the component.

Alignment

Define the alignement of the font (left, center, right, justified).

Font Color

Define the font color for the selected component.

7.2.3. Borders

You have to define at least a border color, width and style in order to get a border.

Border Color

Define the border color for the selected component.

Border Width

Define the border width of the selected component.

Border Radius

Define the border radius of the selected component. This defines the radius at the corners.

Border Position

With this control you define the position of the border (top, left, right, bottom). The control will be available as soon as you defined a border style.

style02

Border Style

Define the border radius of the selected component.

Table 18. Border Styles

border none

border solid

border dotted

border dashed

border double

border groove

border ridge

border inset

border outset

7.2.4. Shadows

Shadow Color

Define the shadow color for the selected component.

Angle

Define the shadow angle for the selected component (angle orientation see below).

Table 19. Shadow Angle

shadow 225

shadow 270

shadow 315

shadow 180

shadow 0

shadow 135

shadow 90

shadow 45

Distance

Define the distance of the shadow in angle direction for the selected component.

Blur

Define how big and how much the shadow has to be blurred, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.

Table 20. Shadow Blur

blurred 0

blurred 5

blurred 10

Spread

The spread defines the size of the shadow. Positive values increase the size of the shadow, negative values decrease the size. Default is 0.

Table 21. Spread of Shadow

spread 10

spread 0

spread 10

7.3. Designing your HMI Depending on Conditions or User Roles

This chapter gives you an overview on how you can design your HMI depending on process or configuration variables or user roles. In addition, any CSS styles such as colors, gradients, animations, etc. can be set statically or depending on these conditions.

This allows you to design your HMI dynamically.

7.3.1. CSS Modifiers

You can find the configuration of the CSS modifiers in the Configuration Cockpit of the widgets, at the top of the "Referential Attributes" area in the third line "Class Name". Here you will find the standard CSS class of the currently selected widget or the selected layout variant:

CSS modifiers are optional CSS classes that are applied to the widgets and which influence the appearance of the widget. You can activate them by entering the CSS modifier in the field "Class Name" delimited by a space character to the original class of the widget or - what we recommend to you - via the "CSS Modifier" dialog, which you can display by clicking the button at the end of the "Class Name" field. Select the appropriate CSS class and insert it with the + button. You can also define a display condition for the CSS modifiers within the CSS Modifier Dialog.

Button To Display The CSS Modifier Dialog

css modifier

The select box for selecting a CSS class has an autocomplete function so that classes can be found quickly even in larger contexts.

The icon global css modifier indicates whether the CSS modifier in question is a global or widget-specific CSS class. Widget-specific means that the CSS class was created in the code editor on the basis of a widget template. If this is not the case, the CSS class is global or generic. This means that the CSS class can contain different CSS stylings that apply to different widgets.

7.3.2. Use Default CSS Modifiers

The widgets already include some ready-made standard CSS modifiers. The following CSS modifiers are available for most widgets:

  • ok You can use the CSS modifier "ok" to indicate that the status of the widget or process value is ok.

  • warn You can use the CSS modifier "warn" to indicate that an alarm is displayed for the widget or process value.

  • preWarn You can use the CSS modifier "preWarn" to indicate that an alert is displayed for the widget or process value.

  • inverted You can use the CSS modifier "inverted" to place the widget on a dark background.

  • hidden You can use the CSS modifier "hidden" to hide the widget, but keep the space for the widget reserved.

  • invisible You can use the CSS modifier "invisible" to remove the widget, so that other widgets can take this space.

Table 22. Example: CSS Modifiers In Use For The Widgets Button, Rocker Button And Quality Display

ok

warn

preWarn

inverted
button ok
rocker ok
quality ok
button warn
rocker warn
quality warn
button prewarn
rocker prewarn
quality prewarn
button inverted
rocker inverted
quality inverted

hidden

invisible

- no image -

- no image -

The default CSS modifiers are widget specific, additionally available CSS classes that are delivered with WebIQ and which provide a customized look of the widget. To add a specific class to a widget, select the widget and open the configuration cockpit. In the "Referential Attributes" section, search for the option "Class Name".

The "Class Name" input already contains the CSS class name that is currently set. The default CSS modifiers for the warn, preWarn and ok states have the following priority: warn is displayed before preWarn and ok, preWarn is generated before ok, i.e.

Table 23. Priority of the Standard CSS Modifier warn, preWarn and ok
ok preWarn warn Result: displayed state of the widget

-

-

-

standard

-

-

ok

-

-

preWarn

-

preWarn

-

-

warn

-

warn

-

warn

warn

7.3.3. Create A CSS Modifier

You can create your own CSS modifier for Widgtes by using CSS and the integrated Code Manager 23. Therefore, please select the Stylesheet tab of the Code Manager. You find the Code Manager within the Design Section of your workspace or just switch to the Code Manager from the Layout Manager. Create a new Style Class by using a generic stylesheet or edit the template of the respective widget. (see Cascading StyleSheets (CSS)).

7.4. Conditional Styling Based on Variables or User Roles.

If you like to add a condition to a CSS class of a widget, open the CSS Modifiers Dialog and click 23. You can choose between two types of conditions (Comparison Types):

  • Item Value: the condition is met if the value of an item satisfies the comparison condition.

  • Usergroup: the condition is fulfilled if the logged in user belongs / or doesn’t belong to a certain usergroup

7.4.1. Comparison Type "Item Value"

You have the following options:

condition dialogue
Table 24. Condition Dialog, Comparison Type "Item Value"

LEGEND

1 Default is "no Condition". Check, if you like to add a condition

2 Select the comparison type ("Item Value" or "Usergroup")

3 Choose an item for which the condition should apply

4 Choose "Compare Operator" of the pull-down menu

5 Enter a comparison value or choose an item of the Process Data Manager

6 Check, if you want to define a second condition

The following Compare Operators are currently available:

  • = equal to

  • <> not equal to

  • > greater than

  • < less than

  • >= greater or equal

  • <= less or equal

  • & bitwise and

  • | bitwise or

  • ^ bitwise xor

  • !& bitwise nand

  • !| bitwise nor

If you use items of the data type "bool" in the definition of the condition, then note that you use either "0" or "1" (instead of "false" or "true") as compare value. The compare value "true" and "false" does not work here!

7.4.2. Comparison Type "Usergroup"

You have the following options:

condition dialogue2
Table 25. Condition Dialog, Comparison Type "Usergroup"

LEGEND

1 Default is "no Condition". Check, if you like to add a condition

2 Select the comparison type ("Item Value" or "Usergroup")

3 Choose "Compare Operator" of the pull-down menu

4 Choose one or more usergroups you want to compare to

5 Check, if you want to define a second condition

The following Compare Operators are currently available:

  • Any of (includes any of listed uergroups)

  • All of (includes all of listed uergroups)

  • None of (includes none of listed uergroups)

If you return to the Configuration Menu after setting a CSS class, you will probably not notice any change at first glance. The class name field still includes just the default CSS class but the CSS Modifiers Icon turned blue 23.

css modifiers active

If you use items of the data type "bool" in the definition of the condition, then note that you use either "0" or "1" (instead of "false" or "true") as compare value. The compare value "true" and "false" does not work here!

You can use the conditional styling in connection with the standard styles "invisible" or "hidden", to make widgets or even complete contents of containers invisible or to hide them. In this way, for example, several options for a system or machine can be shown or hidden. Areas can also be hidden depending on the user role.

7.5. Conditional Locking of Widgets or Areas

The same mechanism as for the CSS modifiers can also be used to lock widgets or entire areas of the HMI (containers, views,…​). The 'Lock Condition' dialog in the configuration cockpit of the selected widget is used for this. With this, the input or user interaction of the widget can be blocked, the widget is grayed out at the same time. The lock condition can also be applied to containers or other panel widgets to lock all items inside.

500
Figure 49. Condition Dialog, Comparison Type "Usergroup"

If a lock condition is stored, the symbol is displayed in blue.

8. Creating HMIs With Multiple Views and Overlays

This chapter gives you an overview on how you can create your HMI with views using panels within WebIQ Designer.

Refer to the documentation "WebIQ Reference - WebIQ Widgets Configuration", if you want to get a current list of available panels including the settings for each widget.

8.1. Use A Panel Widgets

Panels are widgets for structuring multi-page HMI layouts. They each have several "views", which are screen pages between which the user can navigate. WebIQ provides the following panel widget types:

Screen Panel: The views are independent of each other and you need a separate widget like button, Responsive Menu etc. to navigate between the views (pages).

Swipe Panel: The views are connected horizontally and you can navigate with a swipe gesture between them

Tab Panel: The Views are represented by tabs, which can be selected by clicking

The 'views' within the panel widgets, i.e. screen pages, work differently than containers. They do not automatically resize to fit their content. For this reason it is recommended to insert a layout container below the view in the hierarchy.
400
Figure 50. Use a Layout Container to structre the content in a View

We speak of a “single page application (SPA)". An SPA interacts with the user by dynamically replacing several parts of the current page instead of loading complete new pages from a server. This approach avoids breaks in the user experience between consecutive pages and improves performance, making the application behave very dynamically.

On the one hand, panels can be used like widgets. You can select, initialize, move, cut, copy and paste them in the same way as a widget. On the other hand, panels have some additional features concerning creating, configuring and managing views.

Select

A panel can be selected by clicking on it either in the Layout Editor or in the Hierarchy Cockpit (right side). Similar to the normal Widgets the Panel will get a light-blue-colored hightlighting in the Hierarchy Cockpit. In the Layout Editor the highlight of the selected panel is different compared to the widget. The panel gets a grey selection mark which displays the (internal) name of the widget and the corresponding icon. Furthermore it displays some additional buttons required to open the panel and navigate between the views (see below).

panel widget
Figure 51. Selection mark if you click on a Panel in the Layout Editor

Probably it will be difficult for you to recognize a panel in the Layout Editor. Therefore the panel is marked specially in the hierarchy with an corresponding icon and a bold label: icon panel.

Configure

The configuration of the panel is, with the exception of managing the views, comparable to the configuration of a widget. Click on the panel and configure it with the cockpits on the right side.

Initialize

The initialization of a panel is identical to the widget: drag the panel from the widget bar or the widget overlay and drop it into a container.

Move

The moving of a panel is identical to the widget: Pick the corresponding panel, drag it and drop it into the desired container.

When you move a panel, the panel is moved with all their views, widgets and settings.

Cut, copy, paste, delete

The use of the functions cut, copy, paste and delete with the panel is identical to the widget.

When you cut, copy or paste a panel, the panel is cut, copied or pasted with all their views, widgets and settings.

8.1.1. Open A Panel

To access the views, you first have to open the panel. To do this you either have to double-click on the panel in the Layout Editor or click on the panel and press the button "Enter" button "Enter".

panel widget2
Figure 52. Click enter to open a Panel

All views and the widgets contained in a panel are accessible as soon as the panel opens. In the Hierarchy Cockpit, the structure of the selected view is displayed.

At the top of the Layout Editor, an additional bar appears that contains functions for managing the views.

template editor
Figure 53. Function Bar for managing the views

The toolbar contains the following information and functions.

LEGEND

A Arrow to move up one level

B Name of the panel

C Drop down list for direct selection of a view (see navigation through the views)

D Number of the displayed view / total number of views in the panel
+ button "Previous View" and button "Next View" (see navigation through the views)

E Input field "New View" with button "Add View" (see add a view)

F Button "Open View Manager" (see move a view)

G Button "Close All Panels"

The distinction between "Close Single Panel" and "Close All Panels" is important as soon as you develop more complex HMIs, that have multiple, nested panels. The button "Close Single Panel" closes only the current panel and you move up to the parent panel. The button "Close All Panels" closes all panels. You navigate to the top level of the HMI.

Overlays can also be edited with the template editor. There is just one difference: Overlay Widgets do not have any views. Therefore all view management buttons etc are hidden, when an overlay is loaded within the template editor.

8.1.2. Navigate Through Views

You have to differentiate between two types of navigation through the views:

  1. Navigation using the runtime version of the HMI

  2. Navigation during the HMI development

Navigation within HMI runtime

The navigation between the views depends on the type of panel you are using:

  • You have to swipe if you want to change views in the swipe panel

  • You have to click on the appropriate tabs in the tab panel

  • You have to use an additional navigation widget, such as a menu or buttons, for the screen panel

You can also use a secondary navigation widget in addition to the standard navigation for the swipe or tab panel.

The standard navigation between the views, as provided by the panel, is deactivated during the development of the HMI. You navigate through the views in a different way (see below).

Navigation within development environment

You can navigate through the views without opening the corresponding panel by clicking on the panel and using the buttons "Previous" and "Next" on the left or right edge of the panel.

viewnavigation1
Figure 54. Navigation between Views without opening a Panel

As soon as you have opened the panel, you can navigate between the views with the buttons "Previous" and "Next" navigation button in the function bar above or you can select a view directly via the dropdown list drop down list.

8.1.3. Add A View

You can add another view to the panel with the button "Add View" add view.

The view gets the standard name "View", if you do not type a name in the input field. The corresponding name is assigned to the view, if you insert a name first and then press the button "Add View".

The name of a view is just an internal name. It does not correspond to the label, which is needed to define the labels of the tabs within a tab panel.

8.1.4. Rename, Move, Delete A View

You can display the view manager if you click on the button "View Manager" view manager

view manager
Figure 55. View Manager Dialog

The view manager offers the following functions:

  • rename view Rename the selected view

  • move up view Move up the selected view

  • move down view Move down the selected view

  • delete view Delete the selected view

8.1.5. Switch Views

Switching between different views in a panel is very easy. On the one hand you can use the functions of the panel widget to select a specific view (using the tabs or swipe function), on the other hand you can display a specific view with the help of another widget (i.e. with a button) and the use of an UI-action. You can use both methods in parallel.

Table 26. Overview about the possibilities to switch between the Views of a Panel
Switching Method Tab Panel Swipe Panel Screen Panel

tab_panel

stacked

stacked

Using The Tabs

✓

Using The Swipe Gesture

✓

Using A UI-Action

✓

✓

✓

For switching to a specific view, you can use a button or a menu entry. Insert a button, select it and go into the Configuration Cockpit. Here you will find the parameter "Action". There you can enter a command to call a specific view.

The notation is as follows: setview:.<name of target panel>:<index of the view>, i.e. in case of the windmill-app

  • The name of the target panel is content-screen. Usually it is preceded by a "."

  • The index of the desired view which should be displayed is: 1

  • Resulting notation of the UI-action ist: setview:.content-screen:1

switch view
Figure 56. Define the action command SETVIEW to switch to a specific View in a Panel

The counting of the index starts with "0". This means that the first view of a panel has the index "0", the second view has the index "1", the third view has the index "2", etc.

view index

Usually you have to indicate the full name of the target panel. This includes all containers, in which the panel is located, i.e. in case of the demo app: root.content.right.swipe-panel (= complete name of the panel). However you can omit any number of hierarchy levels in between. In this case you have to start with a dot (".") when name parts are omitted, i.e. in case of the demo app: .swipe-panel (= abbreviated name of the panel). You have to pay attention that you do not forget the prefix "." in front of the panel’s name.

Please pay attention to the spelling of the command (upper / lower cases, no spaces)!

8.2. Use Overlays

In the Layout Manager you can also use overlays. An overlay gives you the possibility to temporarily show information or functions above the actual HMI (sidekick dialogs).

For this purpose WebIQ offers the following overlay types:

Dialog Box: The dialog box is a temporary window above the HMI that provides information to the user or prompts for input. A dialog box includes at least one Cancel or Close button. It can also contain additional buttons for accepting/processing the input (Apply or OK button).

Slide-In: The slide-in is an area that is temporarily slid in over the HMI and can contain information or input elements.

Popup: The popup is a small area with a few functions or information, which is temporarily pops up above the HMI, such as a pop-up menu.

We refer to "overlays" instead of "windows" in modern web applications, since we are not working with a window system here

Overlays are initialzed, selected and configured just like any other widget.

Just like a panel, an overlay must be opened to create or edit the contents of an overlay (double-click or press the button "Enter" button "Enter").

8.3. Use Responsive Menu

By default, WebIQ offers a very powerful widget that allows you to create a menu for navigation: the IQ Responsive Menu widget. With the IQ Responsive Menu, you can create any hierarchically or vertical sorted menu that allows you to navigate between views.

The name indicates that the menu has already implemented the following sophisticated responsive behavior:

  1. in Standard Mode (mostly useful for larger screen widths) the menu is completely displayed as a horizontal or vertical menu bar.

  2. in Mobile Mode (typically used on smaller screens and mobile devices), the menu is reduced to the appearance of a burger menu (icon with three horizontal bars). The full menu is only shown as a slide-in menu when the user clicks / taps on the icon.

You can define in the configuration, from which screen width the IQ Responsive Menu should switch to mobile mode.

responsive menu2
responsive menu3
Figure 57. Responsive Behavior: Standard Mode (Above) And Mobile Mode (Below)

Furthermore, with the IQ Responsive Menu you can choose between different layout variants

Table 27. Layout Variants of the IQ Responsive Menu
Layout Variant Description Image

Horizontal Top Menu Bar

The menu bar is aligned horizontally. The submenus are vertical pull-down menus, which open from top to bottom. This variant of the horizontal menu is usually used at the top of the screen.
iq menu accordion 01

Horizontal Bottom Menu Bar

The menu bar is horizontally aligned. The submenus are vertical pull-up menus, which open from the bottom to the top. This variant of the horizontal menu is usually used at the bottom of the screen.
iq menu accordion 02

Vertical Left Menu Bar

The menu bar is vertically oriented. The submenus are vertical pull-down menus, which open right from the vertical menu bar. This variant of the vertical menu is usually used on the left edge of the screen.
iq menu accordion 03

Vertical Right Menu Bar

The menu bar is vertical. The submenus are vertical pull-down menus, which open left from the vertical menu bar. This variant of the vertical menu is usually used on the right edge of the screen.
iq menu accordion 04

You can additionally set the mobile mode for each layout variant.

The IQ Responsive Menu contains three types of menu items:

  • Entry: for creating a menu entry

  • Separator: for creating a non-operable separator between two menu entries (The separator can be used for all levels of the menu. However, it isn’t displayed in the case of an horizontal menu bar on top level)

  • Section: for creating submenus

For menu entries, separators and sections you can define a (localizable) label. In addition, you can specify an icon for each menu entry and section, which will be displayed in front of the label.

You can also select any UI action for the menu item (for details on UI actions, see [Use UI actions]).

  • Select the UI action "setview " if you want to use the menu item to navigate between views in panels. This allows you to configure which view should be displayed when the corresponding menu item is selected.

  • Select the UI action "dialog " if you want to use the menu item to display a dialog.

  • Select the UI action "slide-in " if you want to use the menu item to display an area with further information or settings.

  • You can also configure any other UI action for the menu item, e.g. Logout (initiates a logout), Setlocale (initiates a language switch), xyz (starts the individual UI action with the name "xyz").

responsive menu4
Figure 58. Configuration Of A Menu-Entry For Setview

9. Using Templates And Composite Widgets

This chapter shows you how to create your own widget templates or your own composite widgets and insert them into your own categories in the widget library of WebIQ.

Templates allows you to save the configuration and the styling of a widget and re-use it again and again.

Composite Widgets are standard widgets, which you can group together as a faceplate in order to operate specific modules or assemblies of a machine. Composite widgets are very helpful if you want to standardize and re-use them in your HMI. Composite widgets can be ideally combined with structures and arrays.

9.1. Create A Widget Template

Configuring and styling a widget can be complex. Especially if you want to use widgets that are designed according to a company styleguide or a customer specification. Then you usually have to make several special settings in the Configuration and Style Cockpits to achieve the desired result.

It would be very annoying and inefficient if you have to make these settings every time you want to insert this widget at another place. You can, of course, copy the widget in question to the clipboard and then paste it elsewhere - that is one possibility. But it would be even more efficient if you could save the configured and styled widget as your own template in the widget list, so that you can re-use it anytime and anywhere in your HMI project. This is now possible by creating a template from the widget.

You can even save the template in the widget list under its own name with its own icon in your own category. This is how you can easily create a library of widgets that match your company styleguide or the customer specification.

template1
Figure 59. Right-Click On Widget To Get The Context Menu With The Entry "Create widget template"

To save a widget as a template and re-use it, you have to procede as follow:

  • Configure and style your widget as you desire

  • Go to the Layout Editor or Hierarchy Cockpit and right-click on the widget you want to use

  • A context menu appears where you have to select "Create Widget Template"

  • The dialog "Configure Widget Template" will be opened

  • Here you can set the name, the category and the icon for the template.

  • If you use a category name that already exists, the template will be added there, otherwise the category will be created in the widget list

  • You will now find the template in the widget list using the category, name and icon you specified

  • You can use this template just like any other default widget of WebIQ.

  • To insert a widget based on a template, just drag it from the widget list and drop it to the desired position in the HMI

  • A widget will be created that contains exactly the configurations and stylings that have been stored in the template

template2
Figure 60. Dialog "Configure Widget Template"

This way you can quickly and efficiently create a library of your own widgets, which are designed in accordance with your company style guide, and integrate them into the widget list.

template4
Figure 61. Example of a library with self-designed widgets in the widget list

9.2. Configure, Delete A Template

Right-click on the template in the widget list if you want to modify, copy to file or delete the template.

template3
Figure 62. Right-Click On Template To Configure, Copy Or Delete The Template

The template contains all configurations and stylings of the widget. This also includes - if these are configured - the link to a process variable, the reference to an (icon) graphic, used UI actions, etc. This can be very efficient, but must be taken into account.

9.3. Composite Widgets: How It Works

Many HMI developers - and probably you as well - have already made this experience: HMIs are usually modular, similar to the machines for which the HMI is developed. For example, a packaging machine can consist of sub-machines for picking up and placing the packaging, filling, sealing, labelling and palletizing. Or an extrusion line consists of dosing units, extruders, forming die, refiner and winder. The modular design also continues within these sub-machines.

These modules often exist multiple times, such as the numerous heating zones along an extrusion line or the large number of measuring devices along a process line. This means that, analogous to the machine modules, some HMI modules must be instantiated multiple times, but should display different values in each case.

It is obvious, that the HMI developer want to create corresponding HMI modules as templates for his HMI in order to re-uses and to instantiates them multiple times.

In WebIQ the solution is called Composite Widget (or simply Composite in short).

composite example
Figure 63. Example of the Composite Widgets "Pump Control" with Multiple Instances

You can use a composite widget just like a normal widget, with the difference that it has a few more functions (more on this later). You can instantiate composite widgets manually or automatically (e.g. via a script according to the machine configuration). If something is changed in the template of the composite widget, this change is automatically applied to all instances within the HMI project.

It does not matter how complex you build a composite widget. You can group a few standard widgets and build a composite widget from them. But you can also define complex multi-page panels with a large number of widgets including the corresponding sub dialogs (overlays) as a composite widget. For the first steps it is easier to start with a simple composite widget in order to get familiar with the possibilities.

803
Figure 64. Representation of the Composite Widgets "Pump Control" within the Widget List

In summary, the composite widget offers you the following features:

  • You can combine multiple widgets into one larger widget

  • You can create a library of your own composite widgets

  • You can find your composite widgets in the Widget List

  • You can give your composite widgets their own name and icon.

  • You can display your composite widgets in a separate category in the Widget List

  • You can use the composite widget like a standard widget

  • You can instantiate a composite widget manually or automatically (through a script)

  • You can define which attributes the user of the composite widget may configure

  • You can set placeholder variables for any attributes of the composite widget

  • You can use code snippets to define rules on how to define the attributes of a composite widget

  • Your changes in the composite widget template are automatically applied to all instances within the same HMI project

  • You can export/import composite widgets across HMI projects

composite widget2
Figure 65. Example of using styled 'Composite' wWidgets "Pump Control" within the WebIQ Designer

9.4. Use Structures And Arrays

Composite widgets are ideally suited for visualizing machine modules, that exist in the machine several times - depending on the machine configuration.

Example

  • Production line with 4, 6, 8 or 12 production cells

  • Extrusion line with 8, 16, 32 or 64 heating zones

  • Plastics machine with 1, 2, 4 or 8 extruders

  • Extruder with 1, 2, 4 or 8 dosing units

  • etc.

 

The visualization of a machine module or a part of the machine module can be created as a composite widget and then instantiated several times, analogous to the configuration of the machine.

For this to work, you must have a suitable counterpart for connecting the process variables. This counterpart are structures and arrays. Structures and arrays are very important for the use and especially for the configuration of the composite widgets. For this reason, we will briefly discuss them here to help you understand the following configuration options.

You can define structures and arrays within the Process Data Manager within WebIQ.

 

Structures

Structures allow to combine the data for a machine module into one data object, i.e. a structure.

Example Structures

  • structure Production Cell

  • structure Heating Zone

  • structure Extruder

  • structure Pump

  • etc.

The structures can even be nested together

  • structure Extruder contains

    • structure Heating Zone

    • structure Dosing Unit contains

      • structure Pump

 
 

Arrays

An array is always required if a data object can exist multiple times. For this purpose the data object is provided with an index.

Example Array

Similar to the examples above you could define the following arrays:

  • array Production Cell[n]

  • structure Heating Zone[n]

  • structure Extruder[n]

  • structure Pump[n]

  • etc.

Arrays can also be nested together

  • structure Extruder[i] contains

    • structure Heating Zone[j]

    • structure Dosing Unit[m] contains

      • structure Pump[n]

  • i = 0..7

  • j = 0..63

  • m = 0..7

Further information about using Process data variables, structures and arrays see chapter OPC-UA Interface, Variables, Structures and OPC-UA Methods.

 

Example Pump Composite Widget

In the following we will describe how a composite widget could be configured for a pump.

The data of the pump was defined within the Process Data Manager as the structure pump, and all process variables were defined as members of the structure pump.

Structure pump with the members

  • switch

  • throughput

  • torque-set

  • etc.

Furthermore an array [0..15] of the type pump was defined in the following examples, because the pump can be instantiated up to 16 times. You can "Update"" the structures and the array (Button "Update Items"), then you will get a flat list of items, like

  • pump-control[0].switch

  • pump-control[0].throughput

  • pump-control[0].torque-set

  • etc.

9.5. Create A Composite

To create a new "empty" composite widget, drag the "Composite"- widget" from the Widget List into the Layout Editor or into the Hierarchy Cockpit. To edit this "Composite" it is necessary to have at least one instance you can work.

create composite widget
Figure 66. Dragging a New "Empty" Composite Widget into the Layout Editor or Hierarchy Cockpit

Before you can edit the content, you have to open the Template Editor of the widget by either double-click it in the Hierarchy-Cockpit or select it in the Layout Editor and press the button "Enter" button "Enter".

The internal hierarchy of the composite is visible once you have opened it this way.

Because the composite widget is initially empty, it may be difficult to recognize it in the Layout Editor because it is displayed in its collapsed manner. Therefore it is easier at the beginning to choose the representation in the Hierarchy Cockpit in order to open the composite widget, to specify a size or to place the first widgets there.
composite widget3
Figure 67. Representation of a New "Empty" Composite Widget

At the top of the Layout Editor and also at the top of the Hierarchy Cockpit an additional bar appears that contains functions for managing the composite widget.

template editor2
Figure 68. Function Bar for Managing the Composite Widget

The toolbar contains the following information and functions.

LEGEND

A Arrow to move up one level

B Name of the Composite Widget

G Button "Close Composite Widget" and all nested levels of the Template Editor

Now you are ready to create your composite widget using standard widgets and all other functionalities of WebIQ. Just drag the desired widgets into the 'Composite’s' hierarchy or layout and design it according to your wishes.

When creating and editing "composite" widgets, all functions of the WebIQ Designer can be used, including styling, scripts, overlays etc. It is also possible to nest "composites".

composite widget4
Figure 69. Representation of a Designed Composite Widget

Example Pump Composite Widget

Create a "Composite" widget and add the three widgets 'iq-flip-switch', 'iq-radial-gauge' and 'iq-button-rocker', choose the shown Layout options and make the basic configuration settings to style it.

pump example1
Figure 70. Example Pump Composite Widget and Style Settings
pump example2
Figure 71. Style Settings: Set width of indicator line

9.6. Define the Configuration Interface

As soon as a 'Composite' widget has been created, a configuration interface for its use and instantiation within the Designer can be defined.

To open this configuration interface, select the composite widget and choose the button "Configure Composite" at the top of the Configuration Cockpit on the right side. The dialog "Configure Composite" is displayed as an overlay panel.

configure composite1
Figure 72. Display the Dialog "Configure Composite"

Under Main Settings you can define the name of the composite widget and under which category it is stored in the Widget List.

To set certain configuration options of widgets within the "composite", two different methods can be used:

1 Under Attributes you can link single configuration settings for subordinate widgets to the configuration interface of the "Composite".

2 Placeholders and Snippets: More complex configuration rules can be defined. This is very useful when e.g. Structures or arrays are used. Several configurations can be set depending on a Placeholder parameter. E.g. if Placeholder is the index in an array variable, then the snippet could have a configuration like: "myArray [<% = placeholder%>], where <placeholder> is replaced by the parameter specified in the configuration of the 'Composite' widget.

 

Main Settings

You can define how and where your composite widget is listed and displayed in the Widget List. Use the settings in the tab "Main Settings" for this.

configure composite2
Figure 73. Dialog "Configure Composite", Tab "Main Settings"

LEGEND

1 Name of the composite widget, under which it will be listed in the Widget List

2 Category in which that of the composite widget is listed in the Widget List.

3 Icon that is displayed for the composite widget in the Widget List and in the Configuration / Style Cockpit

If the category already exists, the composite widget will be listed there. If the category does not exist yet, it will be created as soon as "Apply" is pressed.

Example Pump Composite Widget

We name the composite widget "Pump Control" and place it into the new category "My Widgets"

 
 

Configuration with Attributes

On the "Attributes" tab you can specify which configuration attributes of the embedded widgets are to be displayed in the configuration cockpit when the "Composite" widget is instantiated.

configure composite3
Figure 74. Dialog "Configure Composite", Tab "Attributes"

LEGEND

1 Tree with the hierarchy, which make up the composite widget

2 Define a section name for the selected configuration, which is displayed in the Configuration of the "Composite" widget.

3 List of attributes which belongs to the selected element of the hierarchy. These attributes correspond to the options in the Configuration Cockpit of the respective widget, except that they are displayed in list form.

In this way, configuration options can be selected for all embedded elements and given a label, which are displayed when the "Composite" widget is instantiated in the Configuration Cockpit

Example: Simple Configuration interface with the 'Attributes' function

In our example we want to make the labelling of the flip switch configurable. For this purpose we open the configurations panel and select the option 'Attributes' (1). Select the 'iq-flip-switch' in the hierarchy (2) and check the configuration option 'label' (3). Field (4) can be used to assign a label name to the configuration option, which is displayed in the Configuration Cockpit of the 'Composite'.

configure composite11
Figure 75. Example Configuration interface with’Attributes'
300
Figure 76. After pressing 'Apply' the new configuration option is displayed in the Configuration Cockpit of the 'Composite' widget (1)

 
 

Configuration with Placeholders and Snippets

The configuration with placeholders and snippets is more complex but has advantages, if you want to build more complex configuration interfaces or you work with multiple instances and arrays.

Placeholders are variables for string expressions or numeric values, which are then replaced in "snippets". With placeholders and snippets, configuration options can be flexibly created by combining fixed and dynamically assigned parts, e.g. an index in an array expression. With on Placeholder, several configuration Snippets can be used at the same time.

With Snippets it is also possible to configure complex configuration dialogs in order to parameterize e.g. conditional classes (_appearances_) or lock conditions (_lock_), which are displayed as JSON expressions.

Define a Placeholder

configure composite4
Figure 77. Dialog "Configure Composite", Tab "Placeholders"

LEGEND

1 Button to add a placeholder

2 List of configured placeholders

3 Button to edit a placeholder

4 button to delete a placeholder

When you press the Add or Edit button, the dialog for editing the placeholder is displayed.

400
Figure 78. Dialog "Add / Edit Placeholders"

LEGEND

1 Logical name of the placeholder (Identifier, only letters, numbers and the underscores can be used. The identifier may not start with a number)

2 Type of the placeholder (String, Bool, Integer or Float)

3 Any label of the placeholder, which will be used to display the placeholder in the Configuration Cockpit of the composite widget

4 Any default value
300
Figure 79. The picture shows the Configuration Cockpit of the 'Composite' widget after defining the Placeholder 'index'

 

Snippets

Snippets are part of WebIQ’s JSON-encoded configuration model. By replacing with placeholders, a flexible configuration is possible, whereby a placeholder can be used in several snippets. An example for the replacement by placeholders is the example of the pump control, where the name of the control variable is combined with the structure members of the underlying structure:

configure composite5
Figure 80. Dialog "Configure Composite", Tab "Snippets"

LEGEND

1 Tree with all containers / widgets, which make up the composite widget

2 Button to add a snippet

3 List of configured snippets

4 Button to edit a snippet

5 button to delete a snippet

To connect e.g. the flip-switch item to the pump structure, a snippet is added as follows: Select the 'iq-flip-switch' in the hierarchy (1) and add the snippet with the add button (2). The Edit Snippet dialog appears as follows:

configure composite8
Figure 81. Dialog "Add / Edit Snippets"

LEGEND

1 Label of the snippet

2 Selected attribute (property)

3 List of available attributes (properties) of the selected widget

4 Text area with the code snippet

5 Buttons with defined placeholders

The attribute to be set can be selected in the hierarchy on the left (3). Please note that only one attribute can be set per snippet. If several attributes are to be set for a widget configuration, several snippets must be defined. The corresponding parameter can be entered as text in the editor window (4). Placeholders can be inserted as required using the selection buttons in the right-hand area (5) or by right-clicking with the mouse.

Since this is the value part of a JSON structure, the code snippets must be placed in quotation marks.

You can undo a change in a code snippet with the "Undo" function. Place Snippet code in quotation marks.

Within the dialog "Add / Edit Snippet" you can only adjust one attribute (property) at a time. If you want to define several attributes of a widget dynamically, you have to create one snippet per attribute.

Example Pump Composite Widget

With the placeholder index we define Snippets to set the items of the widgets inside of the 'Composite' widget. So for each widget is one Snippet necessary. Fill in the Snippet code as follows:

  • Flip-switch item: "pump-control[<%= index %>].switch"

  • Radial-gauge item: "pump-control[<%= index %>].throughput"

  • Button-rocker item: "pump-control[<%= index %>].torque-set"

<%= …​ %> is the specific terminology of how the placeholder can be used.

 

Example Pump Composite Widget - Configure a more complex appearance attribute

The Pump Control example is to be expanded to include a warning status of the radial gauge, e.g. the warning status should be set for a throughput> 90. For this purpose we go to the 'Composite', select the 'iq-radial-gauge' and in the Configuration Cockpit select the dialog with the button behind Class name:

300
Figure 82. Select the Class name Appearance dialog of the 'iq-radial-gauge'
300
Figure 83. Select the 'warn' class and edit the Configure Condition dialog to enable the warn state, if the throughput item is > 90

Further information about styling and condition styling can be found here: Conditional Styling Based on Variables or User Roles.

If you now open again the Snippet dialog and add a new Snippet, you will find the attribute '_appearances_' which contains a whole JSON structure of the configuration within the code area.

configure composite15
Figure 84. To make the conditional appearance dialog configurable, replace the index part of the 'item' key with the placeholder

This example shows how complex configuration structures can be configured with placeholders. In the same way it is also possible to make the configuration of nested 'Composite' widgets configurable from 'inside' to 'outside'.

9.7. Initialize A Composite Instance

Manually

In order to initialize a composite widget instance of an existing composite widget manually, drag the desired composite widget from the widget list into the Layout Editor or into the Hierarchy Cockpit. It doesn’t matter where you drag the composite widget to (Layout Editor or Hierarchy Cockpit) - choose the target that suits you best.

init composite widget1
Figure 85. Dragging the Existing Composite Widget "Pump Control" into the Layout Editor
init composite widget2
Figure 86. Dragging the Existing Composite Widget "Pump Control" into the Hierarchy Cockpit

Automatically generated by Script

The script example shows a localscript, which instantiates the 'Composite' widget instance 'pump1' n-times. srcCtrl in the script is the name of the 1st instance of the 'Composite' widget with placeholder index=0, which is placed inside a float container.

configure composite16
Figure 87. The picture shows the simple hierarchy of the script example
       module.run = function (self) {
        //Place your Code here
        shmi.onReady({controls:{
            "srcCtrl": ".pump1"
        }}, (resolved)=> {
            let srcCtrl = resolved.controls.srcCtrl,
            count = 8,
            token = [];
            if (srcCtrl) {
                var config = srcCtrl.getConfig();
                for (var i = 1; i <= count; i++) {
                    var newConf = shmi.cloneObject(config);
                    newConf.replacers.index = i;
                    let p = srcCtrl.element.parentElement;
                    token.push(shmi.createControl("group", p, newConf, "DIV", null)); // see documentation WebIQ Visuals Reference
                }
            }
            /* called when this local-script is disabled */
            self.onDisable = function () {
                token.forEach(function (control) {
                    shmi.deleteControl(control, true);
                });
                self.run = false; /* from original .onDisable function of LocalScript control */
            };
        });
    };

Set Configuration Parameters by UI Action

It is also possible to set the configuration parameters via a UI action. See also chapter [composite_ui_action]

9.8. Configure A Composite Instance

Configuration Cockpit (keyboard shortcut: alt + 1)

Click on the configuration cockpit (first tab on the top right corner) to display the settings of the selected composite widget. Each composite widget has its own configuration.

The attributes of a composite widget, which are displayed for the corresponding instance, are defined in the "Configure Composite" dialog. They can vary accordingly.

Set up the composite widget according to your needs. The settings will be applied right after leaving the corresponding field.

configure composite10
Figure 88. Selected Composite Widget with Corresponding Configuration Cockpit

Other functions of the composite widget, such as Cut, Copy, Paste, Delete and Move work in the same way as with a standard widget

9.9. Changing Composites

When a change is made to a composite widget template, the change is automatically applied to all instances of the composite widget that are included in the same HMI project.

composite template change2
Figure 89. Demonstration Of Changing Composite Template

9.10. Export / Import A Composite

You can export a composite widget, in order to re-import them into the same project at a different position in the hierarchy or into another project.

Select the corresponding composite widget, press the right mouse button and select the entry "Export" in the context menu. You will get a file dialog to save. The composite widget will be stored as a zip-file.

For pasting you have to select a container, where you want to insert the exported object. Press the right mouse button and select the entry "import". Then you have to select the zip-file with the desired composite widget in the file dialog in order to import it.

import export2
Figure 90. Export a Composite Widget In Order To Re-Import It Anywhere Else

The export of a composite widget includes all contained widgets, scripts and styles. However, in the current version of WebIQ the images and process variables (items) are not (yet) exported.

10. OPC-UA Interface, Variables, Structures and OPC-UA Methods

This chapter describes in detail how you can set up the connection interface to your data source, usually a PLC or machine controller, and WebIQ. The data connection is used to display and edit online process variables, record values to historical data and trigger events for the WebIQ message and alarm system.

10.1. How It works

WebIQ receives its process variables (items) over a scalable interface that is called “IO Handler”. An “IO Handler” is a client interface which receives its data from the server through a subscribe/push procedure. That means, that the client “subscribes” to the required data and the server “pushes” values on every change.

This subscribe/push method is very efficient, as the data has to be subscribed only once by the client while they are updated (pushed) by the server. WebIQ can be used to display large volumes of values online or store them as historical data. In the HMI/SCADA Toolbox WebIQ any number of data sources, i.e. IO Handlers, can be used, thus the system can communicate with many field devices or PLC’s simultaneously.

The number of IO Handlers is not limited, if you use it with the Designer License of WebIQ Designer. In runtime systems the number of usable IO Handlers is limited by the runtime license of the HMI/SCADA Toolbox WebIQ. Please ask for runtime licenses (“IO Handler Packs”) with 10, 100 or an unlimited number of IO Handlers if your application needs more than one.

A special feature of WebIQ is that - in addition to the data values - the process data tags or items can optionally also contain attributes that defines the behaviour of widgets in the HMI, which uses these items. Attributes include e.g. min. and max. values for input, unit, display of decimal places, label text, and many more. This has the advantage that each process value is centrally defined and brings its properties to the HMI. The engineering and maintenance of the HMI application is thus clearer and faster.

10.1.1. IO Handler (OPC-UA)

IO Handlers are dynamically loadable libraries (.DDL in Windows or .so in LINUX systems) and can be loaded by WebIQ.

One or more IO Handlers can be defined in order to connect several data sources or controllers. The IO Handler 'internal' is always available and provides a variable server for internal variables that can be used for testing purposes or for internal, persistent variables for an HMI application.

As described above, the number of IO Handlers that can be defined is unlimited on the development system WebIQ Designer; on the runtime system these depend on the license.

The standard scope of delivery of the HMI/SCADA Toolbox WebIQ includes OPC-UA as standard interface. Others, such as direct driver interfaces to certain PLC systems are available on request.

10.1.2. Handler custom driver

To develop an individual IO Handler, such as connecting to a proprietary device or protocol, a custom IO Handler can be implemented using the IO Handler SDK to develop and test individual IO Handlers with C++ programming language.

Refer to the Developer Manual (section "Documentation" of your MyWebIQ space) - IO Handler SDK, if you want to develop your own IO Handler.

10.2. Setup Connection To Data Source

The “IO Manager” is the part of WebIQ Designer and allows the user to add IO Handler for the data access and to edit the required parameters. Click on the icon 23 on the launch bar or click "IO Manager" in the Server Configurtation section of your [Project Dashboard].

There you will see the list of the existing IO Handler connections and you can add, delete or edit entries.

io manager1
Figure 91. IO Manager displaying the list of connections with the corresponding parameters

LEGEND

1 Button to create a new entry (new connection)

2 Button to delete the selected entry

3 Status of the connection

4 Configuration Cockpit to modify the selected entry

5 Column with the name of the connection

6 Column with the name of the shared library (used IO Handler)

10.2.1. Setup An OPA-UA Interface

The following example shows the configuration and settings of an OPC-UA connection. The parameters are editable in the configuration cockpit on the right side of the screen:

GENERAL

Enabled: Checkbox to activate and deactivate the IO Handler

Name: Name of the connection (arbitrary and unique name of the connection)

Shared Library: The shared IO Handler library to be used. For OPC-UA use the default value ioHandlerOPC here. The file ./ioHandlerOPC.dll is loaded on Windows systems and accordingly on Linux systems ./ioHandlerOPC.so instead.

For Windows: you should not add the file extension .dll to the shared library.

PARAMETERS

Endpoint URL: URL pointing to the OPC UA server to connect to. This url is usually of form opc.tcp://xxxxxx:yyyy. Insert the OPC UA server endpoint URL here.

WebIQ Demo Server Smart HMI provides an online OPC-UA server implementation for testing.

  • Endpoint URL opc.tcp://opcua.webiq.de:48010/WebIQ/DemoServer

User: Optional user name for authentication with the OPC UA server. If no authentication is required, this parameter can be omitted. If the OPC UA server requires user authentication, enter the corresponding user name here.

Password: Optional password used for authentication with the OPC UA server. If no authentication is required, this parameter can be omitted. Likewise, add the corresponding password here if required.

The following parameters should normally be left in their default states:

Prefer encryption (default): Prioritizes encrypted endpoints over unencrypted ones.

Server certificate verification mode: Mode to be used for server certificate validation. May be one of the following: all, new, trusted_only

  • all: Trust all certificates. If a host’s certificate changed, the old certificate is replaced.

  • new: Only accept trusted certificates and certificates from previously unknown hosts.

  • trusted_only: Only accept trusted certificates.

Max Items Per Command: Maximum number of items to subscribe/unsubscribe with a single call to the OPC-UA Server. Limiting this number may help with a large number of subscriptions timing out on some devices. Can be omitted to disable this limitation. Leave this field blank unless instructed otherwise.

Service Call Timeout: Timeout for the response time of the OPC UA server to requests. This parameter should normally be left unchanged and may only need to be increased if the data connections are extremely slow.

After configuring the connection to your OPC UA server (or the demo server provided by Smart HMI) you can click on button "Apply". WebIQ will immediately connect to the specified server.

10.2.2. Connection status

After confirming the information via the 'Apply' button, the IO Handler tries to establish a connection or to re-establish it. The status is displayed in the top right corner of the Configuration Cockpit:

io manager connect
Figure 92. Connection status

LEGEND

1 Connected

2 Connecting

3 Trying to recover a connection

4 Disconnected, e.g. when the IOHandler has been disabled

10.2.3. ‘Internal’ variable server

By default an internal variable server is predefined, which provides the application with local items. This ‘Internal’ variable server is targeted to:

  • Provide application wide items as status variables (valid for all users/clients which are connected to the HMI)

  • Persist variables into the SQLite database of WebIQ backend

  • Provide simulation functions to test the HMI during development like e.g. sin/cos values, random, ramp, …

The variables of the ‘Internal’ server can be of the types: boolean, integer, float and string.

Refer to Chapter 'Simulation' for more details.

Variables of the ‘Internal’ server are seen application wide, i.e. accessible by all HMI clients at a time. They can be persisted to the internal database if required!

10.3. Process Data Manager

After setting up the OPC-UA connection, open the Process Data Manager to define or browse the process variables which you want to access from within your HMI app. Click the icon 23 on the launch bar (left side of the Layout Manager) or on "Process Data Manager" in the Project Dashboard.

process data manager1
Figure 93. Process Data Manager Displaying A List Of Process Variables With The Parameters

LEGEND

1 Tabs to select the different sections

2 Buttons to Browse, Update or Reset Items (Process Data must be explicitly updated to become valid), or optionally browse through the variable tree of the OPC-UA server

  • Browse: Opens the variable browser of OPC-UA connections

  • Update Items: All variable and structure settings must be updated through this function before they get valid.

  • Reset: Discard variable and structure settings

3 Add Single- or Array variable/delete selected variable

4 Configuration of Process Data settings

5 Import/Export of Variables

10.3.1. Browse to select OPC-UA variables

Clicking on the 'Browse' button opens the browse overlay panel:

process data browse
Figure 94. Process Data Manager Displaying A List Of Process Variables With The Parameters

LEGEND

1 Select box to select the OPC-UA IO Handler

2 Tree to browse the OPC-UA server’s structure and to select the desired variables

3 Status of the connection (see also connection status)

4 OPC-UA attributes of the selected node in the tree browser

5 Close this window

6 Reload the PLC data, e.g. if items or methods on the PLC have been changed, added or deleted

You can browse through the tree of the OPC-UA structure and open the context menu by right-clicking on a node or leaf of the tree. Using the function "Create Child Variables" or "Create Variable", respectively, depending on whether you clicked on a node or an end node, these variable definitions can be imported into WebIQ.

Importing a variable or method from an end node (leaf node)

process data browse var1
Figure 95. Creating a variable or method from the leaf node with the option to change the alias
process data browse var2
Figure 96. Creating a variable or a method from a node with the option to change the prefix alias

After closing the browser window you can see the imported variables in the Process Data Manager in the tab "Variables" and any methods that you imported in the tab "Methods".

10.4. Selection Tabs: Variables, Structrures, Items, Virtual Items, Methods

When you open the Process Data Manager it offers different types of Process Data sections. You will see four tabs:

  • Variables

  • Structures

  • Items

  • Virtual Items

  • Methods

Each of these will be explained in detail in the following chapters.

10.4.1. Variables Tab (Process Data Variables/Tags)

The Variables tab lists all variables that can be used in the HMI app. You can use the search bar to find specific variables. To create a new basic variable, click on the 23 button. To create a new array, click on the 26 button.

The configuration cockpit on the right now shows the parameters you can configure. For more information see section variables.

10.4.2. 'Structures Tab'

After opening the Structures tab you will see a screen with two areas. On the left side the list of defined structures is shown. Once you select one of these structure definitions, the members of that structure are shown on the right side. To create a new structure, click on the 23 button. In the Configuration Cockpit on the right you now have to enter the following parameters:

a) Name This is an arbitrary name to use for the structure
b) Description This is an optional description that might be useful to understand that structure later.

On the right side you see the so-called members of the selected structure. A new member is created by clicking on the 23 button, or by clicking on the 26 button which will then create a member as array variable.

Structures do not define variables but are only definitions of extended data types.

Any structure needs to have a unique name (alias) whereas each member can itself be a structure. Two structures can have members with the same name but within a structure member names must be unique.

With structures, which you may know from other programming languages, process data models can be presented more easily and clearly.

10.4.3. 'Items tab'

  • Items are the legacy way of defining process data in WebIQ. They are still supported for backwards compatibility with apps created with older versions of WebIQ. They represent a plain list of process data variables (items) and do not support hierarchies like the new structures and variable definitions.*

Process variables that are defined on the 'variables' and 'structures' tabs are expanded into the item list, which is then displayed in the 'items' tab. Changes to these variables in the 'items' tab will be therefore overwritten by the changes in the 'variables' and 'structures' tabs.

The 'Items tab' functionality is deprecated and should not be used for new projects! Process variable definitions in the Items tab' are only available for compatibility with older HMI apps prior to V2.6.

10.4.4. 'Virtual Items tab'

These are local variables which are available in the local scope of an WebIQ HMI application and therefore cannot be used as general HMI states. Each virtual item can have a different value in each running WebIQ app instance, i.e. browser windows e.g. in multi-client or multi-user applications.

They are mainly used for local values, for example for setting the localization (language) of the current app instance. So, one app instance could be displayed in German whereas another instance could be displayed in English.

10.4.5. 'Methods Tab'

These are methods from the server that have been imported through the browser interfaces or created manually. To create a new method click on the Create entry button and enter the following data:

  • Alias An arbitrary alias to identify the method from within the HMI

  • PLC Identifier The name of the method on the PLC

  • Namespace The namespace for the PLC identifier

  • PLC Identifier (Reference Object) defines the reference object PLC identifier

  • Namespace The namespace for the reference object

  • Description An arbitrary description

  • Source: IO Handler The IOHandler where the method is available

  • Access: Accessgroup The accessgroup that defines access to this method

10.4.6. HMI attributes in process data definition

As mentioned above, the process data variable definitions can optionally contain attributes which define the default behaviour of widgets in the HMI.This is very handy and makes the engineering and maintenance of most HMI applications clearer and faster.

By specifying min and max input attributes for example, a label and the unit for a process variable, these are the default widget settings when I select this variable as item in the widget configuration.

processdata attributes
Figure 97. Example widget and the default configuration utilizing the process variable attributes

LEGEND

1 Widget with label, unit and input min/max properties set to auto

2 process variable assigned to the widget

3 properties set to 'auto'

The following list gives a short overview of these optional attributes. For further information see section process data attributes.

DATA:

  • Label (label text, localisation text)

  • Unit, localisable unit text or unit class

  • Input/Display Limits (min-/max. input values)

  • Decimal places (decimal places to be displayed)

  • Step (increment/decrement, e.g. for using in a rocker button)

LIMITS:

  • Warn Limits (warning limits)

  • Prewarn Limits (pre-warn limits)

  • Trend Display Limits (display limits if this variable is displayed in a trend diagram)

ACCESS:

SIMULATION:

Only for process variables of the internal variable server, see see chapter Simulation:

  • Function: simulation function e.g. sinus, random, ramp etc.

  • Parameter: optional parameter for the function

  • Persistent: decides if the value should be stored

10.5. Configuration of Variables/Structure members

In addition to importing the variables via the OPC-UA browser, variables and structure members can be defined within the 'Variable' and 'Structure' tabs of the Process Data Manager. The meaning of the individual settings in the Configuration Cockpit on the right side of the screen are described as follows:

10.5.1. GENERAL Area

Definition of the core settings for the process variable or the structure member.

  • Name (Alias) Unique alias- name for the process data item.

  • Type Type of the variable/member, either basic type (int, bool, float, string) or reference to a structure.

  • PLC-Name Name of the identifier, e.g. Node-ID in the OPC-UA namespace.

    • AUTO: Set the alias to the same name as the PLC identifier

    • SET: Define the name manually

    • APPEND:
      For variables: same behaviour as with SET
      For structures: appends the given value to the PLC item name

  • Index Prefix/Index Suffix (only available for arrays): Set the prefix and suffix for the array in the data source namespace (or OPC-UA). This defaults to „[“ and „]“ and results in names like „temperatures[2]“. If you set this for example to „{“ and „}“ names like „temperatures{2}“ will be used/expected.

  • Description Optional description. This is only shown inside WebIQ Designer.

    • INHERIT:
      For variables: description will be empty
      For structures: inherits the description from the parent

    • SET: Sets the description

10.5.2. ARRAY Area

This area is only displayed if the corresponding variable or structure member in an array:

  • Size Define the size of the array (i.e. number of elements). An array index in WebIQ always starts with 0, e.g. if the size is set to 3, the array has the elements var[0], var[1] and var[2].

  • Index Overrides Index overrides allow you to override the default array elements for specific offsets so that you can i.e.
    a) Specify a different IO Handler for each array element
    b) Specify a different PLC name for array elements, i.e. make an array in WebIQ, where the PLC data consists of single data items

indes range overrides
The feature "Index Overrides" allows you to assign different single process data or process data from different PLCs to one single array variable in the HMI. The PLC offset index can be used to specify an offset to the array index in the PLC, e.g. offset=1, array will start with offset 1.

10.5.3. SOURCE Area

This section defines how to retrieve the item.

  • IO-Handler Assigns a specific IO Handler to this variable or structure.

    • INHERIT:
      For variables: uses the first entry (=Internal)
      For structures: inherits the description from the parent

    • SET: Selection of an IO Handler

  • Update Interval Minimum interval in milliseconds (ms) to use for observing item changes (similar to the OPC UA subscription interval). Define the lowest interval here to use for receiving item changes.

    • INHERIT:
      For variables: uses the default update interval (100ms)
      For structures: inherits the definition from the parent

    • SET: Sets the minimum update interval in [ms]

    • READ ONCE: The process value is updated only once at the beginning (corresponds to setting the interval to -1)

10.5.4. DATA Area

Definition of optional HMI attributes, see also attributes

  • Label Label text:

    • NONE: Do not set a label

    • SET: Create any label IDs by adding new rules one at a time. Each rule has the following options:

      • APPEND:
        For variables: sets the value
        For structures: appends the value to the label text

      • INHERIT:
        For variables: uses the default value (empty string)
        For structures: inherits the label from the parent

      • IDENTIFIER: Uses the process variable name/identifier as the label

      • INDEX: (Only for arrays) Sets the index of the array element. When selecting this option you can enter an offset for the given index.

  • PROPAGATE: When this is enabled the value will be inherited (default = true)

Example concatenating of inherited label elements for structures

Table 28. Example: label settings
Variable/Member Type Label

drives[0…​2]

drive

APPEND: „Drive “ INDEX: Offset 1

drive

Structure Definition

INHERIT

drive.speed

float

APPEND: „Speed“

drive.pos

float

APPEND: „Position“

This will create the following labels:

drives[0].speed:	„Drive 1 Speed“ +
drives[0].pos:     	„Drive 1 Position“ +
drives[1].speed:	„Drive 2 Speed“
etc.

Use the button select localization variable to select a localisation variable. With the button edit localization variable you can edit the localisation directly.

  • Unit Definition of the unit or unit class respectively. Choose from these options:

    • INHERIT:
      For variables: uses the default value (none)
      For structures: inherits the definition from the parent

    • SET: Use this to set the unit. These options are available:

      • a text like “°C”

      • a localization text like “${celsius}”

      • a unit class (numerical value)

  • Input-/ Display Limits Depending on the context of usage this parameter either defines the input or the display (output) limits. When using a Radial Gauge widget for example, this defines the minimum and maximum values to use for drawing the gauge. If this is used with an input widget, it defines the min and max input values. The following options are available:

    • INHERIT:
      For variables: no limits set (default)
      For structures: inherits the definition from the parent

    • SET: Sets the min and max values either as a number (i.e. 0, 100,…​) or as a reference to another process variable by typing the variable name. For structure member definitions: This variable can also refer to another member variable in the same structure. This could be expressed by the “$.” mark (i.e. $.min, refers to the member 'min' in the current structure). Its also possible to refer to any ancestors (i.e. by $..min, $…​min etc) to the parent of parent element etc.

Example: Input limits are part of a structure

Let us assume we have this structure:

 struct limitedValue = {
	„value“: real,
	„min“: real,
	„max“: real
}

For the member „value“ we can set the min/max limits using “$.min” and “$.max”.

For nested structures the references can also refer to higher structure levels, e.g. “$..min” and “$..max” refer to the members of the parent (=inherited) “min”/”max” structure. If you would enter „min” or “max” instead it would refer to a plain process variable with the name “min” or “max”.

  • Decimal Places This defines the number of decimal places.

    • INHERIT:
      For variables: no decimal places set (default). The value will be displayed with all decimal places available
      For structures: inherits the definition from the parent

    • SET: Sets the number of decimal places to the given value

    • UNMODIFIED: The value will be displayed with all decimal places available

  • STEP Some WebIQ widgets like the Rocker Button require a step value (increment/decrement value).

    • INHERIT:
      For variables: no step set (default, 0)
      For structures: inherits the definition from the parent

    • SET: Sets the step value explicitly as integer

10.5.5. LIMITS Area

Define limits for the displaying process variables within the HMI.

  • Warn Limits/Prewarn Limits Several widgets like the Text Display, Radial Gauge and other widgets as well as the Alarm Manager (Level Alarm) can display warn states using special states (red=warn, yellow=pre-warn). This setting is used to define these limits. These options are available:

    • INHERIT:
      For variables: no limits set (default)
      For structures: inherits the definition from the parent

    • SET: Sets the min and max values here either as a number (i.e. 0, 100,…​) or as a reference to another process variable by typing the variable name. For structure member definitions: This variable can also refer to another member in the same structure, this could be expressed by the “$.” mark (i.e. $.min, refers to the member 'min' of the current structure). Its also possible to refer to any ancestors (i.e. by $..min, $…​min etc) to the parent of parent element etc.

  • Trend-Limits The trend limits are used for the Trend Display widget to define the display limits used for scaling the trend graph (optional).

    • INHERIT:
      For variables: no trend limits set (default)
      For structures: inherits the definition from the parent

    • SET: Sets the min and max values here either as a number (i.e. 0, 100,…​) or as a reference to another process variable by typing the variable name. For structure member definitions: This variable can also refer to another member in the same structure, this could be expressed by the “$.” mark (i.e. $.min, refers to the member 'min' of the current structure). Its also possible to refer to any ancestors (i.e. by $..min, $…​min etc) to the parent of parent element etc.

If the trend limits are not explicitly set, the input/display limits are used automatically. Normally you only need to set the trend limits explicitly if the value range for the Trend Display shall be different from the input limits.

10.5.6. ACCESS Area

Define access permissions using WebIQ access groups for the process variable.

  • Accessgroup. These options are available:

    • INHERIT:
      For variables: no access group set (default)
      For structures: inherits the definition from the parent

    • SET: Shows access group selection dialog with all predefined AccessGroups allowing to select a group.

10.5.7. ADVANCED Area

This area is used to define more advanced process value properties.

  • Recording Threshold Defines the threshold for value changes of these variables before they are recorded in a recorder. For example, if this value is set to 0.5, a possible value change will only be recorded if it has exceeded the threshold of 0.5. Example:

Temp. value (Rec. Threshold=0.5) Recorded

21°C

Recorded

21.2°C

Not Recorded

21.4°C

Not Recorded

21.6°C

Recorded

…​

…​

  • Attributes Definition of custom key/value attributes for usage in custom scripts. Right now these attributes can only be accessed using Local Scripts in the Code Manager.

  • Update Function Update function to update another variable when this variable is updated. These options are available:

    • NONE: Do not update anything else (default)

    • Min/ Max: Stores the value in the variable defined if it is smaller or larger. The target variable can also be part of a structure or a parent element. You can use the placeholders „$.“ and „$..“ as described before to achieve this.

    • COPY: Copies the value into the target variable. The target variable can also be part of a structure or a parent element. You can use the placeholders „$.“ and „$..“ as described before to achieve this.

10.5.8. SIMULATION Area

This section is only accessible when the IO Handler has been set to 'Internal' (see also simulation) and the type is any of the intrinsic types int, float, boolean or string.

  • Function Specify the simulation function to use here – see the table in the chapter "Simulation Server" for a reference.

  • Value This defines the initial/current values. Caution: this value is not updated when displayed!

  • Parameter Optional parameter – see simulation

  • Persistent Determines whether value is to be persisted so that it is retained over the session

From WebIQ V2.11 it is also possible to use the notation $.<member> as a simulation parameter. This makes it possible, for example, to parameterize the 'ramdomramp' simulation as follows: '$.setValue,1,2'. I.e. the reference to the neighboring element setValue of the same structure

  • Permanent This indicates that the value is to be stored in the database on every update so that it is also available after e.g. a power failure.

10.6. Import/Export of Variables and Structures

Variables and structures can be imported or exported using the Import/Export button in the Variables tab or Structures tab of the Process Data Manager. When exporting, you can choose between:

  • Export all variables/structures

  • Export selected variables/structures

In the variable or structure list, individual lines or ranges of lines can be selected using the Shift key (ranges) or Ctrl key (single).

When importing from a selected import file, all entries are always imported. If variables/structures already exist, you will be asked whether they should be overwritten.

The variables/structures are saved in readable JSON format. threshold

11. Localization

This chapter describes in detail how you can localize your HMI within WebIQ Designer.

WebIQ Designer allows you to adapt your HMI for any international market (country or region). This adaptation is called localization (L10N). Currently you can set the following properties centrally:

  • Languages

  • Units (not yet supported with the current version of WebIQ)

  • Date formats (not yet supported with the current version of WebIQ)

  • Time formats (not yet supported with the current version of WebIQ)

  • Decimal delimiter (not yet supported with the current version of WebIQ)

  • Fonts (not yet supported with the current version of WebIQ)

These settings are made in the Localization Manager, which manages the different languages, or rather localizations, i.e.

  • de-DE (german localization for Germany)

  • de-CH (german localization for Switzerland)

  • en-GB (english localization for Great Britain)

  • en-US (english localization for the United States)

  • fr-FR (french localization for France)

  • es-ES (spanish localization for Spain)

  • zh-CN (chinese localization (Zhōngwén) for the People’s Republic of China)

  • etc.

The naming of the localizations is based on ISO 639-1 to classify the language and on ISO 3166-1 to designate the country.

<language-code according ISO639-1>-<country-code according ISO 3166-1>, i.e de-DE

By default WebIQ Designer comes with two localizations: de-DE and en-GB.

The distinction between different idioms of a language, e.g. English for GB and USA or German for Germany and Switzerland is not mandatory, but may be useful. You should take it into account in case of politically sensitive situations between two countries (for example, between China and Taiwan) or in case of respect for an important target market. Here you have to define your own policy.

11.1. Use Different Languages

Click the icon Localization Manager on the launch bar or click to the entry "Localization Manager" in the [Project Dashboard] in order to open the Localization Manager. On the tab "Localization" you will find a list of localization variables with the corresponding translation in different languages. There you can

  • Add a new localization (language)

  • Add a new localization variable

  • Delete an localization variable

  • Edit the localized text of localization variable

localization1
Figure 98. Localizaion Manager displaying a list of Localization Variables with the corresponding localizations

LEGEND

1 Selection Of The Localization File

2 Buttons to switch backward/forward through the files Localization Files, add new one or delete existing Localization File

3 Button import/export Localization Files in csv or json

4 Button to show Options to select System Localization Variables

5 Column with Localization Variables

6 Column naming the Localization Variable in the reference language

7 Column naming the Localization Variable in the selected language

8 Configuration Cockpit to modify the selected entry

11.2. Use Localization Variables

You can use variables for the configuration of text parameters, such as labels, units, messages, etc., in order to display them in different languages. These so-called localization variables can be filled with a localized text, depending on the selected language. The localization variables are adminstrated in the Localization Manager.

There you can

  • Add a new localization variable (Button "Create New Entry")

  • Delete a localization variable (Button "Delete Selected Entry")

  • Edit the localization of a localization variable (Configuration Cockpit)

  • Import/export Localization variables

Example

  • Localization variable: ${produced-packages}

  • English localization: Produced Packages

  • German localization: Produzierte Pakete

  • French localization: Paquets Produits

  • Spanish localization: Paquetes Producidos

  • Chinese localization: 生產的包裝

  • etc.

localization3
Figure 99. Example of Localization Variables in WebIQ Designer

LEGEND

1 Selected Widget

2 Lable - button "Auto": on = inherits the settings from the item definition / off = take the settings from the input field

3 Lable - input field: contains the localization variable for the label

4 Lable - button "localization": displays the dialog for the selection of the localization variable

5 Lable - button "edit localization": displays the dialog for direct editing the localization

6 Unit - input field: contains the localization variable for the unit

You must enter a variable identifier there, if you want to use the localization variable for a label or for a unit of a widget. The variable is entered in the notation ${<variable>}. You can also select the variable by pressing the localization icon and selecting the variable in the dialog, that appears.

localization4
Figure 100. Display of the different languages

Even the use of multiple localization variables in combination with direct text input is possible in the definition of text parameters, e.g.

${produced-packages} (${unit})

returns the following:

  • English localization: Produced Packages (Units)

  • German localization: Produzierte Pakete (Stück)

  • French localization: Paquets Produits (Unités)

  • Spanish localization: Paquetes Producidos (Unidades)

  • Chinese localization: 生產的包裝 (單位)

You can use nested localization variables, e.g.

${heatingzone} 5

heatingzone = "{extruder} heatingzone"

extruder = "extruder"

  • English localization: extruder heatingzone 5

11.3. Direct Editing Of Localization

If you’re working in the layout manager, you can edit the localization variables, as well as the localizations for the different languages directly, without having to go to the localization manager. For this you have to proceed as follows:

  1. Enter the localization variable in the input field or select a variable from the dialog

  2. If you enter an unknown variable, this variable will be set up as soon as you leave the input field

  3. Press on the pen icon next to the input field

  4. It appears the dialog for entering the localizations for the languages, which are​defined up to this moment

localization6
Figure 101. Direct Editing Of Localization

You can also use multi-line texts for localization.

11.4. Set Up A language

In order to set up a new language just open the Localization Manager and click the button "Add New Locale". A dialogbox appears where you can insert the name of the localization. We recommend to use the naming according ISO 639-1 / ISO 3166-1 as desribed above.

WebIQ Designer will create a new localization file. As long as there is no localized text, the name of the localization variable is automatically used as localized text but set within square brackets, i.e. [annual yield], [wind speed] or [weekly unit yield]. This ensures that a text, that has not yet been translated, immediately stands out in the HMI.

11.5. Switch Languages

Switching between different languages is very easy. For switching to a specific language, you can use a button or a menu entry. Insert a button, select it and go into the Configuration Cockpit. Here you will find the parameter "Action". There you have to select the UI-Action "setlocale (final)", click the plus-button and enter the name of the specific localization, i.e.

  • Switch to english localization: en-GB

  • Switch to german localization: de-DE

  • Switch to french localization: fr-FR

  • Switch to spanish localization: es-ES

  • Switch to chinese localization: zh-CN

localization5
Figure 102. Define the action command "Setlocale" to switch to a specific language

11.6. Importing/Exporting Localization Variables

The localizations can be exported for further processing with external tools and imported back using the Import/Export button.

JSON or CSV files are available as file formats.

localisation export
Figure 103. Export Dialog to export one or multiple languages
localisation import
Figure 104. Import Dialog to import one or multiple languages

11.7. Edit Localication Outside

The localization file is created in JSON format (JavaScript Object Notation, a compact data format in an easy-to-read text form). You can edit the JSON file with any (text) editor (we recommend Notepad ++) or in any development environment (IDE). There are also many ways to convert the JSON file into various formats, such as CSV or EXCEL, for example to make it accessible for the technical documentation or for the translation service.

WebIQ allows you to export or import the localizations for the different languages either as a JSON or as a CSV file. Go to the localization manager, click on the button "Import/Export" and select the corresponding option within the pop-up menu.

Excerpt from the localization de-DE
{
  "alarm_group_0": "System",
  "alarm_group_1": "Paketspeicher",
  "alarm_group_2": "Produktspeicher",
  "alarm_group_3": "Kommissionierer",
  "alarm_group_4": "Auffüller",
  "alarm_group_5": "Versiegler",
  "alarm_group_6": "Palletierer",
  "alarm_title_151": "Zeitüberschreitung Modulstart",
  "alarm_msg_151": "FSSB wurde von der SPS freigegeben, aber FSSB wurde nicht initialisiert.",
  "alarm_title_321": "Überhitzung Servo-Achse",
  "alarm_msg_321": "Achs-Servomotor oder Servoverstärker ist überhitzt.",
  "alarm_title_572": "Reinigung Klebstoffdüse",
  "alarm_msg_572": "Die regelmäßige Reinigung der Klebedüse ist fällig.",
  "alarm_title_619": "Maximale Stapelhöhe überschritten",
  "alarm_msg_619": "Das ausgewählte Programm überschreitet die konfigurierte maximale Stapelhöhe.",
  "packages-to-be-produced": "Zu produzierende Pakete",
  "produced-packages": "Produzierte Pakete",
  "feed-rate": "Vorschub",
  "machine-cycles": "Maschinenzyklen",
  "unit": "Stück"
}
Corresponding excerpt from the localization en-GB
{
  "alarm_group_0": "System",
  "alarm_group_1": "Package Tray",
  "alarm_group_2": "Product Tray",
  "alarm_group_3": "Picker",
  "alarm_group_4": "Filler",
  "alarm_group_5": "Sealer",
  "alarm_group_6": "Palletizer",
  "alarm_title_151": "Module start timeout",
  "alarm_msg_151": "FSSB was released by the PLC, but FSSB has not been initialized.",
  "alarm_title_321": "Axis SV-Motor overheated",
  "alarm_msg_321": "Axis servo motor oder servo amplifier is overheated.",
  "alarm_title_572": "Cleaning adhesive nozzle",
  "alarm_msg_572": "The regular cleaning of the adhesive nozzle is due.",
  "alarm_title_619": "Maximum stack height exceeded",
  "alarm_msg_619": "The selected programm exceeds the configured maximum stack height.",
  "packages-to-be-produced": "Packages To Be Produced",
  "produced-packages": "Produced Packages",
  "feed-rate": "Feedrate",
  "machine-cycles": "Machine Cycles",
  "unit": "Units"
}

The notation must be kept very precisely in order to avoid malfunction.

12. Using UI-Actions

This chapter describes in detail how you can use UI-Actions to implement user-triggered actions, e.g. select views, write items, set CSS classes etc. UI-Actions are configurable actions that may be used in widgets, such as Button or Responsive Menu to offer interaction with other widgets via configurable options.

WebIQ comes with a number of standard UI actions but you can also write your own custom UI actions with JavaScript (see chapter [Integrated Code Editor]). These are available for the following widgets:

  • Button

  • Image

  • Image Changer

  • Alarm Info

  • Toggle Button

  • Menu Entries of Responsive Menu

You find the UI-actions dialog in the UI ACTIONS or BEHAVIOUR ATTRIBUTES area of the configuration cockpit of the corresponding widget.

ui action
Figure 105. UI-Actions

LEGEND

  1. Select- box to select the UI-action

  2. Button to add the UI-action

  3. Panel with attributes of the selected UI-action

  4. Field for parameter 1 or choose icon choose form parameter form list

  5. Field for parameter 2

  6. Field for parameter 3

  7. Button to remove the UI-action

Follow these steps to activate a UI-Action:

  1. Select an UI-Action within the selectbox UI-Actions

  2. Push the + button to add it to the widget

  3. Define the attributes

You can add several UI-Actions to one widget. All UI actions are executed in the order they are listed except UI-actions marked "final" such as "Logout" will end the execution list. All following UI actions will be ignored.
Table 29. Overview about the UI-Actions
Name Parameter 1 Parameter 2 Parameter 3 Description

Show or hide Overlay Panels

dialog

Name of the dialog-box widget

Show or Hide

- none -

Shows or hides a dialog-box specified by its name.

notify

Notification text (localizable)

Notification title (localizable)

- none -

Displays a notification dialog

popup-menu

Name of the popup-menu widget )*

Open, Close or Toggle

- none -

Opens, closes or toggles the state of a popup-menu.

slide-in

Open, Close or Toggle )*

Name of the slide-in widget

- none -

Opens, closes or toggles the state of a slide-in.

Set Views (Screen, Panel or Tab-Panel)

setview

Name of the panel, tab or screen widget )*

Name and index of a view within the selected panel

- none -

Changes the active view of a panel, screen or tab-panel widget.

Logout user

logout

- none -

- none -

- none -

Logs off the current user.

logout-confirm

- none -

- none -

- none -

Asks for confirmation and logs off the current user.

change-password

- none -

- none -

- none -

Opens the dialog to change login password

Set a language or a theme

setlocale

Name of the locale

- none -

- none -

Changes the locale of the current user.

set-theme

_Name of the theme (e.g. ‘xenon-acapulco-theme’, ‘xenon-emerald-theme’, etc.) If omitted the default theme is activated.

- none -

- none -

Changes the currently active color-theme.

Modify CSS classes

add-class

Name of the widget

Name of the CSS class

- none -

Adds a CSS class to the base element of a widget, which is specified by the name.

toggle-class

Name of the widget

Name of the CSS class

- none -

Toggles a CSS class of the base element of a widget, which is specified by the name.

remove-class

Name of the widget

Name of the CSS class

- none -

Removes a given CSS class from the base element of a widget, which is specified by the name.

Write a value to an item

write-item

Name of the item

Type of the item (i.e. STRING, BOOL, INTEGER, FLOAT)

Value of the item

Writes a value to an item.

write-item-bitmask

Name of the item

set, clear or toggle

Bitmask decimal (e.g.3), hex (e.g. 0x03) or binary (e.g. 0b101)

Logical Bitmask operation: Set: (Or), Clear (AND NOT Bitmask), Toggle: (XOR)

increment-item-value

Name of the item

_inc/ dec value _

none

Increments or decrements the item by the specified value.

Example This UI action e.g. can be used in conjunction with the IQ Button widget to enable tip operation (jog function). If this is inserted in the ONWHILEPRESSED field, the item value is changed as long as the user keeps the button pressed and the PLC can evaluate this.

Recipes

recipe-add

Reference to Select-Recipe control )**

none

none

Add a new recipe to the recipe list.

recipe-apply

Reference to Select-Recipe control )**

Skip Confirmation (true or false)

none

Applies the selected recipe to the process.

recipe-capture

Reference to Select-Recipe control )**

none

none

Captures actual process items to the recipe.

recipe-export

Reference to Select-Recipe control )**

Export All Recipes (true or false)

none

Exports the selected recipe to the file system.

recipe-import

Reference to Select-Recipe control )**

none

none

Imports a recipe from the file system into the recipe list.

Confirm alarms

acknowledge-all-alarms

none

none

none

acknowledges all current alarms

Composite Widgets

composite_placeholder

Reference to Composite Widget

none

none

Allows the changing of 'Composite Placeholder' during runtime

Example

ui composite
Figure 106. Parameterize Composite Widget with UI-Action during runtime

)* Here you can choose between the displayed options. Only the possible overlay panels or views that are on a higher or the same level of the Template Hierarchy are offered!

)** Recipe UI-actions have to refer to a corresponding Select-Recipe control, where the reference to a recipe template and the selected recipe is defined. The Select-Recipe widget has to be on the same or higher level of the Template Hierarchy.

13. Integrated Code Editor for JavaScript and CSS3

WebIQ is a toolbox with ready-made widgets and style formats (themes). Own widgets or code libraries can be installed as “packages” and are accessible as custom widgets in the widget area of WebIQ Designer. However the code of these widgets or modules has to be developed outside of WebIQ with standard development tools and must be installed as packages (see [Manage Packages]).

In addition, there is often a need to easily edit custom application logic in the form of program code (scripts) with an integrated editor. Also it’s often desired to customize the appearance of the HMI by editing CSS style sheets to suit to individual needs or corporate designs..

For this reason, WebIQ has an integrated editor, to insert and edit JavaScript program code or CSS style sheets into a HMI project. This chapter describes in detail how you can create scripts, such as JavaScript or custom CSS classes with the build-in editor.

13.1. Script Module Types

For the organization and storage of the JavaScript program code or the CSS style sheets the "Code Manager" is provided. It has three different areas according to the module types:

LocalScripts: Code Modules in JavaScript that run in the context of the application - Invoked by a LocalScript widget

UI Actions: Code Modules in JavaScript as Custom UI Actions. These are executed in the context of user interactions - Invoked by applying an UI action to a control, e.g. button etc.

CSS Stylesheets: Code modules with CSS styles and classes - Applied by setting the style class of a control (see chapter Configuration Cockpit, applying CSS-Modifier)

LocalScripts and UI action program code is only executed in the preview window of WebIQ Designer. CSS-Styles are directly visible in the layout area.

13.2. Using The WebIQ API

All API functions of WebIQ framework can be used in the code of the LocalScript – or UI action modules. Refer to the developer manual “WebIQ Visuals Reference ”, which is available in the documentation area of MyWebIQ.

Table 30. Overview of some classes in the WebIQ Visuals API

Name

Description

ItemManager

Access to items and their attributes e.g. subscribe items and invoke update listeners, read and write items etc.

TrendManager

Get trend data from data recorder

File Manager

Read and write files

Query Manager

Get query data of SQLite databases

User Manager

Access to User and Userdata

Recipe Manager

Recipes and recipe templates etc.

In addition, many useful functions for accessing and working with WebIQ Visuals, including functions for dynamic widget manipulation at runtime, are included. Also functionality of external frameworks, e.g. jQuery, chart.js,… can be used, if the appropriate libraries are included, e.g. as a package in the [Manage Packages].

Refer to our website documentation with how-to’s and examples.

13.3. Code Manager

Click the icon Code Manager on the launch bar or click to the entry "Code Manager" in the [Project Dashboard] in order to open the Code Manager.

On the tab "Local-Scripts" you will have the possibility to create a JavaScript script (JS script) or - if you have already defined one or more JS scripts - to see the list of defined JS scripts.

There you can

  • Create a JS script

  • Edit a JS script

  • Delete a JS script

code manager
Figure 107. Code Manager lists all JavaScript scripts

LEGEND

1 Button to create a new JavaScript code module

2 Button to edit the selected module

3 Button to delete the selected module

4 Column with name of the module (filterable)

5 Column with file path to the module (filterable)

6 Column with description (filterable)

7 Configuration Cockpit to edit data of the selected module

13.4. LocalScripts

13.4.1. LocalScript Widget

The HMI / SCADA Toolbox WebIQ offers the LocalScript widgets Code Manager , which allows to apply a defined JavaScript module to run in the context of the HMI. You can find the LocalScript widget, like any other standard widgets, in the widget overlay of the Layout Manager”. However, they are invisible and the sole purpose is to instantiate the JavaScript code. If the viewing area, e.g. a view or a dialog-box with the LocalScript is activated, the script starts with the function "module.run". If the view or dialog-box area is closed, ‘onDisable' will be called and the module is stopped.

For example:

  • The Local Script is located in a view

  • The script is called, when this view is opened

  • The onDisable function is called, before the view is closed.

  • Place alert statements in the functions of the module to explore the behaviour.

To invoke a global script, which starts and ends with the application, it should be placed in the root of the hmi layout hierarchy.

The Configuration Cockpit allows to define the following settings for a localscript:

REFERENTIAL ATTRIBUTES

Widget Name: Internal name of the localscript-widget

DATA ATTRIBUTE

Script Module Name: Name of the JS module, which should be carried out

13.4.2. Create A LocalScript Code Module

Select the Code Manager and the LocalScript tab. Follow these steps to create a LocalScript JS code module:

  1. Click the button Create entry

  2. Enter a module name for the JS module in the configuration cockpit

  3. Define the path and the file name for saving the JS module (optional) or leave it empty (in this case, the file is created under the module name)

  4. Press the button Apply

  5. Press the button Edit entry to edit the JS module in the built-in code editor

The Configuration Cockpit allows defining the following settings for a JS script:

LOCAL-SCRIPTS

Module Name: Unique name of the JavaScript module

URL: Define the path and the file name for saving the JS module (optional) or leave it empty.

Leave the file URL field blank, WebIQ generates automatically the URL on the base of the module name with an appended .js file ending. The modules is always placed in the section \js\custom-libs\local-scripts\ of the project directory (see <<Project Directory<<)

Description: Arbitrary description (optional)

13.4.3. Edit The Code Module

After you confirmed the creation of the JS module with the Apply-button, you can click to the button Edit selected entry in order to open the build-in code editor. You see the JavaScript module ‘skeleton’ with the code of an empty JS module in the code editor, which should not be changed in its structure. Add code by editing it in the designated places, which are indicated by the inline comments, such as

  • Private variable area
    (starts with comment /* private variables */)

  • Private function area
    (starts with comment /* private functions */)

  • Code area (starts with the comment /**)

    • Run function area
      (starts with the comment //Place your Code here)

    • Disable event to close and free resources
      (starts with /* called when this local-script is disabled */)

The function module.run is called, when the Local Script is instantiated (see LocalScript Widget). onDisable is called before the module is deleted.

code editor
Figure 108. Code Editor displaying a LocalScript

LEGEND

1 Name of the JS script module

2 Settings menu to select font-size and theme

3 Button to save the code module

4 Button to show and hide the syntax check output field

5 Code area

6 Bar with line numbers

13.4.4. LocalScript Code Example

The following code example shows the use of the JS framework WebIQ Visuals. In this example, 1 item is subscribed and a random offset is added on its value (like a random noise on a measured value).

code editor2
Figure 109. Code example that adds random noise to a variable

13.5. UI-Actions

13.5.1. Create A Custom UI action

Select the Code Manager and the “UI action” tab. Follow these steps to create a UI action code module:

  1. Click the button Create entry

  2. Enter a name for the UI action in the configuration cockpit

  3. Define the path and the file name for saving the JS module (optional) or leave it empty (in this case, the file is created under the module name)

  4. Press the button Apply

  5. Press the button Edit entry to edit the JS module in the built-in code editor

The Configuration Cockpit allows to define the following settings:

UI actions

Module name: Unique name of the JavaScript module

URL: Path to the file URL of the JS script

Leave the file URL field blank, WebIQ generates automatically the URL on the base of the module name with an appended .js file ending. The modules is always placed in the section \js\custom-libs\ui-actions\ of the project directory (see Project Directory)

Description: Arbitrary description (optional)

13.5.2. Edit The Code Module

After you confirmed the creation of the UI action code module with the Apply-button, you can click to the button Edit selected entry in order to open the build-in code editor.

Multiple UI actions can be defined in one module

13.6. Cascading StyleSheets (CSS)

13.6.1. Create A CSS File

On the tab "Stylesheets" you will have the possibility to create a CSS file, or - if you have already defined one or more CSS files - to see the list of defined CSS files.

code manager2
Figure 110. Code Manager listing all CSS files

LEGEND

1 Button to create a new entry (New CSS file)

2 Button to edit the selected entry (Edit CSS file)

3 Button to delete the selected entry (Delete CSS file)

4 Column with the names of the CSS file

5 Column with the Widget Templates to wich the CSS file refers

6 Column with the description of the CSS file

7 Configuration Cockpit to modify the configuration data of the selected CSS file

The Configuration Cockpit allows to define the following settings for a CSS file:

STYLESHEETS

Name: Unique name of the CSS class

Template: Name of the widget template to which the CSS class refers

Description: Arbitrary description (optional)

Follow these steps to create a CSS file:

  1. Click the button Create entry

  2. Enter a name for the CSS file in the configuration cockpit

  3. Choose the widget template, to which the CSS file should be applied

  4. Press the button Apply

  5. Press the button Edit entry to edit the CSS file in the built-in code editor

13.6.2. Edit A CSS File

After you confirmed the creation of a CSS file with the Apply-button, you can click to the button Edit selected entry in order to open the build-in code editor.

You see the CSS class ‘skeleton’ of the widget template. This skeleton represents the inner structure of the widget and contains the elements that make up the widget, such as

  • the widget itself

  • the wrapper element, which contains label & icons

  • the label itself

  • the icon itself

  • etc.

WebIQ Designer creates automatically a CSS file with the CSS selectors of the elements of the selected widget template. This gives you the ability to define CSS styles directly to elements of the widget, e.g. set the colour of the label-element, etc.

Due to the cascading characteristic of the CSS instructions, your styles could be overwritten (cascaded) by higher specific settings of the standard-themes, which aŕe delivered with WebIQ. We recommend to use the ‘!important’ appendix in order to force your instructions with higher priority.
code editor3
Figure 111. Code example of a Button Template

For some widgets the skeleton contains no further sub-elements. This is the case, when the widget is very complex and consists of a large number of elements, such as the Trend Display or the Alarm List. In this case, the desired elements can be determined by using the developer tools of the web browser or Preview window (see [Debug Your Code With Chrome Developer Tools]).

13.6.3. Apply A CSS File

You can apply a CSS file by entering the name of the CSS class into the input field Class Name of the corresponding widget or just choose from the CSS Modifiers Menu by using css modifiers icon. All available modifiers for the class will be listed.

css class
Figure 112. Applying the CSS class "myclass" for a Button

Add the appropriate style to your variable by clicking add icon. Here, you can also switch to the code and make changes.

css to code
Figure 113. Edit the Stylesheet

Do not overwrite the name of the standard CSS class of the widget, which already exists in the input field. Rather, add your CSS class separated by a space behind the standard CSS class.

Take into consideration that the names of the CSS classes are case-sensitive.

You can enter multiple CSS classes, each separated by a space.

13.7. Debug Your Code

  1. To test your JavaScript code or CSS style sheets, you can use the Chrome Developer Tools included with the Preview window.

  2. Open the preview window by clicking the symbol preview icon in the header of the Layout Manager

  3. Press F12 key to open the Chrome Developer Tools

debug
Figure 114. Open the Chrome Developer Tools to debug and test your scrip or CSS-Stylesheet

Further information and documentation on how to use the Chrome Developer Tools can be found on the Internet.

14. Managing Users And Access Groups

The User Manager is used to specify users and user settings, user groups and access groups for items (access groups). Within the User Manager there are three tabs to select the functions

To select the User Manager click the icon User Manager on the launch bar or choose the entry "User Manager" in the Project Dashboard.

 

14.1. User

Select the Tab "Users" to select the Users Menu within the User Manager:

user manager
Table 31. Users area within the User Manager

LEGEND

1 Button to create a new user

2 Button to delete the selected user

3 User name

4 Column listing the first name of the users

5 Column listing the last name of the users

6 Configuration Cockpit to edit data of the selected user

The Configuration Cockpit allows to define the following settings for a user:

Deactivated: If checked, user is deactivated and is not able to login

Username: Unique login. Once set, the login cannot be changed.

Description: Arbitrary description

First Name, Last Name: Complete name of the user

Locale: Currently selected locale (language) of the user. When the user logs in, the locale is automatically set to this setting

Group Name: Name of the User Group, the user belongs to. User Groups control the granting of access rights to items.

User Password: Initial user password

Password Validity: Validity period in days for the password. At the end of this time, the user will be prompted to set a new password upon login. It is not checked if the old and the new password are the same.

Auto Logout Timeout: Time in seconds after an auto logout occurs during inactivity.

14.2. User Groups

Select the Tab "Groups" to select the Menu with the user group settings within the User Manager:

user manager groups
Table 32. Groups area within the User Manager

LEGEND

1 Button to create a new group

2 Button to delete the selected group

3 Column listing the names of the already created groups

4 Column with further information about the respective group

5 Configuration Cockpit to edit member groups

The Configuration Cockpit allows to define the following settings for a group:

Groupname: Unique user group name. Once set, the group name cannot be changed.

Description: Arbitrary description

Administrative Privileges: If checked, users belonging to this group are allowed to create e.g. users and usergroups

14.2.1. User Levels

A user can be a member of multiple groups at the same time by creating hierarchical structures of groups. A user can only be a member of a single immediate group, however each group can have other member groups so you can create group hierarchies to match your specific requirements.

To achieve that you would create different access groups with different permissions and assign them to groups to group permissions together.

user groups

14.3. Access Groups

Access Groups are groups that are assigned to items to set the access rights for specific user groups. Select the Tab "Access Groups" to select the Menu with the access group settings within the User Manager.

user manager accessgroups
Table 33. Access Groups area within the User Manager

LEGEND

1 Button to create a new access group

2 Button to delete the selected access group

3 Column listing the names of the already created access groups

4 Column with further information about the respective group

5 Configuration Cockpit to edit access group data

The Configuration Cockpit allows to define the following settings for an access group:

Name: Unique access group name. Once set, the access group name cannot be changed.

Description: Arbitrary description

Access Rights: Pattern to configure the access rights for each usergroup.

15. Use Alarms And Alarm Lists

This chapter describes in detail how you can define alarms within the HMI/SCADA Toolbox WebIQ.

 

The monitoring of events and the display of alarms due to events is a central functionality of any web HMI. Therefore WebIQ allows you to create and manage alarms that are issued in response to specific events or conditions. The alarm management is based on the standard VDI 3699-5 Process Widget With Displays. It distinguishes between

  • Current alarms, which are displayed in the alarm list as long as they are pending or not yet confirmed

  • Alarm events, such as Alarm Comes, Alarm Goes or Alarm Is Acknowledged, which are displayed with timestamp in the alarm history

alarm2
Figure 115. Alarm Management according to VDI 3699-5 (Alarm Item A has to be acknowledged, Alarm Item B not)

You can set the parameter Historic for each alarm. In this case the alarm is stored in the database for later evaluation and for the display in the alarm history. Furthermore, you can set the parameter Has To Be Acknowledged, in order to force the user to confirm the display of the alarm.

The storage time for historic alarms is 30 days.

Alarms are monitored and stored, regardless of displaying of the web HMI, as soon as WebIQ Server is started and the corresponding HMI project is loaded. The HMI project is loaded:

  • if you open it in WebIQ Designer

  • if you start WebIQ Server and load the HMI project with the Autoload Function

In addition, you can define as many context items for each alarm as you want. These are process values, that are recorded and saved with the timestamp Alarm Comes. Likewise, you can set up Attributes for each alarm, which are also recorded and saved. Context items and attributes can be displayed within the alarm texts, e.g. you can insert the name, value and unit of a process variable, which led to an alarm, into the alarm text and display it.

WebIQ also allows the very detailed output of localized alarm texts, which you can enrich with additional information (i.e. alarm context). Once the alarms and alarm texts have been defined, the displaying of the current and historical alarms is very simple. By default, WebIQ offers some ready-to-use alarm widgets, which you can initialize with a few clicks for your web HMI.

The best way to manage alarms within the HMI/SCADA Toolbox WebIQ is as follows

15.1. Define An Alarm

Click the icon Alarm Manager on the launch bar or click to the entry "Alarm Manager" in the [Project Dashboard] in order to open the Alarm Manager.

There you will have the possibility to define alarms or - if you have already defined one or more alarms - to see the list of defined alarms. There you can

  • Add a new alarm

  • Delete an alarm

  • Edit the parameters of an alarm

alarm1
Figure 116. Alarm Manager listing all alarms with the corresponding parameters

LEGEND

1 Button to create a new entry (New Alarm)

2 Button to delete the selected entry

3 Configuration Cockpit to modify selected entry

4 Column with the number of the alarm index

5 Column with the number of the alarm group

6 Column with the title of the alarm level

7 Column with the descriptions of the alarms

The Configuration Cockpit of the Alarm Manager allows to define the following settings:

GENERAL

Enabled: Enable alarm (you can disable the alarm for test purposes)

Alarm Index: Unique alarm index starting at 0

Description: Arbitrary description (optional)

Alarm Level: Level of the alarm (the alarm can be Alarm (=2), Warning(=1) or Info(=0))

Alarm Group Index: Arbitrary numeric alarm group to categorize alarms (optional)

You can create alarm groups, such as groups according to the machine components, priority, service level, etc. Alarm groups are defined as numbers (0,1,…​.) and can be displayed as localized texts in the alarm-list (see Create Alarm Texts)

ALARM SOURCE

Trigger Item: Process item which is monitored and which triggers the alarm

Alarm Type: Type of alarm (see below)

TYPE DESCRIPTION

Conditional

Triggers the alarm if the alarm condition which is applied to the trigger item becomes true

Value

Triggers the alarm if the trigger item reaches or exceeds the prewarn or warn level, which are set as process data attribute (see also (LIMITS Area)

User (deprecated)

Triggers the alarm via the API (deprecated)

Watchdog

Triggers if a process data item does not change for more than twice its update interval (see also [update-interval]).This can be used to monitor the communication between the PLC and HMI if the PLC changes a monitoring reference variable cyclically, e.g. counts up. The update interval of this monitoring variable then corresponds to the monitoring cycle time.

If the value does not change within two intervals, the alarm is triggered.

Alarm Condition: Defines the alarm condition (only for Alarm Type Conditional)

If the alarm type is "Conditional", you can define an alarm condition, which will be evaluated in order to trigger the alarm (condition = true). The alarm will be displayed as long as the condition is true and - in the case of an alarm which has to be acknowledged - as long as the user did not confirm the alarm.

alarm condition

The argument of the alarm condition can be specified either decimal, hexa-decimal (i.e. 0x03) or binary (i.b. 0b011). The number format must be chosen in the intended select-box (right to the Alarm Condition) and using the appropriate number format.

Examples of alarm condition

CONDITION TERM DESCRIPTION

Equal

=99

Condition is true if the value of the trigger item is 99

Not Equal

!=99

Condition is true as long as the value of the trigger item is not 99

Greater Than

>99

Condition is true as long as the value of the trigger item is greater than 99

Greater Or Equal Than

>=99

Condition is true if the value of the trigger item is 99 or as long as the value of the trigger item is greater than 99

Less Than

<99

Condition is true as long as the value of the trigger item is less than 99

Less Or Equal Than

<=99

Condition is true if the value of the trigger item is 99 or as long as the value of the trigger item is less than 99

Bitwise And

& 0b011

Condition is true as long as bit 0 and 1 are true or as long as the binary bitmask of the trigger LSB of the item is 0011

Bitwise Or

| 0x03

Condition is true as long as bit 0 or bit 1 is true or as long as the binary bitmask of the trigger LSB of the item is either 00011 (=3) or 000001 (=1) or 000010 (=2)

Bitwise Xor

^

Condition is true if

Bitwise Negation

~

Condition is true as long as

True

Condition is always true

False

Condition is always false

Output Item: Sets output if the alarm is activated (optional)

Output Value: Value of the output item (optional)

The output item and the output value allows you to define a reaction to the alarm, i.e. enable an external alarm light, buzzer, etc.

The output will be reset when alarm is confirmed by the user or if it is gone.

Log Alarm History: Alarm will be persisted as Historic Alarm and will be displayed within the Alarm History

ALARM CONFIRMATION

Acknowledge Alarm: Alarm must be acknowledged by the user if this checkbox is set

Confirm Output Item: Writes a bitmask to output the alarm status to a process variable (optional)

BIT DESCRIPTION

0

Alarm is active

1

Alarm needs to be confirmed (acknowledged) by the user

2

Alarm is confirmed by the user

ALARM CONTEXT

Context Items: Array of context process variables, which are sampled with the alarm trigger and can be displayed in the alarm texts, i.e. "Temperature too high, T = 233°C"(optional). Context items are also stored with the historical alarms.
(see also section Define Alarm Context and Create Alarm Texts)

Context Attributes: Array of context attributes, which can be recorded an evaluated, e.g. URLs to help resources, alarm categories for evaluation, etc. (optional) (see also section Define Alarm Context and Create Alarm Texts)

15.2. Define Alarm Context

15.2.1. Context Items

You can assign one or more context items to each alarm (see Define An Alarm). These are process values, whose values are stored at the Alarm Comes event and which can be displayed in the alarm texts. In addition to the value of the context item (value), the units (unit), the variable name (name) and the label (label) are also available for the alarm message (see Create Alarm Texts).

Table 34. Context Items Of An Alarm
ATTRIBUTE DESCRIPTION

item[idx]

  1. Item: idx=0

  2. Item: idx=1

  3. Item: idx=2

  4. etc.

item[idx].value

Item value

item[idx].formattedValue

Item value formatted with Number of decimal places, which are defined in the variable declaration in the Process Data Manager

item[idx].label

Item label

item[idx].unit

Item unit

item[idx].name

Item name (alias)

15.2.2. Context Attributes

You can also assign one or more custom attributes to each alarm. You can also use them in the alarm text (see Create Alarm Texts).

The following tables give you an overview which information is available for the alarm context by default:

Table 35. Context Attributes Of An Alarm Available By Default
ATTRIBUTE VALUE DESCRIPTION

acknowledged

boolean

Alarm has been acknowledged by the user

acknowledgeable

boolean

The user has to acknowledge this alarm

active

boolean

This alarm is active

group

numeric

Numeric value according to the defined user groups

severity

numeric

Numeric value: 2=Alarm, 1=Warning, 0=Info

timestamp_in

numeric

UNIX timestamp for Alarm Comes

timestamp_out

Numeric value

UNIX timestamp for Alarm Goes

items[ ]

Array

Array of context items

attributes[ ]

Array

Array of custom attributes

15.2.3. Media References

Additionally, you can make links to media files in the alarm context. This gives you the possibility to link to further information about an alarm message, such as a pdf document of a manual or a video file.

Table 36. Use Of Media References Within Context Attributes
ATTRIBUTE VALUE DESCRIPTION

Help

[URL]media/pdf/User-manual-part-1-2083077.pdf

Creates a link to the pdf document 'User-manual-part-1-2083077.pdf'. The link is preceded by "Help".

Video

[URL]media/video/WebIQ 2.8 OPC UA Browser.mp4

Creates a link to the video file 'WebIQ 2.8 OPC UA Browser.mp4'. The link is preceded by "Video".

Please note that the link must be created relative to the project directory.

The media references are automatically displayed as links to the relevant media files. If the user activates this link, the media file in question will be displayed with the default application linked in the operating system. The above example creates the following links in the alarm details.

alarm detail2
Figure 117. Example Alarm Message With Media References

15.2.4. Custom Context Attributes

Furthermore, you can create your very own context attributes and save them with the alarm in question.

Table 37. Custom Context Attributes Of An Alarm
ATTRIBUTE DESCRIPTION

attributes.<key1>

<value1> (value of the custom attribute "key1")

attributes.<key2>

<value2> (value of the custom attribute "key2")

etc.

All this information is stored with the alarm, and can be used to display it in the definition of alarm texts (see Create Alarm Texts).

15.3. Create Alarm Texts

You can identify every alarm due to its unique ID (= alarm index). You can use this ID to define alarm texts in the Localization Manager. The following notation is used to to assign the alarm text to the corresponding alarm:

  • ${alarm_title_<id>}: Alarm title (used in the tables of the alarm list widget, the alarm history widget, as well as in the alarm info)

  • ${alarm_msg_<id>}: Alarm message (used in the dialogbox Detail of the alarm list or alarm history widgets)

alarm message1
Figure 118. Examples Of Alarm Texts Within The Localization Manager

You can define the localized labels of the alarm groups in the similar way.

  • ${alarm_group_<group-id>}: group-id is the number of the corresponding alarm group

15.3.1. Use Alarm Attributes In Alarm Texts

Besides the custom attributes, which may be optionally defined (see Define Alarm Context), each alarm has several standard attributes, which can be used with the alarm text messages followed:

<%=attrib %>

Table 38. Use Of Context Attributes And Context Items In Alarm Texts
NOTATION DESCRIPTION

<%=group %>

= Alarm group

<%=severity %>

= Alarm Class (2 = Alarm, 1=Warn, 0 = Info)

<%=items[0].value %>

= Value of the 1. context item

<%=items[1].unit %>

= Unit of the 2. context item

<%=attributes.agg %>

= Shows 'value' of the custom attribute key 'agg'

etc.

This alarm text uses the item F2 as context item. The localization variable ${alarm_msg_<id>} for the alarm text is defined as follows:

Speed regulation, reference value: <%= items[0].label %> = <%= items[0].value %> <%= items[0].unit %> out of range! Please check frequency inverter settings.

15.3.2. Use Timestamps In Alarm Texts

You can use the DATE function in order to format timestamps and use them for alarm texts. The DATE function has the following three parameters:

<%=DATE(tt,ff,utc) %>

Table 39. Parameters DATE Function
NOTATION FORMAT DESCRIPTION

tt

{number}

Input UNIX Timestamp

ff

{string}

Formatting template that can contain the following strings

$YYYY

Year with four digits

2019

$YY

Year with two digits

19

$Y

Year with up to four digits

2019

$Q

Quarter of the year

3

$M

Month, one or two digits

3

$MM

Month, always two digits

03

$D

Day of the month, one or two digits

1

$DD

Day, always two digits

01

$DDD

Day of the year, one, two or three digits

84

$DDDD

Day of the year, always three digits

084

$X

POSIX timestamp with milliseconds as decimals

1559139023

$x

POSIX timestamp in milliseconds resolution

1559139023000

$W

Week of the year, one or two digits

2

$WW

Week of the year, always two digits

02

$E

Day of the week from 1 to 7. 1 is Monday

2

$e

Day of the week from 0 to 6. 0 is Sunday

2

$H

Hour in 24hrs format, one or two digits

8

$HH

Hour in 24hrs format, always two digits

08

$h

Hour in 12hrs format, one or two digits

8

$hh

Hour in 12hrs format, always two digits

08

$A

AM or PM

AM

$a

am or pm

am

$m

Minutes, one or two digits

15

$mm

Minutes, always two digits

15

$s

Seconds, one or two digits

45

$ss

Seconds, always two digits

45

$S

Milliseconds, one digit

1

$SS

Milliseconds, two digits

12

$SSS

Milliseconds, three digits

123

$Z

Timezone identifier

+0200

$ZZ

Timezone identifier with hours and minutes seperated by :.

+02:00

utc

{boolean}

true, if input value should be interpreted as UTC

Example: The notation <%=DATE(timestamp_in, '$YYYY-$MM-$DD $hh:$mm:$ss') %> leads to the alarm text 2018-04-20 13:10:05

15.3.3. Use Of Numeric Status Info In Alarm Texts

You can also display numeric status values as localizable text using the MAP function. To do this you have to define a suitable text for each numeric value. Therefore, you have to create a separate localization variable which defines the texts in the form of an enumeration.

<%=MAP(state, enum) %>

Table 40. Parameters MAP Function
NOTATION FORMAT DESCRIPTION

state

{number}

Numeric status

enum

{string}

Enumeration with the notation {number}:{string}

You can write the text directly in the enumeration or - as in example below - use localization variables.

15.3.4. Example

alarm detail
Figure 119. Example Alarm Message With Different Context Information

Make the following settings in order to achieve the alarm message as shown above.

Define alarm_msg_[idx]: Localization Text Of The Corresponding Alarm Message
TYPE: <%=MAP(severity, 'alarm_states') %>
GROUP: <%=MAP(group, 'group_states') %>
ACKNOWLEDGE: <%=acknowledgeable %>
COME <%=DATE(timestamp_in, '$YYYY-$MM-$DD $hh:$mm:$ss') %>

MESSAGE: The Temperature regulation of <%=items[0].label %> (current value = <%=items[0].formattedValue %> <%=items[0].unit %>)
is out of range!

SOLUTION: <%=attributes.solution %>
Define The Localization Variable 'alarm_states' To Achieve A Localized Alarm Type Display
{0:'${alarmlist_level_info}',
1:'${alarmlist_level_warning}',
2:'${alarmlist_level_alarm}'}
Define The Localization Variable 'group_states' To Achieve A Localized Alarm Group Display
{0:'${alarm_group_0}',
1:'${alarm_group_1}',
2:'${alarm_group_2}',
3:'${alarm_group_3}'}

'alarmlist_level_[type]' and 'alarm_group_[idx]' refers to the corresponding localization variables.

Solution is a custom context attribute with the key 'solution'.

The media link to the help manual (pdf) and the video are created as media references in the context attribute.

15.4. Use An Alarm Widget

The HMI/SCADA Toolbox WebIQ offers the following widgets to display alarm information:

  • Alarm List The Alarm List: displays the alarms in a list. It comes with the following three display modes

    • All alarms displays the current and the historical alarms in one alarm list

    • Only live displays only the current alarms in the alarm list

    • Only historic displays only the historical alarms in the alarm list

  • Alarm Info The Alarm Info: displays in a compact form the last alarm and the number of current alarms

15.4.1. IQ Alarm List

The central widget of the alarm management in WebIQ is the IQ Alarm List, which displays both the current and the historical alarms (you can set whether you want to see only the current, the historical or all alarms). It clearly displays the alarms and their status in a list. The columns of the alarm list can be sorted by clicking on the heading of the corresponding column. By default, the alarm list has filters for selecting alarm classes such as Alarm, Warning and Info.

Drag the icon Alarm List from the widget bar or widget overlay into the Layout Editor or into the Hierarchy Cockpit in order to initialize an Alarm List.

alarm list
Figure 120. Alarm Widget with the Display Mode "Only live"

LEGEND

1 Quick filter according to alarm level

2 Acknowledge buttons

3 Indicator icons for the alarm level

4 Unique alarm index

5 Title of the alarm

6 Timestamp "Alarm Comes"

7 Alarm Group

8 Button to acknowledge this specific alarm

9 Button to display detailed alarm messages

10 Number of alarms in total

This is the standard layout of the alarm list with the display mode "Only live". The presentation of the alarm list may vary, depending on which columns you set for the alarm list and how you have configured them.

There are different layout variants for the alarm list.

Table 41. Layout Variants of the IQ Alarm List
Layout Variant Description Image

Full List, Single-Line

In the alarm list, the alarms are displayed in an overview. The alarm is displayed on one line. If the user clicks on "Detail", he gets the alarm details in an overlay from the type "dialogbox" above.

iq alarm list 01

Full List, Two Lines

In the alarm list, the alarms are displayed in an overview. The alarm is displayed on two lines. If the user clicks on "Detail", he gets the alarm details in an overlay from the type "dialogbox" above.

iq alarm list 02

List with Detail View, Single-Line

The alarm list shows an overview of the alarms on the left and the details of the selected alarm on the right. The alarm is displayed on one line.

iq alarm list 03

List with Detail View, Two Lines

The alarm list shows an overview of the alarms on the left and the details of the selected alarm on the right. The alarm is displayed on two lines.

iq alarm list 04

Details about the configuration and styling of the alarm list can be found in the overview of the widgets

15.4.2. IQ Alarm Info

The IQ Alarm Info widget displays tightly arranged the current alarm status of the web HMI. The widget will be colored according to the highest alarm level within the pending alarms, i.e. red (alarm), yellow (warning) or green (info). Further, the widget shows the number of total pending alarms and the alarm title of the last pending alarm of the highest level.

Drag the icon Alarm Info from the widget bar or widget overlay into the Layout Editor or into the Hierarchy Cockpit in order to initialize an Alarm Info.

alarm info
Figure 121. Alarm Widget "Alarm Info"

LEGEND

1 Highest Alarm Level

2 Alarm Title Of The Alarm With The Highest Alarm Level

3 Total Number Of Pending Alarms
Table 42. Layout Variants of the IQ Alarm Info
Layout Variant Description Image

Full Alarm Info

The alarm info displays the alarm icon, alarm text and the number of current alarms.

iq alarm info 01

Icon Only

The alarm info displays only the alarm icon.

iq alarm info 02

Number Only

The alarm info displays only the number of current alarms.

iq alarm info 04

Text Only

The alarm info displays only the alarm text

iq alarm info 05

Details about the configuration and styling of the alarm list can be found in the overview of the widgets

16. Data Recorder And Trend Display

This chapter describes how to record process data tags and define 'Trend' group objects and displaying it in a curve diagram (time-series diagram).

 

16.1. Data Recorder

16.1.1. Description

WebIQ has an integrated data recorder (data logger) that can be used for recording process variables from OPC-UA and storing them in a database. The minimum sampling cycle of the data recorder is 1ms and the process values are stored in the integrated SQLite database whenever the value has changed and are available there for later usage:

  • Representation as a trend display (online and historical)

  • Export of data to a file for external archiving or evaluation (through a custom script)

  • Online connection to database/cloud system (requires that the data is read utilizing WebIQ’s WebSocket interface and transferred by a customer-side process)

If the sampling cycle is longer than the update time of the process values, these are aggregated using one of the following selectable methods:

  • avg: average

  • median: rolling average

  • min: minimum value within the interval

  • max: maximum value within the interval

  • last: last value

Any number of data recorders can be created, e.g. with small intervals and short storage times (retention) or larger intervals and longer storage times, or with different data and aggregations.

A logical "Trend" group object can be assigned to each data tag of the data recorder, via which the data to be displayed are grouped for the Trend widget. For example, you can store the data in different data recorders and then add these values in a common 'Trend' group object and display them in a Trend widget.

In order to optimize access to the database and to reduce frequent accesses, e.g. to a flash disk, the recording intervals can be set independently of the cycle time on the data recorder.

The storage duration (retention time) can be set as desired and is only limited by the available storage space and performance of the target system’s hard disk and by the maximum database size of 281 TB per SQLite database. After this time has expired, e.g. 2 hours, 30 days or 2 years, all older data is deleted in order to release and limit the storage space.

A recorder can be marked as 'optional' to indicate that database access may be temporarily unavailable, e.g. if you use a removable storage disk or remote access to an external drive. In this case, the data is discarded without an error message and saved again as soon as the storage medium is available again.

16.1.2. Trigger and Qualifier

It is optionally possible to start or stop the data recorder via a linked condition (trigger). This can be a UI action, which can be started as a user action via a button, for example, or linked directly to a condition via a process variable.

Likewise, the data transfer can be controlled via a condition instead of a continuous time interval. In this case, whenever the condition is met, the data is sampled once and stored. This can be used, for example, to count events in a process, e.g. roll log, piece log, etc., in order to then be evaluated later in some form.

16.1.3. Open Data Recorder Manager

When you have an HMI project open, select the Recorder Manager to open the manager dialog:

Figure 122. Open Data Recorder Manager
Figure 123. Different Areas of the Data Recorder Manager

As soon as the recorder manager is open, you can configure the settings in the different areas.

LEGEND

1 Area to select and edit data recorders and 'Trend' groups)*

2 Area for data recorder parameters

3 Display, select and edit process data tags for the data recorder

)* 'Trend' groups are optional logical objects to group values from different data recorders into specific trend views.

16.1.4. Selecting and Editing Data Recorder and 'Trend' Group Objects

In this first area of the Recorder Manager, data recorders can be created, selected and deleted. You can also switch to the view for 'Trend' group objects.

Let’s first see the data recorder section:

Figure 124. Display, select and edit data recorder and 'Trend' group tab

16.1.5. Data Recorder Parameterization

Figure 125. Data Recorder Parameters

LEGEND

  1. Name: Unique name of the recorder, UTF-8 characters are allowed.

  2. Database: Database file name relative)* (e.g.'rec1') or absolute)* ('c:\xyz\databasename.sqlite'), must contain valid characters for filenames and path.

For relative paths: the system adds the ending '.sqlite' to the filename automatically

  1. Commit Interval: Interval with which the data is written to the disk. The commit interval should be selected in such a way that - as a rule - 100 to 200 data updates are always written to the database. It should also not be too small for flash memory to keep the write rate as low as possible.

  2. Recording interval: Interval with which the data is saved. The data is only written if the value has changed and this change is greater than the optionally adjustable threshold (see chapter threshold).

  3. Retention Time: Time period for how long the data is stored in the recorder database. All data older than this retention time will be deleted. This time can be specified in seconds, hours or days.

  4. Recorder is Optional: If this parameter is set, WebIQ Server will not issue an error message if the attempt to write to the database fails. This is e.g. useful for exchangeable storage media or remote connections.

  5. Start/stop:

    1. The recording can be started or stopped with the UI action 'data-recorder-start-stop'.

    2. If the 'With condition' option is set, a condition consisting of a process value ('Condition item'), a Boolean condition and a reference value can be entered. (E.g. variable 'status' & hex 0x2 ⇒ recorder will be started as soon as bit1 of the variable 'status' has been set).

  6. Record on trigger: Values are recorded via a trigger instead of a time series. If this option has been selected, the parameters 'Recording Interval' and 'Commit Interval' are not evaluated, but must still contain valid numerical values for the syntax check.

    1. The values will be recorded when the UI action 'data-recorder-now' is called, e.g. when the user presses a button or something similar.

    2. If the 'With condition' option is set, a condition consisting of a process value ('Condition item'), a Boolean condition and a reference value can be entered. (e.g. variable 'status' > dec 1 ⇒ values are recorded once, when the variable 'status' goes form 0 ⇒ 1.

  7. Description:Optionally, a multi-line descriptive text can be stored here. All UTF-8 characters can be used.

As soon as you confirm the parameters with "Apply", the recorder will be initialized and the database will be created.

16.1.6. Assigning Process Data Tags to The Recorder

You can choose an existing data recorder on the left with the selection field and then choose process values from the process variable list (Select Process Item):

recorder area3
Figure 126. List to edit and add Process Data Tags to the Data Recorder

If you click on the "+" Button to add process data tags, you will see the selection dialog:

recorder items
Figure 127. data recorder Selection dialog

LEGEND

  1. Search filter for the name (alias) of the process data tags. Use '_' as wildcard for single character and '%' as wildcard for multiple characters.

  2. Checkbox to select/deselect all shown (filtered) process data tags

  3. Display total number of process data in the current filtered selection

  4. Click "Apply" to confirm your selection and add process data tags to the data recorder

You can select multiple items either by pressing the 'Ctrl' key or by pressing the 'Shift' key to select ranges of items. Use '_' as wildcard for single character and '%' as wildcard for multiple characters in the filter field.

After clicking on 'Apply' an overlay window to select trend and aggregates will be shown.

Figure 128. Overlay to Choose 'Trend' and 'Aggregate'

  1. Number of selected recorder items

  2. List of available 'Trend' group objects. 'Trends' groups are logical objects to group values from different data recorders to specific trend widgets. In standard use cases, you can simply select the default 'Trend' group 'Trend', which is available by default for every data recorder. To create more trend objects which you can then select here, see the chapter on 'Trend' groups.

  3. Aggregate Function to aggregate values when multiple value updates have occurred within a single recording interval

    • average

    • median (rolled)

    • last value

    • minimum

    • maximum

Choose "Apply" to confirm.

Strings and booleans can only be recorded using the last aggregate. If a different aggregate has been selected last will be used implicitly.

Your process data tags are now listed in the Recorder Manager and the data recorder starts to record immediately. You can repeat this process as many times as needed and add more values or remove them from the list.

recorder manager2
Figure 129. Display the Process Data Tags of a Data Recorder

LEGEND

  1. Search filter for the name (alias) of the process data tags. Use '_' as wildcard for single character and '%' as wildcard for multiple characters.

  2. Select/deselect all filtered Process Data Tags. Use 'ctrl' key to select multiple items and use 'shift' key to select ranges of items.

  3. Display name (alias) of the Process Data Tag

  4. Display sample interval of the tag (see Configuration of Variables/Structure members)

  5. Display optional threshold value (see Configuration of Variables/Structure members)

  6. Display aggregation of the Process Data Tag (see above)

  7. Select/ deselect single row, use 'ctrl' key to select multiple items and use 'shift' key to select ranges of items.

You can record the same process data in different data recorders with different sampling times and different storage times, e.g. as a high-speed recorder with interval = 100ms, age = 2h, and at the same time as a long-time recorder with interval = 60000ms and Retention Time = 365 days.

16.2. 'Trends' to Group Values

If you select the 'Trend' tab inside the Recorder Manager this will open the Trend Manager, which manages all trend objects and shows the contained process values.

recorder trends
Figure 130. Trend Manager to add/edit/delete 'Trend' group objects and to show the process data tags they contain

LEGEND

  1. Select 'Trend' tab to open the Trend Manager

  2. Buttons to add, delete and navigate through the 'Trend' groups

  3. Select box to select 'Trend'

  4. Name of 'Trend' group object, all UTF-8 characters can be used

  5. Multi-line descriptive text can be stored here. All UTF-8 characters can be used.

  6. Apply button to submit parameters above

  7. Search filter for the name (alias) of the process data tags. Use '_' as wildcard for single character and '%' as wildcard for multiple characters.

  8. Display name (alias) of the process data tag

  9. Display data recorder name

  10. Display sample interval of the tag (see Configuration of Variables/Structure members)

16.3. Using Trend Widgets

WebIQ provides a powerful trend widget to display the process data historically and live as a time-series trend chart. The data is based on the recordings of the data recorder and the grouping of different recorders, the so-called 'Trend' groups, which are also defined in the Recorder Manager. In addition, some accompanying widgets for control and operation are included, which are connected to each other through a configuration option.

Figure 131. Open Widget Bar and Select Trend

WebIQ offers the following widgets to display trend values:

  • Trend Display Trend: displays process variables as time-series in a line chart

  • Trend Legend Trend Legend: shows details for each trend curve

  • Trend Zoom Trend Live: toggles between live and historical mode

  • Trend Select Trend Select: selects process values to be displayed in the trend

  • Trend Zoom Trend Time: selects the time period for the trend

  • Trend Zoom Trend Zoom: zooms the trend curve

The core widget is the Trend. The other trend widgets provide additional features for the trend display, if necessary. The trend widgets will be described in detail below.

16.4. 'Trend' Widget

The central widget is the "Trend" widget, which displays the stored process values in a time-series diagram as a curve on the time axis.

It is possible to display any trend curves in the Trend widget to compare them. The trend curves can have different units and value ranges, but it is also possible to combine several values into a single scale group or to hide the scales completely. The scale can also be displayed on the left or right side of the curve diagram.

The Trend widget can display the data as a historical trend curve or alternatively in live mode. In live mode, the data is displayed in real time and the trend curve runs continuously, like a data plotter.

You can use the pinch gesture to change the scaling in the y direction in the trend display. For scaling in the x-direction, i.e. along the timeline, use the "Trend Zoom" and "Trend Time" widgets. You can also zoom with the scroll wheel of your mouse on the y axis and while holding down the Shift key also on the x axis.

Depending on the configuration of the widget, one or two Trend Handles can be displayed and moved along the time axis. The current values are displayed at the position of the handle. There is also the possibility, if this has been enabled in the widget configuration, to enter any user information (comments) on the time axis. These consist of a title and any text. This feature can be used e.g. to comment on the machine status and to point out any irregularities, which are then also stored in the data recorder for documentation.

trend display
Figure 132. 'Trend' Widget

LEGEND

  1. Trend Curves

  2. Timeline (x-Axis)

  3. Value Scales for the Trend Curve (y-Axis) on the left and right side

  4. Trend Handle 1 and 2 display the values for the corresponding point in time

  5. Comment button for the trend handle

  6. Marker for an existing comment for this point in time (click on the icon or touch to open and display it)

  7. Handle bar to drag trend handles

16.4.1. Basic Usage of the Trend Widget

Click on graph area

  • if "Enable Trend Handle" is enabled, positions a trend handle on the graph

  • if "Enable Secondary Trend Handle" is enabled, another click will position the second handle on the graph

  • if handles are already present, another click will move the nearest handle to the clicked location

  • active trend handles can be moved by dragging on the rectangular handle bar of the trend handle, displayed on the timeline (below the trend handle)

  • Dragging on graph area

    • will move displayed duration (horizontal) or

    • will move displayed scale area (if y-axis is zoomed in)

  • Shift+Click or touch with two fingers on graph area

    • Starts/stops live mode if enabled

  • Mouse-wheel or vertical scale-gesture

    • controls y-axis zoom (zoom stage change)

  • Shift+Mouse-wheel or horizontal scale-gesture

    • controls x-axis zoom (duration change)

16.4.2. Trend Widget Configuration

trend config
Figure 133. Trend Widget Configuration

LEGEND

  1. Select 'Trend' group object as defined within the data recorder (see chapter 'Trends' to Group Values)

  2. Add one or more curves (initial display, curves can be added or hidden at runtime via the Trend Select widget)

  3. Edit selected curve, delete or shift order (can also be changed at runtime). If you click on the edit button (3 dots), the curve setting popup is opened, see chapter Curve Group Settings

  4. Initially displayed time period (can be changed by zoom at runtime)

  5. Reference to various localization variables with texts and time formats

  6. Enables 1 or 2 trend handles to be displayed

  7. Allows the user to enter comments at each handle position

  8. Initially starts the trend widget in live mode (can be changed at runtime by the trend live widget or 'Shift' click)

  9. All settings made during runtime are stored in the internal device memory (i.e. web browser)

16.4.3. Advanced Trend Configuration

The lower area of the Configuration Cockpit also contains the areas for 'Advanced Curve Styles' and 'Advanced Miscellaneous', which can be used to configure further settings in the form of JSON objects. These areas usually do not have to be modified, but it is possible for advanced users who are familiar with JSON notation to make additional settings.

When the user clicks the pencil icon, a full-screen editor opens, which includes syntax support for JSON syntax. Nevertheless, incorrect entries, e.g. incorrect or unknown keys within the JSON objects are not recognized and can therefore lead to incorrect behavior. Therefore, check all entries that you make here very carefully.

trend config json
Figure 134. Advanced Trend Configuration with JSON

Value Styles

Array of possible selectable value styles; this option configures available styles for the displayed value graphs.

  • Type {object[]}

  • Element Properties:

    • value - {object} - settings for "value" line displaying item value

      • lineWidth - {number} - line width in pixels

      • strokeStyle - {string} - line color

      • fillStyle - {string} - fill color below graph line (if fillCurve is enabled)

      • lineDash - {number[]} - line dash steps (empty array to disable line dashes)

    • tolerance - {object} - settings for "tolerance" line displaying item tolerances (if drawTolerance is enabled)

      • lineWidth - {number} - line width in pixels

      • strokeStyle - {string} - line color

      • lineDash - {number[]} - line dash steps (empty array to disable line dashes)

Default Value Styles

This option defines the line style used if none (or no existing) is configured for a displayed value graph.

  • Type {object}

  • Element Properties:

    • value - {object} - settings for "value" line displaying item value

      • lineWidth - {number} - line width in pixels

      • strokeStyle - {string} - line color

      • fillStyle - {string} - fill color below graph line (if fillCurve is enabled)

      • lineDash - {number[]} - line dash steps (empty array to disable line dashes)

    • tolerance - {object} - settings for "tolerance" line displaying item tolerances (if drawTolerance is enabled)

      • lineWidth - {number} - line width in pixels

      • strokeStyle - {string} - line color

      • lineDash - {number[]} - line dash steps (empty array to disable line dashes)

Inactive Value Style

This option has the same object structure as above (Default Value Style) and defines the curve style the 'grayed out' curve style when a curve is selected via the 'Trend Legend' widget. All other curves then get this style, which can be changed here (see greyed out curves).

Example of Inactive Value Style
{
    "value": {
        "lineWidth": 1,
        "strokeStyle": "rgb(163, 163, 163)",
        "fillStyle": "rgba(163, 163, 163, 0.1)",
        "lineDash": []
    },
    "tolerance": {
        "lineWidth": 1,
        "strokeStyle": "rgb(163, 163, 163)",
        "lineDash": [
            5,
            5
        ]
    }
}

Available Display Durations

This option configures display durations available for x-axis zoom. Values are in ms and represent the time from left to right of graph.

Available Zoom Stages

This option configures zoom stages available for y-axis zoom. Values are in percent and must be greater than or equal to 100.

Timeline Marker Formats

This option configures timeline marker formats available for different durations. A matching format is chosen based on the displayed duration.

  • Type {object[]}

  • Element properties:

    • unit - {number} - marker distance unit in ms.

    • format - {string} - date-/time-format for marker label

Comment Button Configuration

This option contains the complete configuration of the IQ Button widget created in the trend handle to create comments if Show Trend Comments has been enabled. Change class name and template to use a customized button layout here.

16.5. 'Trend Legend' Widget

The 'Trend Legend' widget is a companion widget and can only be used together with a Trend widget instance. To establish a link between the two, an instance of the associated Trend widget must be selected in the configuration of the Trend Legend.

The Trend Legend widget is used to display a colored symbol, label text and unit for each process data tag. Furthermore, individual curves can be highlighted if the user clicks or touches on them. The remaining curves are greyed out for better clarity. By clicking on the symbol again the original display will be restored.

trend legend
Figure 135. Trend Legend Widget

LEGEND

  1. Line segment according to the color of the Trend Curve

  2. Localized name or alias of the Trend Curve

  3. Unit of the Trend Curve

trend legend greyedout
Figure 136. Example of greyed-out curves with Trend Legend widget

Trend Legend' Configuration

trend legend config
Figure 137. 'Trend Legend' configuration options

LEGEND

  1. Select the corresponding Trend widget

  2. Orientation horizontal or vertical

  3. Display units

16.6. 'Trend Live' Widget

The 'Trend Live' widget is a companion widget and can only be used together with a Trend widget instance. To establish a link between the two, an instance of the associated Trend widget must be selected in the configuration of the Trend Live.

The Trend Live is used to toggle between pause and live data display.

trend live
Figure 138. Trend Live Widget to Start and Pause the Live Mode

  • Trend Zoom: switches the Trend into the live mode

  • Trend Zoom: stops the Trend on the current position (disabled live mode)

Trend Live Configuration

Figure 139. Trend Live Widget Configuration

LEGEND

  1. Select the corresponding Trend Widget

  2. Choose the orientation horizontal/vertical

Shift+Click or touch with two fingers on graph area starts/stops live mode if enabled

16.7. Trend Time Widget

The 'Trend Time' widget is a companion widget and can only be used together with a Trend widget instance. To establish a link between the two, an instance of the associated Trend widget must be selected in the configuration of the Trend Time widget.

Trend Time allows the HMI user to enter a time period for displaying trend data. Depending on the configuration setting, the start time and duration can be specified, or alternatively start time and end time.

If a time period has been entered, the live mode will be stopped at the same time.

Figure 140. Trend Time Widget with Two Options

LEGEND

  1. Start Time for trend display (defined by a date and a time)

  2. Dropdown for seleting the duration of the timeline to specific value like 1s, 5s, 10s, 1m, 10m 1h, 2h, 4h, 8h, 12h, 1d, 1w etc.

  3. Alternatively, enter the end time (time and date)

Trend Time Configuration

Figure 141. Trend Time Widget Configuration

LEGEND

  1. Select the corresponding Trend Widget

  2. Label of the start button

  3. Label of the end button (if display mode start & end)

  4. Label of the duration button (if display mode start & duration)

  5. Localizable time format of start and stop button

  6. Display Mode 'Start & Duration' or 'Start & Stop'

  7. Orientation of the time & date overlay

  8. JSON configuration for all text labels of the time & date overlay

16.8. Trend Zoom Widget

The 'Trend Zoom' widget is a companion widget and can only be used together with a Trend widget instance. To establish a link between the two, an instance of the associated Trend widget must be selected in the configuration of the Trend Zoom.

With the Trend Zoom you can scale both the timeline and the value scale. The available zoom levels can be modified in the configuration of the trend widget (Advanced Miscellaneous). It offers the following features:

  • Trend Zoom: zooms in

  • Trend Zoom: zooms out

trend zoom
Figure 142. Trend Zoom Widget

Trend Zoom Configuration

trend zoom config
Figure 143. Trend Zoom Configuration

LEGEND

  1. Select the corresponding Trend widget

  2. Choose zoom for x- or y-axis

  3. Choose the orientation horizontal/vertical

16.9. Trend Select Widget

The 'Trend Select' widget is a companion widget and can only be used together with a Trend widget instance. To establish a link between the two, an instance of the associated Trend widget must be selected in the configuration of the Trend Select.

The Trend Select widget allows the user to show and hide trend curves or to change their style, scaling and value axes at runtime.

All process data variables that have been defined in the data recorder definition in the 'Trend' grouping will be displayed in a list. The process data can be selected and unselected here and the settings can be modified using the edit button, which opens the curve settings popup menu.

All settings made by the operator during operation can be stored on the current device (i.e. web browser), if this option has been selected in the Trend widget configuration.

trend select
Figure 144. Trend Select Widget

LEGEND

  1. Search filter for the name (alias) of the process data tags. Use '_' as wildcard for single character and '%' as wildcard for multiple characters.

  2. Show/hide a trend curve for displaying

  3. Localized name or alias of the trend curve

  4. Display color icon of the trend curve

  1. Opens the curve settings of the trend curve: See Configuration of Curve Group see next paragraph

Trend Select Configuration

trend select config
Figure 145. Trend Select Configuration

LEGEND

  1. Select the corresponding Trend widget

  2. Label Type: 'Alias' or label attribute of the process data tag

  3. Curve Settings dialog options (templates and CSS classes for curve group dialog)

16.10. Curve Group Settings

This popup menu is called when configuring trend curves in the trend configuration panel, as well as at runtime when you configure curves in the trend select widget.

Figure 146. Popup Trend Curve Settings

LEGEND

  1. Dropdown list to select the style (color and line type) of the curve

  2. Enable fill curve option

  3. Show tolerances (must be defined in the Process Data Manager area see chapter Process Data Manager advanced area

  4. Configure Limits configuration either:

    1. Manual values

    2. Automatically through the displayed values

    3. In Process Data Manager configured limits. This could be absolute or relative limits in %, either value numbers or variables (see chapter Process Data Manager advanced area

  5. Display scale on the left or right side

  6. Hide scale

  7. Select a scale group for this trend curve, for example, several curves with temperatures, pressures, etc., which all have the same unit and value range, can be combined into a single scale group.

  8. Add new scale group

16.11. Advanced CSS Styling Options

All styling options of the trend widgets are defined as CSS variables. The following list shows all of these variables:

Trend Widget

--loading-indicator-color: #4C4848;
--scale-width: 44px;
--scale-marker-width: 6px;
--scale-color: rgb(22, 25, 32);
--timeline-height: 44px;
--timeline-marker-height: 6px;
--timeline-color: rgb(22, 25, 32);
--trend-marker-line-color: rgb(22, 25, 32);
--trend-marker-line-active-color: #0078CA;
--trend-marker-line-width: 1px;
--trend-marker-icon-color: rgb(22, 25, 32);
--trend-marker-icon-active-color: #0078CA;
--trend-marker-icon-background-color: rgb(255, 255, 255);
--trend-marker-info-background-color: #ECF0F4;
--trend-marker-info-height: 138px;
--trend-marker-info-width: 400px;
--trend-marker-info-close-color: #00325A;
--trend-marker-info-close-size: 16px;
--trend-marker-title-font-size: 14px;
--trend-marker-title-font-family: RobotoLight;
--trend-marker-title-line-height: initial;
--trend-marker-title-font-weight: bold;
--trend-marker-title-color: #000F1A;
--trend-marker-text-font-size: 14px;
--trend-marker-text-font-family: RobotoLight;
--trend-marker-text-line-height: initial;
--trend-marker-text-font-weight: initial;
--trend-marker-text-color: #000F1A;
--trend-marker-user-font-size: 14px;
--trend-marker-user-font-family: RobotoBold;
--trend-marker-user-line-height: initial;
--trend-marker-user-font-weight: initial;
--trend-marker-user-color: #51697F;
--trend-marker-timestamp-font-size: 14px;
--trend-marker-timestamp-font-family: RobotoLight;
--trend-marker-timestamp-line-height: initial;
--trend-marker-timestamp-font-weight: bold;
--trend-marker-timestamp-color: #899BAB;
--line-color: rgb(0, 0, 0);
--scale-label-font-size: 12px;
--scale-label-font-family: RobotoBold;
--scale-label-color: #3C3C3C;
--unit-info-font-size: 10px;
--unit-info-font-color: rgb(134, 155, 172);
--unit-info-font-family: RobotoBold;
--timeline-start-font-size: 10px;
--timeline-start-time-line-height: 12px;
--timeline-start-time-font-color: rgb(0, 15, 26);
--timeline-start-time-font-family: RobotoBold;
--timeline-start-date-line-height: 14px;
--timeline-start-date-font-color: rgb(255, 255, 255);
--timeline-start-date-font-family: RobotoLight;
--timeline-start-date-background-color: rgb(0, 15, 26);
--timeline-label-font-size: 10px;
--timeline-label-font-family: RobotoBold;
--timeline-label-color: #3C3C3C;
--handle-width: 120px;
--handle-background-color: rgba(134, 155, 172, 0.5);
--handle-focused-background-color: rgba(134, 155, 172, 0.9);
--handle-close-button-color: #00325A;
--handle-close-button-size: 16px;
--handle-marker-width: 2px;
--handle-marker-color: rgb(0, 15, 26);
--handle-drag-background-color: rgb(0, 15, 26);
--handle-drag-marker-color: rgb(255, 255, 255);
--handle-data-box-background-color: rgb(245, 247, 249);
--handle-data-label-background-color: rgb(226, 232, 237);
--handle-date-font-size: 12px;
--handle-date-font-family: RobotoBold;
--handle-date-color: #3C3C3C;
--handle-date-line-height: 14px;
--handle-time-font-size: 12px;
--handle-time-color: #3C3C3C;
--handle-time-font-family: RobotoBold;
--handle-time-line-height: 14px;
--handle-label-font-size: 12px;
--handle-label-line-height: 14px;
--handle-label-font-family: RobotoBold;
--handle-label-color: #3C3C3C;
--handle-value-font-size: 18px;
--handle-value-line-height: 20px;
--handle-value-font-family: RobotoBold;
--handle-value-color: #3C3C3C;
--handle-unit-font-size: 12px;
--handle-unit-line-height: 14px;
--handle-unit-font-family: RobotoBold;
--handle-unit-color: #3C3C3C;

Trend Select

--table-row-height: 28px;
--table-header-font-size: 16px;
--table-header-font-family: RobotoMedium;
--table-header-color: #3C3C3C;
--table-search-label-font-size: 14px;
--table-search-label-font-family: RobotoLight;
--table-search-label-color: #3C3C3C;
--table-search-value-font-size: 14px;
--table-search-value-font-family: RobotoLight;
--table-search-value-color: #3C3C3C;
--table-text-font-size: 18px;
--table-text-font-family: RobotoLight;
--table-text-color: #3C3C3C;
--table-checkbox-size: 20px;
--table-checkbox-handle-size: 10px;
--table-sort-icon-url: url(../pics/system/controls/complex-table2/arrow_up_black.svg);
--table-config-icon-url: url(../pics/system/controls/iq-trend-select/edit-dark.svg);

Trend Legend

--icon-size: 20px;
--icon-margin: 8px;
--element-gap: 8px;
--element-padding: 4px;
--label-font-size: 14px;
--label-font-family: RobotoBold;
--label-font-weight: initial;
--label-color: #3c3c3c;
--label-margin: 8px;
--unit-font-size: 14px;
--unit-font-family: RobotoLight;
--unit-font-weight: initial;
--unit-color: #3c3c3c;
--inactive-opacity: 0.5;

Trend Live

--button-background-color: #fdfdfd;
--button-border-color: rgba(60, 60, 60, 0.7);
--button-border-width: 1px;
--button-border-radius: 4px;
--button-shadow-color: rgba(60, 60, 60, 0.2);
--button-icon-color: #000000;
--button-hover-border-color: #00ABF0;
--button-active-background-color: #00ABF0;
--button-active-border-color: #00ABF0;
--button-active-icon-color: #ffffff;
--button-active-hover-border-color: #ffffff;
--button-margin: 8px;
--button-initial-size: 40px;
--icon-size: 24px;
--locked-opacity: var(--iq-locked-opacity);

Trend Time

--button-background-color: #fdfdfd; --button-border-color: rgba(60, 60, 60, 0.7); --button-border-width: 1px; --button-border-radius: 4px; --button-shadow-color: rgba(60, 60, 60, 0.2); --button-icon-color: #000000; --button-margin: 8px;

--button-label-font-size: 14px;
--button-label-font-family: RobotoLight;
--button-label-color: #3C3C3C;
--button-label-font-weight: initial;
--button-label-hover-color: #ffffff;
--button-hover-background-color: #00ABF0;
--button-hover-icon-color: #ffffff;
--button-hover-border-color: #00ABF0;
--icon-size: 24px;
--locked-opacity: var(--iq-locked-opacity);
--label-font-size: 14px;
--label-font-family: RobotoBold;
--label-color: #3C3C3C;
--label-font-weight: initial;
--popup-label-font-size: 14px;
--popup-label-height: 20px;
--popup-label-font-family: RobotoBold;
--popup-label-color: #3C3C3C;
--popup-label-font-weight: initial;
--popup-background-color: #ffffff;
--date-button-color: #3C3C3C;
--date-header-font-family: RobotoLight;
--date-header-font-size: 16px;
--date-header-font-weight: initial;
--date-header-color: #3C3C3C;
--date-days-font-family: RobotoLight;
--date-days-font-size: 16px;
--date-days-font-weight: initial;
--date-days-color: #B1B1B1;
--date-calendar-font-family: RobotoLight;
--date-calendar-font-size: 16px;
--date-calendar-font-weight: initial;
--date-calendar-color: #3C3C3C;
--date-separator-color: #000000;
--date-calendar-inactive-color: #CACACA;
--date-calendar-highlight-background-color: #00ABF0;
--date-calendar-highlight-color: #ffffff;
--input-background-color: #fdfdfd;
--input-color: #3C3C3C;
--input-font-size: 14px;
--input-font-family: RobotoLight;
--input-font-weight: 400;
--input-selection-color: #ffffff;
--input-selection-background-color: #00ABF0;
--time-icon-up: url(../pics/system/controls/iq-select-time/arrow_up_black.svg);
--time-icon-up-highlight: url(../pics/system/controls/iq-select-time/arrow_up_white.svg);
--time-icon-down: url(../pics/system/controls/iq-select-time/arrow_down_black.svg);
--time-icon-down-highlight: url(../pics/system/controls/iq-select-time/arrow_down_white.svg);
--duration-select-box-icon: url(../pics/system/controls/iq-select-box/menu_icon.svg);

Trend Zoom

--button-background-color: #fdfdfd;
 --button-border-color: rgba(60, 60, 60, 0.7);
 --button-border-width: 1px;
 --button-border-radius: 4px;
 --button-shadow-color: rgba(60, 60, 60, 0.2);
 --button-icon-color: #000000;
--button-hover-background-color: #00ABF0;
--button-hover-icon-color: #ffffff;
--button-hover-border-color: #00ABF0;
--button-margin: 8px;
--button-initial-size: 40px;
--icon-size: 24px;
--locked-opacity: var(--iq-locked-opacity);

17. Recipes Manager And Recipe Widgets

This chapter describes how to use the recipe manager to define recipe templates and the recipe widgets: recipe select or recipe list, recipe controller and recipe edit.

The recipe system is used to store machine- or production relevant setting parameters for the later reuse. For this purpose, current process- and status values (items) can be saved from the PLC in a recipe ("capture") or later written back from the recipe to the PLC ("apply").

The recipe system is based on templates which define the PLC variables to be saved and restored back by the recipe and additional metadata.

Table 43. Application examples of recipe templates

Template

Designation

Description

Template 1

Machine configuration

Saves all values of a machine configuration

Template 2

Article

Saves all values of machine setting to produce a specific product

Template 3

Palletizer

Saves all values of machine setting for a device or part of the machine

The use of recipes in the WebIQ system consists of the following components:

Recipe Template Manager:
Define Recipe Templates, i.e. Items to be saved and freely definable meta information. The meta information contains additional information to describe the recipe, e.g. to identify a particular article like art.no., production notes etc.

Recipe Widgets:
within the HMI application:

Recipe-Select: The user can select a recipe by name, e.g. for the production of a particular article.

Recipe-Controller: The user can select certain actions for the selected recipe set:

  • Capture (read values from the PLC)

  • Apply (write values to the PLC)

  • Edit (edit values in the recipe-edit widget)

  • New (create new recipe and capture values)

  • Duplicate (duplicate existing recipe with new name)

Recipe-Edit: Automatically generated table form for displaying and editing recipe items and metadata.

Any number of recipe templates can be used in a HMI application and each template is able to store any number of data records as recipes.

17.1. Define Recipe Templates

Recipe Templates consists of a unique name and definable metadata, which are used to document and describe the product represented by the recipe, as well as a list of items which are exchanged with the PLC when loading or saving a recipe.

To define a recipe template click the icon recipe icon on the launch bar or choose the entry "Recipe Template Manager" in the [Project Dashboard].

recipe manager
Figure 147. Example of a recipe template within the Recipe-Template Manager

Legend

1 Selected Recipe template 2 Navigate through Recipe templates, add a new template or delete a template 3 Name of Meta Data item 4 Type of Meta Data item 5 Add, edit or delete Meta Data item 6 Add or delete item 7 List of used items of the selected recipe

17.2. Recipe widgets

Once a recipe template has been defined, recipes based on this template can be used in the HMI by applying the appropriate recipe widgets:

17.2.1. Recipe Select Widget and Recipe Table Widget

Serves to select a recipe. The recipe-select widget works as a select box with auto-complete, so the recipe you want can be easily found.

As an alternative the Recipe Table widget can be used for recipe selection from V2.11. The functionality is similar, but all existing recipes are displayed in a scrollable list. The Recipe-Table Widget has a search field for quick search of recipe names with wildcards ('_' single character, '%' multiple characters).

The other widgets, Recipe Controller and Recipe Edit, require a reference to the Recipe Select widget within the application, as their function has to refer to a selected recipe. The configuration settings of the Recipe Select widgets are done like as for all controls within the Configuration Cockpit on the right side.

Details about the configuration and styling of the recipe widgets can be found in the overview of the widgets

17.2.2. Recipe Controller Widget

This widget provides functionality for editing, loading and saving recipes. The Recipe Controller widget consists of buttons with individual functions for the operation of the HMI:

Add: Creates a new recipe and saves the current process variables (capture)

Duplicate: Duplicates an already saved recipe to a new name

Remove: Deletes the selected recipe

Edit: Edit mode of a referenced Recipe Edit widget, the recipe values and meta data can be edited and saved into the recipe. They will not be applied to the PLC!

Capture: Saves the current process image as a new version of the recipe. If no recipe is selected, Capture creates a new recipe. In this case the user is prompted to insert the new name.

Apply: Loads the selected recipe into the process image of the PLC.

Each of these buttons can be shown or hidden via the configuration. The Recipe Controller widget requires a reference to a Recipe Select widget because a recipe must be selected before applying a function. The configuration settings of the Recipe Select widgets are done like as for all controls within the Configuration Cockpit on the right side.

Details about the configuration and styling of the recipe widgets can be found in the overview of the widgets

17.2.3. Recipe Edit Widget

This widget provides functions for editing recipes. The widget displays all metadata as well as process values (items) in tabular form. Via the button "Edit" (of a corresponding recipe-controller widget), all values within the table grid can be edited and the modifications are stored by pressing the „apply”- button at the end of the edit table. By pressing the “cancel” button the modifications are discarded.

The reference for the Recipe Edit widget to the Recipe Select and Recipe Controller: is given by the configuration settings of the _Recipe Controller!
recipe editor
Figure 148. Example of an application with Recipe Widgets

LEGEND

1 Recipe-Select widget to select a recipe

2 Recipe-Controller to select options

3 Recipe-Edit widget table editor

4 Apply/ Cancel buttons

Details about the configuration and styling of the recipe widgets can be found in the overview of the widgets

17.2.4. UI Actions For Recipes

Some actions of the Recipe Controller widget are also available as UI actions, so you can use them alternatively with buttons:

recipe-add

recipe-apply

recipe-capture

(see also [Use UI-Actions])

18. Package Manager

This chapter describes in detail how you can extend and manage WebIQ Designer with additional features like widgets, themes and starter HMI projects (project templates).

18.1. Function of the Package Manager

WebIQ has an integrated package manager that can be used to add features and custom elements. The Package Manager has an integrated version control and is very well suited to add and update customer-specific features such as widgets, themes, templates and starter HMI projects (project templates) to your HMI project.

The 'Visual' package, which is installed by default for all HMI projects, contains the web framework from WebIQ (visuals.js or visuals.min.js) and the library with the WebIQ standard widgets (controls-bundle.js or controls-bundle.min.js). The update mechanism of the Package Manager also makes it possible to update any HMI project to a new version.

The Packages can contain any of the following types:

  • Widgets or Widgets libraries (package type "widgets")

  • Tthemes (package type "themes")

  • Custom stylings, custom templates (package type "templates")

  • Scripts and JavaScript modules (package type "scripts")

  • Images and Resources, e.g. Symbol and/ or icon libraries (package type "images")

18.2. View And Update Packages

Click the icon Package Manager in the 'Layout Manager'. Functions are:

  • See the installed packages, install-/ uninstall packages

  • Update the installed packages

  • Upload additional and/or custom packages

package manager1
Figure 149. Package Manager Displaying A Installed Package Which Has To Be Updated

LEGEND

1 Tab With Installed Packages

2 Tab With Available Packages

3 Tab With Missing Packages

4 Name Of The Package

5 Version Of The Package

6 Status Of The Package (see below)

7 Status Message (only visible if the status is "Has-To-Be-Updated" or "Error")

8 Type Of The Package

9 Icon Of The Distributor Of The Package

10 Description Of The Package

11 Button "Update" (only visible if the status is "Has-To-Be-Updated")

12 Button "Reload packages" in order to reload the list of packages

13 Button "Upload packages" in order to upload additional / custom packages

The package can have the following status

  • Status Updated The package is up-to-date

  • Status Needs Update The package has to be updated

  • Status Error The package isn’t compatible or has an error, e.g. contains an element that is already contained in the HMI project

18.3. WebIQ Version update

If you have updated WebIQ to a newer version, your existing HMI projects must also be updated. This is done by updating the standard pre-installed "visuals" package.

When loading an HMI project based on an older WebIQ version, you will always be prompted to update it to the installed version. Editing projects created with a previous version of WebIQ is not possible with a later version of WebIQ Designer without updating them.

If you want to maintain HMI projects with different versions on your development system, you must have the different WebIQ Designer versions installed on your computer. You can find information about this in the MyWebIQ documentation area on our website under: 'Multiple Parallel Instances of WebIQ Designer'.

18.4. Upload, Install and Uninstall Packages

On the tab "Available" or "Missing" you can upload and install additional packages. There you can

  • See the available or missing packages

  • Upload and install additional / custom packages

package manager2
Figure 150. Package Manager Displaying A List Of Available Packages

LEGEND

1 Name Of The Package

2 Version Of The Package

3 Status Of The Package (see below)

4 Status Message (only visible if the status is "Has-To-Be-Updated" or "Error")

5 Type Of The Package

6 Description Of The Package

7 Icon Of The Distributor Of The Package

8 Button "Install" (only visible if the status isn’t "Error"), Button "Uninstall", if the package is already installed.

Uninstalling packages is only available from WebIQ version V2.11.1. Therefore, the "Uninstall" button only appears for packages installed with this or a later version of WebIQ.

The package can have the following status

  • Status Updated The package is up-to-date

  • Status Error The package isn’t compatible or has an error, e.g. contains an element that is already contained in the HMI project

Before you can add a package to your HMI project, you have to upload it first. Please proceed as follows if you want to upload and install an additional or a custom package:

  1. Go to the Package Manager

  2. Open tab "Available" or "Missing"

  3. Press the button "Upload packages"

  4. The file dialog appears

  5. Select the additional/custom package (zip file)

  6. Upload the desired package to the list of available packages

  7. Press the button "Install" to install the corresponding package (WebIQ will install the package automatically if the package is missing).

Packages always come as a zip-file. The zip file may not be unpacked and/or changed.

19. Simulate Process Values

This chapter describes in detail how you can simulate process values within the HMI/SCADA Toolbox WebIQ in order to evaluate or to demonstrate your web HMI without a connected PLC.

 

19.1. Simulation Server

WebIQ Server has a integrated internal variable server by default in order to simulate any process variables. You can use the functionality of the internal variable server in the item manager if you select internal as data source in the field IO Handler. In this case all parameters of the section SIMULATION can be used.

The content of the field IO Handler is case sensitive. As soon as you define an item with the internal variable server as data source, an internal variable is created in the server WebIQ Server.

19.2. Functions And Parameters

WebIQ offers the following simulation functions

FUNCTION FORMULA TYPE PARAMETER DESCRIPTION

storage

none

All

none

Creates an internal variable that is used exclusively for storing a value (no simulation functionality)

increment

i=i+1

boolean
int
double

none

Generates an internal variable that is continuously incremented by the value 1 within a defined interval until the maximum value is reached. When the maximum value is reached, the variable returns to the minimum value.

decrement

i=i-1

boolean
int
double

Generates an internal variable that is continuously decremented by the value 1 within a defined interval until the minimal value is reached. When the minimal value is reached, the variable returns to the maximum value.

random

i=random(min,max)

boolean
int
double

none

Genrates an internal variable with a random value between minimum and maximun

sine

i=sin(t)

double

none

Generates an internal variable that represents a sine between minimal and maximum value

cosine

i=cos(t)

double

none

Generates an internal variable that represents a cosine between minimal and maximum value

triangle

i=triangle(t)

boolean
int
double

x = step width

Generates an internal variable that represents a triangle function between minimal and maximum using x as increment/decrement for each step

time

i=system-time

int
double
string

none

Generates an internal variable that contains the current system time (UNIX timestamp)

lastalarm

i=index(last-alarm)

boolean
int
double
string

none

Generates an internal variable that contains the index of the latest active alarm. The boolean version of this function is true if an alarm is active.

alarmcount

i=#(current-alarms-with-group(g))

boolean
int
double
string

p = g
g = identifier of alarm group

Generates an internal variable that contains the number of active alarms within one alarm group. The boolean version of this function is true if such an alarm is active.

usercount

i=#(current-clients)

boolean
int
double
string

none

Generates an internal variable that contains the number of current clients. The boolean version of this function is true if a user is logged in.

version

i=version(WebIQ Server)

string

none

Generates an internal variable that contains the version of WebIQ Server as a string

alarmclass

i=class(last-alarm-of-group(g))

boolean
int
double
string

p = g
g = identifier of alarm group

Generates an internal variable that contains the class of the latest active alarm as a number (2 = alarm, 1 = warning, 0 = info) for group g. The boolean version of this function is true if such an alarm is active.

monoflop

i=monoflop(t)

boolean
int
double
string

none

Generates an internal variable with a monoflop function. The value of the variable is reset (false/0/empty string) if it is not written to within its interval.

alarmclasshigh

i=highest-class(current-alarms-of-group(g))

boolean
int
double
string

p = g
g = identifier of alarm group

Generates an internal variable that contains the highest alarm class of the current alarms of group p as a number. The boolean version of this function is true if such an alarm is active.

randomact

i=random(i-x,i+x)

boolean
int
double

p = x

Generates an internal variable with the value i and a random perturbation between i-x and i+x

ramp

distance(t) = k(t) - i(t-1) i(t)=i(t-1) + min(x, abs(distance(t))) * sign(distance(t))

int
double

p = k,x
i.e. p = extruder.drive.set,5

Generates an internal variable which follows the value of process item k with a step size of x

randomramp

distance(t) = k(t) - i(t-1) i(t)=i(t-1) + min(x1, abs(distance(t))) * sign(distance(t)) + random(-x2, x2)

int
double

p = k,x1,x2
i.e. p = extruder.drive.set,5,2

Generates an internal variable which follows the value of process item k with step size of x1 and which has a random perturbation between -x2 and x2

saw

i=saw(t)

boolean
int
double

p = x
x = stepsize

Generates an internal variable that represents a saw-function with the step size x

alarmclass2

i=has-class(current-alarms-with-group(g), warning)

boolean
int
double
string

p = g
g = identifier of alarm group

Generates an internal variable that verifies if the current alarms contains an alarm with class warning or higher

randomact2

i(t)=k(t) + random(-x,x)

boolean
int
double

p = k,x
i.e. p = extruder.drive.set,2

Generates an internal variable which follows the value of process item k with a random perturbation between i-x and i+x

20. Remote WebIQ System Manager

This function is used for the remote configuration of WebIQ instances, usually runtime systems within a network. WebIQ instances are found on the network through a network scan using UPNP and allow the user to connect to those instances and allow for uploading and/or downloading of HMI projects, changing project autostart settings and changing the system settings of the remote instance.

20.1. Introduction

The Remote WebIQ Runtime Manager inside WebIQ Designer allows you to find other running WebIQ instances on your local network using UPNP („Universal Plug & Play“ using SSDP). Alternatively, e.g. if UPNP access is blocked in your network or you are in a public network, you can also select the remote WebIQ instance by entering the IP address and the port.

After you have found and selected the desired instance and entered the credentials, you will be connected to the remote system and can configure it. Specifically, you can configure and edit the following resources and parameters of the remote WebIQ system:

  • Up- and downloading HMI apps

  • Editing system users and credentials.

For security reasons, WebIQ Runtime instances always require a system user so that they can be configured. To do this, before you access the remote system for the first time, you must create a system user with the appropriate login information.

See the WebIQ-System-and-License-Manager chapter for more information to configure a system user for a WebIQ Runtime.

If you want to access a remote WebIQ Designer, you can create the system user in the WebIQ Designer settings (see chapter WebIQ Designer Settings).

  • Starting and stopping HMI projects and configuring 'auto start' of any HMI project

  • Editing, adding, and removing listen ports and configuring additional settings (listener IP, TLS encryption settings etc.)

Refer to [WebIQ-Designer-Settings], if you want to manage your local WebIQ Designer

20.2. Finding and Accessing the remote WebIQ System

When opening the WebIQ Remote System Manager a UPNP scan of your network is started and all WebIQ instances, that have been found in the network, will be displayed.

access remoteruntime viaprojlist
Figure 151. Accessing the Remote WebIQ System Manager via the project list menu

After clicking on the "Remote WebIQ System Manager" button the manager will be shown inside an overlay and a network scan will be started immediately:

connect remoteruntime env

LEGEND

1 Optional input field for IP-address of the remote system (Saves the last entries so that you can easily access them again.)

2 Optional enable TLS encryption for the connection to the remote system

3 Re-Scan network

4 List showing the remote WebIQ Systems that have been found

5 Properties of the selected remote WebIQ System

6 Connect/Cancel buttons

After selecting an entry you can now connect to the instance by clicking on the “Connect” button. For security reasons you are now prompted to enter the system credentials for the remote WebIQ Server. This is required for any remote system – even for a runtime WebIQ Server without any installed WebIQ Designer on the remote system. Refer to the section above ([system-user]).

To enable scanning, network discovery must be enabled on your system for the corresponding network. On Windows 10, it is enabled by default for networks with a private profile. If you are using a public network profile you might have to enable network discovery manually (see “Network Discovery”).

20.3. Logging Into the Remote System

For security reasons - since access can also take place remotely via a network - access to the remote system is secured via a user login.

For remote runtime systems, the system user credentials must be defined through WebIQ Runtime Manager, see chapter Setting Up Runtime Systems.

For remote WebIQ Designer Instances, the system user must be defined before trying to access the system remotely. See chapter [system-user].

20.4. Remote WebIQ System: Project Manager, Settings etc.

When the connection to the remote WebIQ System has been established, a new overlay dialog is shown with the following options:

  • Project Manager: up- and downloading of apps, starting and stopping apps, configuring auto start for apps

  • System Users: adding, editing and deleting of system users

  • Listen Ports (advanced): configuring WebSocket listener ports and encryption settings

20.4.1. Project Manager

Clicking on the first tab tab takes you to the Project Manager:

manage remoteruntime
Figure 152. Project Manager

LEGEND

1 Tab Menu: Project Manager

2 Buttons for the Local Development System (i.e. your system):

autostartlocapp Enabling/disabling auto start of the selected local app, the app will be started on the next start/power up of the system. In order to use the app directly, the Start button (see next position) must be selected at the same time.

30 Open the app in the default browser (only available if app was started before)

30 Starting the app in your local WebIQ Runtime instance – this will load the project into the webserver workspace

30 Stopping the local app – the project will be unloaded from the webserver

[NOTE] Several HMI projects can run simultaneously in one instance of WebIQ Runtime. For further information on Start/Stop see [start-stop].

30 Deleting the local app

30 Reloads the local view

3 Buttons for uploading apps from the local development environment to the remote WebIQ Server (“>”) and for downloading apps from the remote WebIQ Server to the local development environment (“<”)

4 Buttons for the Remote WebIQ Server:

global Open the app in the default browser (only available if app was started before)

autostartlocapp Enabling/disabling auto start of the selected remote app

start Starting the app in the remote WebIQ Runtime instance – this will load the project into the webserver workspace

stop Stopping the remote app – the project will be unloaded from the webserver

import Import: Uploading a HMI app as a ZIP project file to the remote instance

export Export: Downloading a HMI app as a ZIP project file from the remote instance

27 Deleting the remote app

27 Reloads the remote view

 

20.4.2. System Users

System users are user accounts for logging into WebIQ Designer or the WebIQ System & License Manager. After installation, the user "admin" is preset here with an automatically generated password that is stored on the local system. Therefore, no login is required when working locally with WebIQ Designer. If you want to access remotely via a network, a login with a system user account is required.

  • A login as a system user is required in the following cases:

  • Access via the Remote System Manager of another WebIQ instance

  • Access via the WebIQ WebSocket API by an external program, e.g. S/-Variable Importer, Alarm-List Importer, etc

  • Accessed by the WebIQ System & License Manager via a web browser

remote system users

LEGEND

1 Tab Menu: System Users

2 System user list including filter option

3 Buttons for adding a new system user and deleting the selected remote user (if applicable)

4 User detail area

20.4.3. Configuration of Listen Ports and Encryption

remote listen ports

LEGEND

1 Tab Menu: Listen Ports (advanced)

2 Listener List including filter option

3 Buttons for the listener configuration:

start Enabling the selected listener

stop Disabling the selected listener

add var Adding a new listener

27 Deleting the selected listener

4 Detailed Configuration:

To edit an existing listener, it must first be stopped

  • Listen Address: IP address or IP mask to listen to incoming connections (default = 0.0.0.0 = any)

  • Listen Port, default: 10123

  • Enabling TLS Encryption: since WebIQ uses standard TLS certificates for its built-in webserver, existing certificates can be installed.

  • Absolute or relative)* path to the TLS certificate file

  • Absolute or relative)* path to the TLS private key file

  • cipher list, string with negotiation security settings (optional)

  • Checkbox 'Optional': Listen Port is optional, it will be ignored if it could not be initialised during start

  • Checkbox 'Enabled': Enable this listener

)* from the installation directory '%PROGRAMFILES%/WebIQ/Server' for 64 Bit resp. '%PROGRAMFILES(X86)/WebIQ/Server' for 32 Bit installations

To enable a listener you just added click on start to enable it

This product includes software developed by the OpenSSL Project for use in the OpenSSL Toolkit (http://www.openssl.org/)

For more information about TLS encryption and TLS certificates, refer to the Runtime Configuration manual.

20.4.4. Log Settings

remote log settings

LEGEND

1 Log File Path: This defines the path to the log file on the system where the server is located.

2 Log File Size: Here you can set a maximum log file size.

3 Log File Severity: This defines the minimum severity that will be logged.

4 Console Out Severity: This defines the minimum severity that will be written to the console.

Log File Information

After the configured log file size has been reached the current log file will be renamed to ".old" at the end and a previously existing log file with an ".old" extension will be deleted before. Then a new log file will be written with the configured name.

The selected severity defines the minimum severity, i.e. when selecting a severity entry in the list all entries with a severity above will also be included.

The recommended severity setting is "Information" as it has a good balance of information and error output. To see or log all output - which might be helpful for debugging any specific errors relating to items - temporarily setting the severity to "trace" might be helpful, but will generate a lot more output.

21. WebIQ Settings

Describes how to configure System Settings and to activate/ manage License Keys

To manage the local WebIQ Server you can click on the 'gear' icon in the top bar.

Here you can find the all of the settings for your local WebIQ Server and additional areas for managing the server and installing licenses.

setting
Figure 153. Accessing the WebIQ Settings

21.1. Project Explorer

setting explorer
Figure 154. Settings Menu 1st Tab: Project Explorer

LEGEND

1 Tab menu to select different settings, here 'Project Explorer' is set

2 Project list with HMI Project Names and meta data

3 Function Buttons

30 Open the app in the default browser (only available if HMI Project has been started before)

autostartlocapp Enabling/disabling auto start of the HMI project, will be started on the next start/power up of your system.

30/ 30 Start-/ Stop the HMI project – the project will be unloaded from the webserver.

Several HMI projects can run simultaneously in one instance of the WebIQ Runtime. For further information on Start/ Stop see [start-stop].

30 Delete the selected HMI Project

30 Reloads the actual Project List

21.2. System User

System users are user accounts for logging into WebIQ Designer or the WebIQ System & License Manager. After installation, the user "admin" is preset here with an automatically generated password that is stored on the local system. Therefore, no login is required when working locally with the WebIQ Designer. If you want to access remotely via a network, a login via a system user is necessary.

A login as a system user is required in the following cases:

  • Access via the Remote System Manager of another WebIQ instance

  • Access via the WebIQ WebSocket API by an external program, e.g. S/-Variable Importer, Alarm-List Importer, etc

  • Accessed by the WebIQ Runtime Manager via a web browser

setting systemuser
Figure 155. Settings Menu 2nd Tab: System User

LEGEND

1 List with all available system user. The first entry 'admin' is default and shouldn’t be deleted

2 Function Buttons Add-/ Delete system user

3 Configuration parameters

4 Close and accept entries

21.3. Port, Listener and Encryption

With this setting, different listeners can be set for the WebIQ server. Multiple entries for different networks and with different ports can be used. The TLS encryption can also be selected per listener and thus use different certificates and encryptions on different networks.

setting listener
Figure 156. Settings Menu 3rd Tab: Listener and Excryption setting

LEGEND

1 List with all different Listeners

2 Function Buttons Start-/ Stop Listener, Add, Delete

3 Configuration parameters

  • Listen Address: IP address or IP mask to listen to incoming connections (default = 0.0.0.0 = any)

  • Listen Port, default: 10123

  • Enabling TLS Encryption: since WebIQ uses standard TLS certificates for its built-in webserver, existing certificates can be installed.

  • Absolute or relative)* path to the TLS certificate file

  • Absolute or relative)* path to the TLS private key file

  • cipher list, string with negotiation security settings (optional)

  • Checkbox 'Optional': Listen Port is optional, it will be ignored if it could not be initialised during start

  • Checkbox 'Enabled': Enable this listener

To edit an existing listener, it must first be stopped.
To enable a listener you have to click on start to enable it.

4 Close and accept entries

)* from the installation directory '%PROGRAMFILES%\WebIQ\Server' for 64 Bit resp. '%PROGRAMFILES(X86)\WebIQ\Server' for 32 Bit installations

This product includes software developed by the OpenSSL Project for use in the OpenSSL Toolkit (http://www.openssl.org/). For more information about TLS encryption and TLS certificates, refer to the Runtime Configuration manual.

21.4. Log Settings

setting log

LEGEND

1 Log Setting selection

2 Log File Path: This defines the absolute to the log file on the system where the server is located (normally %ProgramData%)

3 Log File Size: Here you can set a maximum log file size.

4 Log File Severity: This defines the minimum severity that will be logged. Trace is the lowest level, everything is displayed, Fatal is the highest, only fatal errors are displayed.

5 Console Out Severity: This defines the minimum severity that will be written to the console. Levels are the same as above

6 Apply entries

Log File Information

After the configured log file size has been reached the current log file will be renamed to ".old" at the end and a previously existing log file with an ".old" extension will be deleted before. Then a new log file will be written with the configured name.

The selected severity defines the minimum severity, i.e. when selecting a severity entry in the list all entries with a severity above will also be included.

The recommended severity setting is "Information" as it has a good balance of information and error output. To see or log all output - which might be helpful for debugging any specific errors relating to items - temporarily setting the severity to "trace" might be helpful, but will generate a lot more output.

21.5. Activation of WebIQ Designer Licenses (Including 30-Days-Free-Trial License)

WebIQ Designer floating licenses require online activation. If online activation is not possible because you either have no internet connection or your IT provider has blocked it, ask us for an offline (non-floating) license. However, please keep in mind that a non-floating license will be bound to your local device and cannot be shared with other users.

After downloading and starting WebIQ Designer for the first time you are automatically taken to the license activation form:

Here you have different options:

1 Online Activation: This is the default way for activating a WebIQ Designer license or a free trial license with a 'license key' which you have received via e-mail or in a delivery document. WebIQ uses these license keys since the release of WebIQ V2.11.

2 WebIQ Legacy Online Activation (license in MyWebIQ, WebIQ version 2.10 and below issued before March 2022).

3 Contact form to request a license

21.6. Online Activation

Now proceed by clicking on the "Online Activation" button, enter your license key in the input field and click on the Confirm button. This will retrieve license key information from the WebIQ licensing system on the internet and will display the license information:

Picture: License information.

Use the +/- buttons to add/remove the corresponding licenses, for multi-user licenses you can increment the number of licenses up to the maximum limit (see column 'Available'). Then click on the button with the checkbox sign on the right to activate the license.

The WebIQ licensing system allows the installation of multi-user licenses , i.e. a certain number of concurrent sessions, which is intended for organizing development team collaboration.

Confirm the dialog if you wish to enable this license, it will be enabled immediately. After the successful activation the list of current licenses will be shown.

LEGEND

1 License Key field

2 Available, shows the number of possible instances (only for online/ floating licenses!)

3 License type:

  • Online License, can be exchanged between computers

  • Offline License fixed bound to a computer

4 Type: Developer/ Runtime

5 Number of tag limit

6 Number of client (browser) windows which can be shown

7 Number of IO Handler (i.e. PLC interfaces)

8 Validity Period of the license )*

9 +/- buttons to select license/ increase number of instances )**

)* Online Designer License is usually a subscription that is automatically renewed every year for another year. Only the time until the end of the current year is displayed here.

)** Normally one instance is always selected. In certain cases, however, it is possible to allow multiple instances of a license on one PC, e.g. if several parallel WebIQ instances are installed, e.g. in a Docker container or something similar.

21.7. Online Activation of Legacy Licenses

If you are a Smart HMI customer and already have licenses available in your customer account MyWebIQ, or you have purchased your license before WebIQ V2.11 (March 2022), you have to choose this activation option.

Click on the 'WebIQ Legacy Online Activation' button and you will be able to login to the customer area MyWebIQ. After logging in the any available WebIQ Designer license of your customer area MyWebIQ will be automatically installed. If you have more than one license available in your customer area a dialog will be shown allowing you to select the license you wish to use.

21.8. Multi-User Licenses

When using a WebIQ Designer floating license, your computer must be online during activation as well as during normal work. When startin WebIQ Designer, the online access marks the license as "in use" and releases it again after the program has been closed. Then it can be used on another computer.

WebIQ Designer licenses can also be issued for multi-user operation, e.g. quantity = 3, i.e. up to 3 computers can use WebIQ Designer at the same time. A possible 4th user would be rejected and can only use WebIQ Designer when one of the other users has ended their session.

21.9. Floating Licenses For Offline Use

However, there are times when you know that you will be offline for X days and for those times you can checkout a floating license for offline use.

To do that click on the checkout button:

This will show a dialog that allows you to specify for how long the license should be checked out:

The checkout time is limited to up to 30 days. Please note that checked out licenses can neither be transferred to another system nor can the checkout time be reduced or the checkout revoked.

A checked out license will be shown with an ICON in the License Type column. This means the license has been irrevocably bound to the hardware and cannot be changed. On the right side the remaining time ("expires in") is shown. After the checked out license has expired, it will be automatically available as an Online License again with the symbol .

Picture. Checked out Offline license in the 'Manage License' menu.

 

22. Copyright

The HMI system WebIQ, the manuals and the video tutorials are protected by copyright. Utilization beyond the limits of copyright without consent of Smart HMI is prohibited and liable to prosecution. This includes copies, translations, microfilms, its input and its edition in electronical systems.

Technical data are used for product description and are not guaranteed properties in the legal sense.

Modifications - also in technical terms - reserved.

Copyright © 2023 Smart HMI GmbH, Grünstraße 36, 40667 Meerbusch, Germany

23. Feedback

Your opinion is important. We write our manuals in order to give you the best guidance using the HMI system WebIQ. If you want to send us a suggestion for improvement or if you want to report a bug please use the support form.

Support Form

24. How To Use This Manual

This manual is one pager HTML document.

table of contents

Use the table of contents on the left to discover the manual or to navigate directly to a topic.

Search For A Keyword

Search the entire handbook for a keyword by using the search function of your browser (for example, use the shortcut Ctrl + F).

Notes

I am a note.

Notes contain additional information or background information about the current section.

Tips

I am a tip.

Tips are useful information or hints that will help you to make the HMI system WebIQ easier to use.

Warnings

I am a warning.

Warnings are very important information that helps to avoid mistakes or problems. Read the warnings carefully!