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

Geräteunabhängige Visualisierung

Mobile Bedienwelten auf Basis von HTML5

Geräteunabhängige Visualisierung

Auch im Produktionsumfeld gewinnen Tablets zunehmend an Bedeutung. Maschinen- und Anlagenbauer stehen bei der Konzeption von Visaulisierungen damit vor der Frage, mit welcher Technologie sich möglichst viele Endgeräte abdecken lassen. Die Smart HMI GmbH stellt dazu eine Lösung vor, die komplett auf HTML5 basiert.

Bild: UID User Interface Design GmbH

Tablets laufen dem PC den Rang ab: Gartner etwa prognostiziert dem Tablet-Markt im Jahr 2014 einen Zuwachs von über 100 Prozent im Vergleich zu den Stückzahlen von 2012. Bald werden mehr Tablets als klassische PCs und Notebooks verkauft. Bis 2016 sollen zudem 40 Prozent der Belegschaft mobil arbeiten. Mobile Computing ist damit der klare Trend. Kein Wunder, dass diese Geräte zunehmend in den Fokus der Automatisierer sowie der Maschinen- und Anlagenbauer rücken, denn technisch ist deren Integration keine große Hürde mehr: Über WLAN-Schnittstelle können ‚Mobile Devices‘ sowohl auf Feldebene mit Steuerungen und Feldgeräten kommunizieren, wie auch auf Leit- und Unternehmensebene mit übergeordneten Systemen. Schritt für Schritt erobern sich die mobilen Geräte industrielle Anwendungsbereiche. Denkbar sind Anwendungen für das vertriebliche Umfeld, für die Produktion, die Betriebsleittechnik sowie für Service und Wartung. Allerdings wurde mit dem Aufkommen der Tablets die Dominanz des Windows-Betriebssystems gebrochen. Auf dem Tablet-Markt gibt es eine deutlich größere Vielfalt an konkurrierenden Systemen.

Eine Frage der passenden Technologie

Jeder Hersteller mobiler Betriebssysteme hat hierzu seine eigene Entwicklungsumgebung oder ‚Software Development Kit‘ (SDKs) geschaffen: Mit dem Android SDK entwickelt der Programmierer in Java. Das User Interface (UI) wird mit XML beschrieben. Apple hat sich im SDK für iOS für die Programmiersprache Objective-C entschieden. Das UI wird dabei mit einem visuellen Editor erstellt. Microsoft hingegen wählt für das Windows Phone C“ und C++. Blackberry-Apps werden wiederum mit Java ME (J2ME) entwickelt. Symbian unterstützt C++, Java sowie Python und Samsungs Bada C++. Für welches mobile Öko-System sich ein Industrie-Hersteller entscheidet, stellt damit eine schwierige Frage dar, weil jede Technologie Vor- und Nachteile mit sich bringt. Und aufgrund der in der Industrie üblichen kleinen Stückzahlen scheidet eine parallele Entwicklung für verschiedene Plattformen in der Regel aus. Der Trend geht daher in Richtung einer Cross-Plattform-Strategie: Hersteller entwickeln mobile HMIs mit einer Technologie, die überall läuft.

Zwischen Webstandard und Cross-Compiling

Für die Cross-Plattform-Strategie gibt es zwei Herangehensweisen: Zum einen Web Apps, die mit HTLM5 entwickelt werden, zum anderen sogenannte Cross Compiler (CC), welche von einer Sprache aus in die Sprachen der verschiedenen mobilen Betriebssysteme übersetzt werden. Dazu zählen etwa:

Cross Compiler unterstützen jedoch in der Regel nur einen Teil der mobilen Systeme. Beim Erzeugen des Codes können für einzelne Betriebssysteme Fehler auftreten, deren Reparatur aufwändig und nicht immer mit eigenen Mitteln lösbar sein kann. Zudem können Updates der Betriebssysteme erst genutzt werden, wenn die Cross Compiler angepasst sind. Hinzu kommt, dass die Systemanbieter in der Regel wenig Augenmerk auf den Industriemarkt haben. Der zweite Ansatz, eine App mit HTML5 zu entwickeln, ist universeller: Hier setzen die Nutzer auf einen offenen Web-Standard, der von allen mobilen Betriebssystemen unterstützt wird, da HTML5 im Webbrowser ausgeführt wird. So kann die mobile Anwendung wie eine Webseite über das Internet via URL bereitgestellt oder als Web-App ‚verpackt‘ in den jeweiligen App Store gestellt werden.

Das Visualisierungssystem der Smart HMI basiert ausschließlich auf HTML5. Der umfassende Einsatz der Web-Technologie vom Engineering bis zum Deployment gestattet Anwendern, Oberflächen mit vergleichsweise moderaten Hardware-Anforderungen unabhängig vom Endgerät zu gestalten. Bild: UID Interface Design GmbH

Visualisierungslösung auf Basis von HTML5

Die Smart HMI GmbH hat vor diesem Hintergrund nun ein Visualisierungssystem auf den Markt gebracht, welches ausschließlich auf HTML5 basiert – vom Engineering über das Deployment bis zur Visualisierung. Die Lösung wurde insbesondere im Hinblick auf die einfache Integration in Maschinen und Anlagen entwickelt. Das System ist auch auf Embedded Devices lauffähig, damit adressiert der Hersteller Anforderungen der Automatisierungsbranche und Feldgeräte-Hersteller. Kern der Lösung ist ein Prozessdaten-Gateway, der Smart HMI Connect, welcher als Bindeglied zwischen Steuerung und Web-Client dient. Weiterhin bietet die Visualierungslösung mit den Smart HMI Visuals eine Bibliothek von HTML5-Bedienelementen und Themen, die auf die Bedürfnisse von Maschinen- und Anlagenbauern zugeschnitten wurde und neben dem mobilen Kontext auch Multitouch-Bedienung unterstützt. Hersteller können die Bausteine und Designs an ihr Corporate Design anpassen. Eine web-basierte Projektierungsumgebung, Smart HMI Project, ergänzt das Produktspektrum. Hinzu kommt ein Service-Paket, welches der Anbieter gemeinsam mit dem Usability- und HMI-Dienstleister User Interface Design GmbH (UID) geschnürt hat. Das Angebot reicht von der technischen und ergonomischen Beratung über die Konzeption und grafische Gestaltung bis zur schlüsselfertigen HMI-Realisierung.

Rendering im Browser für moderate Systemanforderungen

Im Fokus der Entwicklung des auf HTML5-Technologie basierenden Werkzeugs stand die Realisierung von HMIs in hoher Designqualität und Usability, inklusive Multitouch-Interaktion. Dabei benötigt die Darstellung des Designs keine besonders aufwändige Hardware-Basis, denn HTML5 nutzt das Rendering der Web-Browser und die eingebaute Grafik-Beschleunigung. So können auch aufwändig gestaltete Oberflächen auf Systemen mit kleinen und kostengünstigen Prozessoren laufen.

Gegenüberstellung von Cross-Plattform-Strategien: Jede Lösung bringt unterschiedliche Vor- und Nachteile mit sich. Für die Hersteller von Visualisierungssystemen ergibt sich dabei die Herausforderung, ihre Werkzeuge trotz verschiedener Systemwelten durch einen möglichst hohen Automatisierungsgrad ‚fit‘ für die Industrie 4.0 und den Einsatz im Kontext von Cyber-Physical Systems zu machen.

Gestaltungsfreiraum für mobile Anwendungen

Den Interfaces liegt dabei das gleiche Prinzip des ‚responsive Designs‘ wie bei herkömmlichen Websites zugrunde: In jedem Screen werden Bedienelemente wie in einem Baukastensystem individuell angeordnet und lassen sich anpassen. Bei der Gestaltung ist der Ausgangspunkt daher nicht ein individuelles, aber beständiges Grundlayout, sondern vielmehr ein flexibles modulares System, in dem die ‚Controls‘ in unterschiedlichen Anordnungen mit einander harmonieren müssen. Daher ’sprechen‘ alle Controls dieselbe Designsprache: klare und eindeutige Farben und Formen, welche sich auf jedem Endgerät zu einem übersichtlich strukturierten Raster zusammenfügen lassen. Der Gedanke der Einheitlichkeit führt allerdings nicht zu Eintönigkeit. Bewusst gesetzte Gestaltungselemente dienen dazu, die Bildschirmdarstellung aufzulockern. So sorgen etwa leichte Glow-Effekte für eine futuristische Anmutung. Dieser spielerische Charakter könnte bei der Integration von Smart Devices in den Maschinenbedienung noch zunehmend eine Rolle spielen: Smart Devices, die nach und nach ihren Weg in die Arbeitswelt finden, können die umfassenden ‚User Experience‘ einer Maschinen- oder Anlagenbedienung positiv verändern. Entsprechend gestaltete Interfaces unterstützen diesen Effekt.