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

| Redakteur: Hendrik Härter

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.

Inhalt des Artikels:

Kommentar zu diesem Artikel abgeben

Schreiben Sie uns hier Ihre Meinung ...
(nicht registrierter User)

Kommentar abschicken
copyright

Dieser Beitrag ist urheberrechtlich geschützt. Sie wollen ihn für Ihre Zwecke verwenden? Infos finden Sie unter www.mycontentfactory.de (ID: 44883287 / HMI)