Die Macht intuitiver GUIs auf STM32 (Teil 2) +++ SILICON LABS goes Arduino +++ 650 V Superjunction MOSFETs

Teil 2: Die Macht intuitiver GUIs auf STM32 -
Diese Software sollten Sie kennen!

Nach unseren fünf Tipps für benutzerfreundliche Interfaces zeigen wir Ihnen heute, wie Sie mit schlichten und funktionalen GUI Designs überzeugen.

Intuitive Benutzeroberflächen machen die Bedienung Ihres Geräts bequem und einfach.

TouchGFX von STMicroelectronics ist ein gratis Grafik-Framework. Diese Software ist Teil des renommierten STM32Cube Ökosystems. Ob ansprechende Schieberegler, funktionale Buttons oder übersichtliche Menüs: Mit dem TouchGFX Designer verwandeln Sie Ihre Vision leicht in die Realität.

Dieses leistungsstarke Tool ermöglicht es Ihnen, direkt am Computer GUIs zu gestalten und bequem in C++ Code zu überführen. TouchGFX bringt dazu eine umfassende Palette an Widgets mit, die einfach zu handhaben und auf dem Bildschirm zu platzieren sind.

Importieren Sie vorhandene GUI-Elemente einfach als PNG-Datei oder Vektorgrafik und integrieren Sie diese nahtlos in Ihre Applikation. Steigern Sie die Interaktivität Ihrer Applikation durch definierte Interaktionen – von einfachen Berührungen bis hin zu komplexen Navigationsaufgaben durch Menüs oder Auslösen von Hardware-Funktionen.

Mit TouchGFX setzen Sie nicht nur auf ein mächtiges Werkzeug, sondern auch auf eine Plattform, die Ihre Entwicklung beschleunigt und Ihre Produkte auf ein neues Level hebt.

Steigen Sie jetzt ein und starten Sie mit TouchGFX Ihre GUI-Projekte…

Praktische Design-Hilfen

Die vielen praktischen Funktionen von TouchGFX vereinfachen Ihnen das Designen von Oberflächen und reduzieren dabei den Zeitaufwand.

Hilfslinien: Mit den Hilfslinien lassen sich Elemente genau positionieren und aneinander ausrichten.

Buttons: Standardmäßig können Schaltflächen mit unterschiedlichen Eigenschaften ausgewählt werden. Diese sind vielfältig in Design und Funktion.

Images: Dieses Widget ermöglicht das Einbinden von Bildern unterschiedlichster Art. Dazu gehören Hintergrundbilder und animierte Bildsequenzen.

Container: Mit sogenannten Containern können moderne Funktionen umgesetzt werden, wie man sie vom Smartphone oder Tablet kennt – Scroll-Rad, Scroll-Listen, Pop-Ups, Wischgesten, Drop-Down Menüs.

Shapes: Hierunter finden sich diverse geometrische Formen.

Progress: Texte, Kreise, Balken aber auch Bilder können genutzt werden, um einen fortschreitenden Prozess darzustellen.

Verschiedenes: Noch erwähnenswert sind Widgets wie Schieberegler (Abb. 2), Uhren, Zeiger, Graphen und Videos. Letzteres ist natürlich von der Auflösung und der Leistungsfähigkeit des Controllers abhängig.

An dieser Stelle sei auch noch der Simulator erwähnt. TouchGFX erzeugt auf Wunsch eine .exe-Datei. Diese simuliert die GUI in einer 1:1 Darstellung am PC. So kann der Code zeitnah, ohne Flashen der Zielhardware, auf seine Funktion überprüft werden.

Zudem können sich mehrere Personen einen Eindruck vom Entwicklungsstand der GUI machen – ohne die Hardware vorliegen haben zu müssen.

Pflegeleichter Code
Eine besonders praktische Funktion von TouchGFX ist der Custom Container. Damit können Sie selbst Vorlagen erstellen, die dann auf jeder beliebigen Seite eingebunden werden können. Änderungen müssen so nur an einer Stelle gepflegt werden.

Ein Beispiel: Sie möchten den Softwarestand (z. B. den Text „Version 1.43“) und das Firmenlogo auf allen Menü-Seiten an der gleichen Position darstellen. Bei 50 Untermenüs wäre es sehr aufwendig, jedes Mal an 50 Stellen etwas händisch zu ändern. Mit „Custom Containern“ gelingt Ihnen das in wenigen Sekunden.

TouchGFX basiert auf dem Modul-View-Presenter Prinzip (MVP). Diese Struktur trennt den hardwarerelevanten Code von allem, was mit der grafischen Gestaltung zu tun hat. So können Sie Hardwarefunktionen einbinden, ohne im gleichen Moment den Code für die GUI zu verändern. Dadurch werden nicht nur Fehler vermieden, sondern es können sich auch mehrere Personen gleichzeitig mit dem Projekt beschäftigen. Zudem ist der Code einfacher zu pflegen und erweiterbar.

TouchGFX ist optionaler Bestandteil der Smart Embedded® Display-Familie
STMicroelectronics liefert TouchGFX direkt mit Board-Support-Packages für die Smart Embedded® Display-Familie von GLYN aus. Eine Übersicht der Displaygrößen und Starterkits finden sie auf glyn.de/se oder hier.

Starten Sie jetzt mit GLYN-SUPPORT Ihre HMI-Entwicklung.

So überzeugen Sie mit einem guten benutzerfreundlichen GUI-Design - Teil 1

„Wer hat sich denn diese Benutzeroberfläche bloß ausgedacht?“
Wie schade wäre es, wenn ein gut durchdachtes Produkt mit tollen Funktionen die Kunden nicht überzeugt, nur weil die Bedienung sie abschreckt?

Denn ganz gleich ob Smartphone, Tablet oder eine industrielle Steuerung:
Ist die grafische Benutzeroberfläche (engl. GUI) nicht durchdacht, meidet der Benutzer die Software oder das Gerät. Oft fehlt es hier an einer Standardisierung, an Wissen oder Kreativität. Beachtet man einige Design-Prinzipien, lädt die GUI dazu ein, das Gerät zu bedienen – und das kann den Erfolg ausmachen. 

Erfahren Sie hier mehr

Zwei nützliche Empfehlungen für Sie

Als Experte mit über 20 Jahren Erfahrung in HMI-Applikationen möchten wir Ihnen für eine ansprechende GUI folgende zwei Empfehlungen aussprechen:

Smart Embedded Displays in Kombination mit TouchGFX

Smart Embedded®-Module sind Displays, die bereits einen Arm Cortex®-M7 und mehrere Schnittstellen integriert haben. Das Konzept: Ein intelligentes Display, dessen grafischer Inhalt direkt on-board generiert wird. So vermeiden Sie es, hohe Datenmengen von extern zu übertragen. Die kostenlose Software TouchGFX können Sie zum Designen von GUIs verwenden. Mehr über Smart Embedded® Displays und TouchGFX erfahren Sie hier.

CONZE – Ihr Partner für UI-Design

Es bedarf langjähriger Erfahrung, um auf minimaler Hardware eine performante Darstellung anspruchsvoller Benutzeroberflächen zu realisieren. CONZE holt für Sie das Letzte aus Low-Power Embedded-Systemen heraus. Besuchen Sie CONZE hier.

In diesem Video sehen Sie das Ergebnis der Entwicklung einer GUI für eine Smart Home Steuerung. Überzeugen Sie sich selbst, was alles mit einem Arm Cortex®-M7 (STM32H750) Design möglich ist.