Visualisierung mit HTML5

Andreas Mühlbauer,

Das HMI geht ins Netz

Human Machine Interfaces sind der Schlüssel für das effiziente Bedienen und Beobachten von Maschinen und Anlagen. Als kostengünstige Alternative zu Industrie-PCs bilden HMIs die erste Schnittstelle zwischen dem Menschen und der Maschine. Bedingt durch Industrie 4.0 und die zunehmenden Vernetzung wandelt sich die Automatisierung und ermöglicht neue Bedienkonzepte. 

Die Web-Panels spielen mit dem Software-Tool PLCnext Engineer zusammen und eignen sich für alle Aufgaben der Automatisierung. © Phoenix Contact

Für die Automatisierung bietet HTML eine universelle Sprache, durch die Steuerungen und HMIs miteinander kommunizieren können. HTML ist eine maschinenlesbare Sprache zur Strukturierung und Gliederung von Texten. Die kooperierenden Organisationen World Wide Web Consortium (W3C) und Web Hypertext Application Technology Working Group (WHATWG) legen fest, welche Vokabeln und Grammatik in den Codes verwendet werden müssen. HTML ist somit die Kernsprache des World Wide Web und wird zur Erstellung von Webseiten genutzt. Die Strukturierung einer solchen Seite erfolgt durch Tags. Sie definieren, wo beim Aufrufen über den Browser Inhalte eingefügt werden sollen.

Die aktuelle Version HTML5 ermöglicht die plattformübergreifende Darstellung von Texten, Bildern, Videos und weiteren Elementen in einem Webdokument. Das bedeutet, dass auf jedem Rechnersystem, auf dem ein passend ausgerüsteter Webbrowser ausgeführt werden kann, die Anwendung entsprechend angezeigt wird. Im Idealfall ist der Nutzer unabhängig vom eingesetzten Betriebssystem. Theoretisch. In der Praxis funktioniert Edge jedoch nur mit Betriebssystemen von Microsoft, und Safari funktioniert nur mit Betriebssystemen von Apple. Die großen Open-Source-Browser Firefox und Chrome wurden auf alle wichtigen Betriebssysteme portiert.

Anzeige
HTML5 hat sich als neuer, offener Web-Standard etabliert. © Phoenix Contact

Wenn allgemein von HTML5 die Rede ist, wird darunter oft auch das Zusammenspiel von HTML mit CSS (Cascading Style Sheets) und JS (JavaScript) verstanden. Während HTML für die Seitenstruktur und den Inhalt einer Webseite verantwortlich ist, gibt CSS das Layout und Design vor. Durch JS lässt sich ein Dokument wiederum interaktiv und dynamisch gestalten. In der Web-Entwicklung sind diese drei Techniken also unweigerlich miteinander verknüpft. Das gilt ebenso für die moderne Applikationsentwicklung.

Besserer Schutz vor Hackerangriffen

Im Zuge von Industrie 4.0 hat die webbasierte und plattformübergreifende Visualisierung zahlreiche Vorteile. Die Nutzung des Standards HTML5 bietet dem Anwender Offenheit und Flexibilität, weil er eine universelle Kommunikation mit jedem HTML5-fähigen Web-Browser erlaubt. Wird zusätzlich CSS verwendet, erhält der Anwender ein adaptives System, das sich automatisch an das eingesetzte Endgerät anpasst. Der Trend geht daher in Richtung Web-Darstellung auf HTML5-Basis. Immer mehr Anwender setzen die Technologien ein, um nicht mehr an proprietäre Systeme gebunden zu sein. Deshalb baut eine steigende Zahl von Softwareanbietern und Steuerungsherstellern auf Web-Technologien und Cloud-Anwendungen.

© Antonio Guillem/Shutterstock.com

In der Automatisierung fordern Anwender ein hohes Maß an Bedienbarkeit, Zuverlässigkeit und Sicherheit. Das schließt neben der Hard- und Software auch die Kommunikationsschnittstellen ein. Mit HTML5 erfolgt der Zugriff plattformunabhängig und ist über nahezu jedes Endgerät möglich. Dies vereinfacht auch die Fernwartung, da sie ortsunabhängig über eine Zugriffsberechtigung geschehen kann.

Aus der Sicherheitsperspektive eröffnet HTML5 ebenfalls Vorteile. In der Web-Entwicklung hat sich zunächst der Adobe Flash Player etabliert. Analog HTML5 dient er dazu, eine Webseite nicht nur statisch anzuzeigen, sondern Animationen und Interaktionen einzubauen. Weil in Hacking-Kampagnen jedoch immer wieder Sicherheitslücken im Flash Player verwendet werden, gilt er mittlerweile als unsichere und veraltete Software. Adobe stellt den Player daher 2020 ein. Aufgrund der direkten Interpretation durch den Browser benötigt HTML5 keine Plug-ins und bietet deswegen einen besseren Schutz. Zudem sind keine manuellen Updates erforderlich.

