Arduino Nesso N1: Bilder online abrufen und direkt darstellen
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.
Im nÀchsten Beitrag möchte ich darauf aufbauen und zeigen, wie sich Bilder dynamisch wechseln, verwalten oder kombinieren lassen. Der Nesso N1 bietet hier noch jede Menge Potenzial.
