HTML5 Visualisierung per Drag & Drop erstellen

Mit dem webbasierten i4designer können komplexe HTML5 Visualisierungen auch ohne HTML-Kenntnisse per Drag & Drop erstellt werden.

25. Februar 2019
HTML5 Visualisierung per Drag & Drop erstellen
(Mit dem webbasierten i4designer können komplexe HTML5 Visualisierungen auch ohne HTML-Kenntnisse per Drag & Drop erstellt werden. (Quelle: WEBfactory))

Moderne Anlagentechnik im Browser zu überwachen und zu steuern bietet Vorteile: Geräte gibt es in allen Größen und Formfaktoren und auch weltweite Zugriffe können einfach und sicher ermöglicht werden. Bei der auf der SPS IPC Drives vorgestellten Version 4.0 der Scada-Software von Web-Factory ist nun auch der i4designer als offene Cloud Plattform mit einer umfassenden Symbol-Bibliothek ein fester Bestandteil. Mit ihm kann man auch ohne HTML-Kenntnisse komplexe HTML5 Visualisierungen erstellen. Folgeversionen des i4designers werden dies in Zukunft auch für andere, gängige Scada-Lösungen erlauben. Anwendungen können so durch den Import von Textdateien vollständig generiert werden, was bis zu 90 Prozent Entwicklungszeit spart. Aber auch die Handarbeit funktioniert schnell und intuitiv: Symbole werden per Drag & Drop ausgewählt und wiederverwendbare Masterplates mit Parameterübergabe erleichtern die Arbeit. Dank integrierter Versionsverwaltung können auch mehrere Benutzer gemeinsam eine Visualisierung entwickeln ohne ständig Versionen manuell abzugleichen, denn alle arbeiten immer automatisch mit dem neuesten Stand.

Sowohl der Designer als auch das Scada-Frontend basieren zu 100 Prozent auf Web-Technik (HTML5, Javascript) und unterstützen Responsive Design. Die Anzeige ist dadurch für alle unterschiedlichen Ausgabegeräte immer optimal angepasst, egal ob Anlagen- und Maschinenmonitore, Tablet oder Smartphone.

Visualisierung nach Maß

Die Symbolbibliothek umfasst bei der Scada-Version aktuell rund 500 unterschiedliche HTML5-Controls, die HMI-Version eine angepasste Auswahl von ca. 100. Dazu gehören statische Symbole, z.B. Behälter, Gebäudegrundrisse etc., ebenso wie Schalter zum Einschalten von Geräten oder dem Setzen von Werten. Anzeigeformate für (alpha-)numerische Werte sind frei definierbar und Hintergrundfarben abhängig von SPS-Variablen einstellbar. Die Symbolbibliotheken können über ein Software Development Kit (SDK) jederzeit kundenspezifisch erweitert werden. Dank Cloudtechnologie arbeiten alle Anwender automatisch immer mit der gleichen, aktuellen Version des i4designer.