Sie möchten dynamische Dashboards erstellen, ohne diese im WebIQ Designer zusammen klicken zu müssen? Erleben Sie mit dieser WEBIQ BEST PRACTICE DEMO den einfachen Weg, um ein dynamisches Dashboard umzusetzen.
Warum soll ich mein Dashboard dynamisch erstellen?
Wenn Sie zum Beispiel eine HMI für eine Maschine erstellen möchten, die in verschiedenen Ausbaustufen verfügbar ist, so können Sie entweder mehrere HMIs (oder mehrere Ansichten innerhalb der gleichen HMI) erstellen, oder einfach komfortabel eine Konfiguration erstellen, welche die unterschiedlichen Ausbaustufen beschreibt und auf Basis dieser dann die HMI dynamisch generiert wird.
Was beinhaltet die WebIQ Dynamische Demo?
Die Demo besteht aus drei Seiten, auf denen dynamisch über ein JSON-Objekt voreingestellte Composites erzeugt werden. Zudem gibt es auch noch zwei dynamische Dashboard-Seiten, bei denen Sie über eine eingebaute Konfigurations-Seite Ihr Dashboard direkt im Browser anpassen können. Es werden Heizzonen mit dem Radial-Gauge-Widget und einem Rocker-Button und zusätzlich Heizzonen in einer Liste dargestellt. Die Composites können über Set-Werte verändert werden.
Zudem gibt es noch eine Responsive-Menu-Seite. Für diese Seite kann man über das JSON-Objekt Menüeinträge erstellen, ändern oder löschen. Auf der Hide/Show-Heizzonen-Seite sieht man mehrere Heizzonen, die man über ein Einstellungs-Popup ein- und ausblenden kann.
Wie haben wir das gemacht?
Zuallererst haben wir uns Gedanken gemacht, wie die Maschine strukturiert ist. Danach wurde nach passenden Widgets und Anwendungsfällen gesucht. Deswegen haben wir uns entschieden, ein Beispiel anhand von Heizzonen zu erstellen. Im ersten Schritt haben wir ein Composite erstellt, welches aus einem Radial-Gauge-Widget und einem Rocker-Button-Widget besteht.
Dem Radial-Gauge haben wir ein Act-Item angehängt und dem Rocker-Button ein Set-Item. So kann der Benutzer sinnvoll seine Heizzonen regulieren. Wir haben auch ein zweites Heizzonen-Composite erstellt, welches als Listenansicht aus einem Quality-Display-Widget und einem Input-Field-Widget besteht. Mittels eines kleinen Scripts lesen wir unser JSON-Objekt aus der config.js aus, holen uns alle nötigen Widget-Referenzen mittels der shmi.onReady()-Funktion und bilden mit der shmi.createControl()-Funktion dynamisch unser Heizzonen-Dashboard. In unserem JSON-Objekt wird eingetragen, wie viele Heizzonen wir anzeigen möchten und wie der Composite-Name und die Composite-Kategorie (beides jeweils in der Widget-Liste) sind.
Unser LocalScript wiederum erstellt dann mit relativ wenig Code die jeweiligen Instanzen, wie hier zu sehen:
Um unsere Demo auch live im Browser ausprobieren zu können, haben wir die config.js mit virtuellen Items in der HMI integriert. Dort kann man auf der Konfigurations-Seite die gleichen Einstellungen wie in der config.js einstellen und zur Laufzeit das Dashboard ändern. Dort kann man – genauso wie beim JSON-Objekt in der config.js – die Anzahl der darzustellenden Composites, den Composite-Namen und Composite-Kategorie eintragen und über die jeweiligen Buttons direkt auf die veränderten Dashboard-Seiten navigieren.
Das liest sich jetzt vermutlich komplizierter, als es eigentlich ist, daher empfehlen wir Ihnen, es einfach selbst auszuprobieren und die Parameter zu modifizieren, um die unterschiedlichen Ergebnisse nachvollziehen zu können.
Auch können Sie das Beispiel natürlich weitere Composites (mit weiteren Widgets) und weitere Verschachtelungsebenen nach und nach erweitern.
Jetzt sind Sie dran
Probieren Sie es einfach selbst aus. Schauen Sie sich die Live-Demo der WebIQ Dynamic HMI Demo an und laden Sie sie in den WebIQ Designer (Download). Hier können Sie sehen, wie die Scripts und das JSON-Objekt aussehen und was passiert, wenn man diese verändert.
Wenn Sie bisher noch nicht WebIQ heruntergeladen haben, klicken Sie doch einfach unten, um sich zu registrieren und die kostenlose Testversion von WebIQ herunterzuladen!
