So entsteht eine grafische Benutzeroberfläche auf einem Embedded-System

Redakteur: Hendrik Härter

Neben der Hardware spielt die grafische Benutzeroberfläche eine entscheidende Rolle in der Mensch-Maschine-Interaktion. Doch eine GUI-Applikation zu erstellen muss nicht aufwendig sein. Wir stellen eine Möglichkeit vor.

Firmen zum Thema

Graphical User Interfaces: Grafiken exportiert via Altia PhotoProto aus Adobe Photoshop können 1:1 direkt in Altia Design importiert werden.
Graphical User Interfaces: Grafiken exportiert via Altia PhotoProto aus Adobe Photoshop können 1:1 direkt in Altia Design importiert werden.
(Bild: Altria)

Grafische Benutzeroberflächen, kurz auch GUIs für Graphical User Interfaces, umgeben uns überall im Alltag. Zusammen mit Touchdisplays treffen wir sie beispielsweise in Waschmaschinen oder Kaffeeautomaten sowie auch im beruflichen Alltag in vielen Maschinensteuerungen. Dieser Trend wird sich mit dem IoT noch weiter verstärken.

Alle großen Halbleiterhersteller folgen dem Trend und bieten je nach Performanceansprüchen entsprechende Mikrocontroller oder SoCs (Systems on Chip) für solche Grafikanwendungen an. Die Entwicklung der GUI-Applikation ist für kleine Unternehmen und Dienstleister oft nicht trivial, da sie eine Reihe komplexer Zusammenhänge mit sich bringt: 1. Die gewohnte Hardwareumgebung muss, in Abhängigkeit von der Displaygröße und dem darzustellenden Inhalt, um folgende Komponenten erweitert werden:

Bildergalerie
  • ein Farbdisplay und gegebenenfalls ein Touch-Controller
  • externes RAM für die sogenannten Framebuffer, die den aktuellen Displayinhalt speichern.
  • externes Flash zur nichtflüchtigen Speicherung der Grafikdaten, da der interne Flash-Speicher hierfür selten ausreicht.

2. Ändert sich die Softwareumgebung?:

  • Wird für das GUI nun ein Operating System benötigt, wenn man vorher ohne ein solches System ausgekommen ist?
  • Kann existierender Applikationscode und die bewährte Softwarearchitektur für die um ein GUI erweiterte Applikation weiterverwendet werden?
  • Muss der Entwickler über zusätzliche Fähigkeiten verfügen: Grafik- und Displaycontroller-Programmiereung?

Kriterien für eine ansprechende Benutzeroberfläche

Für einen großen Teil der Fragen gibt es schon passende kosteneffiziente Antworten. Sogenannte Evaluation-Boards und Starterkits der MCU/SoC-Anbieter und deren Designdaten dienen als Referenzimplementierungen und können als Basis für die Entwicklung eines eigenen applikationsspezifischen HW-Boards herangezogen werden. Sollte die Anforderungsanalyse zeigen, dass ein Operating System für die geplante GUI-Applikation benötigt wird, gibt es mit Embedded Linux und FreeRTOS auch entsprechend skalierbare Betriebssysteme. Auch der Entwurf einer Applikationslogik mit Hilfe von modellbasierten Werkzeugen ist mit vorhandenen SW-Werkzeugen möglich.

Obwohl mit den oben beschriebenen HW- und SW-Werkzeugen ein Teil der Voraussetzungen für eine ansprechende GUI-Applikation gegeben sind, bleibt die Entwicklung, Integration und der Test einer ansprechenden grafischen Benutzeroberfläche eine nicht zu unterschätzende Arbeit. Was macht eine ansprechende Benutzeroberfläche aus, die am Ende die Identifikation der Kunden mit dem Produkt entscheidend beeinflusst? Das lässt sich in funktionale Anforderungen übersetzen:

  • Die verwendeten Grafiken müssen von hoher Qualität sein und
  • die sichtbaren Animationen auf den Grafiken müssen ansprechend und flüssig ablaufen.

Dem stehen aber auch nicht-funktionale und kommerzielle Anforderungen gegenüber, wie:

  • Einsatz einer möglichst kosteneffizienten HW,
  • Wiederverwendung von existierenden SW-Komponenten, die sich in der Applikation bewährt haben und
  • möglichst geringe Einarbeitungszeiten der Entwicklungsteams in das Thema „GUI“.

Im Folgenden werden eine Reihe von Fragestellungen beleuchtet, die sich aus diesen Anforderungen ergeben: Sehr wahrscheinlich werden für eine professionelle GUI-Applikation die Grafiken von einem Industrial Designer erzeugt. Hier kommen häufig Grafikwerkzeuge wie Photoshop, Illustrator und AfterEffects zum Einsatz. Selbst wenn man die entsprechenden Einzelgrafiken aus den Tools mühsam extrahiert hat, muss der Applikationsentwickler bei den gängigen Grafik-Libraries diese über Programmcode manuell im Display positionieren.

Altia bietet beispielsweise mit PhotoProto ein PhotoShop-PlugIn an, um schnell und effizient einzelne Grafiken für ein GUI aus einem PSD-File zu extrahieren. Dabei werden die Grafiken von möglicherweise vorhandenen transparenten Pixeln befreit, um die verfügbaren Speicher-Ressourcen effizient zu nutzen. Die Software eerzeugt gleichzeitig eine XML-Beschreibung der erzeugten Objekte, die im nächsten Entwicklungsschritt dafür sorgt, dass die Grafiken an der gewünschten Stelle im Display positioniert sind.

Grafischer Editor hilft bei der Entwicklung eines GUIs

Mit dem im Embedded-Bereich zum Teil frei verfügbaren Grafik-Libraries lassen sich Grafiken auf MCUs oder SoCs darstellen und animieren, ohne dass der Entwickler in die Details der Grafik-Hardware wie Display Controller und ggf. GPU einsteigen muss. Hier kommen teilweise grafische Editoren zum Einsatz, welche die Entwicklung des GUIs vereinfachen. Grund: Zur Entwicklungszeit arbeitet man auf einem PC und es wird noch keine Embedded-Hardware benötigt, um das Ergebnis zu überprüfen.

Je nachdem, für welche Art von Library man sich entscheidet, erkauft man sich diese Möglichkeiten entweder damit, dass man auf Grund der Implementierung der Library von vornherein eine Hardware-Plattform mit entsprechender CPU-Leistung und Speicher-Ressourcen benötigt, die möglicherweise mehr Kosten erzeugt, als für die GUI-Applikation nötig wäre. Ein anderer Nachteil kann sein, dass die vorhandene Grafik-Bibliothek nur für eine Handvoll von Hardwareplattformen verfügbar ist, was einen späteren Wechsel der Hardware erschwert oder sogar verbietet. Als letzet Fragen bleibt dann noch: Will der Entwickler beispielsweise auf der Hardware verfügbare Hardware-Grafikbeschleunigung nutzen? Das entlastet die CPU deutlich, so dass man mit einer kleineren CPU-Leistung für die gesamte GUI-Applikation auskommt.

Altia Design ist ein grafischer Editor, mit dem der Entwickler das GUI unabhängig von der Hardware auf einem PC entwickelt. Dabei stehen ihm eine Reihe von sinnvoll vordefinierten Basis-Grafik-Objekten zur Verfügung, die frei auf dem Display positioniert und animiert werden können. Alternativ kann der Entwickler aber auch, wie schon oben beschrieben, die aus Photoshop exportieren und vorpositionierten Bilder als Startpunkt verwenden. Ein anspruchsvolles Design der GUIs wird durch Animationen gewährleistet, mit denen die Inhalte des GUIs auf dem Display bewegt, ein- und ausgeblendet werden oder mit denen man elegante Übergänge zwischen verschieden Bildschirmen Benutzeroberfläche erstellen kann. Beispiele sind: Zoom/Scale, Rotation, Nicht-Affine-Transformationen und Transparenz.

