Startseite > Optoelektronik > Displays > Vorbild Smartphone

Benutzeroberflächen für Embedded-Systeme

Vorbild Smartphone

27. Oktober 2022, 6:00 Uhr | Von Axel Wolf

▶ Diesen Artikel anhören

Fortsetzung des Artikels von Teil 1

Widgets und Window Manager

Eine Reihe von Routinen zum einfachen Erstellen, Verschieben, Vergrößern/Verkleinern und Bearbeiten beliebig vieler Fenster wird vom emWin PRO Window Manager (WM) bereitgestellt. Der erlaubt die gleichzeitige Verwendung sowie das Übereinanderschichten verschiedener Fenster. Als Steuerelemente dienen emWin-Widgets, das sind Fenster mit objektartigen Eigenschaften. Sie reagieren auf bestimmte Ereignisse, ermöglichen eine Benutzerinteraktion und ihre Erscheinung kann in den meisten Fällen einfach angepasst werden.

Das Backofenbeispiel verwendet unter anderem das »Rotary«-Widget zum Einstellen der Temperatur und das »Switch«-Widget zum Auswählen eines Eco-Modus. Bild 3 zeigt alle derzeit im AppWizard verfügbaren Widgets.

Neben den vordefinierten Widgets können auch Zeichenfunktionen für verschiedene Elemente wie Linien, Kreise, Rechtecke oder Kreissegmente verwendet werden. Um ein Kreissegment zu zeichnen, kann einfach der Mittelpunkt des Kreises, der Radius, der Start- und Endwinkel und die Farbe angeben werden (Bild 4). Das Geniale ist, dass diese Werte auch aus Variablen ausgelesen werden können, sodass sich beispielsweise die aktuelle Position eines Schiebereglers grafisch als kleineres oder größeres Kreissegment darstellen lässt.

Es ist möglich, für jedes einzelne Objekt sowohl eine Vorzeichnung als auch eine Nachzeichnung festzulegen. Dies sind Aktionen, die vor oder nach der Anzeige des Elements ausgeführt werden. Beispielsweise könnte eine Nachzeichnung verwendet werden, um ein Logo auf einer Schaltfläche darzustellen, nachdem die Funktion ausgeführt wurde. Mit einer Vorzeichnung könnte die Schaltfläche auf einem farbigen Rechteck angezeigt werden. Die Möglichkeiten sind nur durch die Phantasie des GUI-Designers begrenzt.

Unterstützung mehrsprachiger Anwendungen
Obwohl sich die Ausgabe von Text in den meisten Sprachen auf die einfache Ausgabeder gewünschten Zeichenketten reduziert, erfordert die Ausgabe von arabischen, hebräischen, thailändischen oder bidirektionalen Texten etwas mehr Aufwand. Um die Sprachunterstützung einzuschalten, sind beim Starten der Anwendung nur wenige Funktionsaufrufe erforderlich, und alle textbasierten Funktionen unterstützen automatisch die erforderlichen Sprachen.

Die Text- und Sprachressourcendateien erleichtern die Erstellung mehrsprachiger Anwendungen. Der GUI-Entwickler kann eine oder mehrere Text- oder CSV-Dateien speichern, die Text in verschiedenen Sprachen enthalten. Dies ermöglicht es, den Text einer Anwendung zu ändern, ohne den Code ändern zu müssen. Im Backofenbeispiel ist unter anderem eine Sprachauswahl für chinesische und griechische Schriftzeichen (Bild 5) implementiert. Auch andere Sprachen wie Thai oder Arabisch lassen sich so einfach realisieren.

Integration von Benutzerinteraktionen und Animationen
In unserer Beispielanwendung werden viele Benutzerinteraktionen verwendet, was kaum verwundert, da jeder Tipp auf ein Icon oder Steuerelement eine entsprechende Reaktion auslösen muss. Dennoch sollen zwei Beispiele, die in der Anwendung auffallen, näher beschrieben werden: Die Temperatureinstellung und der Start des Backvorgangs.

Die Backofentemperatur wird über ein Widget vom Typ »Rotary« eingestellt. Neben dem Drehknopf wird die aktuell eingestellte Temperatur als Zahl angezeigt. Das Bemerkenswerte daran ist, dass AppWizard-Interaktionen die Textfarbe je nach Absolutwert der Temperatur von Blau über Pink nach Rot ändern – und das in Echtzeit, während der Nutzer am Drehknopf dreht (Bild 6).

Später, wenn der Backvorgang startet, wird zunächst der Backofen vorgeheizt. Dazu gibt es einen Fortschrittsbalken und ein Textdisplay, das die verbleibende Aufheizzeit anzeigt und bis auf null herunterzählt. Wenn der Backofen vorgeheizt ist, wechselt der Fortschrittsbalken zu einer Anzeige für die verbleibende Backzeit, die parallel auch in Textform heruntergezählt wird. All dies wird über AppWizard-Interaktionen gesteuert.

