Bitte aktivieren Sie JavaScript in Ihren Browsereinstellungen um diese Seite zu nutzen!
Schließen

Lokale Benutzeroberflächen -
überall verfügbar

Ein performanter Ansatz, um unabhängig vom Endgerät zu werden

Die Ansprüche an die Benutzeroberflächen von embedded Systemen steigen mit der Einführung von IoT und Industrie 4.0. Existierende lokale Bedienoberflächen sollen möglichst ohne Probleme und Aufwand auf nahezu jedem denkbaren Endgerät, vom Smartphone bis zum Laptop, dargestellt werden können. Dazu wird üblicherweise die Bedienoberfläche als Webanwendung gestaltet und damit die Visualisierung der Oberflächenlogik auf den Webbrowser verlagert.

Embedded Systeme im industriellen Umfeld müssen in vielen Fällen direkt an der Maschine bedient werden und verwenden daher eine stationäre Bedienoberfläche. Zurzeit sind solche Anforderungen durch eine klassische Grafiklösung, basierend auf einem lokalen Grafikserver und lokaler Grafikhardware, am effektivsten abbildbar. Im Zuge von IoT und Industrie 4.0 tritt jedoch immer häufiger die Forderung nach Weboberflächen oder Remotefähigkeiten via browserbasierten Lösungen auf. Mit der Einführung von HTML 5 und den immer leistungsfähigeren Grafikmöglichkeiten kann nun dieser Forderung genüge getan werden. Man muss sich jedoch bewusst sein, dass webbasierte Lösungen von der technischen Seite einen erheblichen Mehraufwand bedeuten und auch schwieriger gegen Angriffe von außen abzusichern sind. Soll eine lokale Browserlösung implementiert werden, so steigen die Anforderungen an die benötigte Hardware erheblich und sind im industriellen Umfeld kommerziell oft nicht mehr darstellbar.

Remote-Desktop mit VNC, RDP, ...

Die gängigste Methode eine lokale Grafik weiterzuleiten ist die Verwendung einer Remote-Desktop-Software. Für unterschiedliche Betriebssysteme stehen Lösungen wie VNC (Virtual Network Computing), RDP (Remote Desktop Protokoll) usw. zur Verfügung. Auf dem embedded System muss ein entsprechender Service laufen, der die Inhalte des Videospeichers oder eines Framebuffers auf Änderungen untersucht und diese mittels eines geeigneten Protokolls an das Visualisierungsgerät weiterleitet. Auf dem Anzeigegerät muss immer ein entsprechender Empfänger installiert sein, der die Daten entweder in einem eigenen Fenster oder in einem Browser visualisiert. Da weder der Ort noch der Zeitpunkt von Änderungen genau vorhergesagt werden können, ist ein relativ hoher Aufwand nötig, um die Änderungen zu erfassen. Kleinere Systeme kommen hier relativ schnell an ihr Limit.

Remote via HTML5

Mit den Möglichkeiten die HTML5 bietet, kann auch eine Web-basierte Remote-Visualisierung realisiert werden. Diese übernimmt die Aufgaben einer Remote-Desktop-Software und kann auch als reine Webvisualisierung funktionieren. Die Applikationslogik verbleibt immer auf dem embedded System. Die Aufwendungen für das Zeichnen verschieben sich dann je nach Einsatz vom embedded System zum Anzeigesystem. Nach erfolgreicher Verbindung erhält der Browser ein Regelwerk in Javascript, welches Befehle, die der Webserver versendet, zur Laufzeit interpretiert. Der Browser erhält so die Grundfunktionalität einer externen Grafikkarte. Dieses Konzept erfordert auf der Anzeigeseite keine Apps, Plug-Ins oder Cookies.

Websockets vs. http oder warum HTML4 nicht als Plattform geeignet ist

Mit HTML4 war nur http-basierte Kommunikation möglich. Das heißt bekanntermaßen, dass eine zustandslose Verbindung, mit diversen "Hacks" wie AJAX simuliert werden musste. Mit Websockets wird eine permanente Full-Duplex Verbindung mit einem im Vergleich zu http nicht existenten Overhead ermöglicht. Diese Eigenschaften des Protokolls ergeben zudem eine extrem geringe Latenz im Millisekunden-Bereich und öffnen damit die Tür zu Echtzeit-ähnlichem Verhalten der Benutzeroberfläche. Durch die Websockets-basierte Kommunikation ist die Animation der grafischen Objekte nahezu in Echtzeit möglich.

Konzept

Mit Augenmerk auf eine möglichst performante Visualisierung muss unnötiger Kommunikations-Overhead zwischen Grafikserver und Webserver vermieden werden. Der Webserver muss in möglichst kurzer Zeit und mit möglichst geringem Aufwand Zugang zu den Änderungsinformationen erhalten. Der effektivste Weg dorthin, besteht darin, den Webserver als integralen Bestandteil des Grafikservers zu realisieren. In diesem Fall können Änderungen ohne nennenswerten Zeitverlust vom Grafikserver an das Anzeigegerät weitergeleitet werden.

Eine weitere Effektivitätssteigerung wird durch Strukturieren der Webseite im Browser erzielt. Solange nur gerasterte Bildinformationen aus dem Videomemory an das Anzeigegerät weitergeleitet werden, genügt ein Canvas-Element für die komplette Darstellung. Scrollen, Verschieben oder Löschen von Objekten wird in diesem Fall mit sehr hohem Datenverkehr erkauft. Die Effektivität steigt deutlich, sobald für jedes Objekt ein eigenes Element angelegt wird. Der Grafikserver sendet dann - je nach Anforderung - gerasterte Bilder oder skalierbare Vektoren in Form von SVGs, die das jeweilige Objekt beschreiben. Die Aufwendungen für das Zeichnen verschieben sich damit mehr auf die Browserseite. Als angenehmer Nebeneffekt verringert sich die zu übertragende Datenmenge. Der Browser setzt aus den überlagerten Elementen das Gesamtbild des Displays oder einer Applikation zusammen. Um z.B. ein Objekt zu verschieben, muss nur die entsprechende Koordinate des jeweiligen Elements im DOM-Baum angepasst werden.

Hybrid-Grafik-Server

Die Firma XiSys Software hat einen Grafikserver entwickelt, der nicht nur über einen integrierten Window- und Objektmanager verfügt. In der neuesten Version ist auch die Funktionalität eines Webservers implementiert. Mit dem Objektmanager ist der Server in der Lage, einen hierarchisch strukturierten Objektbaum aufzubauen und zu verwalten. Sobald sich ein Teilnehmer über eine Websocket-Verbindung anmeldet, wird die komplette Objekthierarchie aller auf einem Display dargestellten Objekte als DOM-Baum im Webbrowser abgebildet. Im DOM-Baum stehen in Abhängigkeit der Objekteigenschaften für jedes Objekt ein oder mehrere Canvas-Elemente oder SVG-Elemente zur Verfügung. Jedem Element werden automatisch individuelle Eventhandler zugeordnet, welche die Eventeigenschaften des Objektes am besten unterstützen. Z.B.: Beim Berühren eines Eingabeelementes wird automatisch ein Softkeyboard eingeblendet, das Element wird, falls nötig, in den sichtbaren Bildausschnitt geschoben und die Tastatureingaben an den Webserver weitergeleitet.

Ist im lokalen System keine Grafik-Hardware vorhanden oder soll nur eine Applikation im Browser visualisiert werden, kann der Browser auch eine asynchrone virtuelle Visualisierung anfordern. In diesem Fall wird ein Klon des Hybrid-Grafik-Servers erzeugt. Anstelle ein Objekt lokal zeichnen zu müssen, wird aus der Verktorliste ein SVG-Element abgeleitet und an den Browser verschickt. Der Browser übernimmt nun alle Renderaufgaben. Das embedded System kann sich hierbei auf reine Verwaltungsaufgaben beschränken - was natürlich dem Ressourcenverbrauch sehr entgegenkommt.

Performance Aspekte

