Solutions For HMI Excellence

About This Manual

The Designer Manual describes how to use the 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 the WebIQ Designer by installing additional packages.

Preface

WebIQ is an HMI/SCADA Toolbox for industrial use on machines or digitized production environments, e.g. to operate and visualize machines or to record historical data etc. The system is based on HTML5 web technology and consists of a runtime server (WebIQ Server (Connect) and the central engineering tool WebIQ Designer including the web framework with widgets for designing the HMI .

With WebIQ Designer you can create, configure and design web HMIs and web apps. All configurations and parametrizations, e.g. PLC interface via e.g. OPC UA, historical data, messages and alarms, user rights, recipe templates, etc. are made via corresponding editors within WebIQ Designer.

Layouts and navigations of the HMI are created using the integrated HTML layout editor on the basis of about 40 standard widgets, which are included in the standard scope of delivery. The HTML layout editor allows it to be used on different target systems, e.g. Smartphone, tablet, stationary panels with different resolutions etc., because WebIQ supports the design of fully responsive HMIs or apps.

In addition to the standard elements, WebIQ can be easily extended with custom widgets or even HTML frameworks that can be loaded with the integrated Package Manager and parameterized with WebIQ Designer. Online localizable texts, fonts and unit switching are integrated for international use.

Appealing designs and state-of-the-art animations can be added as desired with the integrated CSS editor and own logic modules and UI Actions can be integrated into the HMI system with the JavaScript editor.

Most importantly, non-HTML experts can create web HMIs and web apps through the WebIQ Designer graphical design tool. 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.

Tip

Access To Online Documentation

We recommend that users of WebIQ are provided with access to the online version of the manual at their workplace.

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.

Warning

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. OVERVIEW: Things You Can Do

This section gives you an overview about things that you can do with or about tasks you want to proceed with the help of WebIQ Designer.

TASKS

MANAGER

DESCRIPTION

Manage Your HMI Projects

  • Project List

  • Project Dashboard

This chapter describes how you can administrate your HMI projects within WebIQ Designer.

CONNECT!

Process Data Interface And Data Items

  • IO Manager

  • Process Data Manager

This chapter describes how to configure the data interface, e.g. OPC-UA client and connect your HMI application to a PLC system using WebIQ Designer.

Manage Users And Access Groups

  • User Manager

This chapter describes how to create users and user groups and how to assign access rights

Use Alarms And Alarm Lists

  • Alarm Manager

This chapter describes how you can define alarms resp. messages, store them as historical alarms and display the correspondig messages within the HMI.

Use Recorder And Trend Display

  • Recorder Manager

This chapter describes how you can record process variables and display those as trend diagram within the HMI. The integrated data recorder supports either live trends as well as trends from historical data.

Use Recipes And Recipe Widgets

  • Recipe Template Manager

This chapter describes how to generate recipes templates and useful metadata such as 'article numbers', 'customer description' etc. which serve only for documentation. In applications recipe process values can be applied or captured.

Simulate Process Values

  • Process Data Manager

This chapter describes in detail how you can simulate process values within the HMI/SCADA Toolbox WebIQ in order to evaluate or demonstrate your web HMI without a connected PLC.

DESIGN!

Use Widgets

  • Layout Manager

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

Create HMIs With Multiple Views

  • Layout Manager

This chapter describes how you can create your HMI with views using panels within WebIQ Designer.

Layout Your HMI

  • Layout Manager

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

Style Your HMI

  • Layout Manager

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

Localize Your HMI

  • Localization Manager

This chapter describes in detail how you can localize your HMI within WebIQ Designer.

Use UI-Actions

  • Layout Manager

This chapter describes in detail how you can define UI Actions in order to implement some simple behaviors within WebIQ Designer.

Integrated Code Editor

  • Code Manager

This chapter describes in detail how you can use scripting in order to add capabilities and features to your web HMI or to modify the visual appearance of the widgets.

APPLICATION!

Publish Your Web HMI

  • Publish/Publish a Copy/Publish And Close

This chapter describes in detail how you can publish your Web HMI or Web App.

Manage Packages

  • Package Manager

This chapter describes in detail how you can extend the HMI/SCADA Toolbox WebIQ with additional packages for widgets, themes and starter apps.

Adjust App Settings

  • App Settings

This chapter describes in detail how you can change app settings like Project Settings within the HMI/SCADA Toolbox WebIQ

2. Manage Your HMI Projects

This chapter describes in detail how you can administrate your HMI projects within WebIQ Designer.

2.1. How It Works

Before creating an HMI project it is useful to understand how WebIQ manages the HMI projects. You especially have to understand the difference between the development environment and the target runtime, as well as the difference between the workspace and the project directory.

webiq architecture
Figure 1. Architecture of the web HMI/SCADA System WebIQ

2.1.1. Development Environment vs. Target Runtime

We distinguish between the development environment, where you create and edit your Web HMI or Web App, and the target runtime, where you run the finalized Web HMI or Web App (see image above). Normally these are two different installations, each with an associated license key. The development environment is usually installed on a development computer (PC or laptop) and requires a developer license. The core of the development environment is made up of WebIQ Designer and WebIQ Server (Connect). In contrast, the runtime system runs on a machine or an embbedded device without WebIQ Designer. It only requires WebIQ Server (Connect) and a runtime license.

Note

You will find further information about the licenses in the corresponding manual "WebIQ licensing".

After you finalized your HMI in the development environment, you have to upload it to the target runtime. For this you can use the export function of WebIQ Designer (see Starting Point Project List). You can easily transfer the exported zip file containing the HMI project to the runtime system and upload it there - or use the included uploaded functionality of WebIQ Designer in case the target runtime system can be reached via the network.

Since the HMI project is only a directory with different HTML, CSS and script files, the transfer of the HMI project from the development environment to the target runtime is a simple copy and paste operation which requires no installation or compilation on or for the target system.

2.1.2. Project Directory vs. Workspace Directory

The development environment WebIQ Designer organizes your HMI projects into corresponding project directories. The root directory of the project directories will be created during the installation of WebIQ Server (Connect). Every HMI project has its own subdirectory within the project directory which is named according to the project settings (see image below).

Before you can edit an HMI project, you have to load it into the workspace directory by using the "Load" button. This is a very important policy of WebIQ Designer because it never uses the corresponding subdirectory in the project directory if you edit an HMI project. WebIQ Designer only works on the workspace directory which is also located in the project directory (see the project directory above) in order to avoid the editing of a live system. The currently loaded HMI project is displayed on top of the project list (loaded workspace). If there is no project displayed, the workspace is empty. In that case you need to load a project or create a new one.

2.1.3. Save vs. Publish

You also have to distinguish between saving and publishing. If you press Save, then the current status of the HMI project which you are editing in WebIQ Designer will be saved to the workspace directory.

If you use the function Publish the HMI project will be written back from the workspace directory into the project directory (= published).

2.2. Starting Point Project List

The project list is your entry point to WebIQ Designer and offers the following functions:

  • See a list of your existing HMI projects

  • Load a desired HMI project into the workspace

  • Create a new HMI project

  • Import / export HMI projects

  • Delete (obsolete) HMI projects

  • Run HMI projects

workspace1
Figure 2. Project list which shows all available projects in the project directory

LEGEND

1 Project list with all available projects in the project directory (in the screenshot it only contains one project)

2 Display of the project which is loaded in the workspace directory (currently no project has been loaded)

3 Project card of the HMI project "WebIQ Tutorial"

4 Button to create a new HMI project

5 Button to import an HMI project

6 Button to refresh the project list

7 Button to open the Remote Manager

8 Button to view the tutorial (link to the tutorial in the Smart HMI customer area)

9 Button to create a new project (same as 4)

10 Button to import a project (same as 5)

11 Button to open the development server settings

12 About screen (information about version, license information)

13 Button to open the help menu

The project list gives you an overview of all HMI projects within your project directory. On the project card you can see the following information which helps you to identify your HMI project:

  • Name of the HMI project

  • Optional image that represents your HMI project

  • Name of the folder within the project directory

  • Version of the HMI project

  • Date and timestamp of the last edit

  • Login name of the last editor

  • Optional multiline description of the HMI project

  • Icon indicating that a package update is neccesary

The version number, date-/timestamp of the last edit and the last editor will be added automatically by WebIQ Designer. The name of the HMI project, name of the project folder and further settings will be defined when you create a new HMI project. They can be modified in the project settings.

If you hover the mouse over the box all additional functions will be displayed in the project card (see project card below).

workspace2
Figure 3. Appearance of the project card

LEGEND

1 Indicator: app is currently running on the development server

2 Indicator: app will be started automatically when the development server starts

3 Indicator: app contains packages that have to be updated

workspace2a
Figure 4. Appearance of the project card on mouse-over

LEGEND

1 Button to start the corresponding HMI project app in the development server

2 Button to export the corresponding HMI project app as a ZIP file

3 Button to delete the corresponding HMI project

4 Button to load the corresponding HMI project into the WebIQ Designer workspace

workspace2b
Figure 5. Appearance of the project card on mouse-over with a running project

LEGEND

1 Button to stop the corresponding HMI project app in the development server

2 Button open the app in the default browser

WebIQ Designer automatically lists all HMI projects which are located in the project directory within the project list (see project list above). All of the listed HMI projects which are compatible with the current version of WebIQ Designer can be accessed from here. If they cannot be accessed it is highly likely that they require an update.

Warning

If the icon Button Play appears on the right top corner of your HMI project, it indicates that one of the packages used in the project is not up-to-date and has to be updated in the app.

In this case you have to load the corresponding project into the workspace and go to the Package Manager (see Manage Packages) in order to update the package.

2.2.1. Loading An HMI Project

By hovering your mouse over a project in your Project List, all options that are available appear. Click on the "Load" button to load an HMI project into the workspace.

Important

In case the workspace is not empty, WebIQ Designer will display a warning message and ask for confirmation regarding discarding all content currently inside the workspace.

project selected
Figure 6. Loading or deleting an HMI project from the Project List

After the confirmation WebIQ Designer will remove the old HMI project, which was edited previously, from the workspace and copy the desired HMI project into the workspace directory.

Important

The loading of an HMI project may take some time due to the numerous file operations which are necessary. WebIQ Designer will display a dialog with a corresponding progress indication.

spinner
Figure 7. Feedback During The Loading Of An HMI Project

2.2.2. Deleting An HMI Project

Similarly you can delete the corresponding HMI project by pressing the "delete" button on project card. In this case WebIQ Designer will display a warning message and ask for confirmation. When you confirm the whole project folder in the project directory will be deleted.

2.2.3. Creating A New HMI Project

You can create a new HMI project if you press the button button plus at the left edge of the project list.

The dialog "New Project" appears (see image below). Here you can define the settings of your HMI project.

new hmi project
Figure 8. Dialog "New Project"

The dialog allows to define the following settings:

Main Settings (Mandatory)

App Title: Name of your HMI project (mandatory input)

Folder Name: Name of the folder within the project directory where the HMI project will be stored (mandatory input)

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

App Picture: upload an image file which visually represents your HMI project within the project list

Description: Optional multiline input of an HMI project’s description

Note

A favicon is a small, iconic image that represents your HMI project. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators.

User Settings (Mandatory)

Here, you have to specify a (first) user for your Web HMI.

Username: Name of the user (mandatory input)

Password: Password for this user (mandatory input)

Repeat Password: Repetition of the passowrd (mantadory input)

Important

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

We recommend to create an admin user, which is used exclusively in software development. Later, additional users with different user rights (operator, supervisor, service, etc.) can be added via the User Manager.

Starter (Optional)

You can include additional starter packages into your HMI project.

2.2.4. Importing An HMI Project

You can import any valid HMI project into the project directory or project list respectively by pressing the "import" icon on the left bar. In this case WebIQ Designer will display a file dialog in order to select the HMI project, which you want to import into the project directroy.

2.2.5. Exporting An HMI Project

You can export an HMI project from the project list by pressing the "export" button on project card. In this case WebIQ Designer will display a file dialog where you can select the target directory of the export and where you can insert the name of the HMI project, which you want to export. The WebIQ Designer will export the HMI project as a zip-file.

2.2.6. Running An HMI Project

You can start arbitrary web HMIs and run it in any web browser, such as Chrome, Firefox, IE or on a mobile device, while you’re developing simultaneously another web HMI within WebIQ Designer. This is possible because WebIQ Server (Connect) has the capability to load and run several web HMIs in parallel.

project list start
Figure 9. Run multipe web HMIs

Proceed the following steps to start a web HMI in parallel:

  1. You can run an web HMI in parallel, if you move the mouse pointer over the corresponding HMI project and press the button Button Play which appears on mouse entry.

    The icon Button Play appears and indicates that the web HMI is running within WebIQ Server (Connect)

  2. You can display a running web HMI in your standard web browser, if you press the button Button Play which appears on mouse entry.

  3. If you want to stop a running web HMI, just press the button Button Play. The icon Button Play disappears

2.3. Project Dashboard

The Project Dashboard gives an overview of all functional areas (Manager Tools) of WebIQ Designer. Here you can directly access all Manager tools to edit your HMI. The functional areas are grouped as follows:

Server Configuration Functions

  • IO Manager: Configuration of the gateway to any PLCs or data sources

  • Process Data Manager: Management of process and virtual variables

  • User Manager: Set up of users, user groups and access groups

  • Alarm Manager: Setup of alarm events and alarms

  • Recorder Manager: Definition of item recordings and trends

  • Recipe Template Manager: Management of recipes and recipe templates (not yet supported with the current version of WebIQ)

HMI Design Functions

  • Layout Manager: Designing the layout of the HMI

  • Localization Manager: Definition of languages, units, date and time formats

  • Code Manager: Create LocalScript, UI Actions and CSS stylesheets

Other Functions

  • Publish: Publishing the Web HMI/Web App in the project directory without removing it from the workspace directory (see below)

  • App Settings: Define or change App settings

  • Package Manager: Administrate functional add-ons, such as custom widgets, custom themes and custom starters

project dashboard
Figure 10. List functional areas (Project Dashboard)

2.4. Publish Your Web HMI

Publishing the Web HMI or Web App means that the content of the workspace is written back into the project directory of the development environment. You can choose between the following two functions:

  • Publish

  • Publish and Close

  • Publish a Copy

Publish: means the Web HMI is written back to the project directory, but remains loaded in the workspace directory. The project dashboard is kept displayed. Choose this function if you want to publish the Web HMI / Web App and continue editing afterwards.

Publish and Close: means the Web HMI is written back to the project directory and is also removed from the working directory. WebIQ Designer switches back to the project list. Choose this function if you want to publish the Web HMI / Web App and to empty the workspace in order to load a new Web HMI/Web App.

Publish a Copy: the Web HMI is written back to a new project directory with the name specified while you continue working on the current version which remains unchanged in the local project directory.

2.5. Adjust App Settings

The "App Settings" function allows you to edit the settings for the corresponding Web HMI / Web app. You can adjust the following settings:

Project Settings

App Title: Name of your HMI project

App Picture: Image which visually represents your HMI project within the project list

Description: Description of the Web HMI/Web App

Overlay Keyboard

Enabled: Enables the automatic displaying of the built-in overlay keyboard for alphanumeric inputs. The keyboard will appear if the user want to insert an alphanumeric input into an input field.

Tip

Enable this function if you don’t have a hardware keyboard.

Allow layout selection: Enables the selection of different keyboard layouts (i.e. the German QWERTZ layout or the English QWERTY layout)

overlay keyboard
Figure 11. Overlay Keyboard For Alphanumeric Input

Auto Login

Auto-Loging: Enables the automatic login of the following user if you open the Web HMI / Web App

Tip

This function can be very useful for the following two cases

  • You want to avoid having to login for every preview of the Web HMI while you are editing / testing your Web HMI

  • You are managing your system with a default user or default user level which requires no login

Username: Name of the corresponding user for auto-login

Password: Password of the corresponding user for auto-login

Warning

The Auto-Login authentication data is stored in plain text. Use a password only for development and testing!

3. Process Data Interface And Data Items

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.

3.1. How It works

The runtime server WebIQ Server (Connect) gets its variables (items) over a scalable interface that is called “IO Handler”. An “IO Handler” is a client interface which gets its data from the server by a subscribe/push procedure that means, the client “subscribes” the required data and the server “pushes” values every time when they are changed.

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

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

IO Handler (OPC-UA)

IO Handlers are dynamically loadable libraries (.DDL in Windows or .so in LINUX systems) and can be loaded by the WebIQ Server (Connect).

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.

Note

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.

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

Note

Refer to the Developer Manual (section "Documentation" of your MyWebIQ space) - IO Handler SDK, if you want to develop your own IO Handler.

3.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 Connect 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 12. 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)

3.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. When WebIQ Server (Connect) is running on Linux, use ./ioHandlerOPC.so instead.

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

Tip

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.

After configuring the connection to your OPC UA server (or the demo server provided by Smart HMI) you can click on button "Apply". WebIQ Server (Connect) will immediately connect to the specified server.

3.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 13. Connection status

LEGEND

1 Connected

2 Connecting

3 Trying to recover a connection

4 Disconnected, e.g. when the IOHandler has been disabled

3.2.3. ‘Internal’ variable server

By default an internal variable server is predefined, which provides the application with local items, which are stored within WebIQ Server (Connect) runtime server. The ‘Internal’ 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 Server (Connect) server

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

Note
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!

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

3.3.1. Browse to select OPC-UA variables

Clicking on the 'Browse' button opens the browse overlay panel:

process data browse
Figure 15. 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 16. Creating a variable or method from the leaf node with the option to change the alias
process data browse var2
Figure 17. 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".

3.3.2. Selection Tabs in the Process Data Manager

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.

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

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

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

Note

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.

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

The 'Virtual Items' feature will be available and supported in future versions of WebIQ.

'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

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

Section 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

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

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

3.6. ARRAY

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

3.7. SOURCE

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)

3.8. DATA

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 1. 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.
Note
You can also use localization variables here
  • 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”.

Note
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

3.9. LIMITS

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.

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

3.10. ACCESS

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.

3.11. ADVANCED

This area is used to define more advanced process value properties.

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

3.12. SIMULATION

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.

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

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

4. Use Widgets

