Effiziente Embedded GUIs: STM32 mit TouchGFX und GPU-Optimierung

Das Smartphone als Benchmark

Intuitive Touch-Oberflächen, flüssige Animationen und ein modernes Look-and-Feel gelten heute als Standard aus der Smartphone-Welt. Wir stellen fest, dass genau dieses Benutzererlebnis zunehmend auch von Embedded Devices erwartet wird. Die Herausforderung hierbei sind die meist deutlich eingeschränkten Ressourcen wie Rechenleistung, Speicherplatz und verfügbare Energie.

In diesem Beitrag erläutern wir, wie CSA Engineering diese Herausforderungen mit effizienten und praxisnahen Lösungsansätzen meistert.

Effizienz durch die richtigen Tools

Bei CSA setzen wir nicht ausschliesslich, aber oftmals STM32 Mikrocontroller ein. Dank langjähriger Projekterfahrung kennen wir deren Stärken, verfügbare Libraries und Entwicklungstools aber auch die typischen Stolpersteine sehr genau.

Eines dieser Tools ist TouchGFX, welches für die Umsetzung von grafischen Benutzeroberflächen auf STM32 basierten Geräten konzipiert ist. (https://support.touchgfx.com/docs/introduction/welcome).

Das Framework besteht aus drei Hauptkomponenten:

• TouchGFX Designer:
  Grafiktool zum einfachen Erstellen vom gewünschten Screen-Design
  
  
• TouchGFX Generator:
  CubeMX Plugin zum Generieren des GUI-Abstraktionslayers
  
  
• TouchGFX Engine:
  C++ Library auf dem Embedded Device, welche hardwareoptimiert die GUI-Applikation steuert.

In der Praxis hat sich bei CSA ein hybrider Ansatz bewährt: Der TouchGFX Designer wird für die Erstellung der GUI Grundstruktur eingesetzt. Details wie Farbgebung, ablaufspezifische Visualisierungen oder darzustellende Symbole werden jedoch direkt im C++ Code  definiert.
Dies ermöglicht eine hohe Flexibilität in der GUI-Gestaltung bei gleichzeitig effizienter Umsetzung durch die bestehende Grundstruktur und Codegenerierung mit dem Designer.

Eine Einführung und ein einfaches Anwendungsbeispiel von TouchGFX haben wir bereits in einem früheren Blogbeitrag gegeben (siehe https://www.csa.ch/blog/unkomplizierte-entwicklung-von-displays-und-touchscreens-auch-im-embedded-bereich).

Effizienz durch die Wahl der richtigen Display Schnittstelle

Für die Integration eines Bildschirms können diverse Schnittstellen eingesetzt werden. Die Wahl der Display Schnittstelle spielt eine zentrale Rolle für Performance, Energieverbrauch und das Hardware-Design. Für viele moderne Anwendungen hat sich das MIPI Display Serial Interface (DSI) als geeignete Lösung erwiesen.

MIPI DSI ist eine serielle, differenzielle Hochgeschwindigkeits‑Schnittstelle, die ursprünglich für mobile Geräte entwickelt wurde.

Sie besteht physikalisch aus:

• einer High‑Speed‑Clock‑Lane (ein differenzielles Leitungspaar)
• einer oder mehreren differenziellen Daten-Lanes (typischerweise 1–2 bei Mikrocontrollern)

Auch softwareseitig bietet die MIPI DSI Schnittstelle verschiedene Varianten. Insbesondere in STM32 Mikrocontrollern gibt es integrierte DSI-Host-Inferfaces, welche zwei verschiedene Übertragungs-Modi direkt unterstützen:

• Command Mode:
  Der Host sendet Befehle, Parameter und Bilddaten an das Display. Diese Displays verfügen in der Regel über einen eigenen Controller samt Framebuffer und unterstützen das Display-Command-Set (DCS)
  
  
• Video Mode:
  Die Bilddaten werden als kontinuierlicher Pixelstrom in Echtzeit zum Display übertragen. Der Framebuffer liegt hierbei vollständig im Mikrocontroller.

Mit den verschiedenen Übertragungs-Modi und der Wahl der Anzahl Daten-Lanes resultiert Flexibilität in Bezug auf das Design und die beabsichtigte Anwendung.

Die MIPI DSI Schnittstelle erreicht Datenraten von 80 Mbit/s bis zu 1 Gbit/s (bei Mikrocontrollern) und ermöglicht dadurch die Übertragung hochauflösender Bilddaten bei gleichzeitig sehr geringer Pin-Anzahl. Für Embedded Designs sind beide Faktoren entscheidend.

Nachfolgend sind die Hauptvorteile gegenüber klassischen Schnittstellen wie Parallel-RGB-Interface oder SPI-basierten Lösungen zusammengefasst:

• deutlich reduzierte Pin-Anzahl
• geringerer Energieverbrauch durch differenzielle Signalführung
• höhere Bandbreiten bei geringerer EMV-Problematik
• gute Verfügbarkeit moderner, hochauflösender Displays am Markt

Optimierungen für eine flüssige Darstellung

Ein noch so ansprechendes Design nützt in den Augen des Anwenders nichts, wenn dies stockt, nicht reaktionsschnell reagiert und entsprechend die Bedienung mühsam ist. Jedoch stellen dynamische Inhalte hohe Anforderungen an Speicher und Rechenleistung.

Speicheroptimierung durch geeignete Bildformate

Grafische Assets belegen häufig einen grossen Teil des verfügbaren Flash‑ und RAM‑Speichers, besonders wenn es sich dabei um Rastergrafiken wie z.B: PNG handelt. TouchGFX bietet hier verschiedene optimierte Bildformate. Ein Beispiel ist das L8‑Bildformat, das speziell für Grafiken mit reduzierter Farbpalette geeignet ist (z. B. Icons, Logos):

• Farbpalette mit bis zu 256 Farben
• Pixelarray mit einem Byte pro Pixel
• Jedes Pixel referenziert einen Eintrag in der Farbpalette (z. B. ARGB8888)

Dadurch lässt sich der Speicherbedarf im Vergleich zu Vollfarbformaten deutlich reduzieren. Zusätzlich können verlustfreie Kompressionsverfahren wie Run Length Encoding (RLE) eingesetzt werden, welche besonders effektiv für Daten mit langen Wiederholungssequenzen sind. (Wie z.B Symbole oder Logos mit grossen einfarbigen Flächen)

Vektorgrafiken und Hardwarebeschleunigung

Für skalierbare Inhalte und hochauflösende Displays kommen zunehmend Vektorgrafiken (SVG) zum Einsatz. Während softwarebasiertes Rendering hierfür meist zu langsam ist, bieten aktuelle STM32‑Mikrocontroller spezialisierte 2D‑Grafikbeschleuniger (GPU2D). Dadurch ist dieser Prozess um ein Vielfaches schneller als durch rein softwarebasiertes Rendering.

Runde Displays als Chance für weitere Optimierungen

Runde Displays, wie sie beispielsweise in Smartwatches oder kompakten HMIs verwendet werden, sind ein immer beliebterer Anwendungsfall. Sie stellen zwar erhöhte Anforderungen an das GUI‑Design, bieten aber auch zusätzliches Optimierungspotenzial.

Da nur ein Teil der theoretisch rechteckigen Fläche tatsächlich sichtbar ist, kann der Framebuffer gezielt verkleinert werden. Moderne STM32‑Mikrocontroller stellen hierfür spezialisierte Peripherie zur Verfügung (z. B. Chrom‑ART / GRC). So lassen sich Speicherbedarf und Speicherbandbreite deutlich reduzieren.

Anwendungsbeispiel

In einem Entwicklungsprojekt eines Touchscreen-Mikrofons mit drahtloser Audioübertragung für ein Unternehmen im Medtech Segment haben wir diese und weitere Ansätze eingesetzt, um die Anforderung an eine moderne und flüssige Bedingung bei gleichzeitig minimalem Stromverbrauch und geringen Platzverhältnissen umzusetzen.

• Nahtlose Integration
  Der STM32 Mikrocontroller ist bereits in anderen Produkten eingesetzt. Die Display Erweiterung mit TouchGFX konnte entsprechend problemlos in die Toolchain und die Applikation integriert werden.
  
  
• Ressourcen und Platzverhältnisse
  Ein Mikrocontroller mit GPU erlaubte auch rechenintensivere SVG Bilder darzustellen.. Weiter ermöglichte die kompakte und schnelle MIPI DSI Schnittstelle einen minimalen Platzbedarf für die Ansteuerleitungen des Displays.
  
  
• Modularität und Anpassungsfähigkeit
  Die Kombination aus Designer und C++ TouchGFX Engine (Library) ermöglichte eine effiziente Entwicklung und ein exakt auf die Anwendung zugeschnittenes GUI nach Kundenwunsch.

Fazit

Moderne grafische Benutzeroberflächen im Embedded Umfeld sind heute kein Luxus mehr, sondern eine Erwartung.

Mit der richtigen Kombination aus geeignetem Mikrocontroller, leistungsfähigen Schnittstellen wie MIPI DSI, gezielten Optimierungen sowie Tools wie TouchGFX lassen sich auch auf ressourcenbegrenzten Systemen überzeugende Benutzererlebnisse realisieren.

Wichtig ist jedoch die Beurteilung des Projektkontexts: TouchGFX führt zu einer starken Bindung an das STM-Ökosystem (Vendor Lock-in) und der Designer setzt eine Windows-Umgebung voraus. Wenn diese Rahmenbedingungen passen, ist TouchGFX aufgrund der exzellenten Performance und Dokumentation unsere klare Empfehlung. Besonders überzeugend ist auch die gute Dokumentation rund um TouchGFX.

Wir von CSA bringen die Performance dorthin, wo sie gebraucht wird: Direkt zum Anwender.

Weiterführende Information finden sich unter anderem hier:

• TouchGFX: https://support.touchgfx.com/docs/introduction/welcome
• MIPI DSI: https://www.mipi.org/specifications/dsi
• DSI Host auf STM32: https://www.st.com/resource/en/application_note/an4860-introduction-to-dsi-host-on-stm32-mcus-and-mpus-stmicroelectronics.pdf
• GPU2D auf STM32: https://support.touchgfx.com/docs/development/scenarios/touchgfx-on-gpu2d
• Grafik Memory Optimierung auf STM32: https://www.st.com/resource/en/application_note/dm00407777-graphic-memory-optimization-with-stm32-chrom-grc-stmicroelectronics.pdf