- IT&Production - https://www.it-production.com -

Per Drag and Drop zur Benutzerschnittstelle

Visualisieren mit HTML5

Per Drag and Drop zur Benutzerschnittstelle

Klassische Scada- und HMI-Systeme stoßen an ihre Grenzen, wenn Maschinen und Anlagen zunehmend über Tablets, Smartphones oder direkt von einem Browser aus überwacht und gesteuert werden sollen. Hier setzen HTML-basierte Lösungen an, besonders, wenn sich die mitgelieferten Designtools ohne Spezialwissen bedienen lassen.

Themen wie Fernzugriff, Cloudlösungen oder ‘Bring Your Own Device’ liegen weiterhin im Trend, was den Aufwand für die Erstellung einer Visualisierung steigert. (Bild: Bild: ©Farknot Architect/stock.adobe.com / Webfactory GmbH) [1]

Themen wie Fernzugriff, Cloudlösungen oder ‘Bring Your Own Device’ liegen weiterhin im Trend, was den Aufwand für die Erstellung einer Visualisierung steigert. (Bild: Bild: ©Farknot Architect/stock.adobe.com / Webfactory GmbH)

Entwicklungsingenieure und Systemintegratoren in den unterschiedlichen Branchen müssen sich immer wieder der Herausforderung stellen, für ihre Kunden Visualisierungslösungen zu entwickeln, die mit Scada- oder HMI-Systemen verschiedener Hersteller funktionieren. Zudem liegen Themen wie Fernzugriff, Cloudlösungen oder BYOD, kurz für Bring Your Own Device, im Trend, was den Aufwand für Visualisierungslösungen noch steigert. Lösungen auf der Basis von HTML5 können hier viel zeit sparen, wenn sie den Zusatzaufwand für die Entwickler reduzieren helfen.

Ein unabhängiges Werkzeug

Für solche Aufgaben das Unternehmen Webfactory mit dem i4designer eine grafische, cloudgestützte Engineering-Plattform entwickelt, mit der sich HTML5-basierte Visualisierungen erstellen lassen. Dabei lässt sich das Werkzeug, das ursprünglich Bestandteil der Scada-Software von Webfactory war, auch unabhängig davon für andere am Markt vorhandenen Scada- und HMI-Anwendungen einsetzen. Wenn Anwender alle Visualisierungsaufgaben mit einer Software entwickeln, soll sich der Entwicklungsaufwand insgesamt deutlich reduzieren lassen. Anwendungen können beispielsweise durch den Import von Textdateien generieren werden, was bis zu 90 Prozent der Entwicklungszeit einsparen kann.

Mehr als 1.000 Symbole

Das Tool beinhaltet eine Bibliothek mit mehr als 1.000 Standardsymbolen, die für unterschiedliche Visualisierungsprojekte genutzt werden können. Diese können via Drag and Drop positioniert, ausgerichtet und angepasst werden. Die Visualisierung lässt sich quasi in Echtzeit überprüfen, da sich aktuelle Prozesswerte während der Projektierung anzeigen lassen, entweder vom Zielsystem oder in einer Simulation. Zu der Standardbibliothek gehören auch statische Symbole wie Behälter und Gebäudegrundrisse sowie Schalter zum Einschalten von Geräten oder dem Setzen von Werten. Anzeigeformate für numerische Werte können definiert werden und Hintergrundfarben sind abhängig von SPS-Variablen einstellbar. Bei Bedarf lässt sich die Symbolbibliothek mit einem Software Development Kit (SDK) jederzeit durch eigene Symbole ergänzen. Um den Engineering-Aufwand zu reduzieren, kann der Anwender sich Mastertemplates mit Parameterübergabe erstellen, die sich auf weitere Projekte übertragen lassen. Zudem ist es möglich, einfachere Projekte fast automatisiert zu erstellen. Dabei lässt sich die Visualisierung an individuelle Designs und CI-Vorgaben anpassen.

Visualisieren mit HTML5

Per Drag and Drop zur Benutzerschnittstelle

Die Visualisierung ist an individuelle Bedürfnisse anpassbar, um z.B. Logos einzubinden oder spezielle Customizing-Vorgaben zu berücksichtigen. (Bild: Webfactory GmbH) [2]

Die Visualisierung ist an individuelle Bedürfnisse anpassbar, um z.B. Logos einzubinden oder spezielle Customizing-Vorgaben zu berücksichtigen. (Bild: Webfactory GmbH)

Integrierte Versionsverwaltung

Für die Projektverwaltung der Lösung kommt GIT als Versionsverwaltung für den gesamten Lebenszyklus der i4designer-Anwendungen zum Einsatz. Alternativ kann ein eigener GIT-Server genutzt werden, um die Projektdaten im privaten Speicherbereich zu behalten. Diese Versionsverwaltung wurde in den Designer integriert, damit auch mehrere Benutzer gemeinsam eine Visualisierung entwickeln können, ohne sich manuell abgleichen zu müssen. Da in der integrierten Sourcecode-Verwaltung alle Änderungen an den Projekten festgehalten werden, lassen sich bei Bedarf ältere Versionsstände wieder herstellen. Sobald die Visualisierung fertig ist ist, werden die Projektdateien auf das Zielsystem übertragen. Wie das geschieht, hängt davon ab, welche Möglichkeiten das in der Anwendung eingesetzte HMI- oder Scada-System unterstützt, denn die Projektdateien können sowohl online als auch offline übertragen werden, beispielsweise über FTP (File Transfer Protocol) oder über eine USB-Schnittstelle. Für Anwendungen mit vielen Installationen ist das auch automatisiert und zeitgesteuert möglich.

Einheitliche Oberfläche

In der Praxis steht dem Maschinen- oder Anlagenbediener durch die webbasierte Visualisierung überall die gleiche Bedienoberfläche zur Verfügung, unabhängig von der eingesetzten Steuerung. Die Anzeige ist außerdem an die unterschiedlichen Ausgabegeräte angepasst – egal ob die Bedienoberfläche auf dem Panel-PC an der Anlage oder Maschine, am Tablet und Smartphone unterwegs oder am PC im Büro genutzt wird.