Bouw de Fridgeye-app met een Nextion-display

Over dit project

In juli van dit jaar lanceerden een paar ontwerpstudenten uit Duitsland een satirische Kickstarter om een ​​prototype van de Fridgeye te maken; een mooie lichtsensor voor je koelkast. Combineer het feit dat we over het algemeen belachelijke hardwareprojecten verwachten op Kickstarter met hoeveel moeite het team heeft gedaan om het echt te laten lijken, het is geen wonder dat mensen niet zeker wisten wat ze moesten denken. Het is geen geheim dat ik vanaf het begin fan van het project was, maar niet omdat ik zo graag wil weten wat mijn koelkastlamp doet. De Fridgeye is een perfect afgebakend project om aan te pakken met groeipotentieel als u aan de slag wilt in het internet der dingen.

Bouw het Fridgeye-apparaat

Het grootste deel van dit bericht zal gericht zijn op het laten werken van de Fridgeye-app met het Nextion-aanraakscherm aangesloten op een Arduino, maar voordat we zover zijn, hebben we een echt apparaat nodig dat licht kan voelen. Geen probleem. Laten we 5 minuten nemen en er een bouwen. Ik beloof dat het geen seconde langer zal duren. Het enige wat je nodig hebt is een Arduino, breadboard, fotoresistor en een weerstand van 3,3K. We zullen het zo aansluiten. Maak je nog geen zorgen over de schermaansluitingen. Concentreer u gewoon op de Arduino, weerstand en fotoweerstand.

Ik had eigenlijk een ProtoShield rondslingeren; dus ik heb er een mini-breadboard op geslagen, zodat ik alles in een mooi, met schilden gestapeld pakket kon bewaren, maar toch de vrijheid van een breadboard kon hebben. Zo ziet de mijne eruit.

Oké, ik heb gelogen, dat duurde maar ongeveer 4 minuten. Maar je kunt de minuut die je nog hebt gebruiken om deze supereenvoudige schets op je Arduino te gooien en de seriële uitvoer van de lichtsensor vanuit de Arduino IDE te bekijken.

void setup() { Serial.begin(9600); } void loop () { int val =analogRead (A0); Serial.println(val); vertraging (500); }  

Nadat u de Arduino hebt geprogrammeerd, opent u de seriële monitor vanuit de Tools menu. Zorg ervoor dat de baudrate is ingesteld op 9600. U zou ongeveer elke halve seconde een nieuwe integer-waarde moeten zien die het lichtniveau vertegenwoordigt. Ga je gang, neem even de tijd en speel ermee. Bedek de sensor, doe de lichten aan en uit en probeer er misschien zelfs je smartphone-zaklamp op te schijnen. Kijk hoe de waarden veranderen. Je zult merken dat ze variëren van bijna 0 in volledige duisternis tot bijna 1024 wanneer ze worden gebombardeerd met licht.

Wat is de Fridgeye-app?

De Fridgeye-app is de betrouwbare metgezel van je Fridgeye-apparaat. Voorbij zijn de dagen dat apparaten stagneerden. Iedereen weet dat in de grote wereld van IoT uw apparaat geen schijn van kans heeft, tenzij er een app voor is. Het is pindakaas en gelei, melk en ontbijtgranen, erwten en wortelen.

De app is vrij eenvoudig. Als we naar de Kickstarter-pagina kijken, is het letterlijk alleen het percentage licht dat de Fridgeye detecteert en dat slechts 0 of 100 procent lijkt te zijn.

Ik weet zeker dat we het een beetje beter kunnen doen en een paar van die 99 waarden tussendoor gebruiken, zodat ze niet slecht voelen. Laten we rechtstreeks van de concepttekeningen afgaan en het in de echte wereld brengen.

Aan de slag met het Nextion-scherm

Voor dit project gebruik ik het Nextion Enhanced 3,5-inch aanraakscherm. Het is een volledig resistief aanraakscherm dat bedoeld is om het zware werk van grafische besturing aan te kunnen, zodat zelfs zeer low-end apparaten zoals de Arduino ermee kunnen praten via een paar seriële lijnen. Hoewel het display zelf erg mooi is, kan de documentatie erg moeilijk te navigeren zijn, vooral voor beginners, dus laten we er stap voor stap doorheen lopen.

Programmeermodel weergeven

Als je ooit een Arduino hebt geprogrammeerd om een ​​display te gebruiken, heb je waarschijnlijk zoiets als een eenvoudige grafische bibliotheek gebruikt die de lage commando's van tekenen op het schermoppervlak wegnam. Hoewel erg leuk, vereisen die bibliotheken nog steeds dat je veel van de pixel duwt om dingen op het scherm te tekenen. De Nextion-schermen gebruiken een andere benadering die heel vertrouwd zal aanvoelen als je gewend bent aan de MVVM- of MVC-patronen. In wezen wordt het uiterlijk van de app volledig van tevoren geconfigureerd en op het scherm zelf opgeslagen. Tijdens runtime verwijst de Arduino naar delen van de gebruikersinterface met behulp van vooraf toegewezen ID's. De Arduino haalt op dezelfde manier ook informatie terug van het scherm, zoals aanraakgebeurtenissen. Dat betekent dat in plaats van dingen tijdens runtime te tekenen, de Arduino alleen fungeert als de dirigent van de weergaven en bedieningselementen. Als dat geen zin heeft, blijf dan nog wat langer bij me terwijl we er doorheen gaan.

Bereid de weergave

Omdat onze Fridgeye-app zo eenvoudig is, is er maar één pagina voor nodig. Het Nextion-display kan echter zeer complexe applicaties met meerdere pagina's en overgangen aan. Of u nu een eenvoudige app zoals de onze ontwerpt of een zeer complexe, u zult de Nextion GUI-editor gebruiken. Het is een WYSIWYG-editor voor de Nextion-familie van beeldschermen en zal ons helpen onze lay-out precies goed te krijgen. Nogmaals, de documentatie en aan de slag gaan kan voor beginners erg uitdagend zijn, maar als je het eenmaal onder de knie hebt, zul je snel complexe lay-outs ontwerpen.

Voordat we de editor openen, moeten we een achtergronditem voorbereiden. Verwijzend naar onze mock-afbeelding hierboven, kunnen we zien dat het enige dat tijdens runtime op ons scherm zal veranderen, het percentage gedetecteerd licht is. Het logo, de achtergrondkleur en de groene balk onderaan zijn statisch. Laten we een afbeelding maken met die items die we als achtergrond kunnen gebruiken. Dit kostte me 5 minuten in GIMP en ziet er zo uit.

Het belangrijkste om te onthouden is dat u de afbeelding precies de maat moet maken die u nodig heeft voor uw scherm. In mijn geval gebruik ik het 3,5-inch scherm, wat zich vertaalt naar 480 x 320 pixels. Dat is precies hoe groot ik mijn afbeelding heb gemaakt in GIMP.

De Nextion-editor gebruiken

OPMERKING: De Nextion Editor vereist het .NET Framework en wordt momenteel alleen ondersteund op Windows. Ik kon het zonder problemen uitvoeren in een Windows 10 Virtual Machine via Parallels op mijn Macbook. Ik heb het niet getest in Wine op Linux.

De volgende stappen helpen u bij het maken van onze eenvoudige app-lay-out in de Nextion Editor. Voer de volgende stappen uit met de Nextion Editor geopend.

1. Bestand->Nieuw . Geef uw project een naam en locatie op uw machine.

2. Er verschijnt een dialoogvenster waarin u wordt gevraagd uw apparaat te selecteren. In mijn geval selecteerde ik Enhanced en het 3,5" modelnummer. KLIK NIET OK . Ga verder naar stap 3.

3. Klik op de DISPLAY tabblad in de linkerbovenhoek van het dialoogvenster. Selecteer de 90 Horizontale weergaverichting.

4. Nu kun je op OK klikken

5. Klik op Afbeelding uit de Toolbox aan de linkerkant. Dit zal een element p0 . toevoegen naar uw overzicht.

6. In de Afbeelding/Lettertype deelvenster linksonder zorg ervoor dat je de Afbeelding . hebt tabblad geselecteerd.

7. Klik op de + symbool.

8. Navigeer naar de afbeelding die we in GIMP hebben gemaakt en die de achtergrond voor onze app biedt en klik op Openen .

9. Dubbelklik in het attributenpaneel aan de rechterkant op de pic attribuut waarde gebied. Er wordt een dialoogvenster voor het selecteren van afbeeldingen geopend met de achtergrond van onze app.

10. Selecteer de app-achtergrond en klik op OK .

11. Klik op Tekst uit de Toolbox. Dit voegt een tekstgebied toe met de naam t0 in de linkerbovenhoek van ons display. Let op de waarde van de id attribuut, aangezien u het later nodig zult hebben bij het programmeren van de Arduino.

12. Sleep het tekstgebied naar de gewenste locatie onder de woorden "Lichtstatus" en pas het formaat aan zodat het een groot gebied vult.

13. Om de witte achtergrond te corrigeren, moeten we de achtergrond van het tekstgebied instellen als een bijgesneden versie van onze hoofdachtergrond. Met t0 geselecteerd verander de sta attribuut in het attributenpaneel van effen kleur naar afbeelding bijsnijden .

14. Dubbelklik op de picc attribuutwaarde voor het tekstgebied t0 . Dit opent het dialoogvenster voor het selecteren van afbeeldingen. Selecteer nogmaals de hoofdachtergrondafbeelding en klik op OK . Dit heeft tot gevolg dat de achtergrond van het tekstgebied transparant wordt.

15. Wijzig de pco kenmerk van t0 om de gewenste lettertypekleur te zijn. Ik ging met een aangepaste kleur van Rood:125, Groen:231, Blauw:191.

16. Van de Extra menu selecteer Lettertypegenerator.

17. Selecteer in het dialoogvenster Font Creator een hoogte van 96 en selecteer het lettertype dat u wilt gebruiken. De mijne is Montserrat.

18. Geef het lettertype een naam en klik op Lettertype genereren . Zorg ervoor dat u het op een gemakkelijk te onthouden locatie opslaat. We hebben het zo weer nodig.

19. Sluit het dialoogvenster Font Creator. U wordt gevraagd of u het gegenereerde lettertype wilt toevoegen. Klik op Ja . Dat lettertype wordt nu aangeduid als lettertype-index 0.

20. Voeg wat dummy-tekst toe aan t0 om te zien hoe het eruit zal zien door het txt-kenmerk van t0 . te wijzigen tot 100%. U moet uit het attribuutwaardegebied klikken om het editorgebied bij te werken.

21. Verplaats t0 naar je zin.

22. Klik op Compileren in de bovenste werkbalk.

Als alles goed is gegaan, heb je nu een gecompileerd TFT-bestand klaar voor gebruik in %AppData%\Nextion Editor\bianyi .

Werk het scherm bij

Er zijn een aantal manieren om ons mooie nieuwe ontwerp op het display zelf te krijgen. Als je een USB-naar-TTL-converter hebt, kun je vanuit de Nextion IDE rechtstreeks verbinding maken met je scherm en het gecompileerde TFT-bestand direct uploaden. Anders moet u het gecompileerde TFT-bestand naar een micro SD-kaart kopiëren die rechtstreeks in een sleuf aan de achterkant van het scherm kan worden gestoken. De SD-kaart MOET FAT32-geformatteerd zijn en moet een enkel TFT-bestand bevatten, anders krijg je fouten. De Nextion Editor plaatst succesvol gecompileerde bestanden in de volgende map op Windows.

C:\Users\[uw gebruikersnaam]\AppData\Roaming\Nextion IDE\bianyi\[projectnaam].tft  

Opmerking, mogelijk moet u het bekijken van verborgen bestanden inschakelen omdat de AppData-map is gemarkeerd als verborgen.

Voer de volgende stappen uit met het TFT-bestand op de SD-kaart.

• Zorg ervoor dat het scherm is uitgeschakeld

• Plaats de SD-kaart in het scherm

• Schakel het scherm in. Het scherm geeft aan dat het wordt bijgewerkt.

• Zodra de update is voltooid, schakelt u het scherm uit

• Verwijder de SD-kaart. Vergeet deze stap niet, want het scherm zal uw weergave niet weergeven als de SD-kaart er nog in zit.

• Schakel het scherm weer in. Je zou nu onze prachtige Fridgeye-app moeten zien. Het enige wat ontbreekt is de waarde van de lichtsensor.

Leer de Arduino Nextion spreken

Nu het display onze app-weergave heeft, moeten we wat code op de Arduino schrijven zodat deze ermee kan communiceren en het percentage van de lichtstatus kan instellen.

Installeer de Nextion-bibliotheek

1. Download de nieuwste versie van de Nextion Arduino-bibliotheek.

2. Kopieer de hele ITEADLIB_Arduino_Nextion map naar uw Arduino-bibliothekenmap. Op Windows bevindt het zich op:

C:\Users\[uw_gebruikersnaam]\Documents\Arduino\libraries 

Op Mac bevindt het zich op:

~/Documents/Arduino/libraries 

3. Als u een Arduino Mega gebruikt, gaat u verder met stap 7.

4. Als u een Arduino Uno gebruikt, opent u de NexConfig.h bestand in de ITEADLIB_Arduino_Nextion map die u zojuist naar de map Arduino-bibliotheken hebt gekopieerd.

5. Geef commentaar op de volgende regels:

#define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. Wijzig de #define voor nexSerial Serieel zijn in plaats van Serieel2. Hierdoor kunnen we het display direct aansluiten op de RX- en TX-lijnen op de UNO.

#define nexSerial Serial  

7. Start de Arduino IDE opnieuw als deze al open was. Hierdoor is de bibliotheek beschikbaar via de menu's.

8. Uit het Bestand menu selecteer Nieuw om een ​​nieuwe schets te maken.

9. Vervang de standaard schetscode door het volgende:

#include "Nextion.h" long lastUpdate; int-SENSOR =A0; NexText t0 =NexText(0, 2, "t0"); void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); String displayText =String(val) + "%"; t0.setText(displayText.c_str()); } void setup (void) { lastUpdate =millis (); pinMode (SENSOR, INGANG); nexInit(); } void loop (void) { nexLoop (NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =millis(); } }  

Code-overzicht

Als je Arduino foo je in staat stelt om die schets te begrijpen, kun je deze sectie helemaal overslaan. Je bent geweldig. Als Arduino-code nieuw voor je is, laat dit je dan niet afschrikken. Laten we deze schets stuk voor stuk bekijken.

#include "Nextion.h"  

Dit geeft aan dat we van plan zijn om de Nextion-bibliotheek te gebruiken. We hoeven niets anders te doen, omdat de Arduino IDE weet waar het te vinden is, omdat we het in de bibliothekenmap hebben geplaatst.

long lastUpdate; 

Dit is gewoon een variabele met de naam lastUpdate waarmee we kunnen bepalen hoe vaak we het scherm later in de schets bijwerken.

int SENSOR =A0;  

Hier geven we de A0-pin op onze Arduino een beter leesbare naam die we later kunnen gebruiken om ernaar te verwijzen. Dit maakt niet echt uit in deze schets, omdat het de enige I / O-pin is waarmee we te maken hebben, maar het is een goede gewoonte om erin te zijn, omdat het van pas zal komen als je veel dingen op je Arduino hebt aangesloten.

NexText t0 =NexText(0, 2, "t0");  

Hier maken we een object in onze schets dat verwijst naar het tekstelement dat we in de GUI hebben gemaakt. Onthoud dat we het "t0 . hebben genoemd ". Het eerste argument is het paginanummer dat in ons geval 0 is en het tweede argument is het component-ID waarvan we ons eerder herinneren dat het 2 is. Als je bent vergeten het op te schrijven, ga dan terug naar de Nextion Editor, klik op de t0 element en kijk in het attributenpaneel om de ID te zien.

void checkSensor() { int val =map(analogRead(SENSOR), 0, 1024, 0, 100); String displayText =String(val) + "%"; t0.setText(displayText.c_str()); }  

De checkSensor() is het vlees van onze app. Op de eerste regel voeren we eigenlijk twee bewerkingen uit. Eerst noemen we analogRead(SENSOR) wat ons een geheel getal geeft dat de spanning vertegenwoordigt die aanwezig is op pin A0 (onthoud dat we het SENSOR noemden). Op een Arduino UNO retourneert de analogRead-aanroep een waarde van 0 tot 1024, maar we willen dat in het bereik van 0 tot 100 procent brengen. Geen probleem. De Arduino IDE heeft ons gedekt met een ingebouwde map() functie waarmee we een waarde kunnen specificeren gevolgd door een [van bereik] en [naar bereik]. We veranderen dan die int-waarde in een String-type en plakken op een %-teken. De laatste stap is om setText() . aan te roepen op onze NexText t0 object dat we eerder hebben gemaakt.

void setup(void) { lastUpdate =millis(); pinMode (SENSOR, INGANG); nexInit(); }  

Dit is de standaard Arduino-setupfunctie die vóór elke andere schetscode wordt uitgevoerd. We initialiseren lastUpdate om dit nu te doen door de millis() . aan te roepen functie, stelt u onze A0-pin in als invoer en initialiseert u de Nextion-bibliotheek.

void loop(void) { nexLoop(NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =millis(); } }  

In Arduino programmeert u de loop() functie wordt continu uitgevoerd totdat de Arduino wordt uitgeschakeld en weer wordt ingeschakeld of op een andere manier wordt gereset. We moeten de Nextion-bibliotheek voortdurend onderhouden door nexLoop() . te bellen . De NULL-parameter betekent alleen dat we in ons voorbeeld niet luisteren naar aanraakgebeurtenissen van het scherm. We hebben dan een heel eenvoudige controle om te zien of het meer dan 100 milliseconden geleden is sinds onze laatste sensormeting. Als dat zo is, noemen we onze checkSensor() methode en stel de lastUpdate variabele naar rechts nu met een andere aanroep naar millis() .

Dat is het. Minder dan 30 regels code is alles wat nodig is om te communiceren met ons Nextion-display vanaf een Arduino.

Sluit het beeldscherm aan

Voordat we het display daadwerkelijk met onze Arduino verbinden, gaan we door en pushen we onze schetscode ernaar vanuit de IDE door op het kleine pijltje naar rechts in de bovenste balk te klikken of door de sneltoets Ctrl+U te gebruiken.

Het scherm kan tijdens het uploaden niet worden aangesloten omdat op de Arduino UNO dezelfde seriële lijnen die het scherm gebruikt, door de IDE nodig zijn om nieuwe schetsen te pushen. Als u in plaats daarvan een Arduino Mega gebruikt, hoeft u zich daar geen zorgen over te maken.

Nu de code naar de Arduino is gepusht, gaan we het display aansluiten. Vergeet niet eerst de stroom van de Arduino te verwijderen. Zie het Fritzing-diagram voor verbindingsinformatie.

Wanneer u de Arduino een back-up geeft, zou uw Fridgeye-app u graag de huidige lichtsensormeting moeten laten zien.

Afsluiten

Wauw! We maakten het. Dus misschien vraag je je op dit moment met een vleugje woede in je toon af:"WAT GOED IS DIT? Ik moet het hele ding in mijn koelkast zetten, zodat ik het scherm niet eens kan zien." Je bent een zeer slimme leerling, maar ik heb nooit gezegd dat dit nuttig was, maar gewoon heel leuk om te bouwen en te leren.

Als je je er beter door voelt, daag ik je uit om een ​​stap verder te gaan in dit project en uit te zoeken hoe je de sensor in je koelkast kunt plaatsen en het display ergens anders kunt hebben. Er zijn zoveel manieren om dat doel te bereiken. WiFi, Bluetooth, Zigbee en generieke radiozenders zijn slechts enkele die in je opkomen. Veel opties en veel dingen om te leren. Als je het toch probeert, neem dan contact met me op via Twitter @KevinSidwar of stuur me een e-mail (Kevin op sidwar dot com). Ik hoor graag over je avonturen in IoT. Tot de volgende keer, veel plezier met hacken.

Als je mijn post leuk vond en meer wilt weten over hoe je aan de slag kunt gaan met IoT, dan ben je misschien geïnteresseerd in een cursus die ik momenteel aan het maken ben rond het Fridgeye-concept . Zo niet, dan dank ik u echt voor het lezen tot het einde. Hoop dat je een geweldige dag hebt. Je verdient het.

Code

Arduino Sketch voor de app Fridgeye

Dit is de code die op de Arduino draait, zodat deze met het Nextion-display kan praten en de huidige lichtsensorlezer kan tonen.

Schema's

Dit is een bedradingsschema van hoe je de Arduino, fotoresistor, weerstand en scherm met elkaar verbindt om dit project te maken.