Please enable JavaScript in your browser's settings to use this site!
Close

Local user interfaces -
available everywhere

This article is currently only available in German.

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 is a BMBF-funded research project to develop a methodology to consistently model-based development of embedded systems.

    As part of the national innovation alliance "Software Platform Embedded Systems 2020" solutions for the cross-domain and model-based development of embedded software are worked out. On the premis of a solid mathematical foundation, model-based methods allow the efficient development of embedded systems starting with the initial customer requirements on the design and implementation to verification and certification of systems.
    In the research and development 21 partners from industry and academia from all over Germany are involved.

    Informationbrochure SPES 2020

    Description of the exemplary implementation of a modeling approach for embedded graphics systems by XiSys Software GmbH-E4Y

    Model based graphical
    development

    The complexity of "embedded" machines is increasing. Given the expectations of customers, the impact of the "Consumer world" and the competition, more and more new features have to be added. If, in addition, a graphical interface is required, then the development effort, even for extremely small devices is enormous.

    It is therefore obvious to start thinking about alternative development methods. A closer analysis has shown that many devices operate with similar rules and could be developed accordingly. Similar patterns can be mapped in models. They project the tasks on an abstract level and work it from there. Based on these considerations, one can speak of a new method, the "model-based development". An approach that is also supported by the BMBF as part of "Software Platform Embedded Systems (SPES) 2020."

    The focus is on a data model that reflects and connects all the components (hardware, software, networking, sensors, actuators, ...) associated with a device on an abstract level. This model is called a software plug. The data model itself represents a completely applicable program which collects and administrates all data of the corresponding components and provides them in an abstract form for further processing - locally or on the network. The individual components have to be adjusted only at the driver level. The amount of work for the programmer is reduced to the mere configuration of the model. The use of a data model saves an enormous amount of time, but it is only the first step in the new development concept. The data provided from the data model are processed with a sequential programm. There is an increasing need to visualize the data and to enable interventions in the program sequence by using a GUI.

    The example of a display instrument demonstrates however the tremendous effort and creative abilities which are necessary to meet today's requirements. Due to the widespread use of devices like iPhones with pleasing surfaces are the rising expectations of the customer in the "embedded" environment. A few years ago it was sufficient to use a schematic diagram with a labelled bar or pointer to represent a value, realizable for programmers with reasonable costs. Meanwhile, modern display devices require a much more elaborate presentation. Consumers demands for gradients, shadows, glass effects, etc. exceed the design expertise of most programmers. The significantly higher effort for the mathematical model of such a display object alone is beyond the bounds of proportionality.

    The first step is realized

    Within the framework of SPES 2020 we have been able to develop a concept that makes programming of display objects unnecessary. Designers can now undertake design and animation.

    The following step

    The display objects have to be linked with the data from the data model. This logic will also be replaced by configuration in a following step.

    We are convinced that it is possible to consistently implement the model-based concept to replace most parts of programming by configuration. The advantages are obvious: faster project implementation, simplified maintenance, cost savings.





    embedded world 2019, Nuremberg, Germany, Hall 4, Booth 4-338

    26.2. - 28.2.2019


    embedded world 2018, Nuremberg, Germany, Hall 4, Booth 4-338

    27.2. - 1.3.2018


    Embedded Software Engineering Kongress

    5.12. - 7.12.2017


    embedded world 2017, Nuremberg, Germany, Hall 4, Booth 4-338

    14.3. - 16.3.2017


    Embedded Software Engineering Kongress

    29.11. - 1.12.2016


    embedded world 2016, Nuremberg, Germany, Hall 4, Booth 4-338

    23.2. - 25.2.2016

    Comfortable touch operation shouldn't be a domain of smart phones and tablets, only. Industrial or embedded applications will get a higher acceptance by the user if it is possible to operate the machines as familiar as by mobile devices.

    Therefore, XiSys Software has developed and implemented a new touch interface with comfortable gesture support.

    Additional we will exhibit our new WEB-visualisation and of cource our design tools. These powerful tools enable you to design your own individual objects without any programming. Please visit us at the "embedded world 2015" to be inspired by our solutions.


    Exhibition of modern control solutions for mechanical engineers

    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, Nuremberg, Germany, Hall 4, Booth 4-338

    24.2. - 26.2.2015


    embedded world 2014, Nuremberg, Germany, Hall 4, Booth 4-338 and Booth 4-340

    25.2. - 27.2.2014

    XiSys Software presents its current graphics tools for efficient and cost-saving developing of embedded graphics solutions. Under the motto "visualization without programming", all programming tasks are consequently replaced by configuring tasks. Even individual objects can be designed and animated. The solution is a worldwide unique approach. The advantages are: the repeating programming effort belongs to the past. Graphic designer are able to design individual objects and are able to animate the objects by themselves, too. The application engineer links the objects together with the values that have to be displayed and configures the logic flow of the visualization task. All this activities will be supported by comfortable graphical tools. This innovative method of designing graphical objects, configuring and linking instead of costly programming has the potential to save 80-90% of the expenses for the development of traditional embedded graphics applications.


    Embedded Software Engineering Kongress

    2.12. - 6.12.2013

    As part of the lecture series about graphics Mr. Klaus Gerstendörfer will hold a lecture about "Visualize without programming".

    While the accompanying exhibition, we are happy to show you our graphic solutions at the booth of "iSyst".


    embedded world 2013, Nuremberg, Germany, Hall 4, Booth 4-328

    26.2. - 28.2.2013

    Just like in 2011, XiSys Software GmbH will be present on the "embedded world 2013" in Nuremberg (Germany), the world's largest meeting of the international embedded community. Meet us at the booth of the E4Y community in hall 4, booth 4-328.


    Design & Elektronik Developers Forum

    HMI-Components & Solutions

    Novotel München Messe, 25.4.2013

    On the first Developer Forum "HMI - Components & Solutions" of DESIGN&ELEKTRONIK important support of the basic concept of HMI (Human Machine Interface) and the definition of important terms were given in May 2012. Now the concrete technology and the detailed solutions about current human-machine interfaces will be discussed in Munich on 25 April 2013. XiSys Software GmbH XiSys Software will give an overview to their solutions in the presentation entitled "Visualizing without programming".

    You can download the program and a registration form for this developers forum here.


    SPS IPC DRIVES Nuremberg

    International Exhibition for electric automation

    Hall 7A, Booth 138

    27.11. - 29.11.2012

    SPS IPC Drives is Europe's leading exhibition for electric automation. It covers all components down to complete systems and integrated automation solutions.


    E4Y-Technology Day 2012

    Hotel Westin Grand Munich in the Arabellapark
    Arabellastraß 6, 81925 Munich

    13.9.2012, 9am - 5pm

    On this technology-day experts will discuss current trends in the embedded systems market. The following issues are key:

  • innovative hardware development - the basis for embedded systems
  • modeling in software development and testing
  • presentation of the E4Y-cluster "Research4You"