Unterschiedliche Darstellung in den Browsern

In größeren Anlagen bietet sich das Bedienen und Beobachten über einen Tablet-PC an. © Phoenix Contact

Aus Visualisierungssicht erweist sich HTML5 allerdings nicht als Universallösung. Nicht jeder Browser stellt die junge Technologie gleich dar. Dienn die konkrete Umsetzung des offenen Standards liegt bei den Browserherstellern, welche die Spezifikationen implementieren müssen. Im Gremium von W3C arbeiten alle großen Browserhersteller mit. Da die beteiligten Unternehmen jedoch um Marktanteile konkurrieren, zeigt sich die Weiterentwicklung der Standards als spannungsreicher Prozess zwischen individuellen Alleingängen und Konsens. Dies liegt teilweise darin begründet, dass die Standardisierung ein langwieriger Prozess ist und den aktuellen Erfordernissen häufig hinterherhinkt.

Der Nachteil einer mangelnden Portabilität macht sich dadurch bemerkbar, dass HTML5-Anwendungen nicht überall gleich aussehen. Es treten Inkompatibilitäten zwischen den verschiedenen Browsern auf. Soll eine Anwendung dennoch stets gleich angezeigt werden, erhöht das den Entwicklungsaufwand. Klassische Automatisierungsanwendungen benötigen bei der Visualisierung Funktionen wie Trendkurven oder Alarmlisten. HTML5 könnte das ohne die Layout-Funktionen JS und CSS so nicht darstellen. Damit ein Web-HMI funktioniert, müssen im Hintergrund mehrere Technologien ineinandergreifen. Die Webtechnologie entwickelt sehr schnell weiter. In der eher auf Langlebigkeit ausgerichteten Automatisierung führt das zwangsläufig zu Problemen. Die steigende Komplexität der Anwendungen erfordert immer mehr Performance, während der Support für ältere Versionen früher eingestellt wird. Durch den beschleunigten technischen Wandel und Sicherheitsaspekte forciert sich dieser Prozess weiter.

Web-Panels für Basis- und High-End-Anwendungen

Phoenix Contact bietet kompatible Web-Panels mit unterschiedlichen Touch-Technologien an. © Phoenix Contact

Mit der neuen Web-Panel-Familie WP 4000 zur Realisierung anspruchsvoller Applikationen und den Basic Web-Panels BWP 2000 für Basisanwendungen bietet Phoenix Contact leistungsstarke HMIs an. Beide Produktserien sind mit einem HTML5-kompatiblen Browser ausgestattet und zeigen somit alle webbasierten Visualisierungen an, die den aktuellen HTML-Standard unterstützen. Die WP-4000- und BWP-2000-Geräte können also mit den meisten modernen SPS und IPC-basierten Steuerungen kommunizieren. Sie werden via Ethernet mit der jeweiligen Steuerung verbunden, auf der ein integrierter Webserver läuft. Dieser hostet die Seiten mit der Applikation, die auf dem Panel dargestellt werden. Im systemischen Einsatz spielen die Web-Panels optimal mit dem Ecosystem PLCnext Technology von Phoenix Contact zusammen. Sie lassen sich auch als Komponente mit Fremdsoftware und -steuerung nutzen. Gleiches gilt für Anwender, die kein Engineering-Tool verwenden, sondern die Benutzeroberfläche selbst mit HTML5, JS und CSS erstellen.

Dipl.-Betriebswirtin (BA) Julia Kurz, M.Sc., Produktmarketing HMI, Phoenix Contact HMI-IPC Technology / am

Anzeige

Das könnte Sie auch interessieren

Anzeige
Anzeige
Anzeige
Anzeige

Daten-Webservice

Stets die passenden Daten

Daten werden in der Regel so zur Verfügung gestellt, wie es für den konkreten Anwendungsfall notwendig ist. Daher fehlen in den folgenden Prozessschritten oft relevante Informationen. Ein Domäne-übergreifender Webservice kann hier Abhilfe schaffen. 

mehr...
Anzeige
Anzeige
Anzeige

Externes Display

Durchblick am Montage-Arbeitsplatz

Der Bildschirm „Sight“ ergänzt die Schraubdaten-Kommunikationszentrale Connect um eine neue Generation externer Displays von Montagespezialist Desoutter, die Montageprozesse und Schraubergebnisse direkt am Arbeitsplatz visualisieren.

mehr...

Newsletter bestellen

Immer auf dem Laufenden mit dem SCOPE Newsletter

Aktuelle Unternehmensnachrichten, Produktnews und Innovationen kostenfrei in Ihrer Mailbox.

AGB und Datenschutz gelesen und bestätigt.
Zur Startseite