WebIQ - Use Designer Add-On

History

2024 April 29 Update to version 1.2d

Introduction

WebIQ Designer is a powerful tool to create HTML5 machine visualizations. Nevertheless, the following functions are still missing:

• Important variable attributes clearly listed in one table

• Editing an attribute of multiple variables with one click, e.g. set communication interval for all selected variables.

• Cross reference list

• OpcUa variables check

  • Variable still defined in the PLC?

  • PLC Data type changed?

The WebIQ Add-on, developed by Bosch Rexroth, has these features. It is a standalone HTML5 page that is displayed in the web browser. The WebIQ Connect API documented on https://www.smart-hmi.com is used to implement the features.

HINT: Internal WebIQ data is also read, which may change with newer versions. Therefore, not all features may work with newer WebIQ versions.

Variable versus Item

In WebIQ 2 terms are used for variable/item. It is important to understand their different meanings.

Variable

The word "variable" has a different meaning in WebIQ than in many other programming languages. Variables in WebIQ are simply rules that describe how to create an item.

Note: In order to create/update items from variables, the "Update items" button in the "Process Data Manager" of the WebIQ Designer must be pressed.

Item

An item is the object where the value of a “PLC variable” is stored. Additionally, an item has attributes like data type, minimum/maximum value, unit, label, digits, ...

In WebIQ 2.13 the OpcUa browse functionality creates a variable for each PLC variable, even it the PLC variable is an array or a structure. Therefore, it is hard to see a difference between variables and items. However, since WebIQ knows arrays and structures, these features will eventually be built into the OpcUa import in the future.

Installation

The Add-on must be installed for each WebIQ project by following the steps below:

Single instance of WebIQ Designer

• Open project in WebIQ Designer

• Unzip attached file install-webiq-addonV*.zip to your computer

• Execute the file install-webiq-addon\install.vbs, by double click
  Press "Yes" to install the add-on for the displayed project.
  

  

• Enter URL to your browser: localhost:10124/addon
  
  

Multiple instances of WebIQ Designer

Install the addon, as described above in chapter: Single instance of WebIQ designer. Additionally you have to configure the port, when you want to work with serveral WebIQ Designer instances, active at the same time.

• Open Project list of Designer

• Open System page, by clicking on gear icon in the right upper corner
  

  

• Select Designer Settings

• For every Designer instance enter a unique port number. E.g 10125, 10126,…
  

  

• Enter URL to your browser: e.g. localhost:10125/addon
  
  

Usage

The Add-on uses the WebIQ web server. That's why it works only if the project is opened in WebIQ Designer.

• Open your project in WebIQ Designer

• Enter URL (e.g.: localhost:10124/addon) in your web browser

• All changes in the Designer must be saved before they can be displayed in the Add-on.
  
  

First login

At the first login, or when the login changes, you have to provide a system user with password.

Header of program

• In the header you find some information (selected/visible/all variables) and project name.

• Click on icons to start a functions.

• Use tooltip to get a description of the icons.

Configure displyed columns

Here you can select attribute columns, which are displayed in the table.

 

 

 

 

Selection of rows

Before executing a command, it is necessary to select the rows in the table to which it will be applied. The following options are available:

• Icons in header Select All/None/Invert
   

  

• Select range with mouse:

  • Click first row, hold “Shift” key, Click last row

  • 2x Click first row, Click last row

• Invert row selection: Hold “Ctrl” key and click on row

Sort

• Available for all table columns

• Increasing and decreasing sort order

• Click on header row of the table for sorting
  

  

  
  
  

Filter

• Available for all table columns

• All filters are AND filters. This means only those rows are displayed, where all filters match

• Filters are case insensitive

• Multiple filter word in one column are supported, by a blank (“ “) as field separator

Example:

Cross Reference

• The cross-reference list is based on string comparison. Therefore, it can happen that too many references or not all occurrences of items are displayed.

• Although the cross-reference function counts all cross-references, it cannot list the path to certain cross-references because the program is not yet able to read all internal dependencies.

There are 2 modes:

• Select multiple rows and click on “cross-reference” icon in header, which gives a common info in the “check” column.
  E.g.  5x:MARTS => found 5 times “M”: Model “A”:Alarm “R”:Recipe “T”: Trend “S”:Script “-“:Not found
          3x:M-R-S   => found 3 times "M": Model "R":Recipe "S":Script

• Double click a row, which creates the cross-reference list

Use case: too many cross references found

• A item name used as label

• A item in a composite widget is overwritten by a placeholder
  Note: To avoid this, you can remove this item from the composite and leave it empty or
  use placeholder string, which does not exist as item name and makes it more readable for you
  e.g. _Item_exported_as_attribute_ or _Item_replaced_by_placeholder_

• An item in a composite widget where the attribute is exported to the composite
  Note: To avoid this, you can remove this item from the composite and leave it empty or
  use placeholder string, which does not exist as item name and makes it more readable for you
  e.g. _Item_exported_as_attribute_ or _Item_replaced_by_placeholder_
  

Use case: Variable not found

• Composites

  • Placeholder only contains a part of the item name

    • Placeholder: "<%= item %>.Status_strUnitsVelocity"

  • Scripts

    • Item names are build with string operators

      • sVar = “myAxis” + “.Name”

      • sVar = “Axis.” + iCounter + “.Name”
        
        

Set attribute

Note: The update of changed attributes must be done manually by clicking “Update items” in “Process Data Manager” of WebIQ Designer.

• Select attribute from list

• Press button "..." to open the input assistance. All items starting with "@" (e.g. @AtStart) are reserved word. They are described in the table below the picture.
  

  

Check OpcUa variables

Hint: Because of data changes currently not working.

This feature checks the following points:

• Referenced PLC variable, still exists

• Data type changed. WebIQ variable has different type than PLC variable

• PLC Data type is LINT or LWORD
  When the integer in PLC has more than 15 digits, the value on HMI is not correct.
  

  • In WebIQ JavaScript is used to store variable values

  • JavaScript only knows data type NUMBER, which is a real number with 15 significat digits

  • It is used to store real and integer numbers

  • Interger values with more than 15 digits are rounded identically to real numbers
    Example: PLC: 9223372036854775123 => HMI: 9223372036854775000

The result of the check is displayed in table column "Check"

Errors and Requests

When you find any error or you have a request for new features write a comment to this article