This chapter describes how you can use widgets which are provided by the HMI/SCADA Toolbox WebIQ within WebIQ Designer. Refer to the documentation "WebIQ Reference - WebIQ Widgets Configuration", if you want to get a current list of available widgets including the settings for each widget.

4.1. Select A Widget

If you open the layout manager you will get a WYSIWYG representation of your HMI. You have access to all the building blocks which are necessary to create your HMI, such as widgets, container, panels, etc.

In order to select a widget, you can just click on it

  • in the 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 - in case that it is currently displayed - the widget will get a light-blue-colored hightlighting.

The selection of a container, panel or overlay is quite similar.

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

The HMI which you see in the Layout Editor looks exactly like the result when you publish the HMI at this point (WYSIWYG = "What You See Is What You Get"). It is not necessary to compile the HMI runtime.

The only difference is that WebIQ allows to interact with widgets of the HMI (selecting, dragging, dropping, etc.).

4.2. Configure A Widget

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.

Note

Refer to the documentation "WebIQ Reference - WebIQ Widgets Configuration" to get a current list of available widgets including the settings for each widget.

layout editor2
Figure 20. 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.

Hierarchy Cockpit (keyboard shortcut: alt + 3)

Click on the Hierarchy Cockpit (third tab on the top right corner) to display the position of the selected widget within the <div> structure. This structure defines the layout of the view, which contains the selected widget. It is usually built with nested containers.

Note

Refer to Layout Your HMI to get more information about layout and styling of widgets.

4.3. Initialize A Widget

In order to initialize a widget, drag the desired widget from the widget bar or widget overlay into the Layout Editor or into the Hierarchy Cockpit. It doen’t matter where you drag the widget to (Layout Editor or Hierarchy Cockpit) - choose the target thats suits you best.

Drop it into the container which should contain the corresponding widget. You can verify the target container and the target position of the widget in the container before you let it drop. The target container will be highlighted with a target mark in light-green in the Layout Editor and it will receive a light-green highlighting within the Hierarchy Cockpit. The position is indicated as a blue vertical or horizontal line.

The initialization of a container, panel or overlay is quite similar.

init widget1
Figure 21. Dragging the Widget into the Layout Editor
init widget2
Figure 22. Dragging the Widget into the Hierarchy Cockpit

4.4. Move A Widget

Probably, at some point you want to change the order of the widgets within a container, or you want to move a widget from one container to another. You can use drag and drop to do this. Pick the corresponding widget, drag it and drop it into the desired container, panel or overlay. It doen’t matter where you drag the widget: within the Layout Editor, within the Hierarchy Cockpit, from the Layout Editor to the Hierarchy Cockpit or vice-versa, choose the method which is the most suitable for you.

drag widget1
Figure 23. Dragging the Widget within the Layout Editor
drag widget2
Figure 24. 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, 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 overlay, 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, 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.

Tip

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, click the icon icon delete or use the keyboard shortcut DEL in order to delete the selected widget.

4.6. Export / Import A Widget

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

Select the corresponding widget or container, press the right mouse button and select the entry "Export" in the context menu. You will get a file dialog to save. The widget or the container wille 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 widget or container in the file dialog in order to import it.

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

5. Use 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.

5.1. 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 26. 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 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 27. Dialog "Configure Widget Template"

Right-click on the template in the windget list if you want to modify or delete the template.

template3
Figure 28. Right-Click On Template To Configure Or Delete The Template
Note

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.

5.2. 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 29. 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 30. 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 31. Example of using styled 'Composite' wWidgets "Pump Control" within the WebIQ Designer

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

Note

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 Process Data Interface And Data Items.

 

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.

5.4. 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 32. 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.

Tip

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 33. 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 34. 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 35. 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 36. Example Pump Composite Widget and Style Settings
pump example2
Figure 37. Style Settings: Set width of indicator line

5.5. 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 38. 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 39. 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

Note

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 40. 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 41. Example Configuration interface with’Attributes'
300
Figure 42. 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 43. 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 44. 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 45. 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 46. 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 dialogue appears as follows:

configure composite8
Figure 47. 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.

Note

You can undo a change in a code snippet with the "Undo" function. Place Snippet code in quotation marks.

Warning

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 48. Select the Class name Appearance dialogue of the 'iq-radial-gauge'
300
Figure 49. Select the 'warn' class and edit the Configure Condition dialogue to enable the warn state, if the throughput item is > 90

Further information about styling and condition styling can be found here: Conditional Styling

If you now open again the Snippet dialogue 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 50. 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'.

5.6. 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 51. Dragging the Existing Composite Widget "Pump Control" into the Layout Editor
init composite widget2
Figure 52. 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 53. The picture shows the simple hierarchy of the script example
module.run = function (self) {
    //Place your Code here
    var srcCtrl = shmi.ctrl('.pump1'),
        n = 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 */
    };
};

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

Note

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

5.8. 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 55. Demonstration Of Changing Composite Template

5.9. 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 56. Export a Composite Widget In Order To Re-Import It Anywhere Else
Warning

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.

6. Create HMIs With Multiple Views

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.

6.1. Use A Panel

You can also use panels if you are working in the layout manager. A panel gives you the ability to structure your HMI by dividing it into different views which the user can navigate through.

Therefore WebIQ offers the following panel types:

Screen Panel: The views are independent of each other and you need another additional widget like buttons to navigate between them

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

Tab Panel: The views are represented by tabs, which you can select by clicking on them

Tip

Panels work differently than containers. They do not automatically adjust their size to their contents or rather stretch when it is usually required to ensure that all contents are visible. You need to set at least a height on panels in order to make the panel’s contents visible. You can also use a scrollbar within a panel to guarantee access to all content. To do this you need to add a container within the panel, put its height and width to 100% and set the overflow setting Overflow-Y to Auto-Scrollbar or Scrollbar for the container.

Note

We are talking about "views" instead of "pages" in modern web applications, because the applications are "single page applications (SPA)". A SPA interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages, making the application behave similar like a desktop application.

Within the HMI / SCADA Toolbox WebIQ the whole HMI is retrieved with a single page load, only the process values are updated dynamically. The HMI can be separated in different views, which the user can navigate through. Structured content improves readability and accessibility of an application.

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 (working area in the middle) or in the Hierarchy Cockpit (right side). Similar to the widget 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 57. 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.

Note

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.

Note

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

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

Note

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.

Tip

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.

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

Note

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

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

Note

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.

6.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 61. View Manager Dialogue

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

6.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 2. 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 62. Define the action command SETVIEW to switch to a specific View in a Panel
Note

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
Tip

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.

Warning

Please pay attention to the spelling of the command (upper / lower cases, no spaces)!

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

Note

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

6.3. Use Responsive Menu

By default, WebIQ offers a very powerful widget that allows you to create a menu for navigation: the Responsive Menu widget. The name indicates that the menu has already implemented a sophisticated responsive behavior.

With the Responsive Menu, you can create any hierarchically sorted menu that allows you to navigate between views. You can also choose between two appearances for the menu:

  1. the classic Menu Bar with pull down menus (mostly useful for larger screen widths)

  2. the Burger Menu with a slide-in menu (typically used on smaller screen sizes and mobile devices)

You can even set for which screen size or media query which display should be displayed for the Responsive Menu

responsive menu2
responsive menu3
Figure 63. Two Appearances Of The Responsive Menu: Menu Bar (Above) And Burger Menu (Below)

The responsive menu contains two types of menu entries:

  • Sections: for creating submenus

  • Items: for creating a menu item

You can choose an UI-Action for the menu entry (details about the UI-Actions, see Use UI-Actions.).

Choose the UI-Action "setview" if you want to use the menu-entry for navigation. 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 show a dialog box.

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

This allows you to configure sub-dialogs (sidekick dialogs)

responsive menu4
Figure 64. Configuration Of A Menu-Entry For Setview

7. Layout Your HMI

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

7.1. How It Works

Many visualization systems place the widgets on a screen at a fixed position. The position of the 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 with the requirement to develop HMIs for different screen sizes and orientations, a new type of layout has evolved, which automatically positions widgets at runtime depending on the screen size and orientation. In web technology, this is called Responsive Design.

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

7.1.1. Layout Containers Matter

When you position a widget on a screen using an XY coordinate, the position is an attribute of the widget. Containers do not play any role and are not mandatory. With responsive design it works completely different: here containers play an essential role, because they define the layout. For this reason, the containers are called Layout Containers.

The widgets are not simply positioned on the screen. They are always inserted into a smart Layout Container. These containers have automatic Positioning Functions for the widgets, which are placed in the containers. And you can configure these functions by parameters in order to define the position of the widgets as you need. Sounds strange the first time, but it works great. With these layout containers you can create any responsive design.

Tip

The use of layout containers for the definition of the layout is a prerequisite for responsive design.

7.1.2. Understanding Layout Containers

How can a layout container be explained? The best way is to use the comprehensible image of a clothesline. Because that’s how a layout container works: it lines up the widgets like clothes on a clothesline.

clothesline
Figure 66. Horizontal Layout Container: Widgets Along a Clothesline
Note

In WebIQ, of course, the widgets are lined up quite precisely. The graphic above is for illustration purposes only. You also have many additional layout features - from alignment, to margins, to padding, to rotation - that allow you to create a completely custom layout. These layout functions are presented in detail below.

