Tutorial Nextion Display #2
In diesem Blogbeitrag geht es darum wie man mehrere Seite des Nextion Displays steuert und Hintergrundbilder für Button und co.
Wenn den1. Teil des Tutorial noch nicht kennt kann ihn hier ansehen.
Die Software zum erstellen der Nextionoberfläche findet Ihr hier. https://nextion.tech/nextion-editor/#_section1
Auf der Nextion Seite findet Ihr auch nützliche Infos über das Display.
Button Hintergrundbilder
Alle Hintergrundbilder müssen im Vorfeld mit einem Bildbearbeitungsprogramm auf die Größe des Displays angepasst werden (in meinem Fall 480×320). Leider kann die Nextion Software das nicht automatisch.
Wenn image gewählt ist können zwei Bilder vergeben werden pic = Button Nochmal Zustand und pic2 = Button im gedrückten Zustand.
Wenn crop image gewählt ist wird picc und picc2 angezeigt. Die Bedeutung ist jedoch die selbe.
Was ist nun der Unterschied zwischen image und crop image?
Man kann es auf den Bild links ganz gut sehen. Das image erzeugt weiße Ränder um das Objekt. Diese sind eigentlich transparent, dass wird jedoch von der Nextion Software nicht erkannt. Und somit als weiß Dargestellt. Um das ganze zu umgehen kann man crop image verwenden.
Hier gibt er aber auch wieder was zu beachten.
Wenn crop image verwende wird muss man sich die Position der Button im Vorfeld überlegen. Denn hier legt man die Button so zu sagen direkt auf das Hintergrundbild.
Also legt man ein komplettes Hintergrundbild in der Button (pic oder pic2) hinein.
Wichtig ist aber das, dass Hintergrundbild der Seite (ohne Button) beibehalten wird.
Probiert es mal aus, Ihr bekommt das hin.
Wenn Ihr fragen habe schreibt Sie in die Kommentare oder schreibt mich einfach an.
Buttonabfrage auf mehreren Seiten
Zunächst einmal nochmal kurz zur Erläuterung wie werden die Daten vom Nextion Display abgefragt.
Es werden beim drücken es des Objekts auf dem Display 7 Daten übermittelt. Und diese in das Datenarray button übertragen.
Die 65 = button[0] kann ignoriert werden, da sich die Zahl nie ändert. Die 1 = button[1] gibt die Seitenzahl an 0=Seite 1 und so weiter. Die 2 = button[2] gibt das Datenobjekt auf der jeweiligen Seite an. Wenn man also nur mit einer Seite auf dem Display arbeitet braucht man nur den button[2] abfragen. Arbeitet man mit mehreren Seiten muss man zusätzlich den button[1] mit abfragen.
#include
// Datenarray mit 7 button (von 0-6)
char button [7] = {};
void setup() {
Serial.begin(9600);
}
void loop() {
// Serielle Schnittstelle auslesen
if (Serial.available() > 0)
{
for (int i = 0; i < 6; i++) {
button[i] = button[i + 1];
}
button[6] = Serial.read();
}
// Button Abfrage + Aktion
if (button[1] == 1 && button[2] == 1)
{
// hier kann die gewünschte Aktion ausgeführt werden
// Diese Instruktion ist zum löschen des Datenarray Button
for (int i = 0; i < 7; i++) {
button[i] = 0;
}
}
delay(50);
}
Der Code der über die Schnittstelle übertragen wird ist ein Hex Code. Wenn Ihr viele Objekte habt, müsst Ihr aufpassen was Ihr abfragt. Denn Button 11 zum Beispiel wird dann als Code 65 0 B 1 FF FF FF übertragen. Hier muss dann aber die 11 abgefragt werden. Hier eine Übersicht für die Umrechnung Hex in Dezimal.
!!! Wichtig
Nach jeder abfrage von einem Button oder Objekt muss das Datenarray
button wieder gelöscht werden. Das passiert mit diesem Schritt.
// Diese Instruktion ist zum löschen des Datenarray Button
for (int i = 0; i < 7; i++) {
button[i] = 0;
}
UNO R3 ATmega328P Board mit USB Kabel Arduino Uno R3 kompatibel
Du sparst
-
-
-
-
100uF 100V Kondensator BERYL Electronic Tech RC100M101LO10*16TH-2A1E
1,28 € - 1,39 €
Du sparst -
-