Tutorial Nextion Display #2

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.

 
Unten Links in der Software wählt Ihr Picture aus und klickt auf das +. Hier wählt Ihr eure Bilder aus die Ihr für das Projekt benötigt.
Nun klickt Ihr auf den Hintergrund der Seite. Hier könnt Ihr auf der Rechten Seite unter Attribute unter sta folgendes wählen.
no background = kein Hintergrundbild
solid color = einfarbiger Hintergrund
image = Hintergrundbild
Wenn image gewählt ist könnt ihr unter pic das Bilder wählen. Entweder über browse der nur die ID Nummer eingeben.
Das selbe könnt Ihr nun auch für den Button tun, nur gibt es hier noch die Möglichkeit crop image zu wählen. Was das bedeute kommen wir gleich drauf zurück.
 

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.

image
crop image

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

Um beim Display auf eine andere Seite schalten zu können, muss für den entsprechenden Button in der Touch Press Event folgendes eingetragen werden.

Beispiel: page page 1

page ist der Befehl und page1 ist der entsprechende Seitenname.

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 <Wire.h>

// 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;
}
				
			
Folgende Bauteile wurden verwendet: