Benutzeroberflächen für Embedded-Systeme

Vorbild Smartphone

27. Oktober 2022, 6:00 Uhr | Von Axel Wolf
Grafische Benutzeroberflächen (GUIs) auf Embedded-Systemen mit Touchdisplays müssen auf ressourcenbeschränkten Mikrocontrollern laufen können - dem Smartphone-Vorbild entsprechen
© arturs foto/stock.adobe.com

Grafische Benutzeroberflächen (GUIs) auf Embedded-Systemen mit Touchdisplays müssen auf ressourcenbeschränkten Mikrocontrollern laufen und dennoch dem Smartphone-Vorbild entsprechen. Mit einer ausgeklügelten Grafikbibliothek und geeignetem Tool lassen sich moderne GUIs ohne großen Aufwand erstellen.

LCD-Controller und Grafikprozessoren auf Mikrocontrollern sowie die dazugehörige Software gewinnen in der Embedded-Industrie immer mehr an Bedeutung. Der Grund dafür ist recht einfach: Die Kunden von heute sind verwöhnt. Warum? Weil jeder von uns ein Smartphone in der Tasche hat. Und wir alle lieben es, damit umzugehen. Deshalb verbringen wir so viel Zeit damit. Das bedeutet, dass speziell jüngere Kunden die gleiche – oder zumindest eine sehr ähnliche – Benutzererfahrung auch auf anderen elektronischen Geräten erwarten, sei es ein Thermostat, eine Kaffeemaschine, ein Blutzuckermessgerät oder ein Backofen.

Um eine Smartphone-ähnliche grafische Benutzeroberfläche auf solchen Geräten zu implementieren, müssen zwei große Herausforderungen bewältigt werden:

  • Das erste Problem ist die Rechenleistung. Embedded-Anwendungen laufen meistens auf einem Prozessor der ARM-Cortex-M-Klasse, der nicht mit der Leistung der Prozessoren in einem Mobiltelefon mithalten kann.
  • Die zweite Herausforderung ist der Speicher, der offensichtlich auf einem Embedded-System viel knapper bemessen ist als auf einem Smartphone.

Und es gibt sogar eine dritte Herausforderung, die nicht zu unterschätzen ist und die Arbeitsabläufe und Kompetenzen der Entwicklungsteams betrifft. Auf der einen Seite gibt es die Softwareentwickler, die wunderbar in einer Programmiersprache wie C programmieren können, aber nicht unbedingt ein Auge für das GUI-Design haben. Und auf der anderen Seite gibt es die Grafikdesigner, die die schönsten Benutzeroberflächen im Sinn haben, aber meist nicht wissen, wie man programmiert.

Infolgedessen gibt es oft zu viele Abstimmungsmeetings zwischen zwei Gruppen von Menschen, die auf völlig unterschiedliche Weise kommunizieren – den kreativen Grafikdesignern und den eingefleischten Softwareentwicklern. Um diese Herausforderungen zu bewältigen, wird eine Embedded-Grafikbibliothek benötigt, die in Bezug auf die Speichernutzung äußerst effizient ist, aber dennoch die Leistung bietet, die für Smartphone-ähnliche GUIs erforderlich ist.

Außerdem benötigen die Grafikdesigner ein Entwicklungswerkzeug, mit dem sie diese GUI vollständig visuell erstellen können, ohne programmieren zu müssen. Nachdem die Benutzeroberfläche erstellt wurde, kann sie dann an die Softwareentwickler weitergegeben werden, um sie in die Anwendung zu integrieren. Eine Antwort auf diese Herausforderungen ist die Grafikbibliothek emWin von Segger Microcontroller und das passende GUI-Designtool AppWizard, die beide in diesem Beitrag vorgestellt werden.

Anbieter zum Thema

zu Matchmaker+

Anwendungsbeispiel: Eine Smartphone-ähnliche Backofensteuerung