Die für dieses Beispiel verwendeten Werte werden aus entsprechenden Variablen gelesen, die zuvor vom GUI-Entwickler im AppWizard definiert wurden. Eine Besonderheit ist dabei die Möglichkeit, bedingte Interaktionen zu spezifizieren. Der GUI-Entwickler kann festlegen, unter welchen Bedingungen – die zur Laufzeit geprüft werden – eine Interaktion ausgeführt werden soll. Einzelne Vergleiche können spezifiziert und zur Laufzeit mit einem mathematischen Ausdruck ausgewertet werden. Für Berechnungen stehen Operanden, Konstanten, Variablen oder Objektwerte zur Verfügung.

Variablen sind der Schlüssel zu interaktiven GUIs. Mit Variablen können verschiedene Dinge erreicht werden: Beispielsweise können extern modifizierte Variablen als Auslöser für bestimmte Aktionen verwendet werden. Jede Variable kann mit einem individuellen mathematischen Ausdruck berechnet werden. Operanden können Konstanten, Objektwerte – Slider, Rotary usw. – oder Variablen sein. Der Ausdruck ist sehr flexibel, kann recht komplex sein und wird zur Laufzeit berechnet.

Um einer Anwendung Bewegung zu verleihen, stellt AppWizard eine umfangreiche Animationsfunktion zur Verfügung. Sie kann die Eigenschaften mehrerer Elemente während der Zeitspanne einer Animation verändern, z. B. Position, Farbe, Form, Größe usw. Auf diese Weise können komplexe Animationen erstellt werden, ohne dass Programmierkenntnisse erforderlich sind.

Filme
Die Grafikbibliothek emWin verfügt über ein spezielles Filmformat EMF (emWin Movie File Format), das drei Hauptvorteile bietet:

Es wird nur ein Bild im Speicher benötigt.
Es werden keine Dekomprimierungs-Algorithmen benötigt.
Es fallen keine Lizenzgebühren an.

Um die Konvertierung nahezu aller Filmformate nach EMF einfach zu machen, wird emWin mit einem Konverter geliefert, der auf dem Open-Source-Tool FFmpeg [1] basiert. Die kostenlose Software kann Dateien nahezu aller Filmdatei-Quellformate in jedes gewünschte Zielformat sowie in einzelne JPEG-Dateien konvertieren.

Simulation
Mit einer pixelgenauen Simulationsbibliothek auf dem PC ermöglicht emWin eine schnelle GUI-Entwicklung. Damit kann das Benutzererlebnis genau nachgebildet werden: Sowohl der Anzeigeinhalt, wie er auf dem Display zu sehen ist, als auch die Benutzereingaben werden für die Live-Interaktion unterstützt. Da die Simulation denselben C-Code wie das Embedded-System kompiliert und ausführt, ist das GUI-Verhalten auf dem PC dasselbe wie auf dem Zielsystem. Dies ermöglicht das Entwerfen und Debuggen der Benutzeroberfläche auf einem PC. Mit dieser Funktion können Prototypen der Anwendung zur Diskussion der Benutzeroberfläche erstellt werden.

Ein weiterer Vorteil der Simulation besteht darin, dass die GUI-Entwicklung lange vor der Fertigstellung der Hardware beginnen kann, was dazu beiträgt, die Markteinführungszeit zu verkürzen. Wenn eine Anwendung mehrere Anzeigeebenen verwendet, wie z. B. Vorder- und Hintergrund, kann emWin jede Anzeigeebene einzeln in ihrem eigenen Fenster sowie eine zusammengesetzte Ansicht anzeigen, die denselben Inhalt darstellt, und der vom Benutzer gesehen werden soll. Zur Ausführung in der Simulation wird Microsoft Visual Studio oder Code::Blocks/MinGW benötigt.

Entwickler, die mit einem Mikrocontroller eines führenden Halbleiterherstellers arbeiten, können die Grafikbibliothek emWin möglicherweise sogar kostenlos nutzen, da der Halbleiterhersteller ggf. emWin bereits für seine Mikrocontroller lizensiert hat.

Arbeiten mit dem Designtool AppWizard

Um die Grafikanwendung auf eine Zielhardware zu bekommen, stehen zwei Möglichkeiten zur Verfügung.

Die erste Möglichkeit besteht darin, den vom AppWizard generierten Quellcode und die dazugehörigen Header-Dateien in ein bestehendes emWin-Projekt einzubinden. Der resultierende Code kann mit der gewählten IDE kompiliert und auf die Zielhardware heruntergeladen werden. Bild 7 zeigt den Arbeitsablauf für diese Option.

Die zweite Option (Bild 8) ist noch einfacher: Ebenfalls im AppWizard enthalten sind mehrere vordefinierte Board Support Packages (BSPs) für gängige Evaluierungsboards verschiedener Halbleiterhersteller. Diese BSPs ermöglichen es dem AppWizard, komplette Projekte zu generieren, meistens – aber nicht ausschließlich – für die Embedded Studio IDE von Segger Microcontroller.

Dies ist der schnellste Weg, die Anwendung auf einem bestimmten Zielsystem zum Laufen zu bringen.

Die BSPs für Embedded Studio enthalten auch Binärversionen vom RTOS embOS und dem Dateisystem emFile, beide von Segger. Das vereinfacht die Auslagerung von Ressourcen auf ein externes Speichermedium erheblich. Es ist auch möglich, benutzerdefinierte BSPs innerhalb von AppWizard zu erstellen und zu verwenden.