Um eine hohe Akzeptanz der Bedienoberfläche zu erreichen, sollte diese ohne Verzögerungen auf Eingaben reagieren. Bei statischen Bildaufbauten ist dies kein Problem. Komplexe animierte Grafiken sind dagegen eine Herausforderung. Um flüssige Animationen und gleichzeitig schnelle Reaktionen auf Benutzereingaben zu gewährleisten, muss das Hauptaugenmerk auf einen möglichst hohen verzögerungsfreien Datendurchsatz gelegt werden. Latenzzeiten, verursacht durch lange Signallaufzeiten, schlechte Verbindungen oder die Überlastung eines Anzeigesystems müssen unbedingt vermieden werden. Daher darf weder der Server noch der Browser auf eine Quittierung eines abgesetzten Befehls warten müssen. Solange die Netzverbindung schnell genug ist und das Anzeigesystem die eingehenden Kommandos schneller bearbeiten kann als neue ankommen, läuft alles rund. Die Praxis zeigt, dass vorwiegend bei mobilen Geräten bisweilen Performance-Probleme auftreten können. Diese äußeren sich in erster Linie durch langsame Reaktionszeiten. Um dem entgegenzuwirken, ist es notwendig, im Webserver einen Algorithmus zu implementieren, der erkennt, welche Gesamtverzögerungszeit aufgrund von aufgestauten Befehlen zu erwarten ist. In Abhängigkeit dieses Ergebnisses muss dann die Abarbeitungsgeschwindigkeit des Grafikservers angepasst werden. Dieser Algorithmus wird auch zur Synchronisation mehrerer paralleler Anzeigegeräte verwendet.

Implementierungsaufwand

Ein bestechender Vorteil des hybriden Grafikservers ist der geringe Aufwand bei der Entwicklung mobiler Anwendungen. Die Benutzeroberfläche muss nur ein einziges Mal entwickelt werden, die Adaption an unterschiedliche Endgeräte wird vom Grafikserver automatisch geleistet. Es ist nicht erforderlich, eine parallele Infrastruktur mit den dabei anfallenden Entwicklungsaufgaben zu erstellen.

Alle Vorteile im Überblick

  • Für die Visualisierung in einem Browser werden weder eine App, Plug-Ins oder Cookies benötigt. Die Visualisierung hinterlässt keine Spuren.
  • Visualisierung mehrerer Systeme in iFrames möglich.
  • Durch die Vorhersagbarkeit und Eingrenzbarkeit von Änderungen wird das zu steuernde System nur minimal belastet.
  • Der integrierte Webserver kann quasi ohne Zeitverlust auf bereits gerenderte Daten zugreifen und diese sofort verteilen.
  • Die Organisation eines DOM-Baumes für alle Objekte ermöglicht es, Bildschirmmasken vom Browser zusammensetzen zu lassen. Entfernen, Verschieben und Scrollen von Objekten wird vom Browser übernommen.
  • Das Verwenden von SVGs erspart das Rendern von Objekten seitens des embedded Systems.
  • Es können asynchrone virtuelle Sessions gestartet werden, die z.B. nur den Zugriff auf eine Applikation erlauben.
  • Der Programmierer muss sich nicht um die Inkompatibilitäten verschiedener Browser kümmern. Er entwirft mit einem GUI-Builder nur einmal seine Bildschirmmasken. Diese werden dann lokal und im Browser identisch abgebildet.

Fazit

Das vorgestellte Konzept besticht durch seine Flexibilität. Damit können sowohl die Aufgaben eines lokalen GUI und einer Remote-Desktop-Software als auch Visualisierungen, welche nur eine Web-basierte Anzeige unterstützen, realisiert werden. Das GUI ist für alle Szenarien identisch. Der Programmierer muss sich nie mit den Techniken unterschiedlicher Anzeigesysteme auseinandersetzen.

Web visualization

WEB based Machine Operation by Smart Devices and locally by a regular HMI

IoT and Industry 4.0 require new approaches to operate machines. In addition to local human machine interfaces at the machine, web based services to manage and survey functions remotely are a key ingredient to move forward in industrial automation applications. Fast reliable and secure communication infrastructures, established browser technology and smart devices are the foundation for location independent man machine interaction. A technological challenge hereby is to create a local and browser based visualization to accommodate typical embedded systems. They are usually not designed as power horses for compute intense graphic applications. For that XiSys, known for its industrial proven embedded graphics solution XiBase 9, has developed a hybrid server which combines both functionalities very efficiently.

The hybrid server supports local embedded graphic platforms and in addition, WEB based display and interaction on smart devices. To achieve this into the local graphic library a WEB server has been integrated.

