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.

Netzteil-Display mit Nextion-HMI #2

Netzteil-Display mit Nextion-HMI #3

Netzteil-Display mit Nextion-HMI #4

Advertisements

23 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

  10. Wolfgang Zindler sagt:

    Hallo plaintron,
    ich finde Dein Display SUPER und würde gerne einige Details in meine Projekte einbauen.
    Kann ich die Nextion.HMI bekommen und die Bitmaps (inklusive der Zeichensätze)?
    Vielen Dank und Gruß
    Wolfgang

    Gefällt mir

  11. plaintron sagt:

    Hallo Wolfgang,

    klar kannst du die Dateien bekommen. Die Fonts habe ich oben schon verlinkt, die letzte HMI liegt hier: http://blog.plaintron.de/wp-content/uploads/2018/vamos_110.zip
    Irgendwas habe ich da zerschossen, aber die Einzelteile und Skripts sind OK.

    Das Ergebnis würde mich dann interessieren 🙂

    Gefällt mir

  12. Wolfgang Zindler sagt:

    Hallo,
    sieht doch gut aus und die Art des Aufbaus gefällt mir.
    Werde ich mir noch im Detail ansehen.
    Vielen Dank

    Wolfgang

    Gefällt mir

  13. Wolfgang Zindler sagt:

    Hallo,
    wie kann ich den Dot-Matrix Font verändern/anpassen?
    Gibt es noch einen anderen Editor als ziFontEdit?
    Dieser funktioniert leider bei mir nicht, da ich beim Laden von zi-Fonts immer eine Fehlermeldung bekomme.

    Gruß
    Wolfgang

    Gefällt mir

  14. plaintron sagt:

    Hi Wolfgang,

    das sind ja Bitmap-Fonts, deshalb lässt sich daran nicht viel verändern. Die habe ich Punkt für Punkt von Hand gemalt. Der ziEditor ist leider nie fertig geworden und wird es wohl auch nie. iTead hat einen miserablen Support, unfreundliche Entwickler und im Forum bekommt man nur dumme Antworten. Letzter Stand ist außerdem, die Software kostenpflichtig zu machen. Damit wären die meisten Bastler aus dem Rennen und Profiqualität ist das ganze Zeug auch nicht. Mir scheint, die Leute dort haben einfach keinen Bock auf das Produkt.

    Mit dem ziEditor -0.10 unter Win7 kann ich zi-Fonts öffnen und bearbeiten, wenn er nicht gerade abstürzt. Der Editor kann im Prinzip auch ttf-Fonts umwandeln, das Ergebnis ist aber nicht sehr ansehnlich und mit einem falschen Klick ist alles wieder kaputt. Die Bearbeitungsfunktionen sind auch kaum brauchbar. So ist leider der Stand der Dinge. Bleibt nur, eine eigene Lösung zu bauen. Die Fonts sind einfache Bitmatrix-Dateien, wenn ich das richtig sehe (im Hex-Editor angeschaut), müssten also auch irgendwie mit anderen Editoren erstellbar sein.

    Noch was zu iTead: Vor einiger Zeit wollte ich dort Platinen fertigen lassen, habe also Gerber-Dateien erstellt und hochgeladen und bezahlt. Dann geschah erst mal nichts. Nach einer Woche habe ich nachgefragt und als Antwort bekommen, dass sie überhaupt keine Platinen mehr herstellen und der PCB-Service geschlossen wird. Das ist jetzt einen Monat her, aber das PCB-Angebot steht immer noch auf deren Website und der Shop funktioniert. Den Laden kann man also vergessen, die wissen überhaupt nicht was sie tun.

    Gefällt mir

  15. Wolfgang Zindler sagt:

    Hallo,

    Danke für die schnelle Rückmeldung.
    Bitmap-Fonts zu erstellen ist für mich kein Problem (ich kann gut von Hand malen!).
    Aber woher bekomme ich diesen Editor: ziEditor -0.10,ist bei meinem Win 7 nicht dabei?
    Zu den PCB’s: Ich lasse meine Platinen bei Beta-Layout fertigen. Toller Service, super Qualität, 6-Tage Service und eine SMD-Schablone (Stencil) ist im Preis inklusive, kann ich nur empfehlen!

    Gruß
    Wolfgang

    Gefällt mir

  16. plaintron sagt:

    Na super, die haben den Download des zi-Editors aus dem Forum gelöscht. Passt ja ins Bild 😉
    Hier ist eine Kopie: http://blog.plaintron.de/wp-content/uploads/2018/ziedit-010.zip
    Die Bitmap-Funktionen sind etwas fummelig. Linke Maustaste setzt einen Punkt, rechte Maustaste löscht ihn. Allerdings nicht da wo man hinklickt sondern leicht daneben :/

    Weitere Editoren gibt es hier: https://nextion.itead.cc/resources/download/tooles-pages/
    Der Nextion-Editor kann ttf importieren. Sieht dann aber nicht immer so sauber aus.

    Beta-Layout kenne ich. Ist aber nicht meine Preisklasse bei kleinen Auflagen. Einzelstücke mache ich selbst: https://plaintron.files.wordpress.com/2017/11/platine4_geklebt.jpg
    Ab 10 Stück lohnt sich Dirty-PCB, hervorragende Qualität zum China-Preis, dauert natürlich eine Woche länger.

    Gefällt mir

  17. Wolfgang Zindler sagt:

    Hallo,
    der Editor läuft, ist aber doch recht „gewöhnungbedürftig“, aber okay und Danke.
    Dirty-PCB habe ich mir angesehen, aber 4-Lagen aus Eagle geht leider nicht.
    Ist die platine4 gefräst?

    Gruß
    Wolfgang

    Gefällt mir

  18. plaintron sagt:

    Gewöhnungsbedürftig trifft es 😉 Mir ist ja danach, sowas mal in gut zu bauen. Eine wirklich brauchbare Software für Bitmap-Fonts habe ich noch nicht gefunden. Aber der Aufwand ist doch nicht zu unterschätzen.

    Die Platine ist geätzt und chemisch verzinnt, die Umrisse aber gefräst.
    Mit Eagle kam ich irgendwann auch nicht mehr weiter. Jetzt ist Diptrace im Einsatz, gefällt mir wesentlich besser und ist preislich unter Eagle, die freie Basis-Version kann auch schon eine Menge.

    Gefällt mir

  19. Wolfgang Zindler sagt:

    Ja, gute Idee mit der Font-Software. Ich wäre auch bereit mich finanziell an diesem Projekt zu beteiligen!!!

    Gruß
    Wolfgang

    Gefällt mir

  20. plaintron sagt:

    Der zi-Editor von Sergio wirkt ganz brauchbar.
    http://support.iteadstudio.com/support/discussions/topics/11000013300
    Einfach, aber funktioniert bei mir gut.

    Ich würde das dann wahrscheinlich als Webanwendung umsetzen, spart die Installation, funktioniert aber auch offline.
    Und für Geld arbeite ich nicht 😀

    Gefällt mir

  21. Wolfgang Zindler sagt:

    Hallo,
    War nicht böse gemeint, mit der Unterstützung!
    Bei mir funktioniert der zi-Editor nicht, ich bekomme immer diese Fehlermeldung:
    Error opening file – wrong header(0)

    Gruß

    Wolfgang

    Gefällt mir

  22. plaintron sagt:

    Wenn so eine Idee erst mal in meinem Kopf ist, geht sie auch nicht wieder weg 😉

    Die letzten Tage habe ich ein paar Tests gemacht, ob ein solcher Bitfont-Editor als Webanwendung umsetzbar ist. Es geht einfacher als gedacht. Ich kann TTF-Fonts öffnen, konvertieren, exportieren oder Bitmap-Fonts öffnen und editieren. Die Schärfe und Zeichenposition lässt sich einstellen und automatisch oder manuell korrigieren. Neue Zeichen können angelegt oder bestehende Zeichen verändert werden. Das Ergebnis kann dann als zi-Datei für Nextion oder als C-Byte-Array oder BLOB für andere Mikrocontroller und Grafik-LCDs gespeichert werden. Außerdem kommt eine Display-Vorschau mit frei wählbarem Text rein. Der Editor kann lokal oder auf einer öffentlichen Website laufen, irgendwelche Installationen sind nicht notwendig, nur ein aktueller Browser.

    Feature-Requests nehme ich gerne entgegen. Erst mal sind jetzt ein paar andere Baustellen an der Reihe, in ein paar Wochen nehme ich mir dann den Editor vor.

    @Wolfgang: Probier mal mit einer anderen zi-Datei oder versuche, mit dem ziEditor -0.10 ein Font aus einer HMI zu extrahieren (File->Extract). Bei mir geht es auch mit manchen Dateien nicht. Ich schaue mal in die Header, was da das Problem ist.

    Gefällt mir

  23. Wolfgang Zindler sagt:

    Hallo,
    hört sich ja gut an, ich stelle mich als Tester zur Verfügung.
    Danke für den Tipp, ich habe eine von Deinen Font-Dateien öffnen und auch bearbeiten können.

    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 )

Google+ Foto

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

Twitter-Bild

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

Facebook-Foto

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

Verbinde mit %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blogverzeichnis - Bloggerei.de

RSS Make:

  • ODROID-H2: x86-Bastelcomputer mit 2×Gigabit-Ethernet und HDMI 2.0
  • Pi trifft LoRa und Retro-Hardware – neue Crowdfunding-Projekte für Maker
%d Bloggern gefällt das: