BME280 Temperatuur, Vochtigheid & Druk Weergeven op Nextion Touchscreen

Onderdelen en Benodigdheden

Onderdeel	Aantal
Arduino Nano R3	1
SparkFun Atmospheric Sensor Breakout - BME280	1
Itead Nextion NX8048T070 - Generiek 7,0" HMI TFT LCD Touch Display	1
SparkFun USB naar Serieel Breakout - FT232RL	1

Apps en Online Services

• Visuino - Grafische Ontwikkelomgeving voor Arduino
• Arduino IDE

Over Dit Project

Er zijn veel Display-opties om een grafische gebruikersinterface toe te voegen aan Arduino-boards. De meeste ervan vereisen echter een aanzienlijke hoeveelheid geheugen en verwerkingstijd, en zijn niet geschikt voor Arduino-boards met beperkt geheugen en verwerkingskracht zoals Arduino UNO of Arduino Nano. Wanneer het geheugen beperkt is en een geavanceerde gebruikersinterface nodig is, zijn de Slimme Programmeerbare Seriële Nextion Displays een populaire keuze. Itead biedt een gratis Grafische Nextion Editor voor het ontwerpen van de gebruikersinterface van het display.

BME280 is een zeer nauwkeurige gecombineerde Temperatuur, Vochtigheid, en Barometrische Druk sensor. Het kan verbonden worden met I2C of SPI interface.

Visuino heeft volledige Nextion Display ondersteuning, en ik wilde al een tijdje een tutorial maken voor de Nextion ondersteuning. Ik wilde ook een tutorial maken voor de BME280 sensor. Uiteindelijk besloot ik ze te combineren en een enkele tutorial te maken die Temperatuur, Vochtigheid, en Barometrische Druk van de BME280 weergeeft op de 3 kanalen van een Scope (Golfvorm) component op het Nextion Display.

Stap 1: Componenten

• Eén Arduino compatibel board (ik gebruik Arduino Nano, omdat ik er een heb, maar elke andere werkt ook prima)
• Eén BME280 Sensor Module
• Eén Nextion Seriële Interface Slim Display (ik gebruikte NX4024K032_11 maar elke andere zou ook moeten werken)
• 4 Female-Female jumper draadjes
• Om het display te programmeren heb je ook een 5V USB naar TTL Serieel Converter Module nodig

Stap 2: Nextion Display Aansluiten op USB Serieel Communicatie Module

Om de Nextion Display te programmeren met de Nextion Editor moet je het verbinden met een USB naar TTL Serieel Converter aan je computer:

• Sluit de Nextion Draden Connector aan op het Display (Afbeelding 1)
• Als je USB naar Serieel Module configureerbaar is, zorg dat het ingesteld staat op 5V voeding (Afbeelding 2) (In mijn geval moest ik het configureren met een voedingsselectie jumper)
• Sluit de Massa Draad (Zwarte draad) van de Nextion Display aan op de Massa pin van de USB naar TTL Serieel Converter Module (Afbeelding 2)
• Sluit de Voeding (+5V) Draad (Rode draad) van de Nextion Display aan op de Voeding (VCC/+5V) pin van de USB naar TTL Serieel Converter Module (Afbeelding 2)
• Sluit de RX Draad (Gele draad) van de Nextion Display aan op de TX pin van de USB naar TTL Serieel Converter Module (Afbeelding 2)
• Sluit de TX Draad (Blauwe draad) van de Nextion Display aan op de RX pin van de USB naar TTL Serieel Converter Module (Afbeelding 2)
• Sluit de USB naar TTL Serieel Converter Module aan op de computer met een USB-kabel (Afbeelding 3)

Stap 3: Start Nextion Editor, en Selecteer Display Type en Oriëntatie

Om de Nextion Display te programmeren, moet je de Nextion Editor downloaden en installeren.

