Grafische Oberflächen für Mikrocontroller mit TFT-Touchpanels von Nextion

 

 

 

Wenn Sie schon einmal ein PC-Programm für eine Anwendung im Bereich Mess-, Steuer- und Regeltechnik geschrieben haben, dann wissen Sie, dass Sie ca. 90 Prozent der Zeit mit der Erstellung der grafischen Oberfläche beschäftigt sind. Dabei sind die dahinter liegenden Abläufe meist eher trivial:

 

Ein Schalter wechselt lediglich den Zustand eines einzigen Bits und selbst ein Schieberegler macht nichts anderes als mit einem festen Inkrement eine Zahl innerhalb eines definierten Bereichs auszuwählen. Aber auch in diesem Bereich bestimmt das Auge sehr stark mit und es macht ja auch mehr Spaß, wenn unsere Steuerung später über tolle Regler und Messinstrumente verfügt.

Im Bereich Mikrocontroller sind solche grafischen Oberflächen (Graphical User Interfaces, GUI) noch eher selten anzutreffen, denn der Speicherbedarf ist enorm und der Programmieraufwand ebenfalls.

Dabei lassen sich die meisten Komponenten vom Erscheinungsbild recht gut standardisieren und auch der Datenaustausch beruht auf den immer gleichen Mechanismen. Genau hier setzen u. a. die Nextion TFT-Displays an, die speziell für das Maker-Segment konzipiert wurden. Wenn Sie besonders komfortabel optisch attraktive und flexible Bedieneroberflächen für den professsionellen Bereich erstellen möchten, sollten Sie unbedingt einen Blick auf die Produkte von 4D Systems  werfen, die wir Ihnen ebenfalls auf unserer Seite "Displays und Touchscreens" anbieten.

Hinweis: Bevor Sie Ihr Nextion-Display in Betrieb nehmen, stellen Sie sicher, dass die Stromversorgung ausreichend dimensioniert ist. Die Angabe dazu finden Sie in der Beschreibung des jeweiligen Produktes. Die 3,2"-Variante benötigt z. B. 85 mA bei 5V. Wenn Ihr Bildschirm flackert oder sonstige Störungen anzeigt, ist das ein Hinweis auf eine schlechte Stromversorgung. Trennen Sie Ihr Nextion-Display dann umgehend von der Versorgung. Längeres Flimmern kann zu dauerhaften Schäden führen.

Die Anzeige wird dabei nicht mehr von außen als Pixelmatrix angesprochen, sondern es befindet sich eine Bibliothek im Anzeigemodul selbst, mit der sich sehr einfach die diversen Funktionen einer GUI erstellen lassen und das ganz bequem mit einem PC-Programm, dem Nextion-Editor, den Sie hier kostenlos herunterladen können. Aber schauen wir uns das Ganze Schritt für Schritt bei einem praktischen Beispiel an.

Dabei sind mehrere unterschiedliche Abläufe möglich.

 

1. Konfiguration über die serielle PC-Schnittstelle und Nextion-Editor

 

Die einfachste Variante zur Programmierung des Nextion TFT-Touchscreens ist der Anschluss des Displays direkt an den PC. Dazu verwende ich einen USB-TTL-seriell-Wandler an den ich über das mitgelierte 4-polige Kabel den Nextion anschließe. Die Kabelbelegung ist recht übersichtlich:

  • rot = +5V
  • schwarz = GND
  • gelb = RX
  • blau = TX

 

Jetzt starten wir den Nexton-Editor und es erscheint der folgende Screen:

 

Nextion_Editor_klein

 

Wir wählen den Menüpunkt "New" und das Programm fragt uns in einem Datei-Dialog, wie das File heißen soll und wo wir es speichern möchten. Ich nenne es "tutorial". Die Editor-Dateien bekommen automatisch die Extension "HMI", das steht für "Human Machine Interface".

Nachdem wir den Namen festgelegt haben, können wir die Auflösung des von uns verwendeten Nextion-Displays wählen und ob die Anzeige horizontal oder vertikal geschieht.

 

Resolution_Dialog

 