Um die Leistungsfähigkeit von emWin und die Bedienbarkeit des AppWizards in der Praxis zu demonstrieren, wurde das Ziel gesetzt, eine Touch-gesteuerte Benutzeroberfläche für einen Backofen mit Icons und Bedienelementen zu entwickeln, wie sie von Smartphones bekannt sind. Heute gibt es zwar schon Backöfen mit Touch-Oberfläche, aber diese enthalten meist Listenfelder mit Textinhalten, und die Auswahl erfolgt nicht direkt über Icons, sondern indirekt über Scrollbalken und dedizierte Buttons.

Benutzeroberfläche der Demo für eine Backofensteuerung auf einen Blick. Einige Screens sind der Einfachheit halber nicht dargestellt
Bild 1. Benutzeroberfläche der Demo für eine Backofensteuerung auf einen Blick. Einige Screens sind der Einfachheit halber nicht dargestellt
© Segger Microcontroller

Die Funktion dieser Demo-Anwendung ist im Vergleich zu handelsüblichen Backöfen etwas eingeschränkt, zeigt aber alle wichtigen Funktionen wie Betriebsart, vordefinierte Rezepte, Temperatur, Backzeit und ist sogar mehrsprachig implementiert. Bild 1 zeigt die implementierte Benutzeroberfläche vom Start bis zum Beginn des Backvorgangs.

Grafikbibliothek emWin für Embedded-Systeme

Um eine Smartphone-ähnliche Benutzeroberfläche zu implementieren, ist eine Embedded-Grafikbibliothek mit außergewöhnlichen Eigenschaften erforderlich. Die wichtigsten werden im Folgenden vorgestellt.

Flexible Einrichtung
Entwickelt wurde emWin für effiziente Prozessor- und Display-Controller-unabhängige grafische Benutzeroberflächen für alle Anwendungen, die ein grafisches Display verwenden. Sie ist kompatibel zu Singletask- und Multitask-Umgebungen, mit proprietären oder kommerziellen Betriebssystemen und kann mit jedem Display-Controller und jeder CPU an jede Größe physikalischer oder virtueller Displays angepasst werden.

Immer häufiger stellen Mikrocontroller Hardwarebeschleunigung für grafische Operationen zur Verfügung. Sie entlasten die CPU für alle oder zumindest die meisten grafischen Operationen, indem sie DMA-Engines oder andere Hardwareblöcke verwenden, die hohe Datendurchsätze ermöglichen. So unterstützt emWin beispielsweise Hardwarebeschleuniger wie ChromART von STMicroelectronics oder die 2D Drawing Engine (DRW) von Renesas.

Unterstützung für mehrere Ebenen
Viele moderne LCD-Controller bieten die Möglichkeit, mehrere Anzeigeebenen darzustellen. In emWin kann jede Ebene ihre eigene Farbtiefe, Größe und Position haben. Jede Ebene kann sogar falls notwendig seinen eigenen Displaytreiber haben. Dadurch ist es möglich, mehrere Displays gleichzeitig anzusteuern oder sowohl mehrere Ebenen also auch mehrere Displays zu verwenden.

Unterstützung zahlreicher Displaytreiber
Die Grafikbibliothek emWin unterstützt zahlreiche Displaytreiber und somit auch jedes gängige Display, z. B. Schwarzweiß-, Graustufen- und Farbdisplays. Sie deckt eine breite Palette von Anwendungen ab, die von medizinischen Geräten wie Herzfrequenzmessern bis hin zu komplexen Infotainment-Displays reichen.

Ressourceneffizienz
Dank der hohen Ressourceneffizienz von emWin reichen 130 KB RAM und 256 KB Flash-Speicher oft aus, um eine benutzerfreundliche und moderne Anwendung zu entwickeln, einschließlich Fenstermanager und Widgets (siehe Abschnitt Widgets und Window Manager). Darüber hinaus bietet emWin verschiedene Einstellungen, um den RAM- und ROM-Bedarf weiter zu optimieren, beispielsweise indem der Fenstermanager ohne transparente Fenster verwendet oder die Textrotation deaktiviert wird.