Die Definition dieser Animationen erfolgt über sogenannte Keyframes. Dabei wird der Zustand eines Objektes über Start-/End- und Zwischenzustände definiert, ohne dass der Entwickler sich mit der Mathematik hinter den jeweiligen Operationen beschäftigen muss. Die Interpolation zwischen den definierten Keyframes wird von Altia automatisch übernommen. Altia Design wird diesen Prozess in der nächsten Version mit Hilfe eines grafischen Timeline Editors noch weiter vereinfachen, der es dann auch erlaubt, den Ablauf der Animationen über sogenannte Easing-Funktionen aus dem Editor heraus zu verfeinern.

Wie sich ganze Bildschirminhalte gestalten lassen

Altia Design erlaubt die Aufteilung von Inhalten auf verschiedene kontextabhängige Screens über entsprechende Container-Objekte. Diese reichen von Gruppen, deren Sichtbarkeit steuerbar ist, über ein sogenanntes Deck-Objekt (eine Art Kartenstapel), dessen Karten der Entwickler mit den kontextabhängigen Inhalten füllen kann. Hier reicht dann ein einziger Zahlenwert, um einen ganzen Bildschirminhalt umzuschalten.

Über den Altia Layer Manager ist das Werkzeug aber auch gerüstet, um moderne Embedded-Systeme zu unterstützen, die sogenannte HW-Layer im Display-Controller und gegebenenfalls den Betrieb von mehreren Displays gleichzeitig zu ermöglichen. Die zusätzliche Flexibilität, den Inhalt eines GUIs auf HW-Layer zu verteilen, erlaubt es, den oftmals limitieren Displayspeicher und die begrenzte Performance von kosteneffizienten HW-Plattformen auf die Teile zu konzentrieren, die animiert werden sollen. Dabei kann man statische Teile entweder direkt aus dem Flash-Speicher darstellen oder den entsprechenden Layer nach dem Aufsetzen einfach unangetastet lassen.

In ähnlich einfacher Weise, mit der der Entwickler Bewegungen/Transformationen auf den Objekten des GUIs erzeugt, implementiert man Reaktionen der Objekte auf Touch-Interaktionen des Nutzers in Altia Design. Dabei wird die Hardware-Abhängigkeit vom jeweiligen Touch-Controller vom Entwickler wegabstrahiert. Die Zustände der GUI-Objekte werden zur Designzeit mit sogenannten Altia Animationen verknüpft, einer Kombination aus einen Unique Identifier und den Keyframes des jeweiligen Objekt-/Bewegungszustandes.

Eine einfache und klare API erlaubt es, den Zustand eines GUI-Objektes entweder aus der Applikation heraus zu ändern oder diesen Zustand aus dem GUI abzufragen. So kann sich die Applikation über die Änderung eines GUI-Objektes informieren lassen, wenn beispielsweise ein Objekt auf dem Bildschirm berührt wird. Dabei hat der Entwickler die volle Kontrolle darüber, wann im Funktionsablauf seines Applikationscodes er die jeweiligen Objekte abfragen/verändern will und wann schließlich eine GUI-Änderung auf den Bildschirm abgebildet werden soll.

Während der gesamten Entwicklungszeit lässt sich das GUI in Altia Design gleich bedienen wie später auf der Embedded-Hardware. Eine Schnittstelle erlaubt die Anbindung von externen Entwicklungswerkzeugen, die bei der Entwicklung der Applikationslogik helfen. Ein einfaches Beispiel ist Visual Studio von Microsoft. Hier kann man parallel zum grafischen UI-Design in Altia Design die entsprechenden Teile der Applikationslogik entwerfen und diese gleich gegen das grafische User-Interface testen.

Da als Entwicklungssprache natives C zum Einsatz kommt und auch gleich die passende Altia API genutzt wird, kann der parallel zum GUI entwickelte und getestete Code von Visual Studio C eins-zu-eins auf der Embedded-Hardware genutzt werden. Zur Entwicklungs- und Testzeit wird damit über weite Strecken keine Embedded-Hardware benötigt. Die GUI-Entwicklung wird bereits früh parallel zur Hardware-Entwicklung gestartet und durchgeführt.

Artikelfiles und Artikellinks

(ID:44883287)