• Start de Nextion Editor (Afbeelding 1)
• Uit het Menu selecteer |FileNew| (Afbeelding 1)
• In het dialoogvenster "Opslaan als", typ projectbestandsnaam, en selecteer een locatie om het project op te slaan (Afbeelding 2)
• Klik op de knop "Opslaan" (Afbeelding 2)
• In het dialoogvenster "Instellingen", selecteer het Displaytype (In mijn geval NX4024K032_11) (Afbeelding 3)
• Klik op het tabblad "DISPLAY" aan de linkerkant om de Display-instellingen te tonen (Afbeelding 4)
• Selecteer Horizontale oriëntatie voor het display (Afbeelding 4)
• Klik op de "OK" knop om het dialoogvenster te sluiten (Afbeelding 4)

Stap 4: In Nextion Editor: Waveform (Scope) Component Toevoegen en Configureren

We moeten een Scope-component toevoegen en configureren met 3 kanalen voor Temperatuur, Druk en Vochtigheid:

• In de "Toolbox" aan de linkerkant klik op het "Waveform" component (Afbeelding 1) om het toe te voegen aan het ontwerpgebied (Afbeelding 2)
• Vergroot het component om het display te vullen (Afbeelding 3)
• In de "Attribute" toolbox, stel de waarde van het "ch" attribuut in op "3" (Afbeelding 3)
• In de "Attribute" toolbox, stel de waarde van het "dir" attribuut in op "right to left" (Afbeelding 4)

Stap 5: In Nextion Editor: Project Uploaden naar Nextion Display

• Klik op de "Upload" knop (Afbeelding 1)
• In het dialoogvenster "Upload to Nextion Device", klik op de "Go" knop (Afbeelding 2) om de upload te starten (Afbeelding 3)
• Wanneer de upload voltooid is (Afbeelding 4), klik op de "Exit" knop om het dialoogvenster te sluiten.

Stap 6: Start Visuino, en Selecteer Arduino Board Type

Omdat de Arduino Nano maar één seriële poort heeft, en die nodig is om de Arduino te programmeren, moet je de Arduino Nano programmeren voordat de Nextion Display aangesloten is.

Om te beginnen met programmeren van de Arduino, heb je de Arduino IDE geïnstalleerd nodig vanaf: https://www.arduino.cc/ .

Let op: Er zijn kritieke bugs in Arduino IDE 1.6.6.

Zorg dat je 1.6.7 of hoger installeert, anders werkt deze tutorial niet!

Visuino: https://www.visuino.com moet ook geïnstalleerd zijn.

• Start Visuino zoals getoond in de eerste afbeelding
• Klik op de "Tools" knop op het Arduino component (Afbeelding 1) in Visuino
• Wanneer het dialoogvenster verschijnt, selecteer Arduino Nano zoals getoond in Afbeelding 2

Stap 7: In Visuino: Nextion Display Component Toevoegen en Scope Element Eraan

Om de Nextion Display te besturen, moeten we een Nextion Display component in Visuino toevoegen, en daarna een element toevoegen om de Scope te besturen:

• Typ "next" in het filtervak van de Component Toolbox, selecteer dan het "Nextion Display" component (Afbeelding 1), en sleep het in het ontwerpgebied
• Klik op de "Tools" knop van het DisplayNextion1 component (Afbeelding 2)
• In de "Elements" editor selecteer het "Scope(Wave)" element, en klik dan op de "+" knop aan de linkerkant (Afbeelding 2) om een Scope element toe te voegen (Afbeelding 3)

Stap 8: In Visuino: 3 Kanalen Toevoegen aan Scope Element en Nextion Display Verbinden

Vervolgens moeten we kanalen toevoegen aan de Scope.

• In de Object Inspector, klik op de "..." knop naast de waarde van de "Channels" sub-property van het Scope1 element (Afbeelding 1)
• In de Channels editor selecteer "Channel" element aan de rechterkant, en klik dan 3 keer op de "+" knop aan de linkerkant (Afbeelding 2) om 3 kanalen toe te voegen (Afbeelding 3)
• Sluit de "Channels" en de Display "Elements" dialoogvensters
• Verbind de "Out" output pin van het DisplayNextion1 component met de "In" input pin van het "Serial[ 0 ]" kanaal van het Arduino component (Afbeelding 4)

Stap 9: In Visuino: 3 Map Range Componenten Toevoegen en Configureren

De Nextion Display Scope-kanalen zijn ontworpen om waarden tussen 0,0 en 1,0 weer te geven. Om Temperatuur, Vochtigheid en Druk weer te geven, moeten we de waarden omrekenen naar het 0,0 tot 1,0 bereik. We kunnen Map Range componenten hiervoor gebruiken:

• Typ "map" in het filtervak van de Component Toolbox, selecteer dan het "Map Range" component (Afbeelding 1), en sleep 3 van ze in het ontwerpgebied
• Selecteer het MapRange1 component (Afbeelding 2)
• In de Object Inspector, vouw de "Input Range" property uit (Afbeelding 2)
• Stel de waarde van de "Max" subproperty van "Input Range" in op "101000" (Afbeelding 2) (Je moet misschien een andere waarde instellen als de luchtdruk op je locatie heel anders is)
• Stel de waarde van de "Min" subproperty van "Input Range" in op "99000" (Afbeelding 2) (Je moet misschien een andere waarde instellen als de luchtdruk op je locatie heel anders is)
• Selecteer het MapRange2 component (Afbeelding 3)
• Vouw "Input Range" uit (Afbeelding 3)
• Stel "Max" in op "100" (Afbeelding 3)
• Stel "Min" in op "-20" (Afbeelding 3)
• Selecteer het MapRange3 component (Afbeelding 4)
• Vouw "Input Range" uit (Afbeelding 4)
• Stel "Max" in op "100" (Afbeelding 4)
• Stel "Min" in op "0" (Afbeelding 4)

Stap 10: In Visuino: Map Range Componenten Verbinden met Nextion Display Kanalen

• Verbind de "Out" output pin van MapRange1 met de "In" input pin van "Elements.Scope1.Channels.Channel1" van DisplayNextion1 (Afbeelding 1)
• Verbind de "Out" output pin van MapRange2 met de "In" input pin van "Elements.Scope1.Channels.Channel2" van DisplayNextion1 (Afbeelding 2)
• Verbind de "Out" output pin van MapRange3 met de "In" input pin van "Elements.Scope1.Channels.Channel3" van DisplayNextion1 (Afbeelding 3)

Stap 11: In Visuino: BME280 Component Toevoegen en Verbinden

We moeten een component toevoegen om data van de BME280 Module te lezen:

• Typ "280" in het filtervak van de Component Toolbox, selecteer dan "Pressure Temperature Humidity BME280 I2C" component (Afbeelding 1), en sleep het in het ontwerpgebied
• Mijn BME280 Module heeft I2C-adres 118 (0x76). Als jouw module een ander adres heeft, moet je de waarde van de "Address" property instellen (Afbeelding 2)
• Verbind de "Pressure(Pa)" output pin van PressureTemperatureHumidity1 met de "In" pin van MapRange1 (Afbeelding 2)
• Verbind de "Temperature" output pin van PressureTemperatureHumidity1 met de "In" pin van MapRange2 (Afbeelding 3)
• Verbind de "Humidity(%)" output pin van PressureTemperatureHumidity1 met de "In" pin van MapRange3 (Afbeelding 4)
• Verbind de "Out" output pin van PressureTemperatureHumidity1 met de "In" pin van het I2C kanaal van het Arduino component (Afbeelding 5)

Stap 12: In Visuino: Clock Generator Component Toevoegen, Configureren en Verbinden

We kunnen het project zo gebruiken, maar dan vervest de Scope heel snel constant. Het is beter als de Scope bijvoorbeeld 10 keer per seconde geüpdatet wordt. Daarvoor voegen we een clock-component toe om de uitlezing van de sensor en de update van de Scope te klokken.

