Digitaler Zwilling -Teil 2 +++ Power-Zwerg für Smarte Applikationen +++ Floating Board-to-Board-Steckverbinder

Teil 2: Digital auswerten und gleichzeitig visualisieren?
Aufgabe „Entwickle ein modernes grafisches Design“

Im ersten Teil (Link hier: Digitaler Zwilling) unserer Newsletter-Reihe haben wir Ihnen gezeigt:

So legen Sie sich mit einem 5,0“ Smart Embedded Display und STM32-Toolchain den Grundstein für einen „digitalen Zwilling“. Hier übernimmt das Touch Display mit digitaler Auswertung die Rolle des Tastenfelds oder Joysticks.

In Teil 2 widmen wir uns nun dem grafischen Design und der User Experience. Inspiriert von Konzepten wie BMW iDrive oder Audi MMI geht es darum, die Bedienlogik mit Joystick bzw. Dreh-Drück-Decoder realistisch, intuitiv und visuell ansprechend nachzubilden.

Das Ziel ist: Was „iDrive“ und „MMI“ vormachen, soll auch unser digitaler Zwilling können.

Grafik und User Experience (UX)

Die Herausforderung besteht darin, die physische Interaktion mit einem Joystick bzw. Dreh-Drück-Decoder digital nachzubilden – realistisch, intuitiv und visuell ansprechend.

Für die Umsetzung eines digitalen Zwillings der physischen Steuerung mussten zunächst drei Kernfragen geklärt werden:

1. Ist es möglich, das Kippen des Controllers visuell realistisch darzustellen?
2. Wie lässt sich die 20-stufige Drehbewegung des Decoders grafisch abbilden?
3. Wie kann eine dynamische LED-Beleuchtung integriert werden?

Vom Rohentwurf zur funktionsfähigen Oberfläche

Das Grafik-Framework TouchGFX bietet eine breite Palette an grafischen Elementen und Widgets sowie eine Import-Funktion, mit denen sich eine GUI realisieren lässt.

Als erstes Konzept haben wir einfache Grafiken in einem Zeichen-Programm erstellt und in TouchGFX importiert: Für gedrückte und ungedrückte Zustände des Druckknopfs, acht Bewegungsrichtungen und ein Leucht-Element zur Darstellung der 20 Decoder-Schritte.

So wurde ein erster Prototyp mithilfe einfacher Platzhaltergrafiken direkt in TouchGFX umgesetzt. Dabei zeigte sich schnell, wo Nachbesserungen nötig waren.

Anschließend kam ein Grafikdesigner ins Spiel (Fa. werk|m). Durch seine Erfahrung und unserem Prototypen konnte zügig ein visuelles Konzept entwickelt und unnötige Iterationsschleifen vermieden werden.

Effiziente Umsetzung mit TouchGFX

Das Verhalten des Controllers wurde mit transparenten Button-Widgets realisiert, die je nach Interaktion entsprechende Grafiken in den Vordergrund bringen.

Die Darstellung der 20 Schritte erfolgte über das „Texture Mapper“-Widget, das eine flexible Rotation um einen zentralen Ankerpunkt ermöglicht – ideal für präzise, dynamische Visualisierungen.

Die komplette Steuerungslogik konnte bereits in dieser frühen Phase implementiert werden. Dazu gehörten die Verarbeitung aller Eingaben und Ausgaben, Prioritätsregeln bei gleichzeitiger Bedienung mehrerer Elemente und die Konfiguration der Button-Widgets als Taster.

Realistische Darstellung im Simulator

Ein besonderer Vorteil von TouchGFX ist der integrierte Simulator, mit dem sich die komplette Benutzeroberfläche inklusive Logik als ausführbare Desktop-Anwendung testen lässt – ganz ohne Zielhardware. Hier zeigte sich allerdings schnell, dass einfache Schlagschatten nicht ausreichten, um die gewünschte Tiefe und Anmutung zu erzeugen.

In Zusammenarbeit mit der Designagentur werk|m wurde daher ein fotorealistisches 3D-Modell des Controllers entwickelt, das komplexe Licht- und Schatteneffekte abbildet. Um den Speicherbedarf gering zu halten, wurde lediglich das beleuchtete Segment des virtuellen LED-Rings als separate Grafik überlagert.

Fazit

TouchGFX hat sich in diesem Projekt als leistungsfähiges und flexibles Framework erwiesen – sowohl für schnelle Prototyping-Zyklen als auch für anspruchsvolle UI-Designs. Dank der Vielzahl an Widgets, des performanten Simulators und der einfachen Erweiterbarkeit konnten Funktionalität und Design Hand in Hand umgesetzt werden.

Fordern Sie jetzt Ihr persönliches Starterkit an:

Wenn Sie testen möchten, ob ein Smart Embedded Display auch für Ihre Anwendung die richtige Lösung ist, empfehlen wir unsere Starterkits. Dank kurzer Einarbeitungszeit läuft Ihr Projekt In wenigen Stunden auf einer Zielhardware. Eine Übersicht der verfügbaren Displaydiagonalen finden sie hier: https://www.glyn.de/produkte/displays/smart-embedded/starterkit/