Unterstützung verschiedener Schriftarten
Die Darstellung von Text in emWin basiert auf der UTF-8-Codierung. Die Grafikbibliothek unterstützt das Zeichnen aller Zeichen der Basic Multilingual Plane (BMP, Ebene 0), die die Codepunkte von 0x0000 bis 0xFFFF abdeckt. Darüber hinaus können bidirektionale Skripte und Texte verwendet werden.

Schriftarten, die als C-Font-Dateien, als TrueType-Font-Dateien, als SIF, XBF oder iType implementiert werden können, unterstützt emWin. Um Speicherplatz zu sparen, bietet emWin drei Möglichkeiten:

  • Die erste ist eine Beschränkung des Zeichensatzes auf nur die tatsächlich auf dem Display angezeigten Zeichen.
  • Der GUI-Entwickler kann zusätzlich auch alle Codepunkte, also die in der Anwendung verwendeten Zeichen, in einer Pattern-Datei speichern.
  • Nicht zuletzt kann auch der verwendete Unicode-Bereich angegeben werden.

Unterstützung einer breiten Palette von Bitmaps
Neben BMP-, JPEG-, GIF- und PNG-Dateien unterstützt emWin auch mehrere emWin-spezifische Formate. Der empfohlene und effizienteste Weg, eine zur Kompilierzeit bekannte Bitmap anzuzeigen, ist die Verwendung eines der emWin-spezifischen Formate. Wenn die Anwendung zur Kompilierzeit unbekannte Bilder anzeigen muss, muss das Bild in einem von emWin unterstützten Grafikdateiformat verfügbar sein. In diesem Fall kann sich die Bilddatei im Arbeitsspeicher oder einem anderen Speichermedium befinden. Es kann auch dann angezeigt werden, wenn der verfügbare Speicherplatz geringer ist als die Größe der Bilddatei. Nativ unterstützt emWin BMP-, JPEG- und GIF-Dateien; PNG-Dateiunterstützung kann erreicht werden, indem die PNG-Bibliothek hinzugefügt wird, die auf der Segger-Website verfügbar ist.

Hintergründe und Icons werden unter Verwendung von emWin-spezifischen Bitmap-Formaten implementiert, um einen möglichst geringen Speicherbedarf zu gewährleisten
Bild 2. Hintergründe und Icons werden unter Verwendung von emWin-spezifischen Bitmap-Formaten implementiert, um einen möglichst geringen Speicherbedarf zu gewährleisten.
© Segger Microcontroller

Mehr als ein Dutzend Bitmap-Formate zwischen 1 und 32 bit Farbtiefe bietet emWin, darunter mehrere Run-Length-Encoding-Formate (RLE). Identische benachbarte Farbcodes werden kombiniert, sodass die entsprechende Farbe und die entsprechende Häufigkeit nur einmal gespeichert werden müssen. Das RLE-Alpha-Format ermöglicht es, dasselbe Bild mit unterschiedlichen Farben darzustellen. Alle Icons in der Backofen-App sowie die Bildschirmhintergründe sind als emWin-spezifische Bitmaps implementiert, um Speicherplatz zu sparen (Bild 2).
 
Außerdem kann jedes einzelne Image auch auf ein externes Medium (SD-Karte, SPI-Flash etc.) ausgelagert werden, sodass es keinen Platz im adressierbaren ROM-Bereich belegt. Jede einzelne Schriftart kann ebenfalls ausgelagert werden.


  1. Vorbild Smartphone
  2. Widgets und Window Manager
  3. AppWizard »Play Mode«/MS-Visual-Studio-Simulation

Verwandte Artikel

SEGGER Microcontroller GmbH & Co. KG