WebIQ with its legacy-free 100% web-based technology allows you to create your own custom widgets utilizing only JavaScript, HTML and CSS. But of course you don’t have to start from scratch. We’re called Smart HMI for a reason: we think it’s very smart to not reinvent the wheel over and over again but instead utilize open-source libraries and frameworks that provide the features required for the project at hand – something we already showed you in the Chart.JS blog post.

What Are Web Components?

As such many larger frameworks are nowadays using so-called web components. Traditionally for creating some interactive parts of a website you’d have to write your own HTML, CSS and JavaScript and would have a whole HTML tag avalanche over and over again just to render your small little website gizmo multiple times on the page. Because of course you want it to look pretty and have all the features required.

So the HTML code of your little gizmo might look like this – and this is a very simple example on purpose:

But why not just create your own HTML tag for that? That’s what web components are for. They allow you to encapsulate your HTML, CSS and JavaScript code into a single HTML tag – just like this:

This would then render the same content and you could use it in your website over and over again. Of course providing custom parameters and handling them with JavaScript is also possible:

However, we won’t go into the details on how to create your own web components – you can find a simple example here. In this article we want to show you how we used a web-component-based framework with WebIQ.

Always Afloat With OpenBridge

OpenBridge is an open system for maritime workplace design, i.e. for bridges on ships. OpenBridge develops an open platform with 20 partners from the Norwegian maritime industry holding a leading international position aiming for cost-effective and user-friendly ship bridges with the focus on digital innovation.

It’s not only an open-source design guideline but also provides readily usable HTML5 web components for different maritime widgets such as UI components (buttons, badges, checkboxes, menus, bars) and navigation components like a compass.

Web Components for OpenBridge look like this – which makes them fairly easy to understand:

Using OpenBridge With WebIQ

WebIQ utilizes a modern package system which allows for defining package dependencies and easy package updates. When using any third-party library you should always create a custom library package which is fairly easy and described in the documentation.

Then in your custom widget you simply define a dependency for that libary package so that both your widget and the library can be updated independently of each other. This also means that when a new version of the library is released you normally don’t have to update your custom widget using that library which makes it a lot easier for the users of your custom widgets.

For OpenBridge we downloaded the corresponding library and created a custom library package available for download below.

OpenBridge Large Azimuth

For the purpose of this article we will focus on the large azimuth component – the HTML tag looks like this:

So essentially the only thing we have to do to connect it to WebIQ is connect some process variables (items, tags) from a datasource like our PLC to the attributes courseOverGround, heading etc. and update the HTML tag attributes whenever one of those items changes – OpenBridge will automatically take care of updating the component display – that’s the magic of web components in action.

For creating a custom widget following our tutorial on this is highly recommended before starting from scratch.

Integrating this OpenBridge component into WebIQ using a custom widget only required only a few lines of custom JavaScript code and defining the widget configuration for WebIQ Designer in JSON format. We won’t go into the full details here – but you can always download the widgets below and have a look at the code yourself.

For the purpose of demonstration we only included the attributes angle, target, targetAngle and value and made them available in the custom widget configuration in WebIQ:

So this is what we had to do code-wise:

allow the user to configure items for these four attributes (JSON configuration)
create the HTML tag for the component ob-azimuth-large dynamically (JavaScript)
subscribe to the items for the attributes and update the HTML tag attributes whenever any of the items changes (JavaScript)

See for yourself how it looks like in action here in the online demo – including some other OpenBridge components as well, all created with WebIQ. We also integrated support for the different themes OpenBridge supports – just try for yourself:

Open The Online Demo

Downloads