Fridgeye-App mit Nextion-Display bauen: Schritt-für-Schritt-Anleitung

Komponenten und Zubehör

Arduino UNO	×	1
Fotowiderstand (LDR)	×	1
Widerstand 3,3 kΩ	×	1
Itead Nextion Enhanced 3,5" Touch-Display	×	1

Apps und Online-Dienste

• Nextion GUI Editor – WYSIWYG-Editor für Nextion-Displays
• Arduino IDE
• GIMP – GNU Image Manipulation Program (für Hintergrundgrafik)

Projektübersicht

Im Juli starteten einige deutsche Designstudenten eine satirische Kickstarter-Kampagne für den Fridgeye – einen Lichtsensor für den Kühlschrank. Das Projekt war so professionell aufbereitet, dass viele nicht wussten, ob es ernst gemeint war. Abseits des Humors eignet sich der Fridgeye hervorragend als Einstiegsprojekt in die IoT-Welt: überschaubarer Umfang, aber mit Potenzial für Erweiterungen.

Fridgeye-Gerät bauen

Bevor die App auf dem Nextion-Display läuft, brauchen wir einen funktionsfähigen Lichtsensor. Das geht in wenigen Minuten: Arduino, Breadboard, Fotowiderstand und 3,3-kΩ-Widerstand. Die Schaltung ist simpel – der Fotowiderstand bildet mit dem Festwiderstand einen Spannungsteiler an Pin A0.

Optional lässt sich alles auf einem ProtoShield mit Mini-Breadboard kompakt unterbringen.

Test-Sketch für den Lichtsensor

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

Nach dem Hochladen den Seriellen Monitor öffnen (Baudrate 9600). Alle 500 ms erscheint ein Wert zwischen 0 (Dunkelheit) und 1023 (helles Licht). Testen Sie: Hand über den Sensor, Licht an/aus, Smartphone-Taschenlampe.

Was ist die Fridgeye-App?

Die ursprüngliche Kickstarter-App zeigte nur 0 % oder 100 % Lichtstatus. Wir nutzen den gesamten Messbereich (0–100 %) für eine aussagekräftigere Anzeige. Das Design orientiert sich an den Konzeptbildern: Logo, Hintergrundfarbe und grüner Balken unten sind statisch, nur der Prozentwert ändert sich zur Laufzeit.

Einstieg in das Nextion-Display

Das Nextion Enhanced 3,5" ist ein resistiver Touchscreen, der Grafik-Rendering selbst übernimmt. Der Arduino steuert per serieller Schnittstelle (TX/RX) nur UI-Elemente über ihre IDs – ein Pattern ähnlich MVVM/MVC. Das entlastet den Mikrocontroller enorm.

Display-Programmiermodell

Statt Pixel zur Laufzeit zu zeichnen, wird das UI vorab im Nextion GUI Editor gestaltet und als .tft-Datei auf dem Display gespeichert. Der Arduino sendet zur Laufzeit nur Befehle wie „Setze Text von Element t0 auf 42 %“. Touch-Events kommen analog zurück.

Hintergrundgrafik vorbereiten

In GIMP eine 480 × 320 px große Grafik erstellen (Auflösung des 3,5"-Displays). Darauf: Logo, Hintergrundfarbe, grüner Balken unten. Der Bereich für den Prozentwert bleibt transparent.

Nextion Editor Schritt für Schritt

1. Datei → Neu, Projektname und Speicherort wählen.
2. Gerätedialog: Enhanced und 3,5" wählen – noch nicht OK klicken.
3. Reiter DISPLAY → Horizontale Ausrichtung 90° wählen.
4. Jetzt OK klicken.
5. Werkzeugkasten: Picture → Element p0 wird erstellt.
6. Unten links Reiter Picture → + → Hintergrundgrafik auswählen.
7. Rechts im Attributbereich: pic doppelklicken → Grafik zuweisen → OK.
8. Werkzeugkasten: Text → Element t0 (ID notieren, z. B. 2).
9. Textfeld unter „Light Status“ positionieren, groß ziehen.
10. Attribut sta von „solid color“ auf crop image ändern.
11. Attribut picc doppelklicken → wieder Hintergrundgrafik wählen → OK (Transparenz).
12. Schriftfarbe (pco) setzen, z. B. RGB(125, 231, 191).
13. Menü Tools → Font Generator → Höhe 96, Schriftart z. B. Montserrat → Namen vergeben → Generate Font → Speichern → Dialog schließen → Ja (Schrift wird Index 0).
14. Attribut txt von t0 auf „100%“ setzen (zum Testen).
15. Position feinjustieren.
16. Compile (Toolbar).

Erfolgreiche Kompilierung erzeugt die .tft-Datei unter %AppData%\Nextion Editor\bianyi\.

Display flashen

Zwei Wege:

• USB-TTL-Adapter: Direkt aus Nextion Editor hochladen.
• Micro-SD-Karte (FAT32, nur eine .tft-Datei): Datei kopieren → Display aus → SD-Karte einstecken → Display an → Update läuft → Display aus → SD-Karte entfernen → Display an. Fertig.

Arduino mit Nextion sprechen lassen

Nextion-Bibliothek installieren

1. Aktuelle ITEADLIB_Arduino_Nextion herunterladen.
2. Gesamten Ordner in Arduino-Libraries kopieren:
   • Windows: C:\Users\[Name]\Documents\Arduino\libraries
   • Mac: ~/Documents/Arduino/libraries
3. Bei Arduino Uno: NexConfig.h im Bibliotheksordner öffnen.
4. Zeilen auskommentieren:

   // #define DEBUG_SERIAL_ENABLE
   // #define dbSerial Serial
   

5. nexSerial auf Serial ändern (Uno hat nur ein Hardware-Serial):

   #define nexSerial Serial
   

6. Arduino IDE neu starten.

Arduino-Sketch

#include "Nextion.h"

long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0"); // Seite 0, Komponenten-ID 2

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, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL); // Keine Touch-Events nötig
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

Code-Erklärung

• #include "Nextion.h" – Bibliothek einbinden.
• lastUpdate – Zeitstempel für Update-Intervall.
• SENSOR = A0 – Lesbarer Name für Pin A0.
• NexText t0(0, 2, "t0") – Referenz auf Text-Element (Seite 0, ID 2).
• checkSensor() – Liest Rohwert (0–1023), mapped auf 0–100 %, sendet String an Display.
• setup() – Serial initialisieren, Pin als Input, Nextion initialisieren.
• loop() – nexLoop() bedient Bibliothek; alle 100 ms Sensor prüfen und Display aktualisieren.

Display anschließen

Sketch hochladen (Strg+U) – Display dabei abklemmen! (Uno teilt TX/RX mit USB). Dann verdrahten (siehe Fritzing-Diagramm): Display TX → Arduino RX (Pin 0), Display RX → Arduino TX (Pin 1), VCC/GND entsprechend. Nach Neustart zeigt die App den aktuellen Lichtwert.

Fazit & Ausblick

Das Gerät funktioniert – aber im Kühlschrank sieht man den Screen nicht. Die Herausforderung: Sensor in den Kühlschrank, Display nach draußen. Lösungen: WiFi (ESP8266/ESP32), Bluetooth, Zigbee, 433-MHz-Funk. Ein schönes Folgeprojekt für tieferen IoT-Einstieg.

Bei Fragen oder eigenen Umsetzungen: Twitter @KevinSidwar oder E-Mail (Kevin at sidwar dot com). Viel Spaß beim Basteln!