The clothesline defines the direction (Main Axis) how the widgets are lined up. There are two DIRECTIONS:

  • Horizontal

  • Vertical

Therefore WebIQ provides layout containers for horizontal and vertical direction. In case of a clothesline, you can distribute the clothes differently. You can line up the clothes from Left to Right (or vice versa), you can position them in the Middle or distribute them Evenly. The (automatic) positioning of widgets in a layout container works the same way. You just have to define the relevant parameter of the layout container for ALIGNMENT.

And another parallel between a clothesline and a layout container: if you hang a lot of clothes on the clothesline, then you need to push the individual pieces together. If the clothesline is very long, then you can pull the clothes far apart. The same is valid for the layout containers: you can specify this behaviour very precisely. You can specify

  • which widgets will be pushed together and by which factor (SHRINK)

  • which widgets will be pulled apart and by which factor (GROW)

  • which widgets will not be allowed to change their size

Last but not least another analogy to clotheslines: instead of pushing the clothes together you can hang them - if you have little space - on another clothesline below. In the Layout Container, this parameter is called "WRAP". This parameter causes the widgets of a narrow layout container to wrap and to be lined up on a second, third or further row (for a horizontal layout container) or column (for a vertical layout container) (see description below).

For one feature the image of the clothesline fails with the layout container, however: you can NEST layout containers together as you like. This way you can realize the most sophisticated dynamic layouts (more about this below).

7.1.3. Rethinking Layout

Unfortunately, you don’t get responsive design automatically. You require certain measures for this in advance. It starts with the fact that you - as the creator of an HMI - have to consider how the HMI should look on different screen sizes. WebIQ cannot do this work for you. But WebIQ provides you with the appropriate functions so that you can implement a dynamic layout for responsive design.

Despite responsive design it makes sense to make a note of the screen sizes and orientations that are most important to you. You will optimize your layout for your most important screen sizes, even though HMI may run on more screen sizes and orientations.

Note

You may find many ideas and hints about Responsive Design on the internet. Consulting a design specialist can be helpful if you are overwhelmed or want to save time.

You will realize that working with responsive design is unfamiliar at first. You need to adjust and gain experience with the new features. You will also have to rethink some of the familiar ways of doing layout. And please take into consideration: A responsive design that works from a smartphone in portrait mode up to a widescreen 24'' multi-touch panel is very challenging at the beginning.

But you should not despair because of that. Go step by step, choose simple tasks first and gradually unlock the magic of responsive design. We recommend that you start with simple layouts and a few screen sizes at the beginning.

7.2. Configuring Layout Containers

You will find all relevant parameters in the configuration cockpit of the Layout Container.

config layout container
Figure 67. Configuration Cockpit of Layout Container

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

LEGEND

1 Name of the widget (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 (horizontal alignment in case of a Horizontal Layout Container or vertical alignment in case of a Horizontal Layout Container)

5 Setting of the alignment along the cross axis (vertical alignment in case of a Horizontal Layout Container or horizontal alignment in case of a Horizontal Layout Container)

6 Switch for enabling wrapping

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

8 Access to the dialog for defining the lock conditions

All settings are described in detail below.

Note

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.

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

7.2.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
Warning

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

7.2.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 container (still respect min-width/max-width).

Icon "Stretch"

Icon "Stretch"

Stretch
Stretch
Warning

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.

7.2.4. Grow / Shrink

Attention, 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

Tip

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.

7.2.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 68. 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

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

Note

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 if you 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 usefull (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).

container mockup
Figure 69. Wireframe of an HMI structured with containers

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

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

Note

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.

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

7.4.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 postion method "Static" and a container with the desired layout flow if you want to create a responsive design für 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 71. 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 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.

Warning

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

Note

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 .

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

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

7.4.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 72. Example for the setting "Visibility"

7.4.7. Opacity

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

opacity
Figure 73. Example for the setting "Opacity"

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

Note

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.

Tip

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

Note

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

Note

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

7.4.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 75. 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.

Note

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"

Note

You can also insert negative values for margins or offsets.

box model configurater3
Figure 76. Highlighting of the Padding, Margin and Offset input within the Box Model Configurator
box model configurater5
Figure 77. Entering the values for Padding, Margin and Offset directly

Padding

Padding clears a transparent inner area around the contents of the 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 clears 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

7.4.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 srollbar 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.

Note

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.

7.5. 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 78. Combination Of Target System Selector And Switch Global | Device-Specific

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

Note

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

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

Note

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.

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

responsive inspector
Figure 79. The Responsive Inspector
Table 5. 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

7.5.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 80. Example for Device-Specific Style Settings

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

Table 6. 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

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

Note

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

8. Style Your HMI

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

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

Note

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.

Warning

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

8.2. Manual Styling

Note

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 component of the widget, which you want to style in the field "Selector".

Examples for selectors: - 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 8. Example: Selectors 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

Note

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

Tip

iq styling indicator

The blue indicator icon shows you for which selector 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.

8.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 9. 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 10. 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 %.

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

8.2.3. Borders

Note

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 11. Border Styles

border none

border solid

border dotted

border dashed

border double

border groove

border ridge

border inset

border outset

8.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 12. 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 13. 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 14. Spread of Shadow

spread  10

spread 0

spread 10

8.3. CSS Modifier / CSS Classes

8.3.1. Apply A CSS Modifier

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

css modifier2

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

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

8.4. Conditional Styling

If you like to add a condition to a CSS class of a widget, open the CSS Modifiers Dialog and click 23. You have now the option to select as follows:

condition dialogue
Table 16. Condition Dialogue

LEGEND

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

2 Choose an item for which the condition should apply

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

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

4 Check, if you want to define a second condition

The following Compare Operators are currently available:

  • = equal zo1

  • > greater than

  • < less than

  • >= greater or equal

  • <= less or equal

  • & bitwise and

  • | bitwise or

  • ^ bitwise xor

  • !& bitwise nand

  • !| bitwise nor

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

9. Localize Your HMI

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.

Note

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.

Note

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.

9.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 82. 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 System Localizations

5 Button create and delete a selected entry

6 Column with Localization Variables

7 Column naming the Localization Variable in the reference language

8 Column naming the Localization Variable in the selected language

9 Configuration Cockpit to modify the selected entry

Note

In the current version of WebIQ Designer not all functions are fully implemented in the localization manager.

Furthermore, the HMI / SCADA Toolbox WebIQ uses the localization functions of the web browser, in which your HMI is displayed, or of the operating system, on which your HMI is running. These are displaying on-screen keyboards or using of special input methods if the user makes a alphanumerical text entry.

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

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 83. Use 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 84. Display of the different languages
Tip

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: 生產的包裝 (單位)

9.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 85. Direct Editing Of Localization

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

9.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 86. Define the action command "Setlocale" to switch to a specific language

9.6. 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"
}
Warning

The notation must be kept very precisely in order to avoid malfunction.

10. Use UI-Actions

This chapter describes in detail how you can use UI-Actions to implement user triggerd 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.

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

You find the UI-actions dialog in the Behaviour Attributes area of the configuration cockpit of the corresponding widget.

ui action
Figure 87. Behaviour Attributes

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

Tip

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 17. 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 or Clear

Bitmask decimal, hex (0x03) or binary (0b101)

Writes a bitmask to an item by a logical "OR"

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

Captures actual process items and creates a new recipe.

recipe-apply

Reference to Select-Recipe control )**

none

none

Captures actual process items to the recipe

Confirm alarms

acknowledge-all-alarms

none

none

none

acknowledges all current alarms

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

11. Integrated Code Editor

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.

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

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

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

Tip
Refer to our website documentation with how-to’s and examples.

11.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 88. 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

11.4. LocalScripts

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

Note
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

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

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

11.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 89. Code Editor displaying a LocalScript

LEGEND

1 Name of the JS script module

2 Input field for the text size and two buttons to increase / decrease

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

11.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 90. Code example that adds random noise to a variable

11.5. UI-Actions

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

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

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

Note

Multiple UI actions can be defined in one module

11.6. Cascading StyleSheets (CSS)

11.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 91. 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

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

Tip

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 92. 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]).

11.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 93. 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 94. Edit the Stylesheet
Warning

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.

11.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 95. 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.

12. Manage 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.

 

12.1. User

Select the Tab "Users" to select the Users Menu within the User Manager:

user manager
Table 19. 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.

12.2. User Groups

Select the Tab "Groups" to select the Menu with the user group settings within the User Manager:

user manager groups
Table 20. 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 group data

The Configuration Cockpit allows to define the following settings for a group:

Groupname: Unique user group name. Once set, the group names cannot be changed.

Description: Arbitrary description

Administrative Privileges: If checked, users belonging to this group are allowed to create e.g. users and usergroups

12.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 21. 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.

13. 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 96. 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.

Note

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 (Connect) 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 (Connect) 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

13.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 97. 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 diable 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)

Note

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

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)

Conditional

Triggers the alarm if the alarm condition which is applied to the trigger item becomes true

User

Triggers the alarm due to a specific condition of the user interface (not supported yet by this version of WebIQ)

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

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)

Tip

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 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 variabales, which are sampled with the alarm trigger and can be displayed in the alarm texts, i.e “Temperature to high, T = 233°C”(optional). Context Items are also stored with the historical alarms.
(see also section Example: Define An 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 Example: Define An Alarm Context and Create Alarm Texts)

13.2. Example: Define An Alarm Context

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

Furthermore, you can assign one or more custom attributes to each alarm. They have the format {"key": value} and are also stored with the 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 contex:

Table 22. Attributes of an alarm
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

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

Table 24. Custom 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.

13.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 98. 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

13.3.1. Use Of alarm attributes in alarm texts

Besides the custom attributes, which may be optionally defined (see Example: Define An Alarm Context), each alarm has several standard attributes, which can be used with the alarm text messages followed:

<%=attrib %>

Table 25. Examples of attributes in alarm texts
NOTATION DESCRIPTION

<%=group %>

= Alarmgroup

<%=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.

alarm detail
Figure 99. Example Alarm Message with Context Item in alarm details

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.

13.3.2. Use Of 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 paramters:

<%=DATE(tt,ff,utc) %>

Table 26. 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

  • $YY year with two digits

  • $MM month

  • $DD day

  • $hh hour

  • $mm minute

  • $ss second

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

13.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 27. Parameters MAP Function
NOTATION FORMAT DESCRIPTION

state

{number}

Numeric status

enum

{string}

Enumeration with the notation {number}:{string}

Note

You can write the text directly in the enumeration or - as in example below - use localization variables.

Example:

  1. Define the localization variable INFO, WARNING and ALARM

  2. Define the localization variable ALARM_STATES with the enumeration in the field Localized Text {0:'${INFO}', 1:'${WARNING}', 2:'${ALARM}'}

  3. Define the alarm text ALARM_LEVEL with MAP function in the field Localized Text <%=MAP(severity, 'ALARM_STATES') %>

This definition would lead to the text output Warnung if the value of severity is 1 and the current localization is German.

13.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 current alarms in a list

  • Alarm History The Alarm History: displays the historic alarms in a list

  • Alarm Info The Alarm Info: displays in a compact form the last alarm and the number of current alarms

13.4.1. Alarm List

The core widget of the alarm management in WebIQ is the alarm list, which displays the current alarms as well as the alarms, which have not been acknowledged yet. It displays the alarms and their status clearly in a list. The list is responsive, i.e. it adapts to the width within certain limits by increasing the number of lines as soon as a column becomes too narrow for the content to be displayed. The columns of the alarm list can be sorted by clicking on the header of the corresponding column. By default, the alarm list has filters to select alarm classes like 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 100. Alarm Widget "Alarm List"

LEGEND

1 Quick filter according to alarm level

2 Acknowledgement button

3 Selection of alarms

4 Indicator icons for the alarm level

5 Title of the alarm

6 Timestamp "Alarm Comes"

7 Active alarm?

8 Status of the alarm

9 Alarm Group

10 Button to display detailed alarm messages

11 Number of alarms in total

Note

This is the standard layout of the alarm list. The presentation of the alarm list may vary, depending on which columns you set for the alarm list and how you have configured them.

The Configuration Cockpit allows to define the following settings for a alarm list:

GENERAL

Widget Name: Internal name of the widget

Template: Name of the widget template

Class Name: Determines the CSS-class(-es) applied to the widget instance

DATA ATTRIBUTE

Label: Label of the alarm list

Data Grid Selection: Selection of the defined data grid (do not change)

  • Columns

    Add: Add a column

    Column Label: Label of the column (can be localized)

    Data Grid Field: Selection of the corresponding data field from the data grid, which should fill the column

    Column Sortable: Definition whether the column is sortable or not (click on the header of the column)

    Column Filterable: Definition whether the column can be filtered or not (in case of yes, a input field will be displayer above the column)

    Move Up: Move up the corresponding column (corresponds to move left in the list)

    Move Down: Move down the corresponding column (corresponds to move right in the list)

    Delete: Delete the corresponding column

  • Filters

    Add: Add a filter

    Column Label: Label of the filter (can be localized)

    Data Grid Field: Selection of the corresponding data field from the data grid, which should define the filter criteria

    Filter Expression: Expression which must be fulfilled so that relevant data are displayed

    Move Up: Move up the corresponding filter (corresponds to move left in row of the filters)

    Move Down: Move down the corresponding filter (corresponds to move left in row of the filters)

    Delete: Delete the corresponding filter

Note

Normally do not change the settings for Data Grid Selection, Columns and Filters.

13.4.2. Alarm History

The alarm history displays the alarm events, i.e. Alarm Comes, Alarm Goes or Alarm Is Acknowledged, in a list. The list is responsive, i.e. it adapts to the width within certain limits by increasing the number of lines as soon as a column becomes too narrow for the content to be displayed. The columns of the alarm list can be sorted by clicking on the header of the corresponding column.

Drag the icon Alarm History from the widget bar or widget overlay into the Layout Editor or into the Hierarchy Cockpit in order to initialize a Alarm History.

alarm hist2
Figure 101. Alarm Widget "Alarm History"

LEGEND

1 Quick Filter According To Alarm Level

2 Indicator Icons For The Alarm Level

3 Title Of The Alarm

4 Timestamp "Alarm Comes"

5 Timestamp "Alarm Goes"

6 Name Of The Alarm Group

7 Button To Display The Detailed Alarm Message

8 Number Of Alarms In Total

The Configuration Cockpit allows to define the following settings for a alarm list:

GENERAL

Widget Name: Internal name of the widget

Class Name: Determines the CSS-class applied to the widget instance

13.4.3. Alarm Info

The 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 a Alarm Info.

alarm info
Figure 102. 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

The Configuration Cockpit allows to define the following settings for a alarm info:

GENERAL

Widget Name: Internal name of the widget

Template: Name of the widget template

Class Name: Determines the CSS-class(-es) applied to the widget instance

DATA ATTRIBUTE

Alarm Count Item: Item which contains the total number of pending alarms (usually this is the standard system variable Anzahl_Alarme)

Alarm Index Item: Item which contains the index of the most current pending alarm (usually this is the standard system variable Letzter_Alarm)

Alarm Class Item: Item which contains the level of the most current pending alarm (usually this is the standard system variable Letzter_Alarm_Class)

Inactive Text: Text which should be displayed in the case of no pending alarm (can be localized)

14. Use Recorder And Trend Display

This chapter describes in detail how you can record process variables, define a trend and display trend values within the HMI/SCADA Toolbox WebIQ.

 

Usually the HMI client only displays the current values of the PLC or the data source. But you can record process values during the working progress and display them later a a line chart (Trend Display) in order to analyze process values, to make predictions or to diagnose specific situations retroactively.

WebIQ Designer offers a data recorder, the widget "Trend Display" and various helper widgets which enable you to manage the Trend Display (display a legend, select process values, which has to be displayed, adjust the zoom factor, etc.).

First, you need to define a recorder that defines which process variables you want to record. Then you have to assign them to logical access units (trends). Finally you choose the trend widgets (Trend Display, Trend Select, Trend Zoom and Trend Legend) in order to show the trends in your web HMI.

Or summarized:

14.1. Define A Recorder

Click the icon Recorder Manager on the launch bar or click to the entry "Recorder Manager" in the Project Dashboard in order to open the Recorder Manager.

On the tab "Data Recorder" you will have the possibility to define a data recorder or - if you have already defined one or more recorders - to see the list of defined data recorders. There you can

  • Add a new Data Recorder

  • Delete a Data Recorder

  • Edit the parameters of a Data Recorder

recorder1
Figure 103. Recorder Manager displaying all Data Recorders with the corresponding parameters

LEGEND

1 Button to create a new entry (New Data Recorder)

2 Button to delete the selected Recorder

3 Name of Data Recorder

4 Name of the database (where the recorded values will be saved)

5 Commit interval

6 Recording interval

7 Timespan in [seconds, minutes, days] to keep recorded data for. Any data older than this value is automatically removed, assuming more recent data has been recorded already.

8 ?

The Configuration Cockpit allows to define the following settings for a Data Recorder:

GENERAL

Name: Unique name of the recorder

Database: Path to the database (SQLITE) where you can store the recorded values (see Recorder Database)

DATA

Commit Interval: Interval in [ms] when the recorder writes its data buffer to the data base

Note

This is not the recording interval of the items!

Optional: The database path is ‘optional’ (see Recorder Database)

14.1.1. Recorder Database

In the input field Database you have to define the path and filename to the database, where the recorded data is stored. WebIQ uses a SQLite database by default and you can only use databases in SQLite format with the current version of WebIQ.

You can define the path relative to <projectdir>/.db or as an absolute file path. The file extension .sqlite of the database file has to be omitted.

You can apply the following shortcuts to access one of the predefined SQLite databases:

  • internal:hmi: maps to <projectdir>/.db/hmi.sqlite

  • internal:custom: maps to <projectdir>/.db/custom.sqlite

Tip

You cannot use relative paths with e.g. "../" inside the path definition as this is not supported.

Instead define the absolute path to a CF card, a network share etc.

If you use a storage device which is not permanently available like an SD card, a network share, etc. it is useful to check the option Optional. This avoids errors if the load of the database fails because the device is not available.

Usually if a data recorder fails to initialize (e.g. because the database cannot be accessed) the project fails to load as well. A data recorder flagged as optional will not cause the project load to fail. Instead the recorder is skipped in case of an error and no data is recorded.

If the ‘Optional’ field is checked, the database path is tested upon app start:

  • WebIQ Server (Connect) is started with <app> as ‘autostart’ project

  • <app> is loaded into the WebIQ Designer

  • <app> is started manually from the WebIQ Designers' dashboard

In this case the project will be loaded although the database path is not accessible. The presence of the database path is only checked once on app start.

14.2. Assign Items To The Recorder

After a recorder has been defined, items can be added.

recorder items
Figure 104. Recorder Manager displaying all Recorder Items that should be recorded

LEGEND

1 Select the appropriate recorder

2 Use the 23 located on the right side of the recorder manager window to open the item list. Check all items that should be recorded.

3 Click "Apply" to confirm your selection

Right after that the Recorder Items Editor opens and you can directely add the items to a trend. In case no trend is already set the default trend TREND is suggested.

recorder items editor

1 Number of selected recorder items

2 List of available trends

3 Value that should be displayed for all selected items. You are free to change the settings afterwards.

  • average

  • median (rolled)

  • last value

  • minimum

  • maximum

Choose "Apply" to confirm.

Your items are now listed in the Recorder Manager. Now you can edit, add or delete items just by checking the box in the front. To make changes to all of them just check the box infornt of the "ALIAS".

recorder manager2

LEGEND

1 Button to create a new entry (Recorder Item)

2 Button to edit the selected entry

3 Button to delete an entry

4 Checkboxes to make a specific selection or to select all items.

5 Column with the name of the Alias

6 Column with recording interval

7 Threshold between the last recorded value and the current value that has to be exceeded for the current value to be recorded. If no threshold is given (null), it is ignored. Must be a positive number.

8 Aggregation value that should be recorded (see Aggregate Items In A Recorder)

===

14.2.1. Aggregate Items In A Recorder

Because the sample rate of the item subscription is usually faster than the recording interval, the parameter Aggregate describes the aggregation of the item values

Table 28. Aggregation Of Item Values
AGGREGATE DESCRIPTION

last

Record the value that has been received last.

min

Record the smallest value received during the last recording interval.

max

Record the largest value received during the last recording interval.

avg

Record the average over all values received during the last recording interval.

med

Record the median of all values received during the last recording interval.

Warning

Strings can only be recorded using the last aggregate.

Warning

The med aggregate is a rolling median which may diverge from the actual median if a large number of values is processed in one recording interval.

The Configuration Cockpit allows to define the following settings for a recorder item:

GENERAL

Name: Alias of the item that should be recorded

Recorder: Reference to the name of the recorder, to which the item should be added

Trends: Array of trends, to which this item belongs

The trend display widget cannot access the items of a data recorder directly. Therefore you need to define a data access object called a Trend as an abstraction layer, which the Trend Display widget can use. You can create several different trends for a single item, which you can name as you like.

DATA

Interval: Interval in [ms], with which the item is recorded.

Aggregate: Aggregation of item values(see Aggregate Items In A Recorder)

Record Threshold: Threshold between the last recorded value and the current value that has to be exceeded for the current value to be recorded. If no threshold is given (null), it is ignored. Must be a positive number.

Maximum Age: Timespan in [ms] to keep recorded data for. Any data older than this value is automatically removed, assuming more recent data has been recorded already.

Note

This feature will be improved in a future release. The following calculations help you to define the appropriate timespan:

  • 1 second = 1000 ms (enter: 1000)

  • 1 minute = 1000*60 = 60.000 ms (enter: 60000)

  • 1 hour = 1000*60*60 = 3.600.000 ms (enter 3600000)

  • 1 day = 1000*60*60*24 = 86.400.000 ms (enter: 86400000)

  • etc.

Tip

You can define items, which are recorded with different intervals in different ‘recorders’, e.g. a high-speed recorder can record items with a high density and short age (example: interval = 100ms, age = 2h), while the same items can be recorded in a different recorder with longer age and lower density (example: interval = 60s, age = 30d).

14.3. Choose A Trend Widget

The HMI / SCADA Toolbox WebIQ offers the following widgets to display trend values:

  • Trend Display The Trend Display: displays process variables in a line chart

  • Trend Legend The Trend Legend: shows details of each trend curve

  • Trend Zoom The Trend Zoom: zooms the trend curve and toggles between live/historical mode

  • Trend Select The Trend Select: selects process values which has to be displayed on the trend

The core widget is the Trend Display. The other helper widgets give application support of using the Trend Display, if necessary. The trend widgets will be presented in detail below.

14.3.1. Trend Display

The core widget is the trend display, which displays the stored trend values of the process variables. The display is a trend curve over a timeline.

It is possible to show up to 5 trend curves within one trend display in order to compare them. The trend curves can have different units and value ranges. Usually a value scale is displayed automatically on the left edge of the trend display for each trend curve. The user can, if it is necessary (i.e. if unit and value range of different trend curves are the same), hide the value scales (see parameters of the trend displays below).

You can move the trend curves by swiping along the timeline. You can also use the scroll buttons at the bottom of the timeline. When you reach the current time on the right edge, the trend display automatically switches to live view, i.e. the new trend values are added continuously and the trend curve or the timeline shift accordingly to the left.

If you swipe to the right, then you go further into the past and can look at historical trend values. In this case the live mode is switched off. You can use the pinch gesture to change the scaling in the y-direction in the trend display. You can also move a ruler back and forth to help you analyze specific times.

Drag the icon Trend Display from the widget bar or widget overlay into the layout editor or into the hierarchy cockpit in order to initialize a Trend Display

trend display
Figure 105. Trend Widget "Trend Display"

LEGEND

1 Four Trend Curves

2 Timeline (x-Axis)

3 Scroll Buttons for the Timeline

4 Value Scales for each Trend Curve (y-Axis)

5 Vertical movable ruler

6 Vertical and horizontal grid

The Configuration Cockpit allows to define the following settings for a trend display:

GENERAL

Widget Name: Internal name of the widget

Template: Name of the widget template

Class Name: Determines the CSS class(-es) applied to the widget instance

DATA ATTRIBUTE

Trend Name: Name of the trend.

Trend Item:

  • Functions

    Add: Add a defined trend item of the trend to the trend display.

    Move Up: Move up the corresponding trend item in the list.

    Move Down: Move down the corresponding trend item in the list.

    Delete: Delete the corresponding trend item from the trend display.

  • Parameters

    Trend Item Name: Name of the trend item, which is defined within the corresponding trend.

    Scales: Show or hide corresponding value scale of the trend item.

    Select Style: Define the style of the trend curve.

Time Range: Initial time span which is displayed in [s].

14.3.2. Trend Legend

The trend legend labels the trend curves. You can only use it in conjunction with the trend display.

The letters in the rhombus correspond to the corresponding value scales. The displayed line segments show the style of the trend curves. For the trend curves you can optionally display the localized name of the process variable, that is referenced by the trend item, or the corresponding alias name of the variable including the unit. The shown value corresponds to the trend value which is applied to the position of the vertical ruler.

The trend curve can be highlighted by clicking or touching on the corresponding name of it.

Drag the icon Trend Legend from the widget bar or widget overlay into the layout editor or into the hierarchy cockpit in order to initialize a Trend Legend

trend legend
Figure 106. Trend Widget "Trend Legend"

LEGEND

1 Rhombus with letter according to the Value Scale

2 Line segment according to the style of the Trend Curve

3 Localized Name or Alias of the Trend Curve including unit

4 Trend Value at the position of the vertical ruler

The Configuration Cockpit allows to define the following settings for a trend legend:

GENERAL

Widget Name: Internal name of the widget

Template: Path to the widget template

Class Name: Determines the CSS class(-es) applied to the widget instance

DATA ATTRIBUTES

Trend Display Instance: Assigning the trend legend to an instanced trend display.

APPEARANCE ATTRIBUTES

Label Type: Definition, whether the trend legend shows the localized name or the alias name of the trend curve.

14.3.3. Trend Zoom

With the trend zoom you can scale the timeline and navigate along it. You can only use it in conjunction with the trend display. It offers the following functions

  • Trend Zoom: switches the trend display into the live mode

  • Trend Zoom: stops the trend display in the current position (disabled live mode)

  • Trend Zoom: zooms in along the timeline

  • Trend Zoom: zooms out along the timeline

  • Trend Zoom: jumps to a specific point along the timeline (defined by a date and a time)

  • Trend Zoom: switches the scaling of the timeline to specific value like 1h, 2h, 4h, 8h, 12h or 24h.

Drag the icon Trend Zoom from the widget bar or widget overlay into the layout editor or into the hierarchy cockpit in order to initialize a Trend Zoom

trend zoom
Figure 107. Trend Widget "Trend Zoom"

LEGEND

1 Play Button to switch to Live-Mode

2 Pause Button to keep trends in current position (switches off the Live-Mode)

3 Zoom into the Timeline

4 Zoom out of Timeline

5 Select a specific Date/Time of the recorded data

6 Scale the timeline (1h, 2h, 4h, etc.)

The Configuration Cockpit allows to define the following settings for a trend zoom:

GENERAL

Widget Name: Internal name of the widget

Template: Path to the widget template

Class Name: Determines the CSS class(-es) applied to the widget instance

DATA ATTRIBUTES

Trend Display Instance: Assigning the trend legend to an instanced trend display.

14.3.4. Trend Select

The trend select allows the user to modify the presentation of the trend curves in the trend display.

The user can search a specific trend curve within all defined trend items of a trend. He can switch on or off the trend curves. Ha can also select the style of the trend curve. And he can decide whether the value scale of a trend curve should be displayed or not.

Drag the icon Trend Select from the widget bar or widget overlay into the layout editor or into the hierarchy cockpit in order to initialize a Trend Select

trend select
Figure 108. Trend Widget "Trend Select"

LEGEND

1 Search Field to search a specific trend curve within the Trend Items of a Trend

2 Select / De-Select a Trend Curve for displaying

3 Localized Name or Alias of the Trend Curve

4 Unit of the Trend Curve

5 Display Style of the Trend Curve

6 Show / Hide Value Scale

The Configuration Cockpit allows to define the following settings for a trend select:

GENERAL

Widget Name: Internal name of the widget

Template: Path to the widget template

Class Name: Determines the CSS-class(-es) applied to the widget instance

DATA ATTRIBUTES

Trend Display Instance: Assigning the trend legend to an instanced trend display.

APPEARANCE ATTRIBUTES

Label Type: Definitiojn, whether the trend legend shows the localized name or the alias name of the trend curve.

15. Use Recipes And Recipe Widgets

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

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

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

15.2.1. Recipe Select 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.

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:

REFERENTIAL ATTRIBUTES

Widget Name: Name of the widget

Class Name: Determines the CSS-class(-es) applied to the widget instance

DATA ATTRIBUTES Label: Localizable label field

Note
=== You can insert a name for the localization variable directly into the Label field with the following syntax: ${var-name}. Pressing <Enter> adds the new localization variable to the system and the pencil icon to the right of it turns blue to indicate that it is a valid localization variable. Clicking on the blue colored pen displays an overlay dialog where you can edit the text for all locales. ===

Recipe-Template: Reference to the name of recipe template

APPEARANCE ATTRIBUTES

Show result box: Behaviour of the drop-down field

15.2.2. Recipe Controller Widget

This widget provides functionality for editing, loading or 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:

REFERENTIAL ATTRIBUTES

Widget Name: Name of the widget

Class Name: Determines the CSS class(-es) applied to the widget instance

DATA ATTRIBUTES

Recipe-Select Instance: Reference to the corresponding Recipe Select widget. This input is mandatory!

Recipe-Edit Instance: Reference to the corresponding Recipe Edit widget.

APPEARANCE ATTRIBUTES

Show Add button: Show/hide the add button

Show Duplicate button: Show/hide the duplicate button

Show Remove button: Show/hide the remove (delete) button

Show Edit button: Show/hide the edit button

Show Capture button: Show/hide the capture button

Show Apply button: Show/hide the apply button

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

Note

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

Configuration Options

There are several configuration options available:

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

  • 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 Whether the user of the HMI is allowed to 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 the numpad for all numeric items inside the recipe

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 every 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 essentially for each item to create a selection for you have to create an entry itemoptions-MYITEMNAME where MYITEMNAME is the name of the item the options should be used for.

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

16. Manage Packages

This chapter describes in detail how you can extend the HMI system WebIQ with additional packages for controls, themes and starter apps.

16.1. System Packages

The HMI system WebIQ has a modular structure, which consists of different elements that you can initialize in your HMI. These elements are for example widgets, themes or starter apps. WebIQ already offers several elements, which enables you to build HMIs and which are bundled in a system package named 'visuals'.

WebIQVisuals

This package is the package type "system" and consists of

  • a web framework including an API which allows to communicate with the server WebIQ Server (Connect)

  • a library of more than 40 pre-defined widgets

  • some pre-defined design themes

  • some pre-defined app templates

  • some pre-defined scripts, such as specific ui-actions

  • some pre-defined images/icons

This package is part of the distribution of the HMI system WebIQ and you will find it in the Package Manager by default. You cannot delete this package.

16.2. Additional / Custom Packages

Furthermore, you can expand the HMI system WebIQ with additional and/or custom packages (Build Your Own Toolbox). You can obtain these packages in different ways (refer to the distributor icon), i.e.

  • You can download them from the download section of the customer area of Smart HMI

  • You can get them from Smart HMI or a service partner of Smart HMI (i.e. as a result of a customization project)

  • You can create these packages yourself or have them created by a service partner according to your requirements (further information to this can be found in the developer manuals)

You can add and install the following elements into the HMI system WebIQ with the help of a package:

  • Additiontal and custom widgets (package type "widgets")

  • Additiontal and custom themes (package type "themes")

  • Additiontal and custom app templates (package type "templates")

  • Additiontal and custom scripts (package type "scripts")

  • Additiontal and custom images / icons (package type "images")

16.3. View And Update Packages

Click the icon Package Manager on the launch bar or click to the entry "Package Manager" in the Project Dashboard in order to open the Package Manager.

You can view the installed packages on the "Installed" tab. There you can

  • See the installed packages

  • Update the installed packages

  • Upload additional and/or custom packages

package manager1
Figure 111. 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

Note

Please note: if you have a newer version of the HMI system installed then your existing HMIs will still contain the package 'visuals' of the previous version. The icon Button Play on the right top corner of your HMI project indicates that the package is not up-to-date.

You must first update this package for your HMI. To do this proceed as follows:

  1. Open the corresponding HMI

  2. Open the Package Manager

  3. Select the package 'visuals'

  4. Update the package

16.4. Upload And Install 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 112. 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")

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

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)

Warning

Packages always come as a zip-file. The zip file may not be unpacked and/or changed.

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

 

17.1. Simulation Server

WebIQ Server (Connect) 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.

Warning

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 (Connect).

17.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 (Connect))

string

none

Generates an internal variable that contains the version of WebIQ Server (Connect) 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

18. Integrated Widgets (Visuals)

The following chapters give a short overview about all WebIQ widgets, which are integrated and delivered with the standard version of WebIQ.

Right at the beginning we explain what an IQ Widget is and how it differs from previous delivered widgets.

 

18.1. Introduction

WebIQ offers more than 50 standard widgets. Included are common UI widgets such as buttons, selection boxes etc. but also more advanced gauges and value displays. Even very sophisticated widgets such as an alarm list, a trend display and a recipe editor are part of the toolbox by default. This ensures cost efficiency and a fast time-to-market.

The widgets are delivered together with the WebIQ Designer. They are included in the system package "visuals", which is installed by default. All widgets of WebIQ are web widgets, which are realized exclusively with web technologies like HTML5, CSS, JS, etc. The widgets have been specially designed for optimal performance and industry requirements.

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

18.2. What Are IQ Widgets?

72

IQ Widgets are the new generation of smart and intelligent web widgets, distributed with WebIQ.

— Smart HMI
A Short Introduction Into The IQ Widgets

Starting with version 2.7.0 the so-called IQ Widgets are delivered. They replace step by step the widgets that were delivered with the previous versions of WebIQ. The IQ widgets are marked with the addition "IQ" in the name or with 24 in the icon.

Particular features of the IQ Widgets:

  • IQ Widgets always contain the control including label, icon and unit

  • IQ Widgets are often available in different layout variants, which can be selected by simply switching through

  • IQ Widgets can be completely styled (font, colors, borders, shadows, etc.)

  • IQ Widgets always contain the states ok, warn, prewarn, invisible, hidden and inverted, which are available as design classes (CSS modifiers)

  • IQ Widgets are based on the color scheme of the Material Design Themes

  • IQ Widgets are all based on the same 8 x 8 pixel grid, which simplifies the alignment of the widgets

  • IQ Widgets behave smartly when the size is changed

  • IQ Widgets are designed by UX experts for everyday industrial use

Due to backwards compatibility, the previous widgets will be delivered with WebIQ by default for a certain time. They are grouped together in the widget list under the category "Widgets (Legacy)". They will no longer be developed, but any bugs will be fixed. This gives all customers, who have already built Web HMIs with the previous widgets, the possibility to continue operating and maintaining their Web HMI.

From the time of the discontinuation, the legacy widgets will only be provided as a package in the customer area.

widget list
Figure 114. Widget List With And Without IQ Widgets

LEGEND

1 IQ Widget Indicated By IQ Logo

2 Widget Without IQ Logo (IQ Widget isn’t available yet)

3 Category With Legacy Widgets

18.3. Overview

The following tables give you an overview about widgets, which are delivered with WebIQ by default. The widgets are grouped as follows:

  • Basic widgets

  • Navigation + (Multi-)View Widgets

  • Specialized Widgets

  • Smart Layout Container

The specialized widgets are often related to a special function area in WebIQ, such as

Alarm Widgets

Alarm Manager

Trend Widgets

Recorder Manager

Recipe Widgets

Recipe Template Manager

User Widgets

User Manager

Local Scrips

Code Manager

At least, you will need the Smart Layout Containers, if you are entering into the topic of Responsive Design.

18.3.1. BASIC WIDGETS

Table 30. 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

