What Are Web Components?
So the HTML code of your little gizmo might look like this – and this is a very simple example on purpose:
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.
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)
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:
Not signed up yet? Then simply go ahead and signup now for free and download WebIQ immediately!