Want to create dynamic dashboards without having to build them manually in WebIQ Designer? Experience the easy way to implement a dynamic dashboard with this WEBIQ BEST PRACTICE DEMO.

For example, if you want to create an HMI for a machine that is available in different expansion stages, you can either create multiple HMIs (or multiple views within the same HMI), or simply and conveniently create a configuration that describes the different expansion stages and then based on that the HMI will be dynamically generated.

The demo consists of three pages where preset composites are dynamically generated using a JSON object. In addition, there are also two dynamic dashboard pages where you can customize your dashboard directly in the browser via a built-in configuration page. Heating zones are displayed with the Radial Gauge widget and a Rocker Button, and additional heating zones are displayed in a list. The composites can be changed via set values.

Furthermore there is a Responsive-Menu page. For this page you can create, change or delete menu items via the JSON object. On the Hide/Show heating zones page, you can see several heating zones that you can show and hide via a settings popup.

First of all, we thought about how the machine is structured. Then we looked for suitable widgets and use cases. That’s why we decided to create an example based on heating zones. In the first step, we created a composite consisting of a Radial Gauge widget and a Rocker Button widget.

We attached an actual value item to the Radial Gauge and a set item to the Rocker Button. This allows the user to regulate their heating zones. We also created a second heating zone composite, which is a list view consisting of a Quality Display widget and an Input Field widget. Using a small script, we read our JSON object from config.js, get all the necessary widget references using the shmi.onReady() function, and dynamically build our heating zone dashboard using the shmi.createControl() function. In our JSON object, we enter how many heating zones we want to display and the composite name and composite category (both in the widget list, respectively).

Our LocalScript creates the respective instances with relatively little code, as seen here:

To be able to try out our demo live in the browser, we have integrated the config.js with virtual items in the HMI. There you can set the same settings on the configuration page as in the config.js and change the dashboard at runtime. There you can – just like with the JSON object in the config.js – enter the number of composites to be displayed, the composite name and composite category and navigate directly to the updated dashboard pages via the respective buttons.

Now this probably sounds more complicated than it actually is, so we recommend you to just try it yourself and modify the parameters to understand the different results.
Also, you can of course add more composites (with more widgets) and more nesting layers to the example as you go.

Just try it out for yourself. Take a look at the live WebIQ Dynamic HMI Demo and download it to WebIQ Designer (Download). Here you can see how the scripts and JSON objects look like and what happens when you change them.

If you haven’t downloaded WebIQ yet, just click below to register and download the free trial version of WebIQ!