iq button 01
iq button 02
iq button 03

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

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

48

IQ Flip Switch

Widgets

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

32

3

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

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

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

48

IQ Checkbox

Widgets

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

32

3

iq checkbox 01
iq checkbox 02
iq checkbox 03

48

IQ Input Field

Widgets

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

32

5

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

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

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

48

IQ Select Date

Widgets

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

32

2

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

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

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

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

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

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

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

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

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

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

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

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

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

48

IQ Image

Widgets

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

32

1

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

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 is deactivated.

32

1

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

48

IQ Label

Widgets

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

32

1

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

48

IQ Linear Gauge

Widgets

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

32

6

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

48

IQ Progress Info

Widgets

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

32

3

iq progress info 01

iq progress info 03

iq progress info 02

iq date time blank

48

IQ Quality Display

Widgets

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

32

6

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

48

IQ Radial Gauge

Widgets

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

32

3

iq radial gauge 01

iq radial gauge 02

iq radial gauge 03

iq button rocker blank

48

IQ Text

Widgets

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

32

1

iq text 01

iq date time blank

iq date time blank

iq date time blank

48

IQ Text Display

Widgets

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

32

3

iq text display 01

iq text display 02

iq text display 03

iq date time blank

18.3.2. NAVIGATION + (MULTI-)VIEW WIDGETS

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

MENUS

48

Responsive Menu

Widgets

The Responsive Menu creates a hierarchical menu for the user, which he can use to navigate to the different views of a Web HMI. The responsive menu is able to adapt automatically to small and large displays.

1

PANELS

48

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

48

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

48

Tab Panel

Panels

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

32

1

OVERLAYS

48

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 the user cancels the dialog.

32

1

48

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

48

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.

32

1

18.3.3. SPECIALIZED WIDGETS

Table 32. Overview Specialized Widgets, Grouped And In Alphabetical Order
ICON NAME CATEGORY DESCRIPTION VARIANTS

ALARM WIDGETS

48

Alarm Info

Widgets

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

1

48

Alarm List

Widgets

The Alarm List shows the user the currently pending alarms. The list can be filtered and sorted.

32

4

RECIPE WIDGETS

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

48

Recipe Edit

Widgets

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

1

48

Recipe Select

Widgets

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

1

TREND WIDGETS

48

Trend Zoom

Widgets

The Trend Zoom is a bar with buttons that provide the user with the most important functions for operating the Trend Display (start, stop, scaling, selection of displayed period, etc.).

1

48

Trend Display

Widgets

The Trend Display shows the user the value of one or more process values over time as recorded by the data recorder. Both the current value and the historical course of the values can be displayed

1

48

Trend Legend

Widgets

The Trend Legend labels the displayed trend curves and shows the current value or the value under the ruler.

1

48

Trend Select

Widgets

The Trend Select allows the user to select the desired process values to be displayed in the Trend Display and to configure the type of display.

1

USER WIDGETS

48

User Controller

Widgets

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

32

1

48

User Info

Widgets

The User Info displays the user in a compact form some information about the current logged user.

32

1

48

User List

Widgets

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

32

1

48

User Select

Widgets

The User Select allows the admin user to search and select the desired user with the whole amount of users. The User Select works as a selection box with auto-completion, so that the desired user can be found easily.

32

1

SPECIAL WIDGETS

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

48

iFrame

Widgets

The iFrame widget is a container that displays content from another web services.

1

48

HTML

Widgets

The HTML widget is a container that displays any HTML formatted content.

1

48

Numpad

The Numpad will be displayed during 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

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

48

Local Script

Widgets

The Local Script isn’t a real widget. It isn’t shown in the display. The local script contains JS scripts which are executed as soon as the parent container of the Local Script is loaded into the browser.

1

18.3.4. SMART LAYOUT CONTAINERS

Table 33. Overview Layout Containers In Alphabetical Order
ICON NAME CATEGORY DESCRIPTION VARIANTS

LAYOUT CONTAINER

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

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

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

18.4. 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 is immediately adapted to the selected layout variant, so that you can check the result.

Selection Layout Variants of the Rocker Button

config05

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

Note

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 instantiation of the widget.

Template Refers to a HTML-template within the templates folder.

Class Name Refers to the CSS-class, which will be used for the instantiation of the widget.

DATA ATTRIBUTES

config02

Item Refers to the name of the item and bind it with the instantiation of the widget.

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 binded item.

Label Defines the label of the widget. "Auto" means that the widget gets its label from the definition of the binded item.

Note

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 binded item.

Note

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 binded 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 binded item.

Step Defines the stepwidth of discrete values. "Auto" means that the widget gets its step size from the definition of the binded 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 binded item.

APPEARANCE ATTRIBUTES

config03

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

Note

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 if you are using an icon font

BEHAVIOUR ATTRIBUTES

Lock Condition Defines the condition when the widget is locked (temporarily de-activated)

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

19. Remote Manager

19.1. Introduction

The Remote Manager inside WebIQ Designer allows you to find other running WebIQ Server (Connect) instances in your local network using UPNP („Universal Plug & Play“ using SSDP). After finding and selecting the desired instance you can connect to it to remotely configure it. In detail, you can configure and edit the following resources and parameters of the remote system:

  • Up- and downloading HMI apps

  • Editing of credentials of system users – these are users used for connecting with WebIQ Designer

  • Starting and stopping apps and configuring auto start of any app

  • Editing, adding, and removing listen ports and configuring additional settings (listener IP, TLS encryption settings etc.)

Note

Accessing a remote instance that is also used by a local instance of WebIQ Designer is of course also possible. System users are used for logging into WebIQ Designer – this is something completely different than users that have been configured inside apps which are used to login to a running app instance.

access remoteruntime
Figure 115. Accessing a remote (runtime) system

19.2. Accessing Remote Manager

When opening the Remote Manager a UPNP scan of your network is started and all WebIQ Server (Connect) instances that have been found in the network will be displayed. To connect to an instance select it from the list and click on the “Connect” button at the bottom right of the dialog.

access remoteruntime viaprojlist
Figure 116. Accessing the Remote Manager via the project list menu

After you have clicked on the Remote Manager button it is opened inside an overlay and the scan has already been started:

connect remoteruntime env

LEGEND

1 Scan button. Clicking on it will start a new scan and discard the current list

2 Scanning indicator: indicates a running scan

3 Filter for device names

4 List showing the remote systems that have been found

5 Information on the selected remote system

6 Alternatively, you can enter a WebSocket URL manually using the format ws://192.168.178.62:10123, i.e. ws://{IP}:{PORT}.

Warning
If you are using encryption you must replace 'ws://' by 'wss://'

7 Connect/Cancel buttons

After selecting an entry from the list or manually entering a WebSocket URL in field (6) 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 system. This is required for any remote system – even for a runtime system without any installed WebIQ Designer on the remote system.

Note
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”).

19.3. Managing Remote Runtime Systems

When the connection to the remote system could be established an new overlay dialog is shown with these 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

19.3.1. Remote Project Manager

Clicking on the first tab tab takes you to the Remote Project Manager:

manage remoteruntime
Figure 117. Remote 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.

Note
As of WebIQ V2.2, several HMI apps can run simultaneously in one instance of the WebIQ server. As soon as a HMI app is started, historical data from the recorder or alarms is recorded.

start Starting the app in your local WebIQ Server (Connect) instance – this will load the project into the webserver workspace

stop Stopping the local app – the project will be unloaded from the webserver

27 Deleting the local app

27 Reloads the local view

3 Buttons for uploading apps from the local system to the remote System (“>”) and for downloading apps from the remote system to the local system (“<”)

4 Buttons for the Remote System:

autostartlocapp Enabling/disabling auto start of the selected remote app

start Starting the app in the remote WebIQ Server (Connect) 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

Note
Start/Stop/Autostart For accessing a HMI app inside a browser it must be loaded into the workspace of WebIQ Server (Connect) first. This is done by using the start/stop buttons. Enabling autostart will automatically start the project in WebIQ Server (Connect) whenever it is started (i.e. on system start).

19.3.2. Remote System Users

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

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

  • 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 Server (Connect) uses standard TLS certificates for its built-in webserver, existing certificates can be installed.

  • Absolute or relative (from the directory WebIQ Server (Connect) has been installed) file system path to the TLS certificate file

  • Absolute or relative (from the directory WebIQ Server (Connect) has been installed) file system path to the TLS private key file

  • cipher list, string with negotiation security settings (optional)

  • Optional: Listen Port is optional on start of WebIQ Server (Connect) - If it cannot be allocated it will be ignored and WebIQ Server (Connect) will start anyway

  • Enabled: Enable this listener

Note
To enable a listener you just added click on start to enable it
Note
This product includes software developed by the OpenSSL Project for use in the OpenSSL Toolkit (http://www.openssl.org/)

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 © 2021 Smart HMI GmbH, Grünstraße 36, 40667 Meerbusch, Germany


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

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

Note

I am a note.

Notes contain additional information or background information about the current section.

Tips

Tip

I am a tip.

Tips are useful information or hints that will help you to make the HMI system WebIQ easier to use.

Warnings

Warning

I am a warning.

Warnings are very important information that helps to avoid mistakes or problems. Read the warnings carefully!