You want to get an overview of the most used WebIQ widgets and see how easy it is to use them? Great, because we have just released a new demo HMI project that contains them!

What’s In The Widget Demo?

Our new widget demo contains a lot of selection and input widgets, buttons and output widgets showing you how you can create your own web HMI easily using our drag & drop builder included in WebIQ Designer.

We have split these widgets into three different areas:

input widgets
output widgets
button widgets

Selection & Input Widgets

This part of the HMI contains a selection of input widgets.

On/Off Switches

First we have the on/off switches which although essentially doing the same technically reflect different user interface visualizations. Depending on your HMI and design guidelines you might pick either a checkbox, a toggle button or a flip-switch. In this case we have connected the same item (tag) to all of them so that whichever you use always enables or disables the other ones as well. On the right hand side a simple machine state output is visualized accordingly.

Selection Widgets

The selection widgets should be well known to you from websites on the internet as they reflect standard HTML elements that have been styled and received additional functionality. Technically they are doing essentially the same thing as the on/off switches. However, with these the user has several different options to choose from.

While the Select Box widget might be useful for e.g. 30 different options it still requires two clicks by the user to select a value. If you have for example only three different values using the Select Radio widget might be better as here only a single click is required to change a value.

It all depends on the number of items and on the design guidelines you wish or have to follow on your company which one you should select.

Like with the on/off switches before the state it also visualized on the right hand side.

Numeric Input Widgets

WebIQ’s input widgets are used to input specific values into the HMI which can be done in different ways:

if the user usually enters values directly the Input Field widget should be used which in this case also has the Numpad enabled here allowing for ease of input
if the input normally is set rather via relative up/down actions, i.e. incrementing and decrementing a value by a specified value, the Rocker Button widget can be used as it makes it easier to input values here. Of course the step interval can be configured. And with the numpad enabled here as well (which is optional) the user could also input the value directly.
for values where you also want to visualize the minimum and maximum values directly you can use the Slider widget which allows you to move the slider to change the value directly. This is often used if the value can be set in more relative terms where the exact value is not that important.

On the right hand side you see the corresponding Radial Gauge widget changing the value immediately for visualization purposes.

Please also note that you cannot set values larger or lower than the configured minimum and maximum values.

Text Input

Sometimes a text has to be set by the user when using a string item from the PLC for example. For that using the Input Field as before and connecting a string item would be the way to go.

You have probably noticed that you cannot enter letters in the Input Field widget above, but here you can. The difference is that the connected item is a string item here and was a numeric item before so WebIQ did not allow the user to input invalid values like letters for a numeric item.

Time/Date Input

WebIQ also comes with two widgets for selecting a date and time. If you change the values on the left hand side the output on the right hand side changes immediately. You also notice that it is impossible to enter invalid values as before. We think that’s smart!

This can for example be used for setting date/time item values in the PLC.

Output Widgets

An HMI of course allows not only inputs but also outputs. As WebIQ is focused an good design and user experience we provide many widgets for visualizing output data graphically, but also textually!

Time/Date Outputs

We already know these from before – but this time we focus on the output. We have two date/time-related widgets we want to explain to you here:

the Date/Time widget that allows you to format dates (in UNIX timestamp format) in a flexible way. You can simply use predefined format strings to display a date and/or time in any way you want:
the Duration Display allows you to display relative dates. If you have for example one item in your PLC that reflects the estimated date and time when a process will be completed you can connect this item and the system time item included in WebIQ by default to show the user a relative time which is more easily understandable than absolute dates and surely improves the efficiency of the user in such cases.

Actual Value Outputs

Displaying current values for process variables is a must in an HMI, but user-friendly visualization is a choice! WebIQ offers several widgets for visualizing values. In this example we have the Linear and Radial Gauge widgets – which in addition to showing the current absolute value as a text also illustrate the minimum and maximum values graphically and can be styled extensively – and they come in several layouts. The Text Display displays the raw value only – depending on your task at hand choosing the right widgets is essential for a great user experience!

The Quality Display allows you to show deviations from a set value. Just use the Temperature Slider and move the handle and watch the Quality Display. You will see that you can see the deviation from the set value until our simulation server has simulated reaching the target value. This widget is great for visualizing the quality of a process, whether the current values deviate from the set values – and how much if they do.

Image Changer

Besides the simple Image widget WebIQ also features an Image Changer widget that allows you to display different images based on the value of a process variable. This can for example be used to illustrate the state of a machine part – just use different images created in a simple graphics program in web-compatible format (SVG, PNG, GIF, JPG) and you can use them right away!

If you change the pump state in this example you’ll immediately see that the Image Changer icon changes accordingly.

Text Output

The Text widget allows you to output simple text, e.g. from an item from your PLC. You could also visualize values from other items by subscrining to items and using them inside the text dynamically. Please refer to the documentation for details on this.

Button Widgets With UI Actions

Technically button widgets might be considered as input items, but they can also be used to trigger certain actions which is why we have added them to a separate category here. Buttons are probably the most versatile widgets WebIQ offers.

UI Actions are predefined JavaScript functions you can use in your HMI – and of course you can also create your own custom UI Actions in the Code Manager of WebIQ Designer! UI Actions allow you to easily perform actions inside your HMI:

navigating to a different area of the HMI
opening and closing dialogs, slide-ins and popups
triggering notifications for informing the user
setting, incrementing and decrementing item values, e.g. changing tags values from your PLC
changing the localization of the HMI for the current user
adding, removing and toggling CSS classes – of course you could also do this with custom CSS classes you have created yourself

Now It’s Your Turn!

Our recommendation is to simply download the project, import it into your local WebIQ Designer instance (download here) and see how we have done it. Take some time and feel free to modify the project as it suits you.

Now have fun!