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!
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:
This part of the HMI contains a selection of input widgets.
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.
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.
WebIQ’s input widgets are used to input specific values into the HMI which can be done in different ways:
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.
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.
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.
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!
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:
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.
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.
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.
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:
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!