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.
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 <WiFi.h>
// 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.
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 <WiFi.h>
#include <Arduino.h>
#include <HTTPClient.h>
#include <M5GFX.h>
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.
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.
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.
Der Code ist bewusst kompakt gehalten:
- WLAN verbinden
- Display initialisieren
- JPEG-Snapshot regelmäßig abrufen
- Bild direkt anzeigen
Hier das vollständige Beispiel:
#include <WiFi.h>
#include <Arduino.h>
#include <HTTPClient.h>
#include <M5GFX.h>
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)
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.jpgoder 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 memoryDecode 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.
Letzte Aktualisierung am: 10. Dezember 2025