Ebenfalls in diesem Dialog aber in dem 2. Reiter finden wir die Einstellungen für die Zeichencodierung. Für Westeuropa bietet sich hier ISO-8859-1 oder ISO-8850-15 an.

 

character_encoding

 

Nach diesen Angaben gelangen wir in den Editor und sehen auch schon unser (zunächst noch leeres) Display:

 

blank_display

 

Zur besseren Orientierung werden auch die Koordination angzeigt. Bevor wir jetzt mit der Gestaltung unserer Oberfläche beginnen, wollen wir zunächst testen, ob die Übertragung funktioniert. Dazu wählen wir oben in der Werkzeugleiste den Punkt "Upload".

 

upload

 

Das ist das Symbol mit dem kleinen grünen Pfeil und wir werden wieder mit einem neuen Dialog konfrontiert:

 

upload_dialog

 

Wenn Sie nicht genau wissen, über welche Schnittstelle Ihr Display angeschlossen ist, belassen Sie die Auswahl auf "Auto Search" dann durchsucht der Editor alle Schnittstellen und prüft, ob sich dort ein Display befindet. Während des Uploads sehen Sie auf dem Display die Anzeige, wie viel Prozent des Programms schon geladen sind. Das geht sehr zügig und mein Display ist jetzt wieder ganz weiß.

Bevor wir uns an Gestaltung machen, müssen wir zunächst mindestens einen Zeichensatz erstellen. Dazu gibt es im Nextion-Editor ein Hilfsmittel, das Sie im Menü "Tools -> Font Generator" finden. Ein Klick auf diesen Punkt ruft den folgenden Dialog auf:

 

font_dialog

 

Für dieses Tutorial wähle ich zunächt einen Zeichensatz vom Typ "Arial", belasse das Kompressionsschema auf Mode0 und die Höhe auf 16 und speichere ihn unter dem Namen "Standard". Die Zeichensätze werden in einer Datei mit der Endung ".zi" gespeichert, hier wähle ich den Namen "fonts.zi". Danach fragt mich der Editor, ob ich den Zeichensatz meinem Projekt hinzufügen will, was ich bejahe. Sie sehen nun unten links im Editor im Bereich "Fonts" einen Eintrag:

 

fonts_window

 

Fügen wir eine erste Komponente (Menüpunkt "Add Component") hinzu. Dabei können wir gleich sehen, wie viele Komponenten es überhaupt gibt:

 

add_component

 

Wir wählen zunächst einen Button, der nach dem Anklicken in der obigen linken Ecke erscheint und die Beschriftung "newtxt" trägt. Falls Sie keinen Text sehen, prüfen Sie, ob die Erstellung des Fonts geklappt hat. Ohne Font können nämlich keine Texte dargestellt werden.

 

button

 

Wenn Sie den Button einmal anklicken, dann wird er ausgewählt und unten links erscheint das Eigenschaftenfenster, in dem Sie zahlreiche Einstellungen vornehmen können. Wir wollen dies einmal exemplarisch für die anderen Komponenten durchgehen.

 

button_properties

 

objname: Jedes Objekt hat einen Objektnamen über den es identifiziert werden kann. Wenn Ihnen die starndardmäßigen Kürzel nicht zusagen, können Sie natürlich einen eigenen Namen vergeben.

 

vscope: Hier wählen Sie zwischen "local" und "global". Lokale Komponenten sind nur von den Elementen erreichbar, die sich auf der gleichen Seite befinden. Auch von außen (über die serielle Schnittstelle) ist ein lokale Komponente nur dann erreichbar, wenn ihre Seite gerade angezeigt wird. Eine globale Komponente ist immer erreichbar.

 

sta: Auch das ist wieder ein Auswahlfeld und bietet die Optionen: Farbe, Bild oder Bildausschnitt.

 

bco und bco2: Ein Button hat 2 Hintergrundfarben bco bestimmt die Farbe im nicht gedrückten Modus, wird der Button gedrückt nimmt er die Farbe bco2 an. Die Angaben sind im dezimalen Format. Es gibt unter "Tools" noch ein Werkzeug "Eyedropper" mit dem Sie die dezimalen Angaben erhalten, wenn Sie eine Farbe auswählen.

 

