WebIQs legacy-freie 100% Webtechnologie ermöglicht es Dir, eigene Widgets alleine mit JavaScript, HTML und CSS zu erstellen. Allerdings musst Du natürlich nicht bei Null beginnen. Wir heißen Smart HMI aus einem bestimmten Grund: wir glauben, dass es smart ist, nicht jedes Mal das Rad neu zu erfinden, sondern stattdessen Open-Source-Bibliotheken und Frameworks zu benutzen, welche die für das aktuelle Projekt benötigten Features enthalten – so etwas haben wir auch erst kürzlich im Chart.JS Artikel gezeigt.

Was sind Web Components?

Viele größere Web-Frameworks verwenden heutzutage sogenannte Web Components. Üblicherweise ist es ja so, dass wenn man interaktive Inhalte mit HTML, CSS und JavaScript erstellt und diese mehrfach wiederverwenden möchte, man regelrechte HTML-Tag-Lawinen produziert, nur um unser kleines Website-Gizmo mehrfach auf der Seite zu verwenden. Denn natürlich möchtest Du, dass es gut aussieht und alle erforderlichen Features enthält.

Der HTML-Code für unser kleines Gizmo könnte z.B. so aussehen – und das ist absichtlich ein ganz einfaches Beispiel:

Wäre es nicht viel schöner, wenn man dafür ein eigenes HTML-Tag erstellen könnte? Genau dafür sind Web Components gedacht. Sie ermöglichen es, Deinen HTML-, CSS- und JavaScript-Code in ein einziges HTML-Tag zu kapseln – zum Beispiel so:

Dies würde dann den gleichen Inhalte wie oben in der Webseite anzeigen, aber Du kannst es immer wieder verwenden und musst nur dieses eine Tag einfügen. Natürlich kannst Du auch zusätzliche Parameter definieren und im JavaScript auswerten:

Allerdings wollen wir hier nicht in die Details einsteigen, wie man seine eigenen Web Components erstellen kann – ein einfaches Beispiel dazu findest Du z.B. hier. In diesem Beitrag wollen wir Dir zeigen, wie Du ein Web-Komponenten-basiertes Framework in WebIQ verwenden kannst.

Mit OpenBridge immer auf Kurs

OpenBridge ist ein offenes System für maritimes Arbeitsplatzdesign, also für Schiffsbrücken. OpenBridge entwickelt eine offene Plattform mit 20 Partnern aus der norwegischen Maritim-Industrie, welche eine führende internationale Position innehaben und den Fokus auf kosteneffiziente und bedienungsfreundliche Schiffsbrücken legen mit dem Fokus auf digitaler Innovation.

Das ist nicht nur eine offene Design-Richtlinie, sondern es werden auch gleich direkt verwendbare HTML5-Web-Components zur Verfügung gestellt für verschiedenste maritime Widgets wie UI Komponenten (Buttons, Badges, Checkboxen, Menüs) und Navigationskomponenten wie etwa einen Kompass.

Web Components für OpenBridge sehen so aus wie hier – was es sehr einfach macht, es zu verstehen:

OpenBridge mit WebIQ

WebIQ verwendet ein modernes Paketsystem, welches es ermöglicht, Paketabhängigkeiten zu definieren und Pakete einfach zu aktualisieren. Wann immer Du mal eine Third-Party-Bibliothek mit WebIQ verwendet möchtest solltest Du immer ein separates Library-Paket erstellen, wie dies in unserer Dokumentation beschrieben ist.

In Deinem Custom Widget definierst Du dann einfach die Abhängigkeit Deines Custom Widgets vom Library-Paket. So kann die Bibliothek getrennt von Deinem Custom Widget aktualisiert werden. Das bedeutet auch, dass wenn eine neue Version der Bibliothek verfügbar ist, lediglich dieses Paket aktualisiert werden muss und Dein Custom Widget nicht geändert werden muss.

Für OpenBridge haben wir die entsprechende Bibliothek heruntergeladen und ein separates Library-Paket erstellt, welches Du unten herunterladen kannst.

OpenBridge Large Azimuth

Als Beispiel werden wir hier die Large Azimuth Komponenten verwenden – das entsprechende HTML-Tag sieht wie folgt aus:

Das tatsächlich einzige, was wir nun tun müssen, um die Komponente mit WebIQ zu verbinden ist es nun, Prozessvariablen (Items, Tags) von einer Datenquelle wie einer SPS an die Attribute courseOverGround, heading etc. anzubinden und diese Attribute jedes Mal zu aktualisieren, wenn eines der angebundenen Items seinen Wert ändert. OpenBridge wird dann automatisch die Anzeige des Widgets aktualisieren – das ist die Magie von Web Components!

Wenn Du Dein eigenes Custom Widget erstellen möchtest solltest Du unbedingt unserem Tutorial folgen, damit es so einfach wie möglich für Dich ist.

Wir haben nur wenige Zeilen JavaScript-Code benötigt, um diese OpenBridge-Komponente in ein WebIQ Custom Widget zu integrieren und dann noch ein paar Zeilen JSON, um die Widget-Konfiguration im WebIQ Designer zu ermöglichen. Wir gehen hier nicht ins Detail, aber Du kannst die Widgets unten herunterladen und im Detail ansehen, wie wir das gemacht haben.

Für dieses Beispiel haben wir nur die Attribute angle, target, targetAngle und value gewählt und diese in der Widget-Konfiguration zur Verfügung gestellt:

Hier sind die Schritte, die wir codetechnisch unternommen haben:

dem Benutzer ermöglichen, die Items für die vier Attribute zu konfigurieren (JSON-Konfiguration)
das HTML-Tag für die Komponente ob-azimuth-large dynamisch erstellen (JavaScript)
die Items abonnieren, welche an die Attribute angebunden sind und das HTML-Tag zu aktualisieren, wann immer sich einer dieser Item-Werte ändert (JavaScript)

Hier kannst Du Dir selbst ansehen, wie es in Aktion aussieht in unserer Online-Demo – auch mit einigen Widgets mehr, alles mit WebIQ erstellt. Außerdem haben wir eine Unterstützung für die verschiedenen OpenBridge-Themes integriert:

Open The Online Demo

Downloads