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

| Redakteur: Hendrik Härter

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)

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.

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:

  • 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.

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)