Visualisieren mit HTML5

Per Drag and Drop zur Benutzerschnittstelle

Themen wie Fernzugriff, Cloudlösungen oder BYOD (Bring Your Own Device) liegen heute im Trend, was den Aufwand für die Visualisierung steigert. Hier werden meist Lösungen gefordert, die auf HTML5 basieren. Mit dem i4designer als vollständig grafische, cloudgestützte Engineering-Plattform können HTML5-basierte Visualisierungen einfach und schnell im Browser auf jedem Gerät erstellt werden.
Themen wie Fernzugriff, Cloudlösungen oder BYOD (Bring Your Own Device) liegen heute im Trend, was den Aufwand für die Visualisierung steigert. Hier werden meist Lösungen gefordert, die auf HTML5 basieren. Mit dem i4designer als vollständig grafische, cloudgestützte Engineering-Plattform können HTML5-basierte Visualisierungen einfach und schnell im Browser auf jedem Gerät erstellt werden.Bild: 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.

Mit dem webbasierten i4designer lassen sich selbst komplexe HTML5-Visualisierungen ohne tiefgreifende Programmierkenntnisse per Drag & Drop erstellen, und das völlig unabhängig von der in der Maschine oder Anlage eingesetzten HMI- oder SCADA-Anwendung
Mit dem webbasierten i4designer lassen sich selbst komplexe HTML5-Visualisierungen ohne tiefgreifende Programmierkenntnisse per Drag & Drop erstellen, und das völlig unabhängig von der in der Maschine oder Anlage eingesetzten HMI- oder SCADA-AnwendungBild: WEBfactory GmbH

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.

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

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.

Die webbasierte Visualisierung bringt überall Vorteile, gleichgültig ob es sich um eine überschaubare Anlage, ein großes Werksareal oder den Zugriff auf global verteilte Standorte handelt.
Die webbasierte Visualisierung bringt überall Vorteile, gleichgültig ob es sich um eine überschaubare Anlage, ein großes Werksareal oder den Zugriff auf global verteilte Standorte handelt. 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.

Seiten: 1 2


  • VDMA startet Nachwuchskampagne

    Der VDMA startet die Nachwuchskampagne ‚Talentmaschine‘, die darauf abzielt, junge Menschen für Technologien und technische Berufe zu begeistern. Sie richtet sich vor…


  • NEONEX, Fabasoft Approve & KSB: „Win-win-win-Situation“ durch starke Partnerschaft

    Im Zuge einer Smart-Factory-Potenzialanalyse für ihren Kunden KSB identifizierte die Managementberatung NEONEX Opti mierungschancen bei der Beschaffung der Lieferantendokumentation sowie der Erstellung…