Arduino

Nextion Display met Arduino

Laatst bijgewerkt: 14/03/2021

Dit is een inleiding op het Nextion scherm in combinatie met de Arduino. We laten u zien hoe u de display voor de eerste keer configureert, download de benodigde bronnen en hoe u deze kunt integreren met het Arduino UNO bord. We zullen ook een eenvoudige grafische gebruikersinterface maken om de Arduino pinnen te besturen.

Introductie van het Nextion display

Nextion is een Human Machine Interface (HMI) oplossing. De volgende schermen zijn resistieve aanraakschermen waarmee u eenvoudig een grafische gebruikersinterface (GUI) kunt bouwen. Het is een geweldige oplossing voor het bewaken en besturen van processen, voornamelijk voor IoT toepassingen.

Er zijn verschillende Nextion displaymodules, met formaten van 2,4” tot 7”.

De Nextion heeft een ingebouwde ARM microcontroller die het display bestuurt, het zorgt bijvoorbeeld voor het genereren van de knoppen, het maken van tekst, het opslaan van afbeeldingen of het veranderen van de achtergrond. De Nextion communiceert met elke microcontroller met behulp van seriële communicatie met een baudrate van 9600.

Dus, het werkt met elk bord dat seriële functies heeft zoals Arduino, Raspberry Pi, ESP8266, ESP32, enzovoort.

Om de grafische gebruikersinterface te ontwerpen, gebruikt u de Nextion editor, waarmee u eenvoudig knoppen, meters, voortgangsbalken, tekstlabels en de gebruikersinterface kunt toevoegen. We hebben het 2.8 " Nextion display basismodel, dat wordt weergegeven in de volgende afbeelding.

Een Nextion display verkrijgen

U kunt een Nextion basismodel of een door Nextion verbeterd model pakken. De verbeterde versie van Nextion heeft nieuwe functies in vergelijking met het basismodel:

Het beste model voor u hangt af van uw behoeften. Als je net met Nextion aan de slag gaat, raden we aan de 3,2 " grootte te gebruiken die in de voorbeelden van de Next Editor is gebruikt (de voorbeelden werken ook met andere formaten, maar je moet een paar wijzigingen aanbrengen). Bovendien is dit de meest gebruikte grootte, wat betekent dat er meer open source voorbeelden en bronnen voor deze grootte zijn.

Nextion Editor installeren

Om te beginnen met Nextion moet je eerst de Nextion Editor installeren. Ga naar https://nextion.itead.cc/, selecteer de Resources tab, Download > Nextion Editor en installeer de Nextion Editor. U kunt het .zip bestand of het .exe bestand downloaden.

Downloading Nextion Libraries

Voordat u aan de slag gaat, moet u ook de Nextion bibliotheken voor Arduino IDE installeren. Volg de volgende stappen om de bibliotheek te installeren:

  1. Klik hier om de Nextion bibliotheek voor Arduino te downloaden: ITEADLIB_Arduino_Nextion. U zou een .zip bestand moeten hebben in uw map Downloads.
  2. Pak de zip map uit en u moet de map ITEADLIB-Arduino-Nextion-master krijgen.
  3. Hernoem uw map naar ITEADLIB_Arduino_Nextion.
  4. Verplaats de map ITEADLIB_Arduino_Nextion naar uw Arduino IDE installatie bibliotheken map.
  5. Heropen je Arduino IDE.

Bibliotheek configureren voor Arduino UNO

Deze bibliotheek is standaard geconfigureerd voor Arduino MEGA2560. Om het voor Arduino Uno te laten werken, moet je het volgende doen:

  1. Open de ITEADLIB_Arduino_Nextion folder
  2. Er moet een NexConfig.h bestand zijn, open dat bestand.
  3. Comment lijn 27: //#define DEBUG_SERIAL_ENABLE
  4. Comment lijn 32: //#define dbSerial Serial
  5. Verander regel 37, zodat je het volgende hebt: #define nexSerial Serial
  6. Save de NexConfig.h file.
  7. Dit is het eindresultaat:

Nu bent u klaar om te gaan experimenteren met het Nextion display met Arduino UNO.

Bedrading Nextion Display naar de Arduino

Het aansluiten van de Nextion display op de Arduino is heel eenvoudig. U hoeft slechts vier verbindingen te maken: GND, RX, TX en + 5V. Deze pinnen zijn aan de achterkant van uw display gelabeld, zoals weergegeven in de onderstaande afbeelding.

Nextion display aansluitpennen

Dit is hoe je de Nextion display moet verbinden:

Nextion Arduino
GND GND
RX Arduino pin 1 (TX)
TX Arduino pin 0 (RX
VCC 5V

U kunt het Nextion display direct aansluiten via de Arduino 5V pin, maar dit wordt niet aanbevolen. Werken met onvoldoende voeding kan het beeldscherm beschadigen. Gebruik dus een externe voedingsbron. Gebruik een 5V / 1A voedingsadapter met een micro USB kabel. Samen met uw Nextion display ontvangt u ook een USB naar 2 pins aansluiting, handig om de voedingsadapter op het display aan te sluiten.

Dit is het schema dat u moet volgen om het scherm aan de Arduino te koppelen.

Bibliotheek configureren voor Arduino UNO en SoftwareSerial

Zoek deze lijn in het NexConfig.h bestand

#define nexSerial Serial2

en verander het naar deze,

#include <SoftwareSerial.h>
extern SoftwareSerial HMISerial;
#define nexSerial HMISerial

Save en sluit het NexConfig.h bestand.

Natuurlijk kun je het oude bestand met een andere naam behouden om het in de toekomst met een Mega te gebruiken.

Open vervolgens je Arduino voorbeeld en voeg deze regel toe aan je code

SoftwareSerial HMISerial(10, 11);

en het is klaar om te compileren en te uploaden naar arduino uno

Nextion display aansluitpennen

Dit is hoe je de Nextion display moet verbinden:

Nextion Arduino
GND GND
RX Arduino pin 10
TX Arduino pin 11
VCC 5V

Nu zal je Arduino UNO communiceren met de Nextion LCD

Project overzicht

De beste manier om vertrouwd te raken met nieuwe software en een nieuw apparaat is om een voorbeeld van een project te maken. Hier gaan we een gebruikersinterface maken in het Nextion display om de Arduino pinnen te besturen en gegevens weer te geven.

Dit zijn de functies van de applicatie die we gaan bouwen:

Benodigde onderdelen

Dit zijn de benodigde onderdelen voor dit project:

Project Schematic

Dit is het schema dat u moet volgen om dit project te voltooien.

Projectbronnen

We zullen niet stap voor stap bespreken hoe de GUI in het Nextion scherm moet worden opgebouwd. Maar we laten u zien hoe u de belangrijkste onderdelen kunt bouwen, zodat u kunt leren hoe u de gebruikersinterface daadwerkelijk kunt bouwen. Nadat u de instructies hebt gevolgd, moet u de gebruikersinterface zelf kunnen uitvoeren.

Daarnaast bieden we alle middelen die u nodig hebt om dit project te voltooien. Hier zijn alle bronnen die u nodig hebt (houd er rekening mee dat u mogelijk enkele instellingen op de gebruikersinterface moet wijzigen om overeen te komen met uw weergavegrootte):

Klik hier om alle bestanden te downloaden.

Next Editor Algemeen overzicht

Hier volgt een kort overzicht van de verschillende secties van de Nextion Editor.

  1. Hoofdmenu
  2. Canvas - hier voegt u uw componenten toe om de gebruikersinterface te bouwen.
  3. Toolbox - hier vindt u een grote verscheidenheid aan componenten die u aan de gebruikersinterface kunt toevoegen, zoals afbeeldingen, voortgangsbalk, knoppen, schuifregelaars en nog veel meer.
  4. Lijst met afbeeldingen / lettertypen - hier worden de lettertypen en afbeeldingen weergegeven die in uw projecten zijn geïmporteerd. Hier kunt u ook nieuwe lettertypen en afbeeldingen toevoegen.
  5. Paginagebied - u kunt uw pagina's hier beheren, zoals meer pagina's toevoegen, pagina's kopiëren en verwijderen.
  6. Attributengebied - dit deel toont de kenmerken van uw component. U kunt de kenmerken van de component hier bewerken.
  7. Compiler-uitvoervenster - dit toont eventuele fouten die tijdens het compileren zijn opgetreden.
  8. Gebeurtenisvenster - hier kunt u code toevoegen die moet worden uitgevoerd wanneer aan een evenement wordt voldaan.

Een nieuw project maken in de Nextion Editor

Open de Editor en ga naar Bestand > Nieuw om een nieuw bestand te maken. Geef het een naam en sla het op. Vervolgens verschijnt er een venster om uw Nextion model te kiezen, zoals weergegeven in de onderstaande afbeelding.

Of u kunt de .HMI file importeren voor dit project.

Als u het tabblad Weergave selecteert, kunt u ook de weergave richting instellen.

Voor dit voorbeeld hebben we Horizontaal geselecteerd.

Nadat u uw display en de oriëntatie hebt geselecteerd, klikt u gewoon op de knop OK. Een nieuw project in de Nextion editor zou moeten worden geopend.

We beginnen met het toevoegen van een achtergrondafbeelding. Als u een afbeelding als achtergrond wilt gebruiken, moet deze exact dezelfde afmetingen hebben als uw Nextion display. We gebruiken de 2.8 " weergave, dus de achtergrondafbeelding moet 240 × 320 pixels zijn. Controleer de afmetingen van je scherm en bewerk je achtergrondafbeelding dienovereenkomstig. Als voorbeeld gebruiken we de volgende afbeelding:

We hebben nu een achtergrondafbeelding met de juiste afmetingen, en volg je de volgende instructies:

  1. In de linkerbenedenhoek van het scherm van de Nextion editor is er een venster voor lettertypen en afbeeldingen. Selecteer het tabblad Afbeelding.
  2. Klik op de knop + en selecteer uw achtergrondafbeelding. De afbeelding wordt toegevoegd aan de lijst met afbeeldingen en deze krijgt een ID. In dit geval is het 0.



  3. Ga naar de toolbox en klik op het Picture onderdeel. Het wordt automatisch toegevoegd aan uw weergavegebied.
  4. Als dat onderdeel is geselecteerd, zou u het attribuut in het attribuutgebied moeten zien. U kunt dubbelklikken op de kenmerken om ze te bewerken. Dubbelklik op het pic kenmerk om de gewenste afbeelding te selecteren. Je moet "0" schrijven, dit is de index van de foto die je wilt, of selecteer de afbeelding in het nieuwe venster dat verschijnt. Nadat u "0" hebt geschreven, moet u eigenlijk ENTER indrukken om de wijzigingen op te slaan.

Lettertypen toevoegen

Om tekst op het display te schrijven, moet u een lettertype genereren in de Nextion Editor. Ga naar Tools > Font Generator. Er zou een nieuw venster moeten openen.

Hier kunt u de hoogte, het type en de tussenruimte van het lettertype selecteren en desgewenst vetgedrukt weergeven. Geef het een naam en klik op de knop Lettertype genereren. Sla daarna het .zip bestand op en voeg het generatorlettertype toe door op Ja te klikken.

Het lettertype wordt toegevoegd aan de lettertypenbibliotheek in de linkerbenedenhoek en krijgt een index. Omdat dit uw eerste lettertype is, heeft het de index 0.

Opmerking: op het moment van schrijven van deze instructies is er een probleem met lettertypen. Welk lettertype u ook kiest, het zal er altijd hetzelfde uitzien. Toch kunt u de lettergrootte bewerken en of deze vetgedrukt is of niet.

Tekstlabels, schuifregelaars en knoppen toevoegen

Op dit moment kunt u beginnen met het toevoegen van componenten aan het weergavegebied. Sleep voor ons project drie knoppen, twee labels en een schuifregelaar, zoals weergegeven in de onderstaande afbeelding. Bewerk hun uiterlijk zoals je wilt.

Alle componenten hebben een kenmerk met de naam objname. Dit is de naam van het onderdeel. Geef goede namen aan je componenten omdat je ze later nodig hebt voor de Arduino code. Merk ook op dat elke component één id nummer heeft dat uniek is voor die component op die pagina. De onderstaande figuur toont de objname en id voor de schuifregelaar.

Je kunt de componenten naar eigen inzicht bewerken, maar zorg dat je de schuifregelaar maxval instelt op 255, zodat het werkt met de Arduino code die we zullen gebruiken.

Aanraakbare componenten

U moet een gebeurtenis activeren voor de aanraakbare componenten (de knoppen en de schuifregelaar), zodat de Arduino weet dat een component is aangeraakt. U kunt gebeurtenissen activeren wanneer u er op drukt of wanneer u een component los laat.

Hier gaan we een gebeurtenis activeren wanneer de aanraking wordt vrijgegeven. Die gebeurtenis zal eenvoudig de ID van het aangeraakte component verzenden.

Om dat te doen, selecteert u een van de knoppen en selecteert u in het gebeurtenisvenster het Touch Release Event tabblad en vinkt u de optie Send Component ID verzenden aan. Herhaal dit proces voor de andere knop en de schuifregelaar.

Maken en navigeren naar een nieuwe pagina

Het toevoegen van meer pagina's aan uw GUI is heel eenvoudig. Klik in de rechterbovenhoek in het gebied Page op de knop Add om een nieuwe pagina toe te voegen. Er wordt een nieuwe pagina gemaakt. In dit geval pagina1.

Om van de ene pagina naar de andere te gaan, hebben we een knop op elke pagina toegevoegd, in de rechterbenedenhoek in dit geval heet dit bNext.

Als u deze knop wilt omleiden naar pagina 1, moet u het volgende toevoegen aan het venster Gebeurtenis, in het gedeelte gebruikerscode (zoals gemarkeerd in rood hieronder).

Als u naar een andere pagina wilt omleiden, hoeft u alleen de gebruikerscode met het nummer van de pagina aan te passen.

Op onze tweede pagina worden gegevens van de temperatuur en vochtigheidssensor van de DHT11 weergegeven. We hebben verschillende labels om de temperatuur in Celsius, de temperatuur in Fahrenheit en de luchtvochtigheid te tonen. We hebben ook een voortgangsbalk toegevoegd om de luchtvochtigheid weer te geven en een UPDATE knop om de meetwaarden te verversen. De bback knop verwijst naar pagina 0.

Merk op dat we labels hebben om de eenheden te houden zoals "ºC", "ºF" en "%", en lege labels die zullen worden gevuld met de meetwaarden wanneer we onze Arduino code actief hebben

De interface in de simulator testen

U kunt uw interface testen in de simulator. Daarvoor moet je op de knop Debug klikken in het hoofdmenu.

Er zou een nieuw venster moeten openen.

In dat venster kun je op de knoppen klikken en zien wat er gebeurt. U moet tussen pagina's kunnen wisselen door op de overeenkomende knoppen te klikken. Je zou ook de gegevens moeten zien terugkomen wanneer je op elke knop klikt, zoals in het rood is gemarkeerd in de bovenstaande afbeelding.

Compileren en uploaden van code naar het Nextion display

Volg de volgende stappen om uw project naar het Nextion scherm te uploaden:

  1. Klik op de knop Compile in het hoofdmenu
  2. Plaats de microSD kaart in uw computer
  3. Ga naar File > Open Build Folder
  4. Kopieer het .TFT bestand dat overeenkomt met het bestand dat u momenteel gebruikt
  5. Plak dat bestand in de microSD kaart (let op: de microSD kaart had eerder moeten zijn geformatteerd als FAT32)
  6. Plaats de microSD kaart in het Nextion display en sluit de voeding aan.
  7. U zou een bericht op het scherm moeten zien dat zegt dat de code wordt geüpload.
  8. Wanneer het klaar is, zou het het volgende bericht moeten tonen:
  9. Verwijder de voeding van het Nextion display en koppel de microSD kaart los.
  10. Schakel de voeding weer in en je ziet de interface die je hebt gebouwd in de Nextion Editor op je Nextion display.

De Arduino code schrijven

Als de GUI klaar is, moet je de Arduino code schrijven zodat de Nextion kan communiceren met de Arduino en omgekeerd. Het schrijven van code voor interactie met de Nextion display is niet eenvoudig voor beginners, maar het is ook niet zo ingewikkeld als het lijkt.

Een goede manier om te leren hoe je code schrijft voor de Arduino om te communiceren met de Nextion display, is door naar de map Examples in de map Nextion bibliotheek te gaan en deze te verkennen. Je zou code moeten kunnen kopiëren en plakken om de Arduino te laten doen wat je wilt.

Het eerste wat u moet doen, is om kennis te nemen van uw componenten in de GUI die met de Arduino zal communiceren en kennis te nemen van hun ID, namen en pagina. Hier is een tabel met alle componenten waar de code op zal reageren (uw componenten kunnen een andere ID hebben, afhankelijk van de volgorde waarin u ze aan de GUI hebt toegevoegd).

Objname Type Page ID ID
tState text 0 4
bOn button 0 2
bOff button 0 3
h0 slider 0 5
tSlider text 0 6
tTempC text 1 5
tTempF text 1 4
jHumidity Progress bar 1 8
tHumidity text 1 9
bUpdate button 1 10

Hieronder kunt u de code vinden die u naar uw Arduino bord moet uploaden. Zorg ervoor dat u de juiste Arduino bord en COM poort geselecteerd hebt.

U moet ook de Adafruit_DHT bibliotheek hebben geïnstalleerd.

Opmerking: zorg ervoor dat u de TX en RX verbindingen verwijdert bij het uploaden van code.

Nextion_28_Project.ino

Lees verder om erachter te komen hoe de code werkt.

Including benodigde bibliotheken

Eerst neemt u de bibliotheken Nextion en DHT op.

#include "Nextion.h"
#include "DHT.h"

De DHT sensor wordt aangesloten op de Arduino digitale pin 4.

#define DHTPIN 4

Selecteer vervolgens het DHT type dat u gebruikt:

// Uncomment whatever type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)

En initialiseer de DHT sensor

DHT dht(DHTPIN, DHTTYPE);

Daarna definieer je led1 en led2. Deze variabelen verwijzen naar respectievelijk de digitale pinnen 8 en 9. (led 1 wordt bestuurd met de AAN en UIT knoppen van de gebruikersinterface en de helderheid van led2 wordt geregeld met behulp van de schuifregelaar).

const int led1 = 8;
const int led2 = 9;

Nextion Objects bepalen

U moet al uw Nextion objecten als volgt declareren:

NexText tState = NexText(0, 4,  "tState");
NexButton bOn = NexButton(0, 2,  "bOn");
NexButton bOff = NexButton(0, 3,  "bOff");
NexSlider h0 = NexSlider(0, 5,  "h0");
NexText tSlider = NexText(0, 6,  "tSlider");
NexText tTempC = NexText(1, 5,  "tTempC");
NexText tTempF = NexText(1, 4,  "tTempF");
NexProgressBar jHumidity = NexProgressBar(1,  8, "jHumidity");
NexButton bUpdate = NexButton(1,10,  "bUpdate");
NexText tHumidity = NexText(1, 9,  "tHumidity");

Hier gebruikt u de pagina ID, de component ID en hun naam controleer de bovenstaande tabel met alle componenten. Als u een tekst wilt definiëren gebruikt u NexText, om een knop te definiëren gebruikt u NexButton,voor een schuifregelaar NexSlider en voor de voortgangsbalk gebruikt u NexProgressBar.

Vervolgens voegt u in het volgende fragment alle tastbare componenten toe die gebeurtenissen op de Arduino moeten activeren.

NexTouch *nex_listen_list[] = {
bOn,
bOff,
h0,
bUpdate,
NULL
};

Creëren van Callback Functions

Hierna moet u callback functies creëren die worden geactiveerd wanneer u de overeenkomstige componenten aanraakt.

De volgende functie wordt geactiveerd als u de knop van de knop bOn loslaat:

void bOnPopCallback(void *ptr) {
tState.setText("State:  on");
digitalWrite(led1, HIGH);
}

Met deze functie wordt led1 ingesteld op HOOG en wordt het tState label bijgewerkt met de tekst "Status: aan". Het bijwerken van tekstlabels is net zo eenvoudig als het gebruik van setText ().
De bOff knop werkt op een vergelijkbare manier:

void bOffPopCallback(void *ptr) {
tState.setText("State:  off");
digitalWrite(led1, LOW);
}

Voor de schuifregelaar h0 beschikt u over de volgende functie die de huidige schuifregelaarpositie op het tSlider label schrijft en de led2 helderheid dienovereenkomstig instelt:

void h0PopCallback(void *ptr) {
uint32_t number = 0;
char temp[10] = {0};
h0.getValue(&number);
utoa(number, temp, 10);
tSlider.setText(temp);
analogWrite(led2, number);
}  

Ten slotte hebt u een functie nodig voor de bUpdate (de updateknop). Wanneer u op deze knop klikt, geeft de temperatuur en vochtigheidssensor van de DHT de temperatuur en luchtvochtigheid weer en geeft deze weer op de bijbehorende labels, evenals de vochtigheid op de voortgangsbalk. Dat is de functie bUpdatePopCallback ().

In die functie leest het volgende fragment temperatuur en vochtigheid:

float h = dht.readHumidity();	// Read  temperature as Celsius (the default)
float t =  dht.readTemperature();	// Read  temperature as Fahrenheit (isFahrenheit = true)
float f =  dht.readTemperature(true);	// Check if any reads failed and exit early (to try  again).
if (isnan(h)  || isnan(t) || isnan(f)) {	//Serial.println("Failed to read from DHT  sensor!
return;}

Het volgende stuk schrijft de temperatuur in graden Celsius op het tTempC label

static char temperatureCTemp[6];
dtostrf(t, 6, 2, temperatureCTemp);
tTempC.setText(temperatureCTemp);

Op een vergelijkbare manier om de temperatuur in Fahrenheit bij te werken:

static char temperatureFTemp[6];
dtostrf(f, 6, 2, temperatureFTemp);
tTempF.setText(temperatureFTemp);

Om het vochtigheidslabel en de voortgangsbalk bij te werken:

char hTemp[10] = {0};
utoa(int(h), hTemp, 10);
tHumidity.setText(hTemp);
jHumidity.setValue(int(h));
            

Om de waarde van de voortgangsbalk in te stellen gebruikt u simpelweg setValue ().

setup()

In de setup () moet u de functies die zijn gemaakt koppelen aan de overeenkomstige events. Als u bijvoorbeeld op de knop bOn klikt, wordt de functie bOnPopCallback geactiveerd.

bOn.attachPop(bOnPopCallback,&bOn);
bOff.attachPop(bOffPopCallback,&bOff);
h0.attachPop(h0PopCallback);
bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
            

loop()

De loop is zo simpel als het volgende:

void loop(void) {
nexLoop(nex_listen_list);
}

Wanneer een gebeurtenis plaatsvindt, wordt de bijbehorende functie geactiveerd.

Demonstratie

Met de User Interface gebouwd en de code op de Arduino, zou je in staat moeten zijn om de Arduino pinnen van het Nextion display te bedienen.

Tik op de Aan en Uit knoppen om led1 in en uit te schakelen en verplaats de schuifregelaar om led2 helderheid te regelen.

Tik op het tweede scherm op de updateknop om bij te werken met de nieuwste sensormetingen.

Ter Afsluiting

In deze post hebben we je voorgesteld aan het Nextion scherm. We hebben ook een eenvoudige applicatie gebruikersinterface gemaakt in het Nextion display om de Arduino pinnen te besturen. De ontwikkelde applicatie is slechts een voorbeeld voor u om te begrijpen hoe u verschillende componenten met de Arduino moet bedienen we hopen dat u zowel de instructies als het meegeleverde voorbeeld hebt gevonden.