• Typ "clock" in het filtervak van de Component Toolbox, selecteer "Clock Generator" component (Afbeelding 1), en sleep het in het ontwerpgebied
• In de Object Inspector, stel de waarde van de "Frequency" property van ClockGenerator1 in op "10" (Afbeelding 2)
• Verbind de "Out" output pin van ClockGenerator1 met de "Clock" input pin van PressureTemperatureHumidity1 (Afbeelding 3)

Stap 13: Arduino-code Genereren, Compileren en Uploaden

• In Visuino, druk F9 of klik op de knop getoond in Afbeelding 1 om de Arduino-code te genereren en de Arduino IDE te openen
• In de Arduino IDE, klik op de Upload knop om te compileren en uploaden (Afbeelding 2)

Stap 14: BME280 Temperatuur, Vochtigheid en Druk Sensor Aansluiten op Arduino

• Sluit 3V3 VCC Voeding (Rode draad), Massa (Zwarte draad), SDA (Groene draad) en SCL (Gele draad) aan de BME280 Module (Afbeelding 1)
• Sluit het andere uiteinde van de Massa draad (Zwarte draad) aan op de Massa pin van het Arduino Nano board (Afbeelding 2)
• Sluit het andere uiteinde van de 3V3 VCC Voedingsdraad (Rode draad) aan op de 3V3 voedingspin van het Arduino Nano board (Afbeelding 2)
• Sluit het andere uiteinde van de SDA draad (Groene draad) aan op SDA/Analoge pin 4 van het Arduino Nano board (Afbeelding 2)
• Sluit het andere uiteinde van de SCL draad (Gele draad) aan op SCL/Analoge pin 5 van het Arduino Nano board (Afbeelding 2)
• Afbeelding 3 toont waar de Massa, 3V3 Voeding, SDA/Analoge pin 4 en SCL/Analoge pin 5 pinnen van de Arduino Nano zitten

Stap 15: Nextion Display Aansluiten op Arduino

• Koppel de Nextion Display draden los van de USB naar TTL Serieel Converter Module
• Sluit de Massa Draad (Zwarte draad) van de Nextion Display aan op de Massa pin van de Arduino Nano (Afbeelding 2)
• Sluit de TX Draad (Blauwe draad) van de Nextion Display aan op de RX (D0) pin van de Arduino Nano (Afbeelding 2)
• Sluit de RX Draad (Gele draad) van de Nextion Display aan op de TX (D1) pin van de Arduino Nano (Afbeelding 2)
• Afbeelding 4 toont waar de Massa, 5V Voeding, RX/Digitale pin 0 en TX/Digitale pin 1 pinnen van de Arduino Nano zitten
• Sluit de +5V Voedingsdraad (Rode draad) van de Nextion Display aan op de 5V Voedingspin van de Arduino Nano (Afbeelding 3)
• Afbeelding 4 toont in Rood waar de Massa, 5V Voeding, RX/Digitale pin 0 en TX/Digitale pin 1 pinnen van de Arduino Nano zitten (In Blauw zijn de pinnen getoond die in de vorige stap verbonden zijn)

Stap 16: En Speel...

Gefeliciteerd! Je hebt het project voltooid.

Afbeelding 1 toont het aangesloten en aangedreven project. Zoals je op de afbeelding ziet, en in de Video, zal de Scope op de Nextion Display de Druk, de Temperatuur en de Vochtigheid van de BME280 Module plotten.

Op Afbeelding 2 zie je het complete Visuino diagram.

Bijgevoegd is het Visuino project dat ik voor deze tutorial gemaakt heb. Je kunt het downloaden en openen in Visuino: https://www.visuino.com

Ook in dezelfde zip zit het Nextion Editor project voor de Nextion Display.

FJE6Y04IWE4O3H6.zip