WebIQ Manual - WebIQ Designer

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.

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.

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

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

The project list gives you an overview of all HMI projects within your project directory. It displays on the project card the following information which help you to monitor your HMI projects:

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.

In the case of a mouse over all additional functions will be displayed in the project card (see project card below).

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 to the designer can be accessed from here. If they cannot be accessed it is highly likely that they require a visuals update.

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:

Connect

Design

Application

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

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.

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

Auto Login

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

Username: Name of the corresponding user for auto-login

Password: Password of the corresponding user for auto-login

The runtime server WebIQ Server 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.

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.

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.

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.

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

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 on the launch bar (left side of the Layout Manager) or on "Process Data Manager" in the Project Dashboard.

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:

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

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.

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.

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.

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.

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.

Cut (keyboard shortcut: Ctrl + X)

Select a widget, container, panel or overlay, click the icon 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 or use the keyboard shortcut Ctrl + C in order to copy the selected widget into the clipboard.

Paste (keyboard shortcut: Ctrl + P)

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

Delete (keyboard shortcut: DEL)

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

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.

To save a widget as a template and re-use it, you have to procede as follow:

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

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

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.

In summary, the composite widget offers you the following features:

Composite widgets are ideally suited for visualizing machine modules, that exist in the machine several times - depending on the machine configuration.

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.

Structures

Structures allow to combine the data for a machine module into one data object, i.e. a structure.

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.

Further information about using Process data variables, structures and arrays see chapter Process Data Interface And Data Items.

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.

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

The internal hierarchy of the composite is visible once you have opened it this way.

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.

The toolbar contains the following information and functions.

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

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.

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.

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.

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

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

When you press the Add or Edit button, the dialog for editing the placeholder is displayed.

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:

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:

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.

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.

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.

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.

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

Other functions of the composite widget, such as Cut, Copy, Paste, Delete and Move work in the same way as with a standard widget

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.

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.

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

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

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

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.

Cut, copy, paste, delete

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

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.

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

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:

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

The responsive menu contains two types of menu entries:

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)

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.

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

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

All settings are described in detail below.

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:

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.

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

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

The Style Cockpit contains the following information and functions.

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.

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.

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.

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

For Example:

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.

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

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

The following Compare Operators are currently available:

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 .

Click the icon 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

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.

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

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.

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:

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.

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.

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.

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)

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.

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.

Click the icon 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

Further information and documentation on how to use the Chrome Developer Tools can be found on the Internet.

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

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.

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

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

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.

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.

Click the icon 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

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)

ALARM SOURCE

Trigger Item: Process item which is monitored and which triggers the alarm

Alarm Type: Type of alarm (see below)

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.

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

Output Item: Sets output if the alarm is activated (optional)

Output Value: Value of the output item (optional)

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)

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)

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: