Netzteil-Display mit Nextion-HMI #1

9

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.

Advertisements

9 Kommentare zu “Netzteil-Display mit Nextion-HMI #1

  1. […] geht es mit dem HMI-Display für mein Labornetzteil. Im ersten Teil haben wir uns einige grundlegende Funktionen des Nextion-Editors angesehen und das Grundlayout für […]

    Gefällt mir

  2. […] Netzteil-Display mit Nextion-HMI Teil 1 […]

    Gefällt mir

  3. Mickbaer sagt:

    Hallo, Ich habe versucht das oben beschrieben nach zu vollziehen.
    Leider habe ich im Netz keine HMI datei gefunden die mir helfen könnte.
    Ich scheitere an der Transparenz des Slider Dreickes.Wie muss die Grafik des Dreiecks aussehen damit sie Transparent wird. Eine mit Gimp erstellte JPG datei mit transparentem Hintergrund funktioniert nicht.
    Wie wurde das mit dem Dreieck gelöst?
    Danke für eine Tipp.
    Gruß aus Berlin
    Mickbaer

    Gefällt mir

  4. plaintron sagt:

    Hi Mickbaer,

    das Display unterstützt keine Transparenz und arbeitet ohnehin nur mit Bitmap-Dateien. Du kannst also direkt als BMP exportieren, alles andere wird sowieso in BMP umgewandelt. Das Dreieck ist auch nicht wirklich transparent, sondern so gefärbt, dass es optisch auf den Hintergrund passt. Das ist also eine Fake-Transparenz 😉

    Gefällt mir

  5. Mickbaer sagt:

    Hallo,
    Danke für die rasche Antwort.
    Ich hatte schon gelesen das dass Display keine Transparenz kann,
    und der Hersteller die auch nicht einbauen möchte.
    Ich habe das Dreieck, dann auch mit einem Entsprechenden Hintergrund versehen.
    Bleibt noch eine Frage, wo hast Du den Font mit den Computer Zahlen her?
    oder kannst Du den Font zur Verfügung stellen. Ich wäre daran sehr interessiert.
    Gruß Mickbaer aus Berlin.

    Gefällt mir

  6. plaintron sagt:

    So, musste etwas suchen und habe mal die letzten drei Fonts zusammengepackt: http://blog.plaintron.de/wp-content/uploads/2018/lcdgrid_nextion_fonts.zip

    Die habe ich mit dem Font-Editor von Nextion zusammengebaut. Das Ding ist die Hölle aber wenn man es einmal raus hat geht es.
    http://support.iteadstudio.com/support/discussions/topics/11000003343

    Gefällt mir

  7. Mickbaer sagt:

    Vielen Dank für die Font Dateien.
    Das mit der Hölle des ZiEditors habe ich auch schon gemerkt.
    Das kostet mir jetzt zu viel Zeit, da muss ich mir mal mehr Zeit nehmen.
    Nochmals vielen Dank für deine Anleitung, die hat mich echt weiter gebracht.
    Zwei Sachen sind mir aufgefallen.
    in dem Arduino src fehlt die Declaration für cmd und das Display muss mit 180 grad gedreht
    in der HMI angelegt werden.
    Ich habe noch zur Beschleunigung die Baudrate des Display nach dem Start auf 115200 hoch gesetzt.
    Dann flutscht alles auf meinem EPS8266 sehr gut.
    Gruß Mickbaer aus Berlin

    PS: kommen da noch weitere Beträgen zu den angekündigten Seiten des Displays für das Netzteil setup?

    Gefällt mir

  8. plaintron sagt:

    Der Editor ist noch im negativen Alpha-Stadium und irgendwie haben die Entwickler da auch den Ehrgeiz verloren das Ding fertig zu bauen.

    Im Arduino-Code fehlen alle Deklarationen, den Teil vergesse ich gerne mal in den Artikel zu kopieren. 😉 Merkt man dann ja auch schnell.
    Das mit der Drehung habe ich nur nebenbei erwähnt, weil da sicher jeder eine andere Kombination verwendet:

    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.

    Die Baudrate habe ich auch hochgesetzt, da war der Beitrag wohl schon fertig geschrieben.

    Ein Teil fehlt noch in dieser Artikelserie und das Netzteil habe ich noch gar nicht angefangen zu bauen. Wird hoffentlich dieses Jahr noch etwas.

    Gefällt mir

  9. […] Netzteil-Display mit Nextion-HMI Teil 1 […]

    Gefällt mir

Kommentieren

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Blogverzeichnis - Bloggerei.de
%d Bloggern gefällt das: