Erstellen Sie die Fridgeye-App mit einem Nextion-Display

Apps und Onlinedienste

	Nextion GUI Editor
	Arduino-IDE
	GIMP - GNU-Bildbearbeitungsprogramm

Über dieses Projekt

Bereits im Juli dieses Jahres haben einige Designstudenten aus Deutschland einen satirischen Kickstarter gestartet, um einen Prototyp des Fridgeye zu erstellen; ein schöner Lichtsensor für Ihren Kühlschrank. Wenn man die Tatsache kombiniert, dass wir im Allgemeinen erwarten, dass lächerliche Hardware-Projekte auf Kickstarter erscheinen, und wie viel Mühe das Team darauf verwendet hat, es real erscheinen zu lassen, ist es kein Wunder, dass die Leute nicht sicher waren, was sie denken sollten. Es ist kein Geheimnis, dass ich von Anfang an ein Fan des Projekts war, aber nicht, weil ich unbedingt wissen möchte, was mein Kühlschranklicht macht. The Fridgeye ist ein perfekt abgestimmtes Projekt mit Wachstumspotenzial, wenn Sie in das Internet der Dinge einsteigen möchten.

Baue das Fridgeye-Gerät

Der Großteil dieses Beitrags wird sich darauf konzentrieren, die Fridgeye-App mit dem Nextion-Touch-Display zum Laufen zu bringen, das mit einem Arduino verbunden ist, aber bevor wir so weit kommen, brauchen wir ein echtes Gerät, das Licht erkennen kann. Kein Problem. Nehmen wir uns 5 Minuten und bauen einen. Ich verspreche, es dauert keine Sekunde länger. Alles, was Sie brauchen, ist ein Arduino, ein Steckbrett, ein Fotowiderstand und ein 3.3K-Widerstand. Wir werden es so verkabeln. Machen Sie sich noch keine Sorgen um die Bildschirmverbindungen. Konzentrieren Sie sich einfach auf Arduino, Widerstand und Fotowiderstand.

Ich hatte tatsächlich ein ProtoShield herumliegen; Also schlug ich ein Mini-Steckbrett darauf, damit ich alles in einem schönen, gestapelten Paket aufbewahren konnte, aber immer noch die Freiheit eines Steckbretts habe. So sieht meiner aus.

Okay, ich habe gelogen, das hat nur etwa 4 Minuten gedauert. Aber Sie können die verbleibende Minute nutzen, um diese supereinfache Skizze auf Ihrem Arduino abzuwerfen und die serielle Ausgabe des Lichtsensors von der Arduino-IDE aus zu beobachten.

void setup () { Serial.begin (9600); aufrechtzuerhalten. Void Schleife () { Int val =analogRead (A0); Serial.println (val); Verzögerung (500); }  

Nachdem Sie das Arduino programmiert haben, öffnen Sie den Serial Monitor aus den Tools Speisekarte. Stellen Sie sicher, dass die Baudrate auf 9600 eingestellt ist. Sie sollten ungefähr jede halbe Sekunde einen neuen ganzzahligen Wert sehen, der die Lichtstärke darstellt. Machen Sie weiter, nehmen Sie sich eine Minute Zeit und spielen Sie damit herum. Decken Sie den Sensor ab, schalten Sie das Licht ein und aus und versuchen Sie vielleicht sogar, Ihre Smartphone-Taschenlampe darauf zu leuchten. Beobachten Sie, wie sich die Werte ändern. Sie werden feststellen, dass sie von fast 0 in völliger Dunkelheit bis fast 1024 reichen, wenn sie mit Licht beschossen werden.

Was ist die Fridgeye-App?

Die Fridgeye-App ist der treue Begleiter Ihres Fridgeye-Geräts. Vorbei sind die Zeiten, in denen Geräte stillgelegt wurden. Jeder weiß, dass Ihr Gerät in der heutigen großen Welt des IoT keine Chance hat, es sei denn, es hat eine Art App dazu. Es ist Erdnussbutter und Gelee, Milch und Getreide, Erbsen und Karotten.

Die App ist ganz einfach. Wenn wir uns die Kickstarter-Seite ansehen, ist es buchstäblich nur der Prozentsatz des Lichts, den das Fridgeye erkennt und scheint immer nur 0 oder 100 Prozent zu sein.

Ich bin sicher, wir können es etwas besser machen und einige dieser 99 Werte dazwischen verwenden, damit sie sich nicht schlecht anfühlen. Lassen Sie uns direkt von den Konzeptzeichnungen ausgehen und sie in die reale Welt bringen.

Erste Schritte mit dem Nextion-Display

Für dieses Projekt verwende ich das Nextion Enhanced 3,5-Zoll-Touch-Display. Es ist ein vollresistives Touchscreen-Display, das das schwere Heben der grafischen Steuerung bewältigen soll, sodass selbst sehr Low-End-Geräte wie der Arduino über ein Paar kommunizieren können Obwohl die Anzeige selbst sehr schön ist, kann die Navigation in der Dokumentation sehr schwierig sein, insbesondere für Anfänger, also lassen Sie uns einen Schritt nach dem anderen durchgehen.

Display-Programmierungsmodell

Wenn Sie jemals einen Arduino für die Verwendung eines Displays programmiert haben, haben Sie wahrscheinlich so etwas wie eine einfache Grafikbibliothek verwendet, die die Befehle auf niedriger Ebene zum Zeichnen auf der Bildschirmoberfläche abstrahiert. Diese Bibliotheken sind zwar sehr schön, erfordern jedoch immer noch einen Großteil des Pixel-Pushing, um Dinge auf dem Bildschirm zu zeichnen. Die Nextion-Displays verwenden einen anderen Ansatz, der Ihnen sehr vertraut vorkommen wird, wenn Sie mit den MVVM- oder MVC-Mustern vertraut sind. Im Wesentlichen wird das Erscheinungsbild der App komplett im Voraus konfiguriert und auf dem Bildschirm selbst gespeichert. Zur Laufzeit referenziert das Arduino Teile der Benutzeroberfläche mit vorab zugewiesenen IDs. Der Arduino erhält auch Informationen vom Bildschirm wie Touch-Ereignisse auf die gleiche Weise zurück. Das bedeutet, dass das Arduino, anstatt Dinge zur Laufzeit zu zeichnen, nur als Leiter der Ansichten und Steuerelemente fungiert. Wenn das keinen Sinn ergibt, halten Sie einfach noch ein wenig mit mir durch, während wir es durchgehen.

Vorbereiten der Ansicht

Da unsere Fridgeye-App so einfach ist, wird nur eine einzige Seite benötigt. Das Nextion-Display ist jedoch in der Lage, sehr komplexe Anwendungen mit mehreren Seiten und Übergängen zu verarbeiten. Egal, ob Sie eine einfache App wie unsere oder eine sehr komplexe App entwerfen, Sie verwenden den Nextion GUI Editor. Es ist ein WYSIWYG-Editor für die Nextion-Display-Familie und wird uns helfen, unser Layout genau richtig zu machen. Auch hier können die Dokumentation und die ersten Schritte für Anfänger sehr herausfordernd sein, aber wenn Sie den Dreh raus haben, werden Sie schnell komplexe Layouts entwerfen.

Bevor wir den Editor öffnen, müssen wir ein Hintergrund-Asset vorbereiten. Wenn wir unser obiges Mock-Bild referenzieren, können wir sehen, dass das einzige, was sich zur Laufzeit auf unserem Display ändert, der Prozentsatz des erkannten Lichts ist. Das Logo, die Hintergrundfarbe und der grüne Balken unten sind statisch. Lassen Sie uns ein Bild mit diesen Elementen erstellen, die wir als Hintergrund verwenden können. Das hat mich in GIMP ganze 5 Minuten gekostet und sieht so aus.

Wichtig ist hier, dass das Bild genau die Größe hat, die Sie für Ihren Bildschirm benötigen. In meinem Fall verwende ich den 3,5-Zoll-Bildschirm, der 480 x 320 Pixel entspricht. Genau so groß habe ich mein Bild in GIMP gemacht.

Verwenden des Nextion-Editors

HINWEIS: Der Nextion Editor erfordert das .NET Framework und wird derzeit nur unter Windows unterstützt. Ich konnte es problemlos in einer Windows 10 Virtual Machine über Parallels auf meinem Macbook ausführen. Ich habe es nicht in Wine unter Linux getestet.

Die folgenden Schritte führen Sie durch die Erstellung unseres einfachen App-Layouts im Nextion Editor. Führen Sie bei geöffnetem Nextion-Editor die folgenden Schritte aus.

1. Datei->Neu . Geben Sie Ihrem Projekt einen Namen und einen Speicherort auf Ihrem Computer.

2. Ein Dialogfeld wird angezeigt, in dem Sie aufgefordert werden, Ihr Gerät auszuwählen. In meinem Fall habe ich Enhanced und die 3,5-Zoll-Modellnummer ausgewählt. NICHT KLICKEN OK . Fahren Sie mit Schritt 3 fort.

3. Klicken Sie auf die ANZEIGE Registerkarte in der oberen linken Ecke des Dialogs. Wählen Sie die Anzeigerichtung 90 Horizontal.

4. Jetzt können Sie auf OK klicken

5. Klicken Sie auf Bild aus der Toolbox auf der linken Seite. Dadurch wird ein Element p0 . hinzugefügt zu deiner Gliederung.

6. Im Bild/Schriftart Bereich unten links, vergewissern Sie sich, dass Sie das Bild haben Registerkarte ausgewählt.

7. Klicken Sie auf das + Symbol.

8. Navigieren Sie zu dem Bild, das wir in GIMP erstellt haben und das den Hintergrund für unsere App bereitstellt, und klicken Sie auf Öffnen .

9. Doppelklicken Sie im Attributbereich rechts auf das Bild Attributwertbereich. Es öffnet sich ein Bildauswahldialog mit unserem App-Hintergrund.

10. Wählen Sie den App-Hintergrund aus und klicken Sie auf OK .

11. Klicken Sie auf Text aus der Toolbox. Dadurch wird ein Textbereich namens t0 . hinzugefügt in der oberen linken Ecke unseres Displays. Beachten Sie den Wert der id Attribut, da Sie es später beim Programmieren des Arduino benötigen.

12. Ziehen Sie den Textbereich an die gewünschte Stelle unter den Worten "Lichtstatus" und ändern Sie die Größe, sodass er einen großen Bereich ausfüllt.

13. Um den weißen Hintergrund zu korrigieren, müssen wir den Hintergrund des Textbereichs so einstellen, dass er eine abgeschnittene Version unseres Haupthintergrunds ist. Mit t0 ausgewählt ändern die sta Attribut innerhalb des Attributbereichs von einfarbig bis Bild zuschneiden .

14. Doppelklicken Sie auf das picc Attributwert für den Textbereich t0 . Dies öffnet den Bildauswahldialog. Wählen Sie das Haupthintergrundbild erneut aus und klicken Sie auf OK . Dadurch wird der Hintergrund des Textbereichs transparent.

15. Ändern Sie den pco Attribut von t0 um die gewünschte Schriftfarbe zu haben. Ich entschied mich für eine benutzerdefinierte Farbe von Rot:125, Grün:231, Blau:191.

16. Aus den Tools Wählen Sie im Menü Font Generator.

17. Wählen Sie im Dialog Font Creator eine Höhe von 96 und wählen Sie die gewünschte Schriftart aus. Meins ist Montserrat.

18. Geben Sie der Schriftart einen Namen und klicken Sie auf Schriftart generieren . Stellen Sie sicher, dass Sie es an einem Ort speichern, den Sie sich leicht merken können. Wir werden es in einer Sekunde wieder brauchen.

19. Schließen Sie das Dialogfeld „Schrifterstellung“. Sie werden gefragt, ob Sie die generierte Schriftart hinzufügen möchten. Klicken Sie auf Ja . Diese Schriftart wird jetzt als Schriftartindex 0 referenziert.

20. Füge etwas Dummy-Text zu t0 hinzu um zu sehen, wie es aussehen wird, indem Sie das txt-Attribut von t0 ändern auf 100 %. Sie müssen aus dem Attributwertbereich klicken, damit der Editorbereich aktualisiert wird.

21. t0 neu positionieren nach Ihren Wünschen.

22. Klicken Sie auf Kompilieren in der oberen Symbolleiste.

Wenn alles gut gegangen ist, haben Sie jetzt eine kompilierte TFT-Datei, die Sie verwenden können, die sich in %AppData%\Nextion Editor\bianyi befindet .

Aktualisieren Sie das Display

Es gibt mehrere Möglichkeiten, unser schickes neues Design auf das Display selbst zu bringen. Wenn Sie über einen USB-zu-TTL-Konverter verfügen, können Sie aus der Nextion-IDE direkt eine Verbindung zu Ihrem Bildschirm herstellen und die kompilierte TFT-Datei direkt hochladen. Andernfalls müssen Sie die kompilierte TFT-Datei auf eine Micro-SD-Karte kopieren, die direkt in einen Steckplatz auf der Rückseite des Bildschirms eingesteckt werden kann. Die SD-Karte MUSS FAT32-formatiert sein und eine einzelne TFT-Datei darauf haben, sonst treten Fehler auf. Der Nextion Editor legt erfolgreich kompilierte Dateien im folgenden Verzeichnis unter Windows ab.

C:\Benutzer\[Ihr Benutzername]\AppData\Roaming\Nextion IDE\bianyi\[Projektname].tft  

Hinweis, Sie müssen möglicherweise die Anzeige versteckter Dateien aktivieren, da der AppData-Ordner als versteckt markiert ist.

Führen Sie mit der TFT-Datei auf der SD-Karte die folgenden Schritte aus.

• Stellen Sie sicher, dass das Display ausgeschaltet ist

• Legen Sie die SD-Karte in das Display ein

• Schalten Sie das Display ein. Auf dem Bildschirm wird angezeigt, dass es aktualisiert wird.

• Schalte das Display nach Abschluss des Updates aus

• Entfernen Sie die SD-Karte. Vergessen Sie diesen Schritt nicht, da der Bildschirm Ihre Ansicht nicht ausführt, wenn die SD-Karte noch eingelegt ist.

• Schalten Sie das Display wieder ein. Sie sollten jetzt unsere schöne Fridgeye-App sehen. Es fehlt nur noch der Wert vom Lichtsensor.

Bringen Sie dem Arduino bei, wie man Nextion spricht

Jetzt, da das Display unsere App-Ansicht hat, müssen wir etwas Code auf das Arduino schreiben, damit es damit interagieren und den Lichtstatusprozentsatz einstellen kann.

Installieren Sie die Nextion-Bibliothek

1. Laden Sie die neueste Version der Nextion Arduino-Bibliothek herunter.

2. Kopieren Sie die gesamte ITEADLIB_Arduino_Nextion Ordner in Ihren Arduino-Bibliotheksordner. Unter Windows befindet es sich unter:

C:\Benutzer\[Ihr_Benutzername]\Dokumente\Arduino\Bibliotheken 

Auf dem Mac befindet es sich unter:

~/Dokumente/Arduino/Bibliotheken 

3. Wenn Sie ein Arduino Mega verwenden, fahren Sie mit Schritt 7 fort.

4. Wenn Sie ein Arduino Uno verwenden, öffnen Sie die NexConfig.h Datei befindet sich im ITEADLIB_Arduino_Nextion Ordner, den Sie gerade in den Arduino-Bibliotheksordner kopiert haben.

5. Kommentieren Sie die folgenden Zeilen aus:

#define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. Ändere den #define für nexSerial Seriell statt Serial2 sein. Dadurch können wir das Display direkt an die RX- und TX-Leitungen der UNO anschließen.

#define nexSerial Serial  

7. Starten Sie die Arduino IDE neu, wenn sie bereits geöffnet war. Dadurch ist die Bibliothek über die Menüs verfügbar.

8. Aus der Datei Menüauswahl Neu um eine neue Skizze zu erstellen.

9. Ersetzen Sie den Standard-Skizzencode durch den folgenden:

#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()); aufrechtzuerhalten. Void setup (void) { lastUpdate =millis (); pinMode (SENSOR, EINGANG); nexInit(); aufrechtzuerhalten. Void Schleife (void) { nexLoop (NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =millis(); } }  

Code-Anleitung

Wenn Ihr Arduino foo es Ihnen ermöglicht, diese Skizze zu verstehen, können Sie diesen Abschnitt vollständig überspringen. Du bist unglaublich. Wenn Sie neu im Arduino-Code sind, lassen Sie sich davon nicht abschrecken. Schauen wir uns diese Skizze Stück für Stück an.

#include "Nextion.h"  

Dies zeigt unsere Absicht, die Nextion-Bibliothek zu verwenden. Wir müssen nichts weiter tun, da die Arduino-IDE weiß, wo sie zu finden ist, da wir sie im Bibliotheksordner abgelegt haben.

long lastUpdate; 

Dies ist einfach eine Variable namens lastUpdate Dadurch können wir steuern, wie oft wir den Bildschirm später in der Skizze aktualisieren.

int SENSOR =A0;  

Hier geben wir dem A0-Pin auf unserem Arduino nur einen besser lesbaren Namen, mit dem wir später darauf verweisen können. Dies spielt in dieser Skizze keine Rolle, da dies der einzige I / O-Pin ist, mit dem wir es zu tun haben, aber es ist eine gute Angewohnheit, dabei zu sein, da es sich als nützlich erweisen wird, wenn Sie viele Dinge mit Ihrem Arduino verbunden haben.

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

Hier erstellen wir in unserer Skizze ein Objekt, das sich auf das Textelement bezieht, das wir in der GUI erstellt haben. Denken Sie daran, dass wir es "t0 . genannt haben ". Das erste Argument ist die Seitennummer, die in unserem Fall 0 ist, und das zweite Argument ist die Komponenten-ID, an die wir uns von früher erinnern, ist 2. Wenn Sie vergessen haben, sie aufzuschreiben, gehen Sie einfach zurück in den Nextion-Editor, klicken Sie auf das t0 -Element und sehen Sie im Attributbereich nach, um die ID zu sehen.

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

Der checkSensor() ist das Fleisch unserer App. In der ersten Zeile führen wir tatsächlich zwei Operationen durch. Zuerst rufen wir analogRead(SENSOR) . auf was uns einen ganzzahligen Wert gibt, der die an Pin A0 anliegende Spannung darstellt (denken Sie daran, dass wir es SENSOR genannt haben). Auf einem Arduino UNO gibt der analogRead-Aufruf einen Wert von 0 bis 1024 zurück, aber wir möchten diesen in den Bereich von 0 bis 100 Prozent abbilden. Kein Problem. Die Arduino IDE hat uns mit einer integrierten map() abgedeckt Funktion, die es uns ermöglicht, einen Wert anzugeben, gefolgt von einem [from range] und [to range]. Wir ändern dann diesen int-Wert in einen String-Typ und heften an ein %-Zeichen. Der letzte Schritt ist der Aufruf von setText() auf unserem NexText t0 Objekt, das wir zuvor erstellt haben.

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

Dies ist die Standard-Arduino-Setup-Funktion, die vor jedem anderen Sketch-Code ausgeführt wird. Wir initialisieren lastUpdate sofort durch Aufruf von millis() Funktion, richten Sie unseren A0-Pin als Eingang ein und initialisieren Sie die Nextion-Bibliothek.

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

Bei der Arduino-Programmierung die loop() Funktion wird kontinuierlich ausgeführt, bis das Arduino aus- und wieder eingeschaltet oder auf andere Weise zurückgesetzt wird. Wir müssen die Nextion-Bibliothek ständig warten, indem wir nexLoop() . aufrufen . Der Parameter NULL bedeutet nur, dass wir in unserem Beispiel nicht auf Berührungsereignisse vom Bildschirm lauschen. Wir haben dann eine sehr einfache Überprüfung, um zu sehen, ob seit unserer letzten Sensormessung mehr als 100 Millisekunden vergangen sind. Wenn ja, nennen wir unseren checkSensor() -Methode und setzen Sie das lastUpdate variabel bis jetzt mit einem weiteren Aufruf von millis() .

Das ist es. Weniger als 30 Zeilen Code reichen aus, um mit unserem Nextion-Display von einem Arduino aus zu interagieren.

Anschließen des Displays

Bevor wir das Display tatsächlich mit unserem Arduino verbinden, schieben wir unseren Sketch-Code von der IDE darauf, indem wir auf den kleinen rechten Pfeil in der oberen Leiste klicken oder die Tastenkombination Strg + U verwenden.

Der Bildschirm kann während des Uploads nicht angeschlossen werden, da auf dem Arduino UNO die gleichen seriellen Leitungen, die das Display verwendet, von der IDE benötigt werden, um neue Skizzen zu übertragen. Wenn Sie stattdessen ein Arduino Mega verwenden, müssen Sie sich darüber keine Sorgen machen.

Jetzt mit dem Code, der auf den Arduino geschoben wird, verbinden wir das Display. Vergessen Sie nicht, zuerst den Arduino von der Stromversorgung zu trennen. Siehe das Fritzing-Diagramm für Verbindungsinformationen.

Wenn Sie das Arduino wieder einschalten, sollte Ihre Fridgeye-App Ihnen den aktuellen Lichtsensormesswert anzeigen.

Zusammenfassung

Wütend! Wir haben es geschafft. Du fragst an dieser Stelle vielleicht mit einem Hauch von Wut in deinem Ton:"WAS IST DAS GUT? Ich muss das Ganze in meinen Kühlschrank stellen, damit ich nicht einmal den Bildschirm sehen kann." Sie sind ein sehr kluger Schüler, aber ich habe nie behauptet, dass all das nützlich ist, es macht einfach viel Spaß, es zu bauen und zu lernen.

Wenn Sie sich dadurch besser fühlen, fordere ich Sie jedoch auf, dieses Projekt einen Schritt weiter zu gehen und herauszufinden, wie Sie den Sensor in Ihren Kühlschrank stellen und das Display woanders platzieren können. Es gibt so viele Möglichkeiten, dieses Ziel zu erreichen. WiFi, Bluetooth, Zigbee und generische Funksender sind nur einige davon. Viele Möglichkeiten und viel zu lernen. Wenn Sie sich daran versuchen, kontaktieren Sie mich bitte auf Twitter @KevinSidwar oder senden Sie mir eine E-Mail (Kevin at sidwar dot com). Ich würde gerne von Ihren Abenteuern im IoT hören. Bis zum nächsten Mal, viel Spaß beim Hacken.

Wenn Ihnen mein Beitrag gefallen hat und Sie mehr über den Einstieg in das IoT erfahren möchten, dann könnten Sie an einer Kurs, den ich derzeit um das Fridgeye-Konzept herum erstelle . Wenn nicht, danke ich Ihnen wirklich, dass Sie wirklich bis zum Ende gelesen haben. Hoffe du hast einen tollen Tag. Du verdienst es.

Code

Arduino Sketch für die Fridgeye-App

Schaltpläne