Innovative enhancements of XiBase9 offer now the option to operate a machine locally or on smart devices supporting standard browser like Edge, Chrome, Firefox, Internet Explorer, Opera or Safari. Secure access is guaranteed by SHA1 encryption technologies.

Since HTML5 software standards like WEB sockets, canvas, objects and/or java script are the basis for the enhancements, the smart devices do not require any modifications nor the installation of additional apps, plugins, cookies or a java engine. Furthermore, no traces of usage are left behind on the remote devices. The innovative software architecture creates graphic objects in real time and within different browser environments even concurrently.

Overview on the key features of the new XiBase9 embedded graphic solution:

  • local visualization on local hardware
  • WEB based visualization in standard browsers under Windows, Linux, iOS or Android
  • on smart devices no additional apps, plugins, cookies nor java are required
  • automatic support of local user interface, e.g. touch, multi touch
  • supports individual, animated objects
  • display on up to 25 devices concurrently, local graphics in addition
  • asynchronous display of single programs in browser
  • supports completely the concept: visualize without programming
  • downward compatible
  • language independent
  • allows a small system footprint, e.g. low power, high performance, cost effective system designs
  • local graphics available for ARM, PowerPC and x86 CPU architectures
  • supported operating systems: Linux, Windows and RTOS Microware OS-9
  • SPES 2020 - Software Platform
    Embedded Systems

    SPES 2020 ist ein vom BMBF gefördertes Forschungsprojekt zur Entwicklung einer Methodik zur durchgängig modellbasierten Entwicklung von eingebetteten Systemen.

    Im Rahmen der nationalen Innovationsallianz "Software-Plattform Embedded Systems 2020" werden Lösungen für die domänenübergreifende und modellbasierte Entwicklung von eingebetteter Software erarbeitet. Modellbasierte Verfahren auf Basis eines soliden mathematischen Fundaments ermöglichen eine effiziente Entwicklung eingebetteter Systeme beginnend bei den initialen Kundenanforderungen ¨ber den Entwurf und die Implementierung bis hin zur Verifikation und Zertifizierung von Systemen.

    An den Forschungs- und Entwicklungsarbeiten sind 21 Partner aus Wirtschaft und Wissenschaft aus ganz Deutschland beteiligt. Im Laufe des Projektes ist geplant, weitere, insbesondere kleinere und mittlere Unternehmen zu beteiligen, so dass ein breiter Transfer der Ergebnisse in die deutsche Wirtschaft gewährleistet wird.

    Informationsbroschüre SPES 2020

    Beschreibung der exemplarischen Umsetzung eines Modellierungsansatzes für embedded Grafiksysteme von XiSys Software GmbH-E4You

    Modell-basierte grafische
    Entwicklung

    Die Komplexizität von "embedded" Maschinen steigt zunehmend. In Anbetracht der Erwartungshaltung der Kunden, der Einflüsse aus der Consumerwelt und des Konkurrenzkampfes müssen immer mehr und mehr neue Features eingebaut werden. Besteht zusätzlich die Notwendigkeit einer grafischen Oberfläche, erfordern auch kleine Geräte einen riesigen Entwicklungsaufwand.

    Es ist also naheliegend, sich Gedanken über alternative Entwicklungsmethoden zu machen. Bei genauer Analyse ist festzustellen, dass viele Geräte mit ähnlichen Regeln arbeiten und dementsprechend auch entwickelt werden könnten. Ähnliche Schemata lassen sich in Modellen abbilden. Sie projizieren die Aufgaben auf eine abstrakte Ebene und arbeiten sie dort ab. Basierend auf diesen Betrachtungen kann von einer neuen Methode, der "Modellbasierten Entwicklung" gesprochen werden. Ein Ansatz, der auch durch das BMBF im Rahmen von "Software Plattform Embedded Systems (SPES) 2020" gefördert wird.

    Im Mittelpunkt steht ein Datenmodell, welches alle zu einem Gerät gehörigen Komponenten (HW, SW, Netzwerk, Sensoren, Aktuatoren, ...) auf einer abstrakten Ebene abbildet und verbindet. Wir bezeichnen dieses Modell als Softwarestecker. Das Datenmodell ist ein fertig einsetzbares Programm. Es sammelt und verwaltet alle Daten der zugehörigen Komponenten und stellt diese in abstrahierter Form zur weiteren Verarbeitung - lokal oder im Netzwerk - zur Verfügung. Die einzelnen Komponenten müssen lediglich auf Treiberebene angepasst werden. Der Arbeitsaufwand beschränkt sich ausschließlich auf das Konfigurieren des Modells. Der Einsatz eines Datenmodells spart enorm viel Zeit, ist jedoch nur der erste Schritt in dem neuen Entwicklungskonzept. Die vom Datenmodell zur Verfügung gestellten Daten wollen verarbeitet werden. Dies erfolgt mit einem Ablaufprogramm. Zunehmend besteht die Notwendigkeit, die Daten zu visualisieren und mittels eines GUI auch Eingriffe in den Programmablauf zu ermöglichen.

    Natürlich können diese Aufgaben mit der klassischen individuellen Programmierung erledigt werden. Am Beispiel eines Anzeigeinstruments wird jedoch schnell ersichtlich, welch immenser Aufwand und welch gestalterische Fähigkeiten notwendig sind, um den heutigen Anforderungen gerecht zu werden. Durch die weite Verbreitung von Geräten mit ansprechenden Oberflächen wie iPhones steigt auch die Erwartungshaltung beim Kunden im "embedded" Umfeld. Vor einigen Jahren war es ausreichend, eine schematische Darstellung mit einem Balken oder einfachen Zeiger mit Beschriftung zur Darstellung eines Wertes einzusetzen. Dies ist für Programmierer mit einem vertretbaren Aufwand umsetzbar. Zeitgemäße Anzeigegeräte erfordern eine wesentlich aufwändigere Darstellung. Es werden Farbverläufe, Schattenwürfe, Glaseffekte usw. verlangt. Dies übersteigt die gestalterische Kompetenz der meisten Programmierer. Allein schon der wesentlich höhere Aufwand für das mathematische Modell eines solchen Anzeigeobjektes sprengt die Grenzen der Verhältnismäßigkeit.

    Der erste Schritt ist umgesetzt

    Im Rahmen von SPES 2020 ist es uns gelungen, ein Konzept zu entwickeln, welches ein Programmieren von Anzeigeobjekte überflüssig macht. Das Gestalten und Animieren kann von einem Designer übernommen werden.

    Der nächste Schritt

    Letztlich müssen die Anzeigeobjekte mit den Daten aus dem Datenmodell verknüpft werden. Diese Logik wird in einem nächsten Schritt ebenfalls durch Konfigurieren ersetzt.

    Wir sind überzeugt, dass es bei konsequenter Umsetzung des modellbasierten Konzeptes möglich ist, das Programmieren zum größten Teil durch Konfigurieren zu ersetzen. Die Vorteile liegen auf der Hand: Schnellere Projektumsetzung, Vereinfachung der Wartbarkeit, Kosteneinsparung.





    embedded world 2018, Nürnberg, Halle 4, Stand 4-338

    27.2. - 1.3.2018


    Embedded Software Engineering Kongress

    5.12. - 7.12.2017


    embedded world 2017, Nürnberg, Halle 4, Stand 4-338

    14.3. - 16.3.2017


    Embedded Software Engineering Kongress

    29.11. - 1.12.2016


    embedded world 2016, Nürnberg, Halle 4, Stand 4-338

    23.2. - 25.2.2016

    Komfortable Touch-Bedienung darf nicht nur eine Domäne von Smartphones und Tablets sein. Industrielle Anwendungen erfahren ebenfalls eine Aufwertung und erfreuen sich größerer Akzeptanz beim Benutzer wenn sie ähnlich wie die gewohnten mobilen Geräte zu bedienen sind.

    Deshalb hat XiSys Software ein neues Touchinterface mit Gestenunterstützung entwickelt und implementiert.

    Zusätzlich stellen wir unsere neue Webvisualisierung und natürlich unsere Designtools aus. Mit diesen Werkzeugen können individuelle Objekte ohne Programmieren erstellt werden. Besuchen Sie uns auf der "embedded world 2015" und lassen Sie sich von den Möglichkeiten und Vorteilen inspirieren.


    Ausstellung moderner Steuerungslösungen für Maschinenbauer

    IHK-Niederbayern
    Oberer-Thor-Platz 10, 94315 Straubing

    26.1.2016, 14:00 - 17:00 Uhr


    Embedded Software Engineering Kongress

    1.12. - 3.12.2015


    embedded world 2015, Nürnberg, Halle 4, Stand 4-338

    24.2. - 26.2.2015


    embedded world 2014, Nürnberg, Halle 4, Stand 4-338 u. Stand 4-340

    25.2. - 27.2.2014

    XiSys stellt seine aktuellen embedded Grafik-Tools für die effiziente und kostensparende Entwicklung von embedded Grafiklösungen vor. Unter dem Motto "Visualisieren ohne zu Programmieren" werden alle Programmieraufgaben konsequent durch einfaches Konfigurieren ersetzt. Selbst individuelle Objekte können so entwickelt und dynamisiert werden. Diese Lösung ist weltweit einzigartig. Der Vorteil dieses neuen Ansatzes: Die wiederkehrende Programmierarbeit entfällt. Ein Grafikdesigner kann individuelle Objekte entwerfen und selbst dynamisieren. Der Entwicklungsingenieur verknüpft die Anzeigeobjekte mit den darzustellenden Anzeigegrößen und konfiguriert die Ablauflogik der Visualisierung. All diese Tätigkeiten werden durch komfortable grafische Entwicklungswerkzeuge unterstützt. Diese neue Methode, Grafikobjekte zu gestalten, zu konfigurieren und zu verknüpfen, anstatt aufwendig zu programmieren, hat das Potenzial, 80-90% des Entwicklungsaufwandes für traditionelle embedded Grafiksysteme einzusparen.


    Embedded Software Engineering Kongress

    2.12. - 6.12.2013

    Im Rahmen der Grafikvortragsreihe referiert Hr. Klaus Gerstendörfer zum Thema "Visualisieren ohne zu Programmieren".

    Während der begleitenden Ausstellung zeigen wir Ihnen gerne unsere Grafiklösungen als Mitaussteller auf dem Stand von "iSyst".


    embedded world 2013, Nürnberg, Halle 4, Stand 4-328

    26.2. - 28.2.2013

    Wie auch schon im letzten Jahr, wird XiSys Software GmbH auf der "embedded world 2013" in Nürnberg, der weltweit größten Fachmesse für embedded Techologien vertreten sein. Besuchen Sie uns am Stand des Embedded4You e.V. (E4Y) in Halle 4, Stand 4-328.


    Design & Elektronik Entwicklerforum

    HMI-Komponenten & Lösungen

    Novotel München Messe, 25.4.2013

    Im Mai 2012 konnten auf dem ersten Entwicklerforum "HMI - Komponenten & Lösungen" der DESIGN&ELEKTRONIK wichtige Hilfestellungen zur grundlegenden Konzeption von HMIs (Mensch-Maschinen-Schnittstelle) und der Klärung wichtiger Begriffe gegeben werden. Am 25. April 2013 werden nun die konkrete Technik und die detaillierten Lösungen rund um aktuelle Mensch-Maschine-Schnittstellen thematisiert. XiSys Software GmbH wird ihre Lösungen in dem Vortrag "Visualisieren ohne Programmieren" von 13:30 - 14:00 Uhr vorstellen.

    Das Programm und ein Anmeldeformular für dieses Entwicklerforum können Sie hier herunterladen.


    SPS IPC DRIVES Nürnberg

    Internationale Fachmesse und Kongress für elektrische Automatisierung

    Halle 7A, Stand 138

    27.11. - 29.11.2012

    SPS IPC Drives ist Europas größte Fachmesse für elektrische Automatisierung. Es umfasst alle Komponenten bis hin zu kompletten Systemen und integrierten Automatisierungslösungen.


    E4Y-Technology Day 2012

    Hotel Westin Grand München im Arabellapark
    Arabellastraß 6, 81925 München

    13.9.2012, 9:00 - 17:00 Uhr

    Auf diesem Technologie-Tag diskutieren Experten über aktuelle Trends im Embedded-System-Markt; dabei stehen folgende Themen im Vordergrund:

  • innovative Hardware-Entwicklung - Basis für Embedded-Systeme
  • Modellierung in der Software-Entwicklung und im Test
  • Vorstellung des E4Y-Clusters "Research4You"