Mit der Präsentation des ersten iPhones auf der Macworld Conference & Expo in San Francisco im Januar 2007 wurde ein neuer Gerätetypus mit einer bis dahin noch nicht erreichten Usability für eine rein per Touch zu bedienenden Benutzeroberfläche vorgestellt. Seitdem wird dieser Ansatz zunehmend von anderen Anbietern übernommen und überarbeitet. Damit nicht genug: Der seit 20 Jahren vorherrschende Standard des PC mit Microsoft-Betriebssystem als Basis vieler softwaretechnischer Lösungen hat offensichtlich seinen Zenit überschritten. Innerhalb kurzer Zeit sind PC oder Notebook als Standard-Plattform abgelöst, mobile Geräte in Form von Smartphones und Tablets sind leistungsmäßig gleich gezogen und haben in ihrer Verbreitung die klassischen Systeme überholt.

Damit haben sich die Verhältnisse in Bezug auf die Software-Plattformen und die Möglichkeiten der Software-Distribution dramatisch geändert. Mit anderen Worten: APPs und Cloud-basierende Lösungen sind an die Stelle Windows-basierender, per CD zu installierender Software gerückt. Moderne HMIs müssen vor diesem Hintergrund klassische und mobile Lösungen gleichermaßen unterstützen und dabei die Anforderungen bezüglich Usability-Gesichtspunkten erfüllen. Die dabei bevorzugte Lösung kann nur auf HTML5, CSS3 und JavaScript aufsetzen, weil diese Technologie sowohl international normiert, als auch auf allen Plattformen verfügbar ist und dabei die restriktiven Distributionswege der Hersteller über den systemeigenen Store umgeht.

Die Mankos bisheriger HMIs

Die Oberflächen von bisherigen HMIs sind meist statisch und wirken altbacken. Durch eine maschinenorientierte Sicht auf die Anlage werden die Oberflächen häufig extrem überfrachtet. Ein intuitives und aufgabenorientiertes Arbeiten ist hier nur selten vorzufinden. Zwar finden sich heute bei vielen Visualisierungslösungen bereits moderne Konzepte wie Multitouch; Diese wurden jedoch nicht konsequent in allen Teilbereichen der Oberflächen und im Einklang mit einer modernen Bedienphilosophie umgesetzt.

Auswahl an Multitouch-Gesten: Vom einfachen Touch bis zum Zweifinger-Zoom (pinch).

© GTI-control

Das iPhone funktioniert nur deshalb so gut, weil es von Anfang an und ausschließlich auf Touch-Bedienung ausgelegt war und nicht nachträglich dafür erweitert wurde. Dies ist einer der Gründe, weshalb mittlerweile viele mobile Betriebssysteme namhafter Hersteller in der Versenkung verschwunden sind. Hinzu kommt, dass projektierbare HMI-Lösungen meist nur auf eine Plattform ausgelegt sind und Lösungen für mobile Endgeräte vielfach nur provisorisch beispielsweise über Remote-Lösungen möglich sind. Als Konsequenz daraus bleibt das Nutzungserlebnis auf der Strecke.

Bis hierhin lässt sich also festhalten: Durch Smartphone & Co. sind die Anforderungen an HMIs beziehungsweise deren Projektierung gewachsen. Die Visualisierung soll neben dem klassischen Touchpanel zumindest in Teilbereichen auch auf mobilen Endgeräten angezeigt werden. Gleichzeitig steigen Erwartungshaltung und Ansprüche an den Oberflächen. Um dem gerecht zu werden, gilt es,  neue Wege einzuschlagen.

Der webbasierte Ansatz

Da Browser-Plugins wie Flash oder Silverlight in den Webbrowsern von vielen Herstellern mobiler Betriebssysteme nicht mehr unterstützt werden, muss eine webbasierte und plattformunabhängige HMI – wie bereits angedeutet - komplett auf HTML5, CSS3 und ­JavaScript basieren. Diese Entwicklung wird von den Herstellern dahingehend unterstützt, dass die Browser immer weiter optimiert und verbessert werden. HTML5 hat mittlerweile in der Funktionalität zu den Plugin-orientierten Lösungen aufgeschlossen und diese sogar teilweise überholt. Unter anderem werden Multitouch, Animationen und Transitionen bereits von allen wichtigen Browsern nativ unterstützt.

Systemum­gebung bestehend aus Designer zur Projektierung, Serverlandschaft mit Steuerungs­anbindung und Client.

© GTI-control

Eine projektierbare Visualisierungslösung besteht aus zwei Kernkomponenten: einer Projektierungs-Software sowie einer Laufzeitumgebung. Eine webbasierte Laufzeitumgebung teilt sich in Server-Anwendung(en) sowie der Web-Anwendung (Clients) auf. Eine in JavaScript geschriebene Web-Anwendung nutzt die Server zum Datenaustausch und unterscheidet sich von einer normalen dynamischen Webseite (zum Beispiel PHP, Java, ASP) dadurch, dass die komplette Logik zur Darstellung direkt im Client ausgeführt wird. Es finden somit keine langsamen Postbacks zum Webserver statt. Dieser dient lediglich zum Ausliefern der Oberflächen-Konfiguration (JavaScript Object Notation (JSON) in HTML-Dateien), die durch die Projektierungs-Software erzeugt wurde.

In der Server-Landschaft wird die Funktionalität gekapselt, die neben der Oberflächen-Darstellung nötig ist und sich nicht aus dem Browser heraus erfüllen lässt. Dies sind unter anderem die Tag-Kommunikation zur SPS, Daten-Aufzeichnung oder Dateizugriff. Die Client-Laufzeitumgebung ist komplett in JavaScript geschrieben sorgt für die Darstellung und den Datenaustausch zur Server-Landschaft.

Der Webbrowser stellt für die Laufzeitumgebung das „Betriebssystem“ dar. Da neben den klassischen Systemen wie Windows oder Linux auch auf allen wichtigen mobilen Systemen wie Android, iOS und WindowsPhone ein HTML5-fähiger Browser verfügbar ist, wird dadurch eine Client-seitige Plattformunabhängigkeit erreicht.

Projektieraufwand reduzieren

Im ersten Moment bedeutet die Unterstützung von weiteren Geräten neben dem Bedienpanel der Maschine auch mehr Projektierungsaufwand. Dem müssen die entsprechenden Tools entgegenwirken und Konzepte anbieten, die dabei unterstützen, den Aufwand in Grenzen zu halten. Das heißt unter anderem: Das HMI-Tool muss die konkrete Zusammenstellung von verschiedenen Screen-Layouts zu Geräten unterstützen.

Unterschiedliche Layouts für unterschiedliche Bediengeräte: Jedes Layout kann aus mehreren Varianten bestehen – zum Beispiel vollflächig, geteilt etc.

© GTI-control

Ein Screen-Layout legt über Container fest, wie und an welcher Stelle Oberflächen zur Laufzeit dargestellt werden. Die automatische Skalierungen von Oberflächen in die Container der Layouts erlaubt die Wiederverwendung von Darstellungen in unterschiedlichen Gerätekonfigurationen und reduziert so den Projektierungsaufwand enorm. Damit werden die Möglichkeiten des Responsive Designes, wie es bei der Web-Entwicklung auf Bwasis von CSS3 realisiert wird, auf die Ebene einer Projektierung gebracht, die jeder Automatisierungstechniker abdecken kann. Quasi als „Abfallprodukt“ ist dann eine maschinenspezifische Sonderausprägung über wenige Einträge in einer Gerätekonfiguration erstellbar. Somit lassen sich Abweichungen vom Standard mit geringem Aufwand umsetzen.

Ein Layout teilt sich typischerweise in drei Teilbereiche auf: Status-, Navigations- und Bildbereich. Die einzelnen Bereiche werden durch Container definiert. Ein Container kann beispielsweise dafür sorgen, dass die einzelnen Oberflächen vollflächig oder nacheinander angeordnet werden.

Im Normalfall ist das Display bei einem Touchpanel im Gegensatz zu einem Smartphone deutlich größer, weshalb hier mehr Inhalt zu einer Zeit darstellbar ist. Beim Smartphone lassen sich in einem Bereich jedoch ebenfalls mehrere Ansichten hinzufügen. Das Wechseln zwischen den einzelnen Ansichten erfolgt komfortabel per Wisch-Geste, wie man sie von vielen Apps gewohnt ist. Der Status und Navigationsbereich bleibt konstant, während im Bildbereich zwischen den Ansichten hin und her gewechselt werden kann.

Wenn auch nicht zu erwarten ist, dass Smartphones und die klassischen Bedienpanels jemals komplett ersetzen werden, so sind sie trotzdem eine hervor­ragende HMI-Ergänzung etwa in den Bereichen Produktplanung, Controlling, Wartung und Materiallogistik. Hersteller von HMI-Lösungen müssen folglich Produkte auf die gewachsenen Anfor­derungen im Zusammenhang mit den mobilen Geräten ausrichten. Dies geschieht am besten mit einer webbasierten Darstellung in enger Verknüpfung mit einer starken und robusten Server-Landschaft.

Autor: Matthias Kolmer ist verantwortlich für die Technologie- und Grundlagenentwicklung im Bereich der Web-HMI bei GTI-control.

Smartphone- und Tablet-Oberflächen

Oberflächen auf mobilen Endgeräten unterscheiden sich massiv von denen klassischer Desktop-Software. Sie Kennzeichnen sich vor allem durch:

• Multitouch und Gesten
• Dynamische statt statische Oberflächen
• Darstellung von Oberflächen-Ausschnitten; weitere sind per „Wisch-Geste“ erreichbar
• Modernes / schlichtes Design
• „Weiche“ Oberflächen-Wechsel durch animierte Übergänge (Transitions)
• Keine tiefe Verschachtelung in der Anwendung
• Auslegung auf unterschiedliche Auflösungen und Displaygrößen unterschiedlicher Geräte und Hersteller
• Cloudbasierte Synchronisierung von Oberflächen-Einstellungen
• Optimierung für Hoch- (Normal) und Quer- (Landscape) Format mit Hilfe von Sensoren

Der Nutzen für Maschinenbauer und Betreiber

Die Verwendung von Smartphones und Tablets bringt vielfachen Nutzen – sowohl dem Maschinenbauer als auch dem Betreiber der Anlagen:

Maschinenbauer / OEM

• Projektierung für unterschiedliche mobile Endgeräte
• Größere Hardware-Auswahl an Bediengeräten möglich
• Kostengünstige Projektierung durch Wiederverwendbarkeit von Oberflächen
• Modernes Nutzungserlebnis als Alleinstellungsmerkmal

Betreiber / Endkunde

• Optimale aufgabenorientierte Maschinenbedienung
• Mobile Überwachung der Anlage
• Unterstützung eines erweiterten Anwenderkreises im Umfeld der Maschine (Industrie 4.0)
• Einfachere Bedienung mit Hilfe dynamisch zugeschnittener Oberflächen
• Gewohnte Bedienphilosophie aus dem Bereich der mobilen Endgeräte