Netzteil-Display mit Nextion-HMI #1

23

14.07.2017 von plaintron

Am Beispiel meines Labornetzteil-Displays möchte ich zeigen, wie ein multifunktionales Interface mit einem Nextion-HMI umgesetzt werden kann.

Es beginnt mit dem Entwurf im Grafikprogramm. Ein HMI-Design besteht aus mehreren Seiten (pages), zwischen denen gewechselt werden kann. Die erste Seite, die nach dem Einschalten angezeigt wird, ist die Multimeter-Anzeige mit analoger und digitaler Spannungsanzeige, Strom-Bargraph, Amperemeter und Leistungsanzeige. Die Strombegrenzung wird einerseits durch einen kleinen Pfeil (gelbes Dreieck) unter dem Bargraph angezeigt, zusätzlich schaltet das Amperemeter auf den Wert der Strombegrenzung um, wenn diese mit dem Drehgeber geändert wird.

Rechts oben befindet sich eine Schaltfläche, mit der auf die nächste Seite gewechselt werden kann, die verschiedene Buttons für Einstellungen enthält.

Der Schieber für die Strombegrenzung soll sich auch direkt am Display bewegen lassen.

Im Nextion-Editor wähle ich folgende Elemente aus:

• Drei Textfelder für die Ziffernanzeigen (V, A, W)
• Ein Bargraph für die Stromanzeige
• Ein Slider für die Strombegrenzung
• Ein Button für die Menüauswahl.

Die Skala wird als Hintergrundbild für die gesamte Seite angelegt. Das Display kennt nur Integer-Variablen, deshalb müssen die Ziffern in Text umgewandelt werden, um sie als Dezimalwerte anzeigen zu können. Diese Umwandlung kann im Display oder im externen Controller erfolgen.

Slider und Bargraph können einfarbig oder mit Grafiken verwendet werden. Ich wähle Grafik als Hinter- und Vordergrund und schneide dazu die entsprechenden Bereiche aus dem Entwurf aus und exportiere sie als BMP-Datei. Eine Komprimierung (gif, jpg, png) bringt nichts, da der Editor ohnehin mit unkomprimierten Grafiken arbeitet.

Eine interessante Möglichkeit heißt hier „Crop Image“ und bewirkt, dass ein Ausschnitt einer anderen Grafik angezeigt wird. Stelle ich also etwa für ein Textfeld das Hintergrundbild als Crop Image ein, erscheint das Feld durchsichtig.

Nachdem die Grafiken vorbereitet sind, beginnt die Arbeit im Nextion-Editor.

Um ein neues Design anzulegen, wird dem Editor zunächst mitgeteilt, welche Displaygröße, welcher Modultyp und welche Ausrichtung des Displays wir verwenden möchten. Anschließend zeigt der Editor die Bearbeitungsansicht.

Rechts oben ist eine Übersicht der erstellten Seiten zu sehen. Ich habe eine Seite angelegt und ihr den Namen „start“ gegeben. Links unten werden bereits importierte Grafiken gelistet. Die Hintergrundgrafik mit der ID 0 habe ich der Startseite zugeordnet. Eine Seite kann auch eine Farbe als Hintergrund haben oder ganz ohne Hintergrund belassen werden.

Es geht weiter mit den Layout-Elementen.

Jedes Element bekommt einen eindeutigen Namen, mit dem es später adressiert werden kann. Wird kein Name angegeben, gilt die Vorgabe des Editors (z.B. p0). Um Texte anzeigen zu können, ist ein Pixelfont erforderlich (.zi-Datei). Unter „Tools“ findet sich ein Importwerkzeug, um TTF- oder ähnliche Fonts umwandeln zu können. Für meine Anwendung habe ich ein Font mit den zi-Editor erstellt, das nur Ziffern und einige Sonderzeichen enthält, um Speicherplatz zu sparen. Grundsätzlich ist zu bedenken, dass kein Antialiasing möglich ist. Fonts mit vielen Details werden daher verpixelt und ausgefranst dargestellt. Das Importwerkzeug sorgt da nicht immer für die optisch beste Lösung, deshalb ist meistens Nachbearbeitung mit den zi-Editor sinnvoll. Außerdem sind nur Fonts mit fester Zeichenbreite möglich. Das Display unterstützt keine proportionalen Schriftarten.

Dem Menü-Button sind zwei Grafiken zugewiesen, um den „Gedrückt“-Zustand zu visualisieren. Das Bargraph-Element bekommt eine Hintergrundgrafik (weiß-gelbe Kästchen) und ein Vordergrundbild (LED-Reihe). Der Schieber (Slider) bekommt als Hintergrund die Crop-Einstellung, damit der Seitenhintergrund angezeigt wird. Der Schieberknopf ist mit dem gelben Zeigerdreieck hinterlegt.

Nun lässt sich das Layout bereits testen. Ein Klick auf „Debug“ zeigt das Ergebnis an, das sich auch schon bedienen lässt. Der Slider kann bewegt werden und der Menü-Button reagiert auf Klicks. Allerdings fehlt noch die Funktionalität.

Unter dem Vorschaufenster liegt der „Event“-Bereich. Jedem Element können damit Ereignisse zugewiesen werden, die eine bestimmte Funktion auslösen. Ein Button hat etwa den Press- und den Release-Event, wie man es auch von JavaScript oder diversen Visual-XY-Programmierumgebungen kennt.

Testweise bekommt der Slider eine Eventfunktion zugewiesen. Wird er angetippt (push), soll sich die Farbe der Ampere-Anzeige in gelb ändern, wird er losgelassen, soll die Farbe wieder zu Orange zurückkehren. Wird der Slider bewegt, soll er seinen aktuellen Wert dem Bargraph-Element zuweisen, welches sich dann ebenfalls bewegt.

Dazu gebe ich beim Press-Event ein:

ampere.pco=YELLOW

Einige Grundfarben sind als Konstanten definiert. Andere Farben lassen sich über Zahlen festlegen, die aber mit dem eingebauten Color-Picker ausgewählt werden können.

Das Release-Event bekommt folgenden Eintrag:

ampere.pco=64832

Das ist die ursprüngliche Farbe.

Achtung, der Makro-Editor verträgt keine Leerzeichen, außer wenn sie zur Abgrenzung von Parametern erforderlich sind. In der Doku ist das meistens falsch dargestellt und funktioniert dann nicht, wenn man die Beispiele copypastet.

Dann haben wir noch ein Slide-Event:

ampbar.val=amplimit.val

Ein Klick auf den Debug-Button macht die Funktion nun sichbar, der Slider lässt sich bewegen und der Bargraph folgt dem Slider-Wert, während die Farbe der Ampere-Anzeige wechselt.

Damit sind die meisten Elemente der Startseite vorhanden. Was noch fehlt ist der Zeiger für die analoge Anzeige. Zwar gibt es ein Element, das diese Funktion übernehmen könnte („Gauge“), das ist aber nur brauchbar, wenn der Vollkreis der Anzeige innerhalb der Displayfläche liegt. Wir haben hier aber den Drehpunkt des Zeigers am unteren Ende des Displays liegen. Deshalb müssen wir auf die Zeichenfunktionen zurückgreifen und mit dem Arduino die Position und Richtung des Zeigers berechnen. Wie das geht, zeige ich im nächsten Beitrag.

Update (02/2021): Den .zi-Editor der gewöhnlich eher serviceunwilligen Firma itead gibt es nicht mehr. Hier ist eine Alternative: https://github.com/hagronnestad/nextion-font-editor

Netzteil-Display mit Nextion-HMI #2

Netzteil-Display mit Nextion-HMI #3

Netzteil-Display mit Nextion-HMI #4