Plattformneutrale Benutzungsschnittstellen

Webfähige HMIs mit HTML5 und JavaScript

03.06.14 | Autor / Redakteur: Frank Stegerwald / Reinhard Kluger

Systemaufbau von Procon-WEB: Systemübersicht einer webfähigen HMI
Systemaufbau von Procon-WEB: Systemübersicht einer webfähigen HMI (Foto: GTI-Control)

User Interfaces müssen künftig plattformneutral bedienbar sein. Dabei gilt: Ein Web-Server stellt die HTML5- und Java-Script-Dateien zur Verfügung. Über ein Interface wird auf die zu ladenden Daten aus dem Prozess oder einer Datenbank zugegriffen. Die Serverkomponenten stellen diese Daten zur Verfügung.

Neben klassischen Bedienpanels gibt es künftig vermehrt auch mobile Lösungen. Um den Aufwand fürs Engineering in Grenzen zu halten, muss der Ingenieur auf Webfähiges HMI setzen [1]. Doch, wie ist eine webfähige HMI aufgebaut?

Jede Webanwendung benötigt zwingend einen Server und einen oder mehrere Clients. Der Client lädt vom Server die HTML und JavaScript Dateien für die Benutzeroberfläche, die im jeweiligen Browser dargestellt und abgearbeitet werden. Durch die Nutzung der neuen HTML5-Sprachkonstrukte in Verbindung ,mit JavaScript fühlen sich diese „Seiten“ nicht mehr wie klassische HTML-Webseiten an, sondern die Seiten verhalten sich wie Applikationen, die man von den Desktop-Betriebssystemen kennt.

Die Rechenleistung voll nutzen

Die Rechenleistung sowohl der CPU als auch des Grafikprozessors des Clients (Smartphone, Tablet oder PC) wird dabei voll genutzt, um Leistungen wie schnelle Prozesswertaktualisierung, dynamische Bildgenerierung und schnelle Benutzerinteraktion zu erreichen. Der Web-Server stellt die HTML5- und JavaScript-Dateien zur Verfügung und bietet das Interface für den Zugriff auf die aus dem Prozess oder einer Datenbank zu ladenden Daten. Diese Daten werden von entsprechenden Serverkomponenten zur Verfügung gestellt.

Anwender kommt ohne Spezialkenntnisse aus

Als Beispiel lässt sich der Systemaufbau von Procon-WEB wie folgt darstellen (siehe auch Aufmacherbild): Durch den Designer (Projektierungswerkzeug, links im Bild) wird das entsprechende Visualisierungsprojekt erstellt. Dieser Designer unterscheidet sich in seiner Bedienung und Handhabung nicht von den klassischen Projektierungswerkzeugen, der Anwender muss bei der Erstellung keinerlei Kenntnisse der Webtechnologien wie HTML5 oder JavaScript besitzen. Das Tool generiert im Hintergrund statt klassischer Bildbeschreibungen direkt HTML5- und JavaScript-Dateien, die das Visualisierungsprojekt in der Praxis beschreiben.

Spezielle Erweiterungen erlauben die Konfiguration dynamischer Seiten mit Bildwechsel über den Befehl „Wischen“. Oder: Der Anwender an der Maschine kann verschiedene Animationseffekte nutzen. So lassen sich zum Beispiel Objekte verschieben, Objekte während der Ansicht beschleunigen.

Auch Überschwing-Effekte lassen sich realisieren. Diese Dateien werden dann vom Webserver zur Laufzeit dem Client zur Verfügung gestellt, damit diese im Browser des Clients dargestellt und ausgeführt werden können. Der Webserver ist gleichzeitig die gemeinsame Schnittstelle zwischen den Clients und den vorhandenen Funktionsservern.

Plattformneutral vs. plattformspezifisch

Die Designerkomponente ist ein auf Windows basierendes Projektierungswerkzeug. Dieses Tool beinhaltet einen großen Teil der Systemleistung. Somit lassen sich HMI-Projekte effizient generieren, und zwar in Form der Serverkonfiguration und der Bedienoberflächen in HTML5 und JavaScript. Die Laufzeitumgebung ist für die Clients (gemeint sind hier die Bedienoberflächen) plattformneutral realisiert und ohne Softwareinstallation möglich. So kann der Anwender beliebige Devices, wie Smartphones, Tablets, Panel-PCs oder Desktop-Systeme, nutzen. Denn für deren Betrieb ist nur ein entsprechend moderner Browser (Internet Explorer, Safari, Firefox, Google Chrome) notwendig.

Inhalt des Artikels:

Kommentar zu diesem Artikel abgeben
nicht mit JavaSript sondern in CSS3 lassen sich Seiten gestalten: - fließende Spaltenumbrüche...  lesen
posted am 09.04.2015 um 09:57 von Unregistriert


Mitdiskutieren

Dieser Beitrag ist urheberrechtlich geschützt. Sie wollen ihn für Ihre Zwecke verwenden? Infos finden Sie unter www.mycontentfactory.de (ID: 42728465 / Software-Entwurf & Echtzeit-Design)

Embedded Software Engineering Report abonnieren

4 mal jährlich: Die kostenlose Pflichtlektüre für Embedded­-Software- und Systems-Entwickler, von Analyse bis Wartung und Betrieb

* Ich bin mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung und AGB einverstanden.
Spamschutz:
Bitte geben Sie das Ergebnis der Rechenaufgabe (Addition) ein.