pco und pco2: Ähnlich wie bco und bco2 bestimmen Sie mit diesen Werten die Farbe der Schrift im nicht gedrückten und gedrückten Zustand. 0 bedeutet hier schwarz für beide Fälle.

 

font: Hier können Sie den Zeichensatz wählen, falls Sie mehrere definiert haben. Da wir nur einen haben, ist auch nur die 0 möglich.

 

xcen: Mit diesem Wert bestimmen Sie die Ausrichtung in x-Richtung (0 = linksbündig, 1 = zentriert, 2 = rechtsbündig).

 

ycen: Das Gleiche ist auch in der y-Richtung möglich, dabei bedeutet 0 = oben, 1 = zentriert, 2 = unten).

 

txt: Hier können Sie den angezeigten Text verändern...

 

txt-maxl: ... und hier die maximale Länge des Textes einschränken.

 

x, y, w, h: Über diese vier Felder ist die Position, die Breite und die Höhe wählbar.

 

Doch mit diesen Werten können wir unsere Komponente zwar weitreichend in der Darstellung verändern, doch tut sie noch nichts oder nicht viel. Um das zu sehen, können wir das Symbol "Debug" direkt links neben "Upload" wählen und da wir das Programm noch nicht in die Anzeige geladen haben, wählen wir als Ausgabe "Send command to: Current Simulator" aus.

 

simulator_button

 

Wenn wir jetzt auf den Button klicken, dann färbt er sich grün, so lange wir ihn gedrückt halten. Dieses Verhalten ist der Komponenten "Button" zu eigen und er wechselt zwischen den beiden Farben, die wir in bco und bco2 angegeben haben. Mehr tut er allerdings erstmal nicht. Also schließen wir den Simulator wieder.

Um dem Button, bzw. jeder anderen Komponente auch, etwas mehr Leben einzuhauchen, ist ein Bereich unten rechts von entscheidender Bedeutung:

 

action_area

 

Hier wählen wir die Aktionen, die für die Komponente gelten sollen. Dabei können wir im Reiter "Initialization" angeben, ob die Komponente automatisch geladen wird (Autoloading) oder erst später über irgendein anderes Ereignis (Load Commands). Wir bleiben erst einmal bei der automatischen Anzeige. Die beiden anderen Reiter erlauben Angaben für die Ereignisse Touch Press Event (Komponente gedrückt) und Touch Release Event (Komponente wieder los gelassen). Der User Code dazu wird in einer einfachen Kommandosprache erstellt.

Wir wollen, das unser Nextion-Display über die serielle Schnittstelle die Meldung "AKTIV" ausgibt, wenn wir den Button drücken und "INAKTIV" wenn wir ihn wieder loslassen.

Um einfach nur einen String als ASCII-Zeichen über die serielle Schnittstelle zu schicken, gibt es den Befehl "print". Mit print können wir aber nicht nur Zeichenketten, sondern auch numerische Werte übergeben.

print "AKTIV" -- sendet den ASCII-String ohne Start- oder Stoppzeichen

print 13 -- sendet den numerischen Wert

Neben dem Befehl gibt es auch noch den Befehl "get", der fast identisch ist. Allerdings sendet get eine Kennung vor der eigentlichen Übertragung und signalisiert auch das Ende:

get "AKTIV" -- sendet 0x70 + ASCII-Zeichen + 0xff 0xff 0xff

get 13 -- sendet 0x71 + 0x0d (13) 0x00 0x00 0x00 0xff 0xff 0xff  der numerische Werte wird in 4 Byte übertragen.

 

Wir werden den print-Befehl nutzen. Dazu geben wir im obigen Fenster unter "Touch Press Event" den User-Code print "AKTIV" ein und im Reiter "Touch Release Event" den Befehl print "INAKTIV".

Jetzt änderen wir aber erst noch den Text des Buttons in "senden", damit das Ganze sinnvoller aussieht, dann rufen wir mit "Debug" wieder den Simulator auf und drücken auf unseren Button.

event_reaction

 

Wir können unten in dem kleinen Fenster "Simulator Return Data" nun das Ergebnis sehen. Nach dem Drücken erscheint zunächst:

0x41 0x4b 0x54 0x49 0x56 -- das ist der ASCII-Code für "AKTIV" und beim Loslassen wird

0x49 0x4e 0x41 0x4b 0x54 0x49 0x56 ausgegeben, was "INAKTIV" entspricht.

 

Doch wir wollen jetzt auch testen, ob das wirklich hardwaremäßig so funktoniert. Dazu lade ich das Programm in das Nextion-Display und starte das Terminalprogramm "Tera Term". Sie können auch den seriellen Monitor der Arduino IDE dazu nutzen.

 

Nextion_senden

 

Wenn ich jetzt mit dem Finger auf den Button drücke bzw. ihn wieder loslasse, erscheint im Terminal der entsprechende Text:

 

teraterm_empfang

 

Wir haben also eine erste kleine Oberfäche erstellt und können mit dem Display jetzt beliebige Daten oder Zeichenketten zu jedem Computer oder Mikrocontroller senden, der über eine serielle Schnittstelle verfügt.

 

Der Debugger/Simulator

 

Mithilfe des seriellen Monitors können wir zwar prüfen, ob die Verbindung zum Display auch wirklich so funktioniert, doch noch komfortabler lässt sich das mit dem im Nextion-Editor integrierten Debugger/Simulator testen. Damit können wir außerdem sehr schön sehen, wie wir nicht nur Daten vom Display an unser Host-System senden, sondern umgekehrt auch Daten und Befehle zum Display schicken können.

Damit wir noch weitere Komponenten kennenlernen, werden wir zunächst unsere Oberfläche etwas verändern und erweitern. Als erstes löschen wir den Button, in dem wir ihn anwählen und dann "Delete Component" wählen. Jetzt haben wir wieder einen leeren Bildschirm. Eins vorweg: es geht bei der folgenden Oberfläche nicht um das Erstellen einer besonders sinnvollen Bedienung, es geht uns mehr darum, die Arbeitsweise von Nextion zu verstehen.

Die Komponenten sind standardmäßig nicht sehr aufwendig ausgeführt, das erledigen wir individuell durch Hinterlegen von Bildern bzw. Grafiken. Dieses Vorgehen ist auch sehr sinnvoll, denn so kann das Aussehen wirklich jedem Geschmack angepasst werden. Ich habe dazu vier einfache Grafiken erstellt, die wir in unseren Editor laden müssen. Alle Bilder, die wir für unsere Oberfläche nutzen wollen, laden wir im linken Bereich "picture" des Nextion-Editors in die Image-Library:

picture_library

 

Die Größe der Bilder wird angezeigt, das ist sehr nützlich, wenn Sie die Größes des Controls anpassen wollen. Wir haben zwei Bilder von einem Drehschalter und zwei Balken, die wir in der Progressbar nutzen werden.

Aus dem Komponenten-Menü wählen wir also einen "Dual-State Button", der einem Schalter entspricht und einen Progressbar. Per Drag and Drop platzieren wir die Komponenten und können auch die Größe zunächst anpassen. Das Ergebnis sieht so aus:

 

gui_version2

 

Standardmäßig sind die Komponenten zweifarbig mit den voreingestellten Werten Grün für aktiv und Grau für den inaktiv oder Hintergrund. Wir haben aber schon am Anfang gesehen, dass wir auch Bilder hinterlegen können und das werden wir jetzt tun. Dazu wählen wir zunächst die Fläche für den Schalter "bt0" aus und ändern die Einträge im Eigenschaftsfenster:

 

Erst wählen wir im Feld "sta" den Eintrag "image". Mit einem Doppelklick auf den Eintrag hinter "pic0" (Bild für den Zustand 0) öffnet sich ein Auswahlmenü, das mir alle Bilder in der Image-Library anbietet. Ich wähle das Bild mit dem roten Schalter. Das Gleiche führe ich für pic1 (Bild für den Zustand 1) durch und wähle den grünen Schalter. Wenn Sie jetzt auf "Debug" drücken, wechselt das Bild mit jedem Anklicken wie ein Drehschalter:

 

debug_switch_greendebug_switch_red

 

Auch der Progressbar hat eine eingebaute Funktionalität, die sehr gut gelungen ist. Dabei können Sie ebenfalls zwei Bilder mit identischen Abmessungen wählen (bpic und ppic). Mit bpic wählen Sie den Hintergrund des Fortschrittbalkens und die aktive Anzeige wird mit dem Bild ppic dargestellt. Sie müssen also nur zwei Bilder entwerfen, die anzeigen wie der Balken beim Wert 0 aussieht und beim Wert 100 (Maximalwert). Nextion berechnet dann für alle Zwischenwerte das entsprechende Resultat. Wie das aussieht können Sie sehr gut sehen, wenn Sie den Parameter "val" verändern. Im folgenden Bild habe ich ihn auf den Wert 20 gesetzt:

 

gui_version2_b

 

Das sieht ja schon wesentlich realistischer aus, obwohl es mit extrem geringem Aufwand erstellt wurde. Da wir jetzt allerdings gespannt sind, wie das Ganze auf dem realen Display ausschaut, laden wir es einmal in die Anzeige. Das Ergebnis sieht sogar noch etwas besser aus, als der Entwurf auf dem PC:

 

Nextion_real_GUIV2

 

Wir können die Optik jetzt noch mit einem Hintergrundbild und entsprechenden Texten aufpeppen, aber das überlasse ich Ihrer Fantasie, denn wie es geht, wissen Sie ja jetzt.

Was wir allerdings noch näher untersuchen wollen ist die Funktionalität:

  1. Wie kommunizieren die einzelnen Komponenten untereinander?
  2. Wie gelangen eingestellte Werte von der Anzeige zum Host-System?
  3. Wie kann ich von meinem Host-Mikrocontroller auf die Anzeige zugreifen?

Die Antwort auf die erste Frage lautet: Wir verknüpfen über unsere Kommandosprache in den einzelnen Events einfach 2 Größen miteinander. Wir können dabei auch nahezu beliebige Verknüpfungen oder Bedingungen angeben.

Geben Sie z. B. im "Touch Press Event" den Code:

j0.val=bt0.val*50

ein, dann nimmt der Progressbar (j0) den Wert 50 an, wenn der Schalter auf "ein" steht und 0, wenn er ausgeschaltet ist. Ich kann in diesem Tutorial nur an der Oberfläche kratzen, was die Möglichkeiten angeht. So können Sie z. B. auch auf Knopfdruck andere Elemente aktivieren oder sogar ganz neu erstellen.

Fügen Sie z. B. im "Touch Press Event" des Schalters den folgenden Code ein:

cirs 100,100,30,RED

dann wird beim Drücken auf bt0 ein roter Kreis mit den Koordinaten 100, 100 und einem Radius von 30 gezeichnet.

 

Kommen wir zum zweiten Punkt oben. Die ersten Möglichkeit haben wir schon weiter oben kennengelernt: Wir fügen für ein bestimmtes Event ein Codesegment ein, dass uns z. B. den Wert der Schalters oder eines Sliders sendet. Beim Slider bietet sich z. B. das Event "Touch Move" an. Dieses Ereignis wird jedes Mal gefeuert, wenn der Schieberegler verändert wird. In diesem Fall wäre der folgende Code sinnvoll:

get h0.val (h0 ist die standardmäßige Bezeichnung für den ersten Slider)

Für das aktive Senden von Daten kann aber auch ein Timer als nicht sichtbare Komponente gesetzt werden. Jedes Mal wenn dieser Timer seinen Endwert erreicht hat, löst er ein Event aus, mit dem Sie wiederum Befehle verknüpfen können.

Aber bislang ging die Aktivität nur von der Anzeige selbst aus. Eine weitere Möglichkeit ist das Abholen (Pollen) der Werte vom Host-Controller über die serielle Schnittstelle. Nichts leichter als das, denn dazu nutzen Sie die gleichen Kommandos. Das können Sie im Debugger sehr gut testen.

 

debugger_session

 

Zunächst wählen wir im Punkt "Send command to:" sowohl den Simulator als auch unsere angeschlossene Hardware. Die müssen wir aber noch über den nebenstehenden Punkt verbinden. Danach sind unten alle drei Aus- und Eingabebereiche aktiv. Im "Instruction Input Area" geben wir jetzt z. B. den Code:

get bt0.val

und können in beiden Ausgabefenstern "Simulator Return Data" und "User MCU returned Data" den jeweiligen Wert sehen. Das Gleiche funktioniert natürlich auch mit:

get j0.val

Damit können wir auch schon die 3. Frage beantworten, denn genauso wie wir die Werte holen können, setzen wir sie auch über die serielle Schnittstelle:

j0.val=80

setzt den Wert des Fortschrittbalkens auf 80.

 

Hinweis: Sendet die MCU oder auch der PC Kommandos an das Nextion-Display muss der Befehl mit der binären Sequenz 0xff 0xff 0xff terminiert werden. Das ist bei einigen Terminalprogrammen über das Zeichen ÿ (ALT-0255 bzw. ALt-255) möglich. Sicherer funktioniert es aber mit einem Programm, bei dem Sie rohe Binärdaten direkt eingeben können. HTerm ist ein sehr nützliches Tool dazu.

 

1. Konfiguration per SD-Karte

 

Alternativ zur Übertragung per serieller Schnittstelle können Sie das Nextion-Display auch mit einer SD-Karte konfigurieren. Dazu gehen Sie wie oben beschrieben vor und wählen dann anstelle von Upload den Befehl "Compile". Es wird eine Datei mit der Endung ".tft" erzeugt. Dabei handelt es sich um ein ladbares Binärfile. Wo der Nextion-Editor diese Datei abspeichert enthüllt ein Klick auf den Button "Open Build Folder", den Sie im File-Menü finden. Diese Datei speichern Sie auf eine in FAT32 formatierte SD-Karte und diese Karte stecken Sie anschließend in den Kartenslot auf der Rückseite des Displays. Ein Boot-Loader lädt sie dann beim Neustart in den Programmspeicher der Anzeige.

 

Hinweis: Sollte es beim Upload oder beim Betrieb mit der SD-Karte einmal zu Problemen kommen, kann es sein, dass der Boot-Loader nicht mehr korrekt funktioniert. Sie erhalten dann eine Fehlermeldung oder beim Einschalten passiert gar nichts mehr. Dieses Problem können Sie wie folgt beheben:

1. Legen Sie ein neues Projekt an und bestimmen Sie lediglich die Größe des Displays.

2. Compilieren Sie das leere Projekt.

3. Speichern Sie es wie oben beschrieben auf einer SD-Karte.

4. Stecken Sie die SD-Karte in den Kartenslot und starten Sie das Nextion-Display.

 

Durch das leere Projekt wird der Bootloader neu initialisiert und arbeitet danach wieder einwandfrei.

 

Sie wollen mehr über die Nextion-Displays erfahren? Hier finden Sie einen kompletten Lehrgang und das auch noch kostenlos!

 

Damit geht das erste Tutorial über die Grundlagen dieses interessanten Touchpanels zu Ende. Im nächsten Teil werde ich den Betrieb mit einem Arduino-Board vorstellen, denn dafür gibt es eine eigene Bibliothek, die die Kommunikation noch einmal vereinfacht.

Sie sind neugierig geworden und möchten diese neue Technologie einmal ausprobieren? NEXTION-Displays gibt es hier günstig in unserem Shop!

 

Für weitere Informationen und Bestellungen z. B. des Nextion 3,2" TFT-Touchpanel mit GUI-Controller einfach auf nachfolgenden Link klicken:  Nextion 3,2" TFT-Touchpanel mit GUI-Controller

 

Falls Sie Fragen zum Thema haben, wenden Sie sich einfach an uns.

Wir helfen Ihnen gern weiter!

 

Ihr Team von Böcker Systemelektronik

 

Hinweis: Unser Tutorialangebot wird in unregelmäßigen Abständen erweitert. Wenn Sie sofort über eine Neuerscheinung informiert werden möchten, tragen Sie sich bitte hier in unsere Benachrichtigungsliste "Tutorials" ein. Sie können diesen unverbindlichen Service jederzeit in Ihrem Kundenkonto oder per E-Mail wieder abbestellen.  

 

 

 
 
 
 
 

Copyright © Böcker Systemelektronik