#arduinonesson1

Wenn du meinen Beitrag „Arduino Nesso N1 Tutorial: Touch-Zahlenfeld & PIN-Abfrage“ gelesen hast, weißt du, dass sich mit dem Nesso N1 erstaunlich schnell ein modernes Touch-Interface umsetzen lässt. Für das Projekt wollte ich ein kleines, aber praktisches Feature ergänzen: Über den kleinen Taster unterhalb des Displays sollte der eingegebene PIN-Code zurückgesetzt werden.

Klingt simpel – funktionierte aber überhaupt nicht.

Obwohl der Code korrekt war, wurde der Taster nicht erkannt. Also begann die Fehlersuche. Die offizielle Dokumentation half nur bedingt weiter: Das Beispiel zur Taster-Abfrage zeigt lediglich den klassischen Weg, wie man digitale Eingänge eines Mikrocontrollers ausliest – absoluter Standard, aber keine Lösung für das eigentliche Problem.

Und genau hier lag der Knackpunkt:

Die Taster des Arduino Nesso N1 hängen nicht direkt am Mikrocontroller, sondern an einem I/O-Expander, der über I2C angebunden ist. Gleichzeitig nutzt das Display ebenfalls die I2C-Schnittstelle. ➡️ Wenn Display und Taster parallel genutzt werden, stören sie sich gegenseitig – die Taster können nicht korrekt ausgewertet werden.

Damit du nicht die gleiche Fehlersuche durchlaufen musst, zeige ich dir in diesem Beitrag die einfache Lösung, mit der sowohl Display als auch Taster zuverlässig funktionieren.

https://youtu.be/gElx8eTTP1c

Das Problem nachvollziehen: Display + Taster = I2C-Konflikt

Schauen wir uns zuerst den Sketch an, der nicht wie erwartet funktioniert:

#include M5GFX display; void initDisplay() { display.begin(); display.setRotation(1); display.setTextDatum(middle_center); display.setTextColor(TFT_WHITE, TFT_BLACK); display.setTextSize(2); display.clearDisplay(TFT_BLACK); display.drawString("Hallo Welt!", display.width() / 2, display.height() / 2); } void initButtons() { pinMode(KEY1, INPUT_PULLUP); pinMode(KEY2, INPUT_PULLUP); } void setup() { Serial.begin(115200); initDisplay(); initButtons(); } void loop() { if (digitalRead(KEY1) == LOW) { Serial.println("Taster 1 betätigt!"); delay(200); } if (digitalRead(KEY2) == LOW) { Serial.println("Taster 2 betätigt!"); delay(200); } }

Der Code wirkt auf den ersten Blick absolut harmlos:

- Das Display wird über M5GFX initialisiert und zeigt „Hallo Welt!“ an. - Die beiden Taster KEY1 und KEY2 werden ganz klassisch über pinMode() als Eingänge mit Pullup konfiguriert. - Im loop() fragt digitalRead() die Taster ab und schreibt bei Tastendruck eine Meldung in die serielle Konsole.

In der Praxis passiert aber etwas anderes: In der Konsole der Arduino IDE taucht sehr schnell folgende Fehlermeldung auf:

E (304) i2c.common: I2C bus id(0) has already been acquired

Und genau ab diesem Punkt reagieren die Taster nicht mehr zuverlässig – oder gar nicht.

Was hier wirklich schiefläuft

Der Hintergrund:

- Das Display des Arduino Nesso N1 hängt am I2C-Bus. - Die Taster KEY1 und KEY2 hängen nicht direkt an normalen GPIO-Pins des Mikrocontrollers, sondern an einem I/O-Expander, der ebenfalls über I2C angebunden ist. - Wenn M5GFX initialisiert wird, konfiguriert die Library den I2C-Bus für das Display. - Wenn du anschließend pinMode(KEY1, INPUT_PULLUP) und digitalRead(KEYx) verwendest, behandelst du diese Taster so, als wären es „echte“ Mikrocontroller-Pins – was sie aber nicht sind.

Die Folge: Der Board-Support bzw. die Low-Level-Library versucht, für diese „Pins“ im Hintergrund ebenfalls den I2C-Bus zu nutzen – dieser ist aber bereits vom Display belegt. Daher kommt die Fehlermeldung:

I2C bus id(0) has already been acquired

Kurz gesagt: Display und Taster konkurrieren auf demselben I2C-Bus – und der „normale“ Arduino-Weg mit pinMode + digitalRead funktioniert hier nicht.

Der Fix: Statt M5GFX muss M5Unified verwendet werden

Die gute Nachricht: Das Problem lässt sich sehr einfach lösen – allerdings nicht mit der Display-Library, die viele (inklusive mir) zuerst verwenden.

Installation von M5Unified

Du kannst die Library ganz einfach über den Bibliotheksverwalter installieren:

- Arduino IDE öffnen - Werkzeuge → Bibliotheken verwalten - Im Suchfeld eingeben: M5Unified - Auf Installieren klicken

Ggf. wirst du aufgeforder noch abhängigkeiten zu installieren, diese musst du bestätigen!

Funktionierender Beispielcode mit M5Unified

Nachdem die Ursache geklärt ist, sehen wir uns nun die korrekte Lösung an. Mit der Library M5Unified lassen sich Display und Taster des Arduino Nesso N1 problemlos gleichzeitig nutzen — ohne I2C-Konflikte oder Fehlermeldungen.

Der folgende Sketch zeigt ein minimales Beispiel: Über Button A (KEY1) wird ein Counter hochgezählt, über Button B (KEY2) wird er heruntergezählt. Jeder Tastendruck aktualisiert sofort den Bildschirm.

Taster am Arduino Nesso N1 - M5Unified Konstanten

Lauffähiges Beispiel: Counter mit Taster A und B

/** * ------------------------------------------------------------ * Arduino Nesso N1 – Beispielcode: * Display & Taster gleichzeitig nutzen mit M5Unified * ------------------------------------------------------------ * * Einleitung: * Der Arduino Nesso N1 nutzt für Display und Taster denselben I2C-Bus. * Die Library M5GFX verursacht Konflikte, wodurch die Buttons nicht * zuverlässig ausgelesen werden können ("I2C bus id(0) already acquired"). * * Die Lösung: * Statt M5GFX muss die Library M5Unified verwendet werden. * Mit dieser Bibliothek lassen sich Display und Buttons stabil und * ohne I2C-Probleme gleichzeitig betreiben. * * In diesem Beispiel wird ein einfacher Counter dargestellt: * - Button A erhöht den Wert * - Button B verringert den Wert * Der aktuelle Wert wird sofort auf dem Display aktualisiert. * * Artikel & Erklärung: * https://draeger-it.blog/arduino-nesso-n1-troubleshooting-display-blockiert-tasten-loesung/ * * Hardware: * - Arduino Nesso N1 * - Eingebaute Buttons A & B (I/O Expander) * - Eingebautes IPS-Display * * ------------------------------------------------------------ */ #include // Zählvariable für das Beispiel int counter = 0; // Displayauflösung des Nesso N1 const int SCREEN_HEIGHT = 135; const int SCREEN_WIDTH = 240; void setup() { Serial.begin(9600); // Serielle Ausgaben für Debugging // M5Unified-Konfiguration laden auto cfg = M5.config(); cfg.clear_display = true; // Display beim Start löschen // Initialisiert Display, Taster, Touch, I2C-Expander usw. M5.begin(cfg); } void loop() { // Aktualisiert alle Button-Zustände (A, B, C, Power usw.) M5.update(); bool btnPress = false; // Button A gedrückt → Counter++ if (M5.BtnA.wasPressed()) { btnPress = true; counter++; } // Button B gedrückt → Counter-- else if (M5.BtnB.wasPressed()) { btnPress = true; counter--; } // Wenn ein Button gedrückt wurde, Display neu zeichnen if (btnPress) { M5.Display.clearDisplay(TFT_BLACK); // Bildschirm leeren M5.Display.setRotation(1); // Landscape-Ausrichtung M5.Display.setTextDatum(middle_center); // Text zentrieren M5.Display.setTextSize(2); // Textgröße setzen // Counter-Wert zentriert anzeigen M5.Display.drawString( String(counter), // Zahl als String SCREEN_WIDTH / 2, // X-Mitte SCREEN_HEIGHT / 2 // Y-Mitte ); } }

Fazit

Der Fehler lag nicht am Code, sondern an der eingesetzten Display-Library. Da Display und Taster beim Arduino Nesso N1 denselben I2C-Bus nutzen, führt M5GFX zu Konflikten und verhindert die Button-Abfrage. Nach einem Blick in die M5Stack-Dokumentation wurde klar: 👉 Die Lösung ist der Wechsel zu M5Unified.

Wer sich in der Welt der Mikrocontroller bewegt, kommt an M5Stack kaum vorbei. Das Unternehmen hat über die letzten Jahre ein beeindruckendes Ökosystem aus Sensoren, Aktoren und kompakten ESP32-Geräten aufgebaut. Nicht gerade die günstigste Lösung – aber extrem zuverlässig, vielseitig und dank UIFlow auch für Einsteiger überraschend leicht zu programmieren. Genau dieses Zusammenspiel macht M5Stack für viele Maker zu einer echten Empfehlung.

Aus diesem modularen Umfeld habe ich mir den M5StickC Plus2 herausgegriffen – einen winzigen, aber leistungsfähigen ESP32-Controller mit Display, Akku und reichlich Erweiterungsmöglichkeiten. Ihm stelle ich in diesem Beitrag den Arduino Nesso N1 gegenüber, der ebenfalls in Zusammenarbeit mit M5Stack entwickelt wurde und dadurch technisch wie optisch eine auffällige Nähe zum M5StickC Plus2 zeigt.

https://youtu.be/4z-mmLuBisI

Beide Geräte sind kompakt, leistungsstark und ideal für schnelle Prototypen. Dennoch verfolgen sie unterschiedliche Konzepte und richten sich an verschiedene Nutzergruppen. Genau deshalb lohnt es sich, diese beiden Mini-Controller einmal direkt miteinander zu vergleichen.

Überblick: Was macht beide Controller besonders?

Auf den ersten Blick wirken der Arduino Nesso N1 und der M5StickC Plus2 fast wie Zwillinge. Beide sind extrem kompakte ESP32-Controller mit integriertem Display, sehr ähnlichen Abmessungen und einem schlichten Gehäusedesign. Stellt man sie nebeneinander, fällt optisch zunächst nur die Farbe ins Gewicht.

Erst im Detail zeigen sich die Unterschiede: Der Arduino Nesso N1 verfügt zusätzlich über eine externe Antenne sowie eine Qwiic-Schnittstelle, was ihn besonders attraktiv für Sensorprojekte und erweiterte Kommunikation macht. Und obwohl der M5StickC Plus2 für seine Mobilität bekannt ist, hat der Nesso N1 sogar den größeren Akku verbaut – 250 mAh gegenüber 200 mAh beim Plus2.

Blendet man Antenne und Qwiic kurz aus, bleibt äußerlich tatsächlich kaum mehr als der Farbunterschied übrig. Doch technisch und konzeptionell verfolgen beide klar unterschiedliche Ansätze: Der Nesso N1 ist stark auf Touch-Bedienung und UI-Prototyping ausgelegt, während der M5StickC Plus2 als Teil des M5Stack-Ökosystems mit modularen Erweiterungen und hoher Flexibilität punktet.

Technische Daten im Vergleich: Arduino Nesso N1 vs. M5StickC Plus2

Ein Blick auf die technischen Daten zeigt schnell, wo sich der Nesso N1 und der M5StickC Plus2 ähneln – und in welchen Bereichen sie sich klar unterscheiden. Die folgende Tabelle stellt die wichtigsten Merkmale übersichtlich gegenüber.

KategorieArduino Nesso N1M5StickC Plus2Microcontroller / CPUESP32-C6• 32-bit RISC-V HP-Core bis 160 MHz• 32-bit RISC-V LP-Core bis 20 MHzESP32-PICO-V3-02• Dual-Core Xtensa bis 240 MHzRAM / PSRAM512 KB SRAM2 MB PSRAMFlash16 MB NOR Flash8 MB FlashDisplay1,14" TFT LCD (135×240), Touchscreen1,14" TFT LCD (135×240)Bedienung2 programmierbare Buttons 1x Power/Reset/BootKommunikationWi-Fi 6 (2.4 GHz) Bluetooth 5.3 Thread 1.4 Zigbee 3.0 LoRa® (850–960 MHz, SX1262)2.4 GHz Wi-Fi BluetoothSchnittstellenQwiic Grove USB-CUSB-C GroveSensoren6-Axis IMU IR-TransmitterMPU6886 IMU (6-Axis) SPM1423 Mikrofon RTC (BM8563)BuzzerPassiver BuzzerAktiver BuzzerLEDsRGB-LEDGrüne LED (Sleep-Indikator) Rote LED (geteilt mit IR-Emitter)Akku250 mAh LiPo200 mAh LiPoZusatzfeaturesExterne Antenne Touch-Display LoRa®Integrierter IR-Emitter Echtzeituhr (RTC)Abmessungen18 × 45 mm48.0 × 24.0 × 13.5 mm

Preisvergleich

Beim Preis zeigt sich ein deutlicher Unterschied zwischen beiden Geräten. Der M5StickC Plus2 kostet direkt beim Hersteller $19,95 (zzgl. Versand) und ist damit sehr günstig. Mein eigenes Modell habe ich bei Botland für 27,90 € gekauft (zzgl. Versand), aber innerhalb von nur drei Tagen geliefert.

kosten Arduino Nesso N1

kosten M5StickC Plus2

Der Arduino Nesso N1 liegt preislich deutlich höher: Im offiziellen Arduino-Shop kostet er aktuell 47,58 €, inklusive Versand aus Italien per UPS.

Damit ist der M5StickC Plus2 spürbar günstiger und für viele Projekte die preislich attraktivere Option.

Zwischenfazit

Nach dem Blick auf die technischen Daten und den Preisvergleich wird schnell klar: Beide Geräte haben ihren ganz eigenen Reiz – trotz ihrer äußerlichen Ähnlichkeit.

Der M5StickC Plus2 punktet vor allem mit seinem attraktiven Preis, dem etablierten M5Stack-Ökosystem und zusätzlichen Features wie RTC, Mikrofon und PSRAM. Der Arduino Nesso N1 setzt dagegen auf moderne Funkstandards, ein Touch-Display, größere Flash-Reserven und zusätzliche Schnittstellen wie Qwiic – und richtet sich damit klar an anspruchsvollere IoT- und UI-Projekte.

Welcher Mini-Controller der bessere ist, lässt sich an dieser Stelle noch nicht pauschal beantworten. Vielmehr zeigt sich bereits jetzt: Die Wahl hängt stark vom geplanten Einsatzzweck ab.

Einsatzszenarien im Überblick

Sowohl der Arduino Nesso N1 als auch der M5StickC Plus2 decken eine breite Palette an Einsatzszenarien ab. Dazu zählen der Einstieg in die Mikrocontroller-Programmierung, klassische IoT- und Funkprojekte sowie mobile und stromsparende Anwendungen.

In vielen dieser Bereiche sind beide Geräte gleichermaßen gut geeignet und liefern eine solide Basis für eigene Projekte. Besonders im IoT-Umfeld kann der Arduino Nesso N1 jedoch seine Stärken ausspielen: Dank LoRa-, Thread- und Zigbee-Unterstützung direkt ab Werk ist er ohne zusätzliche Hardware sofort einsatzbereit und deutlich vielseitiger aufgestellt.

Der M5StickC Plus2 punktet hingegen mit seinem etablierten Ökosystem, kompakter Bauform und praxisnahen Zusatzfeatures – ideal für schnelle Prototypen und mobile Anwendungen.

Auch hier zeigt sich erneut: Beide Geräte haben ihre Daseinsberechtigung – die Entscheidung hängt vom konkreten Einsatzzweck ab.

Programmierung & Entwicklungsumgebungen

Sowohl der Arduino Nesso N1 als auch der M5StickC Plus2 lassen sich sehr flexibel programmieren. Beide Geräte unterstützen die Arduino IDE, MicroPython sowie UIFlow von M5Stack und sprechen damit sowohl Einsteiger als auch fortgeschrittene Anwender an.

Gerade UIFlow bietet einen besonders niedrigen Einstieg: Die blockbasierte Programmierung – vergleichbar mit Scratch – ermöglicht es, schnell erste Erfolge zu erzielen, ohne tief in Code einsteigen zu müssen. Ein großer Vorteil ist dabei die nahtlose Unterstützung der Grove-Sensoren und Aktoren aus dem M5Stack-Ökosystem, die sich nahezu ohne Konfigurationsaufwand integrieren lassen.

M5StickC Plus2 und Arduino Nesso N1 für UIFlow geflasht

Arduino Nesso N1 - HelloWorld! in UIFlow

Bevor der Arduino Nesso N1 und der M5StickC Plus2 in UIFlow genutzt werden können, müssen beide Geräte einmalig mit einer passenden UIFlow-Firmware geflasht werden. Dieser Schritt ist bei beiden Controllern identisch und erfolgt über den M5Burner.

Der Ablauf ist unkompliziert:

- Controller per USB anschließen - im M5Burner das passende UIFlow-Firmware-Image auswählen - Firmware auf das Gerät flashen

Nach diesem einmaligen Schritt lassen sich beide Mikrocontroller direkt aus UIFlow heraus per USB oder über die Cloud mit neuen Projekten bespielen. Ein erneutes Flashen ist dafür nicht notwendig.

Arduino Nesso N1 in UIFlow 2.0

Wer lieber klassisch entwickelt, kann sowohl den Nesso N1 als auch den M5StickC Plus2 problemlos in der Arduino IDE programmieren. Für sämtliche Sensoren und Aktoren aus dem M5Stack-Umfeld stehen passende Arduino-Bibliotheken zur Verfügung, die sich bequem über den Bibliotheksmanager installieren lassen. Damit ist auch hier ein direkter Zugriff auf das umfangreiche Ökosystem möglich – allerdings mit mehr Freiheiten und Kontrolle über den Code.

klassische Arduino IDE für Arduino Nesso N1

MicroPython positioniert sich dazwischen: schneller Einstieg, gut lesbarer Code und ideal für Prototypen oder IoT-Anwendungen, bei denen Entwicklungszeit eine Rolle spielt.

Unterm Strich zeigen beide Geräte auch bei der Programmierung ihre Vielseitigkeit – vom blockbasierten Einstieg bis zur vollwertigen Embedded-Entwicklung.

Fazit

Der M5StickC Plus2 überzeugt vor allem durch sein sehr gutes Preis-Leistungs-Verhältnis und die umfangreiche Ausstattung. Wer auf moderne Funkstandards wie LoRa, Zigbee oder Thread verzichten kann, erhält hier einen äußerst vielseitigen Mini-Controller mit klarer Kaufempfehlung. Sollte später doch zusätzlicher Funktionsumfang benötigt werden, lässt sich dieser dank des M5Stack-Ökosystems problemlos über passende Module erweitern.

Der Arduino Nesso N1 richtet sich dagegen an Anwender mit höheren Anforderungen an Konnektivität und Benutzeroberflächen. Die Unterstützung von LoRa, Zigbee und Thread in Kombination mit dem Touch-Display macht ihn besonders interessant für IoT-Projekte, UI-Prototypen und experimentelle Anwendungen, bei denen Interaktion eine größere Rolle spielt.

Im letzten Beitrag habe ich gezeigt, wie du Bilder als Array direkt im Flashspeicher des Arduino Nesso N1 ablegen und auf dem Display darstellen kannst – eine schnelle und einfache Methode, um Grafiken lokal einzubinden.

Doch der Nesso N1 kann noch deutlich mehr. Dank des integrierten ESP32-C6 verfügt das Board über ein leistungsfähiges WLAN-Modul, mit dem sich Bilder direkt aus dem Internet laden und sofort auf dem Display anzeigen lassen. Ganz ohne PROGMEM, ohne Dateisystem und ohne zusätzliche Hardware.

https://youtu.be/tMK16bSN1I4

Egal ob du Live-Daten visualisieren, Icons dynamisch nachladen oder eine kleine Web-Slideshow erstellen möchtest – der Nesso N1 macht das außergewöhnlich leicht. Alles, was du brauchst, ist eine aktive WLAN-Verbindung und die URL des gewünschten Bildes.

In diesem Beitrag zeige ich dir Schritt für Schritt, wie du Bilder aus dem Web abrufst, dekodierst und unmittelbar auf dem Display des Arduino Nesso N1 darstellst. Und natürlich gibt es wieder einen vollständigen Beispielcode zum Nachbauen.

Was wird für dieses Projekt benötigt?

Um Bilder direkt aus dem Internet auf dem Display des Arduino Nesso N1 anzuzeigen, brauchst du nur wenige Komponenten. Alles bleibt kompakt, übersichtlich und ohne zusätzliche Hardware – genau wie im vorherigen Beitrag.

Für dieses Projekt verwende ich:

- Arduino Nesso N1* Der Mikrocontroller mit integriertem ESP32-C6 sorgt für die WLAN-Verbindung und steuert gleichzeitig das 240×135-Display an. - USB-C Datenkabel* Ideal ist ein hochwertiges USB-C 3.1 Kabel, das ausreichend Strom liefert. Dünne oder reine Ladekabel funktionieren oft nicht zuverlässig beim Programmieren. - Aktive 2,4-GHz-WiFi-Verbindung Das kann dein normales Heimnetzwerk sein – oder einfach der Hotspot deines Smartphones. Wichtig: Der ESP32-C6 unterstützt nur 2,4 GHz, kein 5-GHz-WLAN. - Webspace für deine Bilder Du hast zwei Möglichkeiten: - Eigener Webspace / Hosting (z. B. deine Website, GitHub Pages, Nextcloud etc.) - Lokales Netzwerk, z. B. mit einem Raspberry Pi*, der Bilder über HTTP bereitstellt

Somit kannst du sowohl im Internet gehostete Dateien laden als auch lokal gespeicherte Bilder testen.

Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!

Tipp: Bilder vorher verkleinern

Damit die Darstellung flüssig bleibt und der Download nicht unnötig groß wird, sollten deine Bilder bereits in der passenden Auflösung vorliegen. Für den Arduino Nesso N1 ist das typischerweise 240×135 Pixel.

Zum Optimieren der Dateien nutze ich gerne: https://tinypng.com Das Tool komprimiert PNG und JPG extrem effektiv, ohne sichtbaren Qualitätsverlust. Damit verkleinerst du die Dateigröße teils um mehr als 70 % – perfekt für schnelle Ladezeiten.

WLAN-Verbindung aufbauen – der erste Schritt zum Online-Bild

Bevor wir ein Bild aus dem Internet laden können, muss der Arduino Nesso N1 natürlich mit dem WLAN verbunden werden. Wie man eine WiFi-Verbindung mit einem ESP32 herstellt, habe ich bereits in mehreren meiner Beiträge ausführlich erklärt. Für dieses Projekt nutzen wir eine besonders kompakte Variante – basierend auf dem offiziellen Beispiel von Espressif.

Das Prinzip ist immer gleich:

- SSID und Passwort setzen - WiFi.begin() aufrufen - Auf erfolgreiche Verbindung warten - Lokale IP-Adresse ausgeben (optional)

Da der ESP32-C6 im Nesso N1 bereits alles Nötige mitbringt, reichen wenige Zeilen Code aus, um eine stabile WLAN-Verbindung herzustellen.

Beispielcode: WLAN mit dem ESP32-C6 verbinden #include // Deine WLAN-Zugangsdaten const char* ssid = "DEINE_SSID"; const char* password = "DEIN_PASSWORT"; void setup() { Serial.begin(115200); Serial.println("nVerbinde mit WiFi..."); WiFi.begin(ssid, password); // Auf Verbindung warten while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("nVerbunden!"); Serial.print("IP Adresse: "); Serial.println(WiFi.localIP()); } void loop() { // Hier folgt gleich das Laden des Bildes... }

Wenn die eigene SSID und das Passwort ergänzt wurde, dann sollte nach wenigen Sekunden im seriellen Monitor der Arduino IDE die zugewiesene IP-Adresse ausgegeben werden.

IP-Adresse des Arduino Nesso N1 im seriellen Monitor der Arduino IDE

Bild per URL laden – jetzt kommt der spannende Teil

Nachdem wir erfolgreich eine WLAN-Verbindung aufgebaut haben, können wir das erste Bild direkt aus dem Internet abrufen und auf dem Display des Arduino Nesso N1 darstellen. Dank der M5GFX-Bibliothek ist das überraschend einfach: Mit nur einer einzigen Funktion – drawJpgUrl() – lädt der ESP32-C6 die Bilddatei von einer Webadresse und rendert sie sofort auf dem integrierten ST7789-Display.

Im folgenden Beispiel siehst du die vollständige Implementierung: Der Nesso N1 verbindet sich mit deinem WLAN, ruft das Bild von der angegebenen URL ab und zeigt es in der passenden Größe auf dem Display an. Damit hast du bereits die Grundlage für Online-Dashboards, Statusanzeigen, Galerien oder sogar kleine Live-Bildfeeds geschaffen.

/************************************************************ * Arduino Nesso N1 – Bilder per URL aus dem Internet laden * -------------------------------------------------------- * Dieses Beispiel zeigt, wie der Arduino Nesso N1 (ESP32-C6) * eine WLAN-Verbindung herstellt und ein Bild direkt von * einer HTTP-URL lädt und auf dem integrierten Display darstellt. * * Verwendete Funktionen: * - WiFi.begin() → WLAN-Verbindung herstellen * - drawJpgUrl() → JPG-Bild aus dem Internet laden * * Voraussetzungen: * - funktionierendes 2,4 GHz WLAN * - Bilddatei auf einem Webserver * * Autor: Stefan Draeger * Blogbeitrag: * https://draeger-it.blog/arduino-nesso-n1-bilder-online-abrufen-und-direkt-darstellen/ ************************************************************/ #include #include #include #include M5GFX display; // WLAN-Zugangsdaten (für Demo hart im Code – später per Config!) const char* ssid = "abc"; const char* password = "12345678"; // Öffentliche Bild-URL const char* imageUrl = "http://progs.ressourcen-draeger-it.de/arduinonesson1/bilder/Mailo1.jpg"; // Maximale Ausgabengröße (Displaygröße) const int MAX_WIDTH = 240; const int MAX_HEIGHT = 135; void setup() { Serial.begin(115200); Serial.println("nVerbinde mit WiFi..."); // WLAN verbinden WiFi.begin(ssid, password); // Warten bis verbunden while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("nVerbunden!"); Serial.print("IP Adresse: "); Serial.println(WiFi.localIP()); // Display starten display.begin(); display.setRotation(1); display.fillScreen(TFT_BLACK); // Bild online abrufen und anzeigen display.drawJpgUrl(imageUrl, 0, 0, // X/Y-Position MAX_WIDTH, // maximale Breite MAX_HEIGHT); // maximale Höhe } void loop() { // nichts notwendig – Bild bleibt angezeigt }

Wenn der Code auf den Arduino Nesso N1 überspielt wurde, wird nach dem beziehen der IP-Adresse vom Router / oder Hotspot das Bild geladen.

Arduino Nesso N1 - Bild aus dem Internet geladen

Beispielcode: ESP32-CAM Snapshot nahezu „live“ auf dem Arduino Nesso N1 anzeigen

Im folgenden Beispiel siehst du den kompletten Sketch, mit dem der Arduino Nesso N1 alle 250 Millisekunden ein neues Bild von einer ESP32-CAM abruft. Die Kamera liefert über die URL /capture einen aktuellen JPEG-Snapshot, der anschließend sofort auf dem integrierten Display dargestellt wird.

ESP32-S3-CAM mit OV2640 Kamera-Modul

ESP32-S3-CAM mit OV3660 Kamera-Modul

Durch den leistungsstarken ESP32-C6 mit bis zu 240 MHz kann der Nesso N1 dieses Bild sogar deutlich schneller verarbeiten. Wenn du das Intervall im delay() auf 50 ms reduzierst, erhältst du eine fast flüssige Darstellung von ca. 20 FPS – ideal für einfache Live-Ansichten oder Monitoring-Anwendungen.

Aufnahme mit 66°, 2MP OV2640 Modul

Aufnahme mit 3MP OV3660

Aufnahme mit 120°, 3MP OV3660 Modul

Der Code ist bewusst kompakt gehalten:

- WLAN verbinden - Display initialisieren - JPEG-Snapshot regelmäßig abrufen - Bild direkt anzeigen

Hier das vollständige Beispiel:

#include #include #include #include M5GFX display; // Deine WLAN-Zugangsdaten const char* ssid = "abc"; const char* password = "12345678"; const char* imageUrl = "http://192.168.178.77/capture"; const int MAX_WIDTH = 240; const int MAX_HEIGHT = 135; void setup() { Serial.begin(115200); Serial.println("nVerbinde mit WiFi..."); WiFi.begin(ssid, password); // Auf Verbindung warten while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("nVerbunden!"); Serial.print("IP Adresse: "); Serial.println(WiFi.localIP()); display.begin(); display.setRotation(1); } void loop() { display.drawJpgUrl(imageUrl, 0, 0, MAX_WIDTH, MAX_HEIGHT); delay(250); } ESP32-CAM richtig konfigurieren – optimales Bild für das Nesso N1 Display

Bevor der Arduino Nesso N1 das Snapshot-Bild der ESP32-CAM laden kann, muss die Kamera richtig konfiguriert werden. Die ESP32-CAM bringt dafür ein eigenes Webfrontend mit, das du einfach über den Browser erreichst:

IP-Adresse der Kamera im Browser öffnen (z. B. http://192.168.178.77)

Die IP-Adresse der ESP32-CAM wird dir im seriellen Monitor der Arduino IDE ausgegeben wenn du diese mit dem PC verbindest, oder du findest diese in deinem Router.

Dort erscheint ein Livebild der Kamera sowie eine Vielzahl an Einstellmöglichkeiten – Auflösung, Helligkeit, Kontrast, Qualität, Belichtung und einiges mehr.

Wichtige Einstellung: Die passende Auflösung wählen

Da der Arduino Nesso N1 ein 1,14" Display mit maximal 240×135 Pixel besitzt, sollten wir die Auflösung der ESP32-CAM entsprechend anpassen. Eine zu hohe Auflösung würde:

- unnötig viel WLAN-Bandbreite verbrauchen - das Laden des Bildes deutlich verlangsamen - den ESP32-C6 zusätzlich beim JPEG-Decoding belasten

Die empfehlenswerte Einstellung lautet: Auflösung: HQVGA (240 × 176 Pixel)

ESP32-CAM - Konfiguration für Arduino Nesso N1 Anzeige

Diese Auflösung eignet sich ideal, weil:

- die JPEG-Dateien angenehm klein bleiben - die Bildqualität für das kleine Display völlig ausreicht - die Darstellung flüssig möglich ist (bis ~20 FPS bei 50 ms Intervall)

Obwohl das Bild leicht höher ist als die Displayhöhe, skaliert M5GFX das Bild sauber herunter oder wir begrenzen es per maxHeight.

Unterschiedliche Kameramodule und Objektive der ESP32-CAM

Je nach Händler oder Board-Version kann die ESP32-CAM verschiedene Kameramodule besitzen. Die gängigsten Modelle unterscheiden sich in:

Sensorauflösung

- Typisch: 2 MP OV2640 - Andere Varianten: bis 5 MP (z. B. OV5640 bei neueren Boards)

Objektiv / Brennweite

- Standard-Linse → normaler Blickwinkel, 66° - Weitwinkel (Wide-Angle) → ideal für Überwachung, Raumansicht, 120° & 160°

Es gibt auch spezielle Version für den Einsatz bei wenig Licht. In meinem Beitrag ESP32 CAM – Vergleich der verfügbaren Kameralinsen habe ich dir diese einmal alle Vorgestellt.

Troubleshooting / Häufige Stolpersteine

Beim Laden von Bildern aus dem Internet gibt es einige Besonderheiten, die du unbedingt beachten solltest. Diese Punkte sorgen bei Anfängern häufig für Fehler – mit dem folgenden Überblick kannst du sie leicht vermeiden.

Problem 1: Eingeschränkte HTTPS-Unterstützung

Der ESP32-C6 unterstützt HTTPS nur eingeschränkt. Das bedeutet:

- Viele HTTPS-Server funktionieren nicht zuverlässig - Zertifikatsprüfungen können fehlschlagen - Self-signed Zertifikate werden nicht akzeptiert - Große Websites wie GitHub, Dropbox oder Google funktionieren nicht

Lösung: Verwende HTTP statt HTTPS, also unverschlüsselte URLs wie:

http://example.com/bild.jpg

oder hoste deine Dateien auf einem lokalen Server ohne SSL.

Problem 2: Bildgröße und Out-of-Memory-Fehler

Der Arduino Nesso N1 verfügt über rund 320 KB nutzbaren RAM. Beim Laden eines Bildes müssen:

- die JPEG-Daten, - interne Buffer, - und das dekodierte Bild

kurzzeitig im Arbeitsspeicher liegen.

Ist das Bild zu groß, erscheint einer der typischen Fehler:

- Out of memory - Decode error - oder das Display bleibt schwarz

Lösungen:

- Verwende Bilder mit max. 240 × 135 Pixel - Zielgröße: < 80 KB pro Bild - Bei ESP32-CAM: Auflösung auf HQVGA (240×176) stellen

Kleine Bilder laden schneller, verbrauchen weniger Speicher und lassen sich deutlich flüssiger aktualisieren.

Problem 3: Instabile WLAN-Verbindung

Besonders beim Livebild der ESP32-CAM wichtig:

- Schlechte Signalqualität verursacht fehlgeschlagene Downloads - Hohe Intervalle (< 50 ms) können zu Timeouts führen

Lösungen:

- Kamera näher am Router platzieren - Delay moderat wählen (50–250 ms)

Fazit

Die Arbeit mit dem Arduino Nesso N1 macht gerade in Kombination mit M5GFX bzw. M5Unified richtig Spaß. Die Bibliothek nimmt einem viele komplizierte Schritte ab, sodass man sich voll auf das eigentliche Projekt konzentrieren kann. Bilder aus dem Internet zu laden und direkt auf dem kleinen Display darzustellen, funktioniert mit wenigen Zeilen Code – und das Ergebnis sieht überraschend gut aus.

Besonders praktisch: Man kommt ohne zusätzliche Hardware aus und kann trotzdem sehr flexibel mit Online-Grafiken, Icons oder sogar Livebildern einer ESP32-CAM arbeiten. Genau solche kleinen Experimente zeigen, wie vielseitig der Nesso N1 ist und wie schnell man damit zu sichtbaren Ergebnissen kommt.

Du möchtest eigene Bilder auf dem Display des Arduino Nesso N1 anzeigen lassen? Perfekt – genau darum geht es in diesem Beitrag. Wir starten ganz bewusst mit der einfachsten und schnellsten Methode, bei der ein Bild direkt aus dem Flash-Speicher (PROGMEM) geladen und auf dem Display dargestellt wird. Diese Lösung kommt ohne SD-Karte, ohne Dateisystem und ohne zusätzliche Hardware aus – ideal für kleine Projekte, Menüs oder Startbildschirme.

https://youtu.be/OjLf1hFUJuc

Im späteren, separaten Beitrag zeige ich dir dann, wie du Bilder direkt vom internen Dateisystem des Nesso N1 laden kannst, inklusive flexibler Bildverwaltung und Slideshow-Optionen. Doch beginnen wir zunächst mit der Basis, die jeder sofort umsetzen kann.

Hinweis zur Bildqualität der Fotos Die folgenden Fotos zeigen die ausgegebenen Bilder direkt auf dem Display des Arduino Nesso N1. Bitte beachte: Die Qualität der Aufnahmen wirkt fotografiert etwas unscharf oder mit sichtbaren Pixelstrukturen. In der Realität sieht das Display deutlich besser aus – die Farben sind kräftiger, die Schärfe höher und die Darstellung insgesamt klarer. Das liegt schlicht daran, dass Kameraobjektive und Displays selten perfekt harmonieren und sich Moiré-Effekte oder Reflexionen einschleichen. Für die tatsächliche Darstellung solltest du dich daher auf das Live-Bild des Geräts verlassen – die Fotos dienen lediglich zur Veranschaulichung.

Was wird für dieses Projekt benötigt?

Damit du eigene Bilder auf dem Display des Arduino Nesso N1 anzeigen kannst, brauchst du nur wenige Dinge. Das Projekt kommt komplett ohne zusätzliche Sensoren oder externe Hardware aus und eignet sich daher ideal für Einsteiger.

Für dieses Beispiel verwende ich:

- Arduino Nesso N1* Das Herzstück des Projekts – ein kompakter Mikrocontroller mit ESP32-C6 und integriertem 240×135-Pixel-Display. - USB-C Datenkabel* Zum Programmieren und zur Stromversorgung. Wichtig: Ein reines Ladekabel funktioniert nicht! - Drei Bilder Für die Demo verwende ich JPG, PNG und BMP. Du kannst aber beliebige Bilder nutzen, solange sie vorher zugeschnitten und in ein C-Array konvertiert wurden. - Arduino IDE Zum Schreiben und Hochladen des Programms. Empfohlen ist die aktuelle Version der IDE. - M5Unified Bibliothek von M5Stack Sie übernimmt die Initialisierung des Displays, der Tasten und der übrigen Peripherie. Installation: Sketch → Bibliothek einbinden → Bibliotheken verwalten → „M5Unified“ suchen

Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!

Dieser minimale Aufbau reicht vollkommen aus, um Bilder im PROGMEM abzulegen, anzuzeigen und später sogar per Tastendruck durchzublättern.

Wichtiger Hinweis zum USB-C-Datenkabel

In meinem Test hat sich gezeigt, dass nicht jedes beliebige USB-C-Kabel zuverlässig mit dem Arduino Nesso N1 funktioniert. Besonders dünne oder ältere Kabel liefern oft nicht genug Strom oder verlieren die Datenverbindung während des Flashens.

Ich musste ein hochwertiges, kräftig abgeschirmtes USB-C-Datenkabel verwenden und den Nesso N1 zusätzlich über einen aktiven USB-Hub anschließen, damit genügend Strom anliegt und die Programmierung stabil funktioniert.

Wenn der Upload bei dir hängen bleibt, das Board nicht erkannt wird, lohnt es sich daher zuerst, ein besseres Kabel oder einen aktiven Hub zu testen. Oft ist das schon die komplette Lösung.

Bilder für das Arduino Nesso N1 Display vorbereiten

Für dieses Beispiel verwende ich ein Foto meines kleinen Hundes. Damit das Bild später sauber und pixelgenau auf das Display des Arduino Nesso N1 passt, muss es zunächst auf die richtige Größe gebracht werden.

1. Bild auf Displaygröße zuschneiden

Das Display des Nesso N1 besitzt eine Auflösung von 240 × 135 Pixeln (Breite × Höhe im Querformat).

Daher schneide ich mein Foto zuerst in genau dieses Format zurecht:

- Breite: 240 Pixel - Höhe: 135 Pixel - Format: JPG

Das Zuschneiden kann mit jedem gängigen Bildeditor erfolgen, in meinem Fall verwende ich Paint.NET, dieses Tool ist kostenfrei und es gibt viele Plugins und Features um Bilder zu bearbeiten.

2. Bild in Array umwandeln

Damit das Bild direkt aus dem Flash-Speicher geladen werden kann, wird es in ein Byte-Array umgewandelt:

const uint8_t jpg = { ... };

Dafür nutze ich das Online-Tool: https://notisrac.github.io/FileToCArray/

Es konvertiert jede Bilddatei in ein kompatibles C-Array (getestet mit JPG, PNG & BMP).

Wichtige Einstellungen im Tool:

- Treat as binary: anhaken - Data type: unint8_t

Alle anderen Werte sind per Default gesetzt und passen.

Einstellungen für den File to C style array converter

Nach dem Generieren erhältst du ein fertiges Stück Code, mit den Daten des Bildes in einem Array die so beginnt:

const unsigned char Mailo1_jpg = { 0xFF, 0xD8, 0xFF, 0xE0, ... };

Diese Datei kannst du anschließend direkt in dein Arduino-Projekt einbinden und auf dem Display anzeigen.

Abspeichern der generierten Daten als C-Header-Dateii oder kopieren in die Zwischenablage

Arduino Nesso N1 Bild anzeigen – jetzt geht’s an die Programmierung

Nachdem wir unser Bild vorbereitet und mit dem Online-Tool in eine bild.h umgewandelt haben, geht es nun an die eigentliche Programmierung. Der schwierigste Teil ist bereits erledigt: Das Bild liegt als fertiges PROGMEM-Array vor – jetzt müssen wir es nur noch im Sketch einbinden.

Damit du direkt loslegen kannst, stelle ich dir ein vollständiges Arduino-Beispielprojekt zum Download bereit. Lade das Projekt in die Arduino IDE, ersetze die beiliegende bild.h einfach durch deine eigene Datei – und schon kann das Bild auf dem Display des Arduino Nesso N1 angezeigt werden.

Programm zum Anzeigen eines Bildes auf dem Arduino Nesso N1 - einfach mit PROGMEMHerunterladen

Das bedeutet:

- Beispielsketch herunterladen - bild.h gegen dein eigenes Bild austauschen - Sketch kompilieren - Auf den Nesso N1 hochladen - Bild erscheint direkt beim Start auf dem Display

Im nächsten Schritt schauen wir uns den Beispielcode genauer an und ich erkläre dir Zeile für Zeile, wie das Bild auf das Display gelangt.

/******************************************************* * Arduino Nesso N1 – Bildanzeige aus PROGMEM * --------------------------------------------------- * Dieses Beispiel zeigt, wie ein JPG-Bild direkt aus * dem Flash-Speicher (PROGMEM) geladen und auf dem * Display des Arduino Nesso N1 dargestellt wird. * * Das Bild befindet sich in der Datei "bild.h" und * wurde zuvor über ein C-Array-Konvertierungstool * (z. B. FileToCArray) erzeugt. * * Autor: Stefan Draeger * Blogbeitrag: * https://draeger-it.blog/arduino-nesso-n1-so-einfach-zeigst-du-eigene-bilder-auf-dem-display-an/ * * Hardware: * - Arduino Nesso N1 (ESP32-C6) * - Integriertes 240×135 SPI-Display (ST7789) * * Benötigte Libraries: * - M5GFX (Displaytreiber) * * Dieses Beispiel zeigt nur ein statisches Standbild. * Animationen oder das Laden aus dem Dateisystem * werden in einem separaten Beitrag behandelt. *******************************************************/ #include #include #include "bild.h" // enthält: const uint8_t jpg PROGMEM M5GFX display; // Display-Objekt des Nesso N1 void setup() { display.begin(); // Display initialisieren display.setRotation(1); // Dreht das Display ins Querformat // 0 = Hochformat, 1 = Querformat, 2/3 = invertiert display.fillScreen(TFT_BLACK); // Hintergrund löschen, damit kein Artefakt sichtbar ist // JPG direkt aus PROGMEM anzeigen // Parameter: // 1) jpg -> Byte-Array aus bild.h // 2) sizeof(jpg) -> Bildgröße in Bytes // 3) X-Position -> 0 // 4) Y-Position -> 0 display.drawJpg(jpg, sizeof(jpg), 0, 0); } void loop() { // Keine Aktion notwendig – das Bild bleibt stehen }

Das Array in eine eigene Datei auszulagern hat mehrere Vorteile. Zum einen bleibt dein eigentlicher Arduino-Sketch deutlich übersichtlicher, weil die langen Byte-Arrays nicht mehr direkt im Code stehen. Gerade bei Bildern können diese schnell mehrere tausend Zeilen einnehmen und würden den Programmcode unlesbar machen.

Zum anderen bietet dir dieser Ansatz maximale Flexibilität: Wenn du später mehrere Bilder nacheinander anzeigen möchtest – etwa für eine Slideshow oder für ein Menü –, musst du nicht jedes Mal den Sketch anpassen. Du legst einfach weitere Dateien wie bild2.h, bild3.h usw. an und bindest sie bei Bedarf ein. Der Code selbst bleibt schlank, klar strukturiert und leicht erweiterbar.

Wie der ESP32-C6 Bilder speichert: Flash vs. RAM einfach erklärt

Nachdem wir nun erfolgreich ein erstes Bild auf dem Display anzeigen können, lohnt sich ein kurzer Blick darauf, wo die Bilddaten eigentlich gespeichert werden – und warum das entscheidend für die Stabilität deines Programms ist.

Der Arduino Nesso N1 verfügt über 520 KB SRAM, von denen jedoch nur etwa 320 KB als „dynamischer Speicher“ für Variablen zur Verfügung stehen. Der Rest wird vom System selbst benötigt (WiFi-Stack, Buffer, RTOS usw.). Umso wichtiger ist es, große Datenmengen – wie Bilddateien – nicht im RAM, sondern im Flash-Speicher abzulegen.

Auf dem ESP32-C6 funktioniert das ganz einfach:

- const uint8_t bild = {...}; → Array wird automatisch im Flash gespeichert (ideal für Bilder) - uint8_t bild = {...}; → Array landet im RAM und verbraucht dort sehr viel Speicher

Das Schlüsselwort PROGMEM wird zwar unterstützt, ist auf diesem Mikrocontroller aber nicht entscheidend. Der eigentliche Unterschied entsteht durch const.

Ein kurzer Vergleich zeigt das deutlich:

Bild im Flash (mit const) - Globale Variablen: 18.200 Bytes - RAM bleibt fast komplett frei Der Sketch verwendet 591870 Bytes (45%) des Programmspeicherplatzes. Das Maximum sind 1310720 Bytes. Globale Variablen verwenden 18200 Bytes (5%) des dynamischen Speichers, 309480 Bytes für lokale Variablen verbleiben. Das Maximum sind 327680 Bytes. Bild im RAM (ohne const) - Globale Variablen: 165.744 Bytes - RAM fast zur Hälfte belegt Der Sketch verwendet 592642 Bytes (45%) des Programmspeicherplatzes. Das Maximum sind 1310720 Bytes. Globale Variablen verwenden 165744 Bytes (50%) des dynamischen Speichers, 161936 Bytes für lokale Variablen verbleiben. Das Maximum sind 327680 Bytes.

Der Unterschied ist enorm. Gerade bei mehreren Bildern wäre der RAM sehr schnell erschöpft – und das Programm würde instabil laufen oder gar nicht mehr starten.

Darum gilt:

- Bilder immer als const-Arrays definieren. - Sie landen dann automatisch im Flash und belasten den RAM nicht.

Dieser Punkt ist wichtig, bevor wir im nächsten Beispiel mehrere Bilder einbinden und per Tastendruck durchblättern. Genau dort zeigt sich der Vorteil besonders deutlich.

Arduino Nesso N1 Bilder per Tastendruck wechseln (JPG/PNG/BMP)

Nachdem wir ein einzelnes Bild erfolgreich anzeigen konnten, wollen wir nun einen Schritt weitergehen und die Bilder aktiv steuern. Dafür habe ich ein kleines Beispielprogramm geschrieben, das gleich drei verschiedene Bildformate unterstützt:

- JPG - PNG - BMP (Bitmap)

Alle Bilder liegen wie zuvor in separaten Header-Dateien (bild1.h, bild2.h, bild3.h). Mit den beiden Hardware-Tasten am Arduino Nesso N1 können wir dann ganz einfach vor- und zurückblättern:

- KEY1 / BtnA (grüne Taste) → nächstes Bild - KEY2 / BtnB (obere Taste) → vorheriges Bild

Damit verhält sich das Display wie eine kleine, interaktive Bildergalerie. Der Vorteil: Du kannst jedes beliebige Bildformat testen und sofort sehen, wie es auf dem Display dargestellt wird.

Das Grundprinzip ist schnell erklärt:

- Beim Start wird das erste Bild geladen. - In der loop()-Funktion prüfen wir, ob eine der beiden Tasten gedrückt wurde. - Je nach Tasteneingabe erhöhen oder verringern wir einen Zähler (counter). - Anschließend wird das passende Bild über drawJpg(), drawPng() oder drawBmp() neu geladen. Arduino Nesso N1 - Bildwechsel mit Tasten

Auf diese Weise bleibt das Programm sehr kompakt, aber extrem flexibel. Du kannst beliebig viele weitere Bilder ergänzen – jeweils in einer eigenen Header-Datei – und die Navigation bleibt identisch.

Programm: Anzeigen von verschiedenen Bilder auf dem Arduino Nesso N1, wechsel mit den TastenHerunterladen

Im folgenden Codeblock findest du das vollständige Beispiel (die Dateien mit den Bildern oben in der ZIP-Datei zum Download) :

/** * Titel: Arduino Nesso N1 – Bilder per Tastendruck durchblättern * * Beschreibung: * Dieses Beispiel zeigt, wie du auf dem Arduino Nesso N1 (M5Stack Nesso, ESP32-C6) * mehrere Bilder auf dem Display anzeigen und mit den Hardware-Tasten KEY1 (BtnA) * und KEY2 (BtnB) vor- und zurückblättern kannst. * * Verwendet werden drei Bildformate: * - JPG (bild1.h, Array: jpg) * - PNG (bild2.h, Array: png) * - Bitmap/BMP (bild3.h, Array: bmp) * * Autor: Stefan Draeger * Blogbeitrag: https://draeger-it.blog/arduino-nesso-n1-so-einfach-zeigst-du-eigene-bilder-auf-dem-display-an/ */ #include #include // Bilddaten auslagern, damit der Sketch übersichtlich bleibt #include "bild1.h" // Bild als JPG → Array: jpg #include "bild2.h" // Bild als PNG → Array: png #include "bild3.h" // Bild als Bitmap/BMP → Array: bmp // Anzahl der verfügbaren Bilder const int NUM_BILDER = 3; // Zähler, welches Bild aktuell angezeigt wird (1-basiert) int counter = 1; void setup() { // Konfiguration für das M5-Framework holen auto cfg = M5.config(); cfg.clear_display = true; // Display beim Start automatisch löschen // Initialisiert Display, Taster, ggf. Touch, I2C-Expander usw. M5.begin(cfg); // Display in Landscape-Ausrichtung (quer) setzen M5.Display.setRotation(1); // Startbild anzeigen (JPG aus bild1.h) M5.Display.drawJpg(jpg, sizeof(jpg), 0, 0); } void loop() { // Zustände von Tasten, Touch etc. aktualisieren M5.update(); bool btnPress = false; // Merker, ob eine der Tasten gedrückt wurde // KEY1 (Button A) gedrückt → zur nächsten Bildposition wechseln if (M5.BtnA.wasPressed()) { btnPress = true; if (counter 1) { btnPress = true; counter--; } } // Nur neu zeichnen, wenn tatsächlich eine Taste gedrückt wurde if (btnPress) { // Bildschirm leeren (schwarz füllen) M5.Display.fillScreen(TFT_BLACK); // Sicherheitshalber wieder Landscape setzen M5.Display.setRotation(1); // Bild je nach Zählerstand auswählen und anzeigen switch (counter) { case 1: // JPG aus bild1.h M5.Display.drawJpg(jpg, sizeof(jpg), 0, 0); break; case 2: // PNG aus bild2.h M5.Display.drawPng(png, sizeof(png), 0, 0); break; case 3: // Bitmap/BMP aus bild3.h M5.Display.drawBmp(bmp, sizeof(bmp), 0, 0); break; } } // Kleine Entlastung für die CPU (optional) delay(10); }

Bonus: Bild mit zufälligem Block-Effekt einblenden

Nachdem wir nun wissen, wie sich ein Bild ganz normal auf dem Display des Arduino Nesso N1 darstellen lässt, wollen wir das Ganze etwas aufpeppen. Statt das Bild direkt komplett zu zeichnen, kann man einen kleinen visuellen Effekt einbauen, der das Bild in zufälligen Segmenten erscheinen lässt – ähnlich wie ein „Puzzle“, das sich nach und nach zusammensetzt.

Arduino Nesso N1 - Reveal Effekt Wie funktioniert der Effekt? - Das Display wird in ein Raster aus kleinen Kacheln eingeteilt – in unserem Beispiel 8 Spalten × 5 Zeilen, also insgesamt 40 Blöcke. - Diese Kacheln werden anschließend in zufälliger Reihenfolge freigegeben. Dazu nutzen wir den bekannten Fisher-Yates-Shuffle, der alle Blöcke gleich wahrscheinlich mischt. - Für jeden Block setzen wir eine sogenannte Clip-Region: Das bedeutet, dass das Bild nur innerhalb dieses kleinen Rechtecks sichtbar ist. - Anschließend wird immer wieder das komplette Bild gezeichnet – aber durch die Clip-Region erscheint jedes Mal nur der aktuelle Block.

So entsteht ein dynamischer „Reveal“-Effekt, bei dem das Bild nach und nach sichtbar wird – jedes Mal anders, weil die Reihenfolge zufällig bestimmt wird.

Der vollständige Beispielcode sieht so aus:

In diesem Beitrag zeige ich dir, wie du auf dem Arduino Nesso N1 ein eigenes Touch-Zahlenfeld mit PIN-Abfrage programmierst. Das kleine Projekt ist nicht nur ein idealer Einstieg in die Touch-Programmierung auf dem Nesso N1, sondern lässt sich später auch extrem flexibel erweitern – etwa um Bluetooth-, WiFi- oder sogar LoRa-Funktionen, um damit Geräte oder Aktionen sicher freizuschalten.

https://youtu.be/tbEPFW9wgGg

Im ersten Teil konzentrieren wir uns auf die Grundlagen:

- Wie funktioniert das Touch-Display des Nesso N1? - Wie zeichnen wir ein Zahlenfeld (0–9)? - Wie wird eine PIN eingegeben, überprüft und visuell dargestellt? - Und wie nutzen wir die beiden Hardware-Tasten sinnvoll für „Bestätigen“ und „Löschen“?

Damit legen wir die Basis für spätere, anspruchsvollere Projekte wie Zugangssysteme, Menüoberflächen, Einstellungsseiten oder Authentifizierungsfunktionen über Funk.

Los geht’s mit der Touch-UI auf dem Arduino Nesso N1!

Materialliste

Für dieses Projekt brauchst du erfreulich wenig Hardware – der Arduino Nesso N1 bringt bereits alles mit, was wir benötigen: Touch-Display, zwei Taster, Buzzer und ausreichend Rechenleistung. Lediglich für die Bedienung gibt es einen kleinen Komforttipp.

- Arduino Nesso N1 Der Mikrocontroller enthält bereits das 1,14″ Touch-Display, die Taster sowie alle benötigten Schnittstellen. - USB-C Kabel* Zum Programmieren und zur Stromversorgung. - Eingabestift für Touch-Displays* Das 1,14″ Touch-Display ist relativ klein. Mit dem Finger funktioniert die Eingabe zwar, ist aber etwas fummelig – ein kleiner Eingabestift macht die Bedienung deutlich präziser.

Arduino Nesso N1 - Datenkabel und Touch-Pen

Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!

Das 1,14" Touch-Display des Arduino Nesso N1 verstehen

Bevor wir in die Programmierung einsteigen, lohnt sich ein kurzer Blick auf das integrierte Display des Arduino Nesso N1. Der kleine Mikrocontroller bringt ein 1,14″ IPS-Farbdisplay mit einer Auflösung von 135 × 240 Pixel mit – scharf, farbstark und überraschend schnell. Das Highlight: Das Display ist berührungsempfindlich (Touch) und reagiert sehr präzise, auch bei kleinen UI-Elementen wie Tasten oder Zahlenfeldern.

Damit eignet sich der Nesso N1 perfekt für:

- kleine Benutzeroberflächen - interaktive Menüs - PIN-Eingaben - Mini-Dashboards - Icons, Animationen oder Statusanzeigen

Gerade für kompakte Projekte ist ein integrierter Touchscreen ein echter Vorteil – man spart Bauteile, Kabel und Platz.

Die Touch-Funktion im Überblick

Die Touch-Abfrage ist beim Nesso N1 extrem einfach gehalten:

- Jede Berührung liefert X- und Y-Koordinaten zurück - Die Auflösung reicht aus, um präzise UI-Elemente zu platzieren - Mit der Display-Bibliothek M5GFX lässt sich Touch direkt auslesen - Das gesamte Display fungiert als Touchfläche – keine „Buttons“ im klassischen Sinn

Der Workflow sieht so aus:

- Touch prüfen → display.getTouch(&tp) - Koordinaten auslesen → tp.x & tp.y - Auf Basis dieser Koordinaten entscheiden, welcher Button gedrückt wurde

Du kannst damit interaktive Flächen komplett frei definieren – egal ob Tasten, Felder, Slider oder Zeichenbereiche.

Arduino Nesso N1 - Touch-Beispiel #include M5GFX display; void setup() { display.begin(); display.setRotation(1); // Set to landscape mode display.fillScreen(TFT_BLACK); // Set text properties that will be used for all text in this sketch display.setTextDatum(MC_DATUM); // Middle-Center datum for text alignment display.setTextColor(TFT_WHITE); display.setTextSize(2); // Display the initial message centered on the screen display.drawString("Touch the screen", display.width() / 2, display.height() / 2); } void loop() { // Create a structure to hold touch data lgfx::touch_point_t tp; // Check if the screen is being touched if (display.getTouch(&tp)) { // Clear the screen to update both the circle and the text display.fillScreen(TFT_BLACK); // Draw a white circle at the current touch coordinates display.fillCircle(tp.x, tp.y, 5, TFT_WHITE); // Create a string with the updated coordinates String coords = "X:" + String(tp.x) + " Y:" + String(tp.y); // Draw the coordinates string at the FIXED center of the screen display.drawString(coords, display.width() / 2, display.height() / 2); } delay(20); // Small delay for responsiveness }

Das obigte Beispiel habe ich aus der offiziellen technischen Dokumentation zum Arduino Nesso N1 entnommen.

Aufbau des Quellcodes für die PIN-Abfrage

Bevor wir uns den kompletten Sketch anschauen, lohnt es sich, den Aufbau Schritt für Schritt zu verstehen. Die PIN-Abfrage besteht im Kern aus vier Bausteinen:

- Globale Variablen & Einstellungen - Zeichnen der Benutzeroberfläche (Tasten & Eingabefeld) - Verarbeiten der Touch-Eingaben - Prüfen des PIN-Codes

Dadurch bleibt der Code übersichtlich, gut erweiterbar und auch für Einsteiger gut nachvollziehbar.

Arduino Nesso N1 - PIN-Feld Programm -. PIN-Abfrage über TouchDisplay am Arduino Nesso N1Herunterladen Quellcode - PIN-Abfrage am Arduino Nesso N1 /************************************************************ * Projekt: Touch-Zahlenfeld & PIN-Abfrage auf dem Arduino Nesso N1 * * Beschreibung: * Dieses Programm zeigt auf dem 1,14" Display des Arduino Nesso N1 * ein Zahlenfeld von 0 bis 9 (in zwei Reihen) sowie ein Eingabefeld * und einen OK-Button an. Der Benutzer kann per Touch einen * vierstelligen PIN eingeben. Nach Drücken von "OK" wird der PIN * mit einem vordefinierten Code verglichen. * * - Bei korrektem PIN: Ausgabe "Zugang erlaubt" + akustisches Signal * - Bei falschem PIN: Ausgabe "Falscher PIN" + anderes Signal * * Der Code ist bewusst möglichst einfach gehalten und eignet sich * sehr gut als Einstieg in die Touch-Programmierung mit M5GFX * auf dem Arduino Nesso N1. * * Hardware: * - Arduino Nesso N1 * - Integriertes 1,14" IPS-Touchdisplay * - Integrierter Buzzer (BEEP_PIN muss zum Board passen) * * Weitere Infos & Tutorial: * https://draeger-it.blog/arduino-nesso-n1-tutorial-touch-zahlenfeld-pin-abfrage/ * * Autor: * Stefan Draeger (draeger-it.blog) ************************************************************/ #include // Display- und Touch-Bibliothek für den Nesso N1 M5GFX display; // Display-Objekt für alle Zeichen- und Touch-Operationen // PIN, den wir abfragen wollen (hier: 1234) // Dieser Code kann nach Belieben angepasst werden. const char CORRECT_PIN = "1234"; // Hier speichern wir die Eingabe des Benutzers. // Maximale Länge: 4 Stellen + Terminator ('�') = 5 Zeichen. char enteredPin = ""; int pinLen = 0; // Anzahl aktuell eingegebener Stellen // Bildschirmgröße im Querformat (Rotation 1) // Beim Nesso N1: 240 x 135 Pixel (Breite x Höhe) const int SCREEN_W = 240; const int SCREEN_H = 135; /************************************************************ * Funktion: drawScreen() * Aufgabe: * Zeichnet die komplette Benutzeroberfläche neu: * - Zahlen-Tasten 0–9 (oben und mittig) * - Eingabefeld für den PIN * - OK-Button unten rechts ************************************************************/ void drawScreen() { // Gesamten Bildschirm mit Schwarz füllen display.fillScreen(TFT_BLACK); // Textfarbe und Hintergrundfarbe für allgemeine Texte setzen display.setTextColor(TFT_WHITE, TFT_BLACK); // Breite und Höhe der Ziffern-Tasten berechnen int buttonWidth = SCREEN_W / 5; // 240 / 5 = 48 Pixel pro Taste int buttonHeight = 35; // Höhe einer Taste // Schriftgröße für die Zahlen display.setTextSize(2); // Erste Reihe: Zahlen 0–4 int y1 = 15; // Y-Position der oberen Tastenreihe for (int i = 0; i < 5; i++) { int x = i * buttonWidth; // X-Position der linken oberen Ecke der Zelle // Rechteck für die Taste zeichnen display.drawRect(x + 2, y1, buttonWidth - 4, buttonHeight, TFT_DARKGREY); // Textausrichtung: Mittelpunkt der Taste display.setTextDatum(MC_DATUM); // Ziffer (0–4) auf der Taste zeichnen display.drawString(String(i), x + buttonWidth / 2, y1 + buttonHeight / 2); } // Zweite Reihe: Zahlen 5–9 int y2 = 15 + buttonHeight + 10; // Y-Position der unteren Tastenreihe for (int i = 0; i Tonfolge für "korrekter PIN" * ok == false -> Tonfolge für "falscher PIN" ************************************************************/ void beep(bool ok) { // Mehrfach kurzer Ton in Folge for (int i = 0; i = 4) { return; } // Ziffer in das PIN-Array eintragen: // '0' + digit wandelt z.B. 3 -> '3' enteredPin = '0' + digit; pinLen++; // String am Ende terminieren enteredPin = '�'; // Nur das Eingabefeld neu zeichnen (nicht den ganzen Screen) display.setTextDatum(ML_DATUM); display.setTextColor(TFT_CYAN, TFT_BLACK); // Eingabefeldbereich löschen display.fillRect(11, SCREEN_H - 34, 118, 23, TFT_BLACK); // Aktuellen PIN anzeigen display.drawString(String(enteredPin), 15, SCREEN_H - 23); } /************************************************************ * Funktion: setup() * Aufgabe: * Initialisierung von Display und erster Bildaufbau. ************************************************************/ void setup() { display.begin(); // Display initialisieren display.setRotation(1); // Querformat einstellen drawScreen(); // Benutzeroberfläche zeichnen } /************************************************************ * Funktion: loop() * Aufgabe: * - Touch-Eingaben auswerten * - Zahlenfelder und OK-Button auf Berührung prüfen * - Bei Bedarf PIN ergänzen oder Prüfung auslösen ************************************************************/ void loop() { lgfx::touch_point_t tp; // Struktur für Touch-Daten // Prüfen, ob der Bildschirm berührt wird if (display.getTouch(&tp)) { int x = tp.x; // X-Koordinate der Berührung int y = tp.y; // Y-Koordinate der Berührung int buttonWidth = SCREEN_W / 5; int buttonHeight = 40; // OK-Button-Koordinaten berechnen (müssen zur Zeichnung passen) int okW = 60; int okH = 25; int okX = SCREEN_W - okW - 10; int okY = SCREEN_H - okH - 10; // 1) Prüfen, ob der OK-Button berührt wurde if (x >= okX && x = okY && y = 30 && y = 0 && col = y2 && y = 0 && col = 4) { return; // maximal 4 Stellen } enteredPin = '0' + digit; pinLen++; enteredPin = '�'; // Nur das Eingabefeld neu zeichnen display.setTextDatum(ML_DATUM); display.setTextColor(TFT_CYAN, TFT_BLACK); display.fillRect(11, SCREEN_H - 34, 118, 23, TFT_BLACK); // Feld leeren display.drawString(String(enteredPin), 15, SCREEN_H - 23); } - resetPin() setzt die Eingabe zurück - addDigit() fügt eine neue Ziffer hinzu, solange noch Platz ist

Dadurch bleibt das loop() später sehr aufgeräumt: Statt dort direkt Zeichenketten zu manipulieren, rufen wir nur addDigit() auf.

4. Die Touch-Auswertung: Welche Taste wurde gedrückt?

Im loop() passiert das eigentliche „Magie“-Stück: Wir fragen den Touchscreen ab und entscheiden anhand der Koordinaten, welche Taste getroffen wurde.

Nachdem der Arduino UNO Q schon ein echtes Highlight war und gezeigt hat, wie modern Microcontroller heute sein können, legt Arduino nun mit dem Nesso N1 noch einmal deutlich nach. Zum ersten Mal präsentiert Arduino einen kompakten Mikrocontroller im vollwertigen Gehäuse, der nicht nur schick aussieht, sondern auch technisch beeindruckt.

Der Nesso N1 kombiniert ein robustes, alltagstaugliches Case, moderne Anschlüsse und eine Leistung, die wir bisher nur von den größeren Arduino-Boards kannten. Damit rückt Arduino erstmals in einen Bereich vor, der sonst von ESP32-Modellen dominiert wurde – nur eben mit echter Arduino-Qualität, Langzeitunterstützung und einem professionellen Ökosystem.

https://youtu.be/ZpVmVvukMNQ

Egal ob IoT-Projekte, Automationen, Sensorik oder smarte Geräte: Der Arduino Nesso N1 bringt genug Power, um anspruchsvolle Aufgaben zuverlässig zu meistern – und das alles im Hosentaschenformat.

Hinweis in eigener Sache: Den Arduino Nesso N1 habe ich mir komplett selbst gekauft. Dieses Review ist also nicht gesponsert und spiegelt meine persönliche, unabhängige Meinung wider.

Technische Daten des Arduino Nesso N1

Bevor wir in die Praxis einsteigen, lohnt sich ein Blick auf die technischen Daten des Arduino Nesso N1. Auf dem Papier zeigt sich bereits, dass Arduino hier einiges an moderner Hardware in ein sehr kompaktes Gehäuse gepackt hat. Besonders spannend sind die vielfältigen Funkstandards und die Kombination aus Display, Sensoren und Erweiterungsschnittstellen – ideal für IoT- und Portable-Projekte.

KategorieDetailsMikrocontrollerESP32-C6 (32-Bit RISC-V, bis 160 MHz)Arbeitsspeicher512 kB SRAMFlash-Speicher16 MB externes NOR-FlashDisplay1,14″ IPS Touch-LCD, 135×240 px, 262k FarbenFunktechnologienWiFi 6 (2,4 GHz), Bluetooth 5.3, Thread/Zigbee (802.15.4), LoRa (850–960 MHz, SX1262)Sensorik6-Achsen IMU (Beschleunigung + Gyroskop)Audio/IRBuzzer, IR-TransmitterAnschlüsseUSB-C, Grove-Port, Qwiic-Schnittstelle, M5StickC-HAT-HeaderBedienelemente2 programmierbare Tasten, Power/Boot-Button, Status-LEDStromversorgung5 V über USB-C, integrierter LiPo-Akku (ca. 250 mAh)Abmessungen48 × 24 × 14 mm (ohne Antenne), 48 × 24 × 21,1 mm (mit Antenne)BesonderheitenKompaktes Gehäuse, LoRa integriert, Touch-Display, Arduino-Ökosystem Arduino Nesso N1 im Detail

Schauen wir uns den Arduino Nesso N1 einmal genauer an. Direkt fällt auf, dass hier einige praktische Schnittstellen verbaut wurden – darunter Grove und Qwiic – sowie zwei frei programmierbare Taster. Insgesamt wirkt alles kompakt, funktional und durchdacht aufgebaut.

Aufbau - Arduino Nesso N1

Im offiziellen PDF-Dokument zum Arduino Nesso N1 findest du noch weitere Details!

Programmierung & erster Start

Nach dem ersten Blick auf das Gerät wird es Zeit, den Arduino Nesso N1 in Betrieb zu nehmen. Die gute Nachricht: Die Einrichtung funktioniert – typisch Arduino – erstaunlich einfach. Bereits nach wenigen Minuten lässt sich das Board in der Arduino IDE ansprechen und erste Programme können hochgeladen werden. In diesem Abschnitt zeige ich dir Schritt für Schritt, wie der Einstieg funktioniert und was du beim Nesso N1 beachten musst.

Sobald du den kleinen Mikrocontroller mit dem PC verbunden hast, wird dieser als Serielles USB-Gerät erkannt.

Den Arduino Nesso N1 kannst du in diversen Entwicklungsumgebungen programmieren, zbsp. auch in der klassischen Arduino IDE.

Damit das Board ausgewählt werden kann, muss der Boardtreiber von Espressif Systems mindestens auf die Version 3.3.4 aktualisiert werden.

Nach dem Update kannst du nun über Werkzeuge > Board: xyz > esp32 > Arduino Nesso N1 auswählen.

Arduino IDE - Boardtreiber für den Arduino Nesso N1 Hinweis: Probleme bei unzureichender USB-Stromversorgung

Während meiner Tests ist mir ein Punkt aufgefallen, den man unbedingt erwähnen sollte: Wird der Arduino Nesso N1 an einen USB-Port angeschlossen, der nicht genügend Leistung bereitstellt – etwa bei einer passiven Dockingstation oder sehr alten USB-Ports unterhalb von USB 2.0 –, kann es zu unerwarteten Fehlermeldungen kommen.

In meinem Fall erschien beim Upload der Sketches folgende Meldung:

„A serial exception error occurred: ClearCommError failed (PermissionError(13, 'Das Gerät erkennt den Befehl nicht.', None, 22))“

Nach etwas Fehlersuche stellte sich heraus, dass der Nesso N1 schlicht nicht genug Strom bekam, um korrekt zu initialisieren. Die Lösung war überraschend einfach:

- ein aktiver USB-Hub, oder - ein USB-Typ C Port vom PC

danach funktionierte der Upload sofort wieder problemlos.

Dieser kleine Hinweis kann viel Frust ersparen – vor allem, wenn man den Fehler zuerst bei der IDE oder den Treibern vermutet.

„Hallo Welt!“ auf dem Nesso N1

Starten wir mit dem Klassiker unter allen ersten Projekten: „Hallo Welt!“. Der Arduino Nesso N1 verfügt über ein kompaktes 1,4″ IPS-Farbdisplay, das sich ideal dafür eignet, sofort sichtbare Ergebnisse zu erzeugen. Statt wie üblich eine LED blinken zu lassen, geben wir unseren Text direkt auf dem integrierten Display aus.

Logo auf dem 1,4 Zoll IPS Display des Arduino Nesso N1

Das ist ein perfekter Einstieg, denn du bekommst sofort ein Gefühl dafür, wie schnell das Display reagiert, wie scharf die Schrift wirkt und wie einfach die ersten Schritte beim Programmieren des Boards sind. Schon mit wenigen Zeilen Code lässt sich der erste Text anzeigen – und genau das schauen wir uns jetzt an.

Damit wir das Display überhaupt ansteuern können, benötigen wir zuerst eine passende Bibliothek. Im offiziellen Tutorialbereich von Arduino zum Nesso N1 findet sich ein Beispiel, das auf M5GFX basiert – die gleiche Grafikbibliothek, die auch bei vielen M5Stack-Geräten zum Einsatz kommt.

Spätestens an dieser Stelle wird deutlich, dass hier sehr viel M5Stack-Technik unter der Haube steckt. Das erklärt auch, warum sich der Nesso N1 in der Bedienung und Struktur so vertraut anfühlt, wenn man bereits mit einem M5StickC oder ähnlichen M5-Geräten gearbeitet hat.

Arduino IDE - Bibliotheksverwalter - install M5GFX

Der große Vorteil: Viele Funktionen des Nesso N1 sind bereits im Boardtreiber vordefiniert. Dadurch bleibt der eigentliche Sketch extrem schlank, weil wir kaum noch Hardware-Initialisierung selbst übernehmen müssen. Dieses Prinzip kennen wir bereits von den Arduino Modulinos, die ebenfalls nur ihren spezifischen Treiber benötigen – und sofort einsatzbereit sind.

Gerade die I2C-Kommunikation spielt hier eine entscheidende Rolle: Die entsprechenden Pins und Adressen sind fest zugeordnet und werden automatisch korrekt angesprochen. Das macht die Programmierung besonders einsteigerfreundlich und reduziert typische Fehlerquellen.

Arduino Nesso N1 - Example 1 - HalloWelt //einbinden der Bibliothek zum ansteuern des Displays am Arduino Nesso N1 //(ohne Touch Funktion!) #include //Objektinstanz generieren M5GFX display; void setup() { //starten der Kommunikation mit dem Display display.begin(); //drehen des Displays - siehe https://docs.m5stack.com/en/arduino/m5gfx/m5gfx_sprite#setrotation //0-3 im Uhrzeigersinn, 4-7 gegen den Uhrzeigersinn display.setRotation(1); //Ausrichtung des Textes festlegen - siehe https://docs.m5stack.com/en/arduino/m5gfx/m5gfx_appendix#enum-textdatum_t display.setTextDatum(middle_center); //setzen der Textfarbe Weiß und Hintergrundfarbe Schwarz - weitere Konstanten für Farbe siehe enum.hpp //klick mit Strg+ Maustaste Links auf TFT_WHITE display.setTextColor(TFT_WHITE, TFT_BLACK); //größe der Schrift display.setTextSize(2); //Display löschen und mit der Farbe Schwarz füllen display.clearDisplay(TFT_BLACK) //schreiben des Textes "Hallo Welt!" in der Mitte des Displays display.drawString("Hallo Welt!", display.width() / 2, display.height() / 2); } void loop() { // bleibt leer }

Im Code finden wir eine Stelle, die auf den ersten Blick etwas verwirrend wirken kann: Zum einen legen wir mit display.setTextDatum() die Ausrichtung des Textes fest, und zum anderen geben wir beim Zeichnen des Textes dennoch eine Koordinate an:

display.drawString("Hallo Welt!", display.width() / 2, display.height() / 2);

Auflösung: setTextDatum() bestimmt ausschließlich, wie sich der Text innerhalb seines eigenen Textbereichs ausrichtet – also z. B. linksbündig, rechtsbündig oder zentriert. Die Koordinaten bei drawString() brauchen wir trotzdem, denn sie geben an, wo auf dem Display dieser Textblock positioniert werden soll.

Mini-Projekt: Digitale Wasserwaage mit dem IMU-Sensor

Eine der spannendsten Funktionen des Arduino Nesso N1 ist die integrierte 6-Achsen IMU. Damit lassen sich Bewegungen, Neigungen und Ausrichtungen präzise erfassen. Als kleines Praxisbeispiel habe ich eine digitale Wasserwaage programmiert.

Die Idee ist simpel: Ein kleiner Kreis wird auf dem Display dargestellt und bewegt sich nach links oder rechts, je nachdem, wie stark das Gerät geneigt wird. Zusätzlich wird der aktuelle Winkel in Grad angezeigt.

Arduino Nesso N1 - Beispiel - digitale Wasserwaage

Das Projekt ist super kompakt, zeigt aber sofort, wie präzise der IMU-Sensor arbeitet – und wie einfach sich eigene kleine Tools auf dem Nesso N1 umsetzen lassen.

Für unser kleines Wasserwaagen-Projekt benötigen wir zusätzlich zur Display-Bibliothek noch eine passende Library für den integrierten 6-Achsen-Lagesensor (IMU). Auch diese lässt sich bequem über den Bibliotheksverwalter der Arduino IDE installieren. Suche dort einfach nach Arduino_BMI270_BMM150 und klicke auf „Installieren“ – schon steht der Sensor für unser Projekt zur Verfügung.

Arduino IDE - Arduino Nesso N1 IMU Bibliothek /******************************************************* * Projekt: Digitale Wasserwaage auf dem Arduino Nesso N1 * Beschreibung: * Dieses Beispiel nutzt die eingebaute IMU (BMI270), * um die Neigung des Geräts zu ermitteln und eine * digitale Wasserwaage mit Libelle und Winkelanzeige * auf dem 1,4" IPS-Display darzustellen. * * Autor: Stefan Draeger * Webseite: https://draeger-it.blog * Blogartikel: https://draeger-it.blog/arduino-nesso-n1-review/ * * Hinweise: * - Für dieses Beispiel müssen die Bibliotheken * "Arduino_BMI270_BMM150" und "M5GFX" installiert sein. * - Der Code mittelt 20 Messwerte, um das Rauschen des * Sensors zu reduzieren und eine stabile Anzeige zu erzeugen. *******************************************************/ #include // IMU (6-Achsen Lagesensor) #include // Display-Bibliothek für das IPS-Panel M5GFX display; // Displayobjekt erzeugen float lastAngle = NAN; // zuletzt angezeigter Winkel (zum Vergleich) /** * Setup: Initialisierung von Serieller Ausgabe, IMU und Display */ void setup() { Serial.begin(115200); while (!Serial) ; // Warten, bis die serielle Verbindung steht Serial.println("Initializing IMU..."); if (!IMU.begin()) { Serial.println("Failed to initialize IMU!"); while (1) ; // Abbruch, wenn die IMU nicht gestartet werden kann } display.begin(); // Display starten display.setRotation(1); // Displayausrichtung (1 = Querformat) display.fillScreen(TFT_BLACK); // Startbildschirm löschen } /** * Funktion zum Zeichnen der Winkelanzeige oben am Display */ void drawAngle(float angle) { display.setTextDatum(baseline_left); display.setTextColor(TFT_WHITE, TFT_BLACK); display.setTextSize(2); // Text in einen Buffer schreiben char buf; snprintf(buf, sizeof(buf), "Winkel: %.1f Grad", angle); // Textbereich löschen display.fillRect(0, 0, display.width(), 30, TFT_BLACK); // Text ausgeben display.drawString(buf, 10, 20); } /** * Funktion zum Zeichnen der "Libelle" (Blase) * Die Blase bewegt sich basierend auf dem gemessenen Winkel */ void drawSpiritLevel(float angle) { const float maxAngle = 30.0; // maximaler Darstellbereich der Blase // Winkel auf den Darstellbereich begrenzen if (angle > maxAngle) angle = maxAngle; if (angle < -maxAngle) angle = -maxAngle; int centerX = display.width() / 2; int centerY = display.height() / 2 + 20; int bubbleRadius = 10; // maximale Verschiebung abhängig vom Display int maxOffsetX = (display.width() / 2) - bubbleRadius - 5; // Umrechnung von Winkel auf Pixel-Position int offsetX = (int)((angle / maxAngle) * maxOffsetX); int bubbleX = centerX + offsetX; // Bereich löschen, in dem die Blase angezeigt wird display.fillRect(0, centerY - 20, display.width(), 40, TFT_BLACK); // Referenzlinie zeichnen (horizontale Linie) display.drawLine(10, centerY, display.width() - 10, centerY, TFT_DARKGREY); // Blase zeichnen display.fillCircle(bubbleX, centerY, bubbleRadius, TFT_GREENYELLOW); display.drawCircle(bubbleX, centerY, bubbleRadius, TFT_WHITE); } /** * Hauptprogramm (Loop) * - 20 IMU-Messungen durchführen * - Mittelwert bilden (Rauschen reduzieren) * - Winkel berechnen * - Anzeige nur aktualisieren, wenn sich der Winkel sichtbar geändert hat */ void loop() { const int samples = 20; // Anzahl der IMU-Messungen float sumAx = 0.0, sumAz = 0.0; int validSamples = 0; // 20 Messungen sammeln for (int i = 0; i = threshold) { Serial.print("avgAx: "); Serial.print(avgAx, 3); Serial.print(" avgAz: "); Serial.print(avgAz, 3); Serial.print(" Winkel: "); Serial.println(angle, 2); drawAngle(angle); // Text aktualisieren drawSpiritLevel(angle); // Libelle aktualisieren lastAngle = angle; // letzten Wert speichern } delay(50); // kleine Pause für eine ruhige Anzeige }

Fazit: Für wen lohnt sich der Arduino Nesso N1?

Der Arduino Nesso N1 ist ein spannender Schritt in eine neue Richtung: weg von nackten Dev-Boards, hin zu einem kompakten, alltagstauglichen Mikrocontroller im Gehäuse – mit Display, Akku, Tastern, IMU, LoRa, Grove und Qwiic direkt an Bord.

Was mir besonders gut gefallen hat:

- das wertige Gehäuse und die kompakte Bauform - das integrierte IPS-Display mit Touch - die 6-Achsen IMU, die sich perfekt für kleine Tools wie die digitale Wasserwaage eignet - die Kombination aus WiFi 6, Bluetooth, Thread und LoRa - die enge Integration in die Arduino-IDE inklusive vordefinierter Funktionen über den Boardtreiber

Auf der anderen Seite steht ganz klar der Preis: Wer bereits einen M5StickC oder andere M5Stack-Geräte besitzt, bekommt technisch vieles, was sehr vertraut wirkt. Der Nesso N1 hebt sich vor allem durch LoRa, die Qwiic-Schnittstelle und die direkte Arduino-Integration ab – aber er ist eben kein Schnäppchen.

Mein Fazit:

- Für Einsteiger, die ein kompaktes, aber leistungsstarkes Board suchen und sich im Arduino-Ökosystem wohlfühlen, ist der Nesso N1 ein sehr attraktiver Einstieg in moderne IoT-Hardware. - Für Maker und Fortgeschrittene, die bereits mit M5Stack & Co. arbeiten, lohnt sich der Blick vor allem dann, wenn LoRa, Arduino-Support und die Kombination aus Grove + Qwiic spannend sind. - Wer einfach nur „irgendein ESP32-Board“ sucht, findet deutlich günstigere Alternativen – aber nicht in dieser Kombination aus Hardware, Gehäuse und Arduino-Unterstützung.

Unterm Strich ist der Arduino Nesso N1 für mich ein cooles, kompaktes Power-Tool, das sich besonders für kleine, interaktive Projekte und portable Tools anbietet.

Häufige Fragen zum Arduino Nesso N1

Ist der Arduino Nesso N1 ein ESP32-Board?

Ja. Im Inneren arbeitet ein ESP32-C6 mit RISC-V-Core. Damit bringt der Nesso N1 moderne Funkstandards wie WiFi 6, Bluetooth 5.3 und 802.15.4 (Thread/Zigbee) mit.