#m5stack

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.

スイッチサイエンス、M5Stack社ドキュメントサイトのミラーを提供 #スイッチサイエンス #M5Stack #M5Stackミラーサイト #日本の顧客向け

アクセスが集中しているのかな？ スイッチサイエンスが M5Stack…