ESP32 e Display eInk SSD1683: come realizzare una Semplice Stazione Meteo (anche su CrowPanel 4.2″ HMI) con le API di OpenWeatherMap

Renzo Mischianti

14 ore fa

Spread the love

Come abbiamo visto precedentemente, quando si lavora con display E-Ink da 4.2″ pilotati da un ESP32 e dal controller SSD1683, la gestione corretta di font e dimensioni del testo è fondamentale. I display e-paper sono diventati sempre più popolari nei progetti IoT grazie al consumo energetico ultraridotto, all’elevata leggibilità alla luce del giorno e alla capacità di mantenere un’immagine senza assorbire energia. In combinazione con un microcontrollore ESP32, aprono la strada ad applicazioni pratiche come cruscotti smart, pannelli informativi e stazioni meteo sempre attive alimentate a batteria.

In questa guida ci concentreremo sul display ePaper da 4.2″ basato su SSD1683 (400×300 pixel) e mostreremo come collegarlo a un ESP32 o ESP8266, configurare le librerie necessarie e visualizzare informazioni utili recuperate in tempo reale dalle API OpenWeatherMap. Imparerai a cablare il display, configurare la libreria grafica GxEPD2, fare il parsing delle risposte JSON e disegnare un’interfaccia utente pulita, basata su icone, che si aggiorna automaticamente una volta all’ora.

Il risultato è una stazione meteo minimalista che consuma quasi zero energia mantenendo i dati sempre visibili — un progetto perfetto per monitor da interno, dispositivi IoT a basso consumo o anche esperimenti didattici con la tecnologia ePaper.

Toggle

Specifiche rapide

Microcontrollore: ESP32
Display: 4.2″ E-Ink (400×300 px), controller SSD1683
Librerie (fare riferimento al primo articolo per l’installazione):
- GxEPD2_BW (driver SSD1683)
- Adafruit GFX + font integrati e personalizzati (da Fonts/)
Piedini di controllo:
- SPI: EPD_CS, EPD_DC, EPD_RST, EPD_BUSY
- Pin di alimentazione opzionale: EPD_PWR
Alimentazione: 3.3 V (gestita tramite pin di controllo nel demo)
Modalità display: aggiornamenti a finestra intera

Collegare l’SSD1683 a un ESP32/ESP8266

Qui puoi trovare la selezione di ESP32 da acquistare ESP32 Dev Kit v1 - TTGO T-Display 1.14 ESP32 - NodeMCU V3 V2 ESP8266 Lolin32 - NodeMCU ESP-32S - WeMos Lolin32 - WeMos Lolin32 mini - ESP32-CAM programmer - ESP32-CAM bundle - ESP32-WROOM-32 - ESP32-S

Per interfacciare un display eInk SSD1683 generico con il tuo ESP32 o ESP8266, devi collegare i seguenti pin:

Pin SSD1683	Descrizione	Esempio ESP32
VCC	Alimentazione	3.3V
GND	Massa	GND
SDA	MOSI	GPIO 23
SDL	SCK	GPIO 18
CS	Chip Select	GPIO 5
DC	Dati/Comando	GPIO 17
RST	Reset	GPIO 16
BUSY	Occupato	GPIO 4

Nota: verifica sempre i requisiti di tensione e il pinout del tuo specifico modulo display.

Qui per acquistare il display e-ink (la mia scelta) CrowPanel ESP32 4.2” E-paper HMI Display - CrowPanel ESP32 4.2” E-paper HMI Display from ALiexpress - WeAct 4.2" Epaper Module SSD1683

Riferimento pinout CrowPanel

Consulta il mio articolo completo: CrowPanel ESP32-S3 4.2” HMI – Pinout e Specifiche

Semplice Stazione Meteo con API OpenWeatherMap

In questo esempio realizziamo una stazione meteo minimalista utilizzando un ESP32, un display E-Ink SSD1683 da 4.2″ e le API OpenWeatherMap. L’obiettivo è recuperare i dati meteo in tempo reale per una città specifica e visualizzarli su un pannello ePaper a bassissimo consumo, ideale per applicazioni come monitor da interno o display informativi alimentati a batteria. Questo esempio è estratto e semplificato dalla demo Elecrow su GitHub.

Lo sketch inizia collegando l’ESP32 alla tua rete WiFi e interrogando l’API OpenWeatherMap con una chiave API fornita. La risposta JSON include temperatura, umidità, pressione al livello del mare, velocità del vento e condizioni meteo (es. Sereno, Pioggia, Nuvoloso), che vengono interpretate tramite la libreria Arduino_JSON.

L’interfaccia grafica è disegnata con la libreria GxEPD2, che fornisce supporto ottimizzato per il controller SSD1683. Un set di icone memorizzate in PROGMEM (tramite pic.h) viene visualizzato per adattarsi dinamicamente alle condizioni meteo. Il layout utilizza un’interfaccia pulita e divisa, con informazioni grafiche e testuali affiancate, che mostrano:

Un’icona delle condizioni meteo (sole, nuvole, pioggia, ecc.)
Il nome della città
Temperatura (°C)
Umidità (%)
Velocità del vento (m/s)
Pressione al livello del mare (hPa)

Tutto il rendering avviene in un ciclo firstPage/nextPage per mantenere la compatibilità con la logica di aggiornamento parziale e la RAM limitata. Dopo ogni aggiornamento, il display entra in deep sleep (hibernate()) e l’alimentazione viene eventualmente disattivata per risparmiare energia.

Il meteo viene aggiornato una volta all’ora, ma lo schermo ePaper mantiene l’ultima immagine senza alcun consumo energetico tra un aggiornamento e l’altro.

Questo progetto mostra come combinare dati internet in tempo reale, parsing JSON e rendering grafico su un display ePaper — rendendolo ideale per dashboard IoT, automazione domestica o progetti didattici.

/*
  Semplice Stazione Meteo con API OpenWeatherMap
  Autore: Renzo Mischianti
  Sito web: https://mischianti.org

  Descrizione:
  Questo sketch mostra come costruire una semplice stazione meteo
  usando un ESP32, un display ePaper SSD1683 da 4.2" e le API OpenWeatherMap.
  Il display mostra condizioni meteo, temperatura, umidità,
  velocità del vento e pressione al livello del mare con icone e testo.
*/

Configura la tua Stazione Meteo

Questo blocco di codice imposta le credenziali WiFi e la configurazione delle API OpenWeatherMap:

const char* ssid = "<YOUR-SSID>";
const char* password = "<YOUR-PASSWD>";

Queste due righe definiscono il nome e la password della tua rete WiFi così che l’ESP32 possa connettersi a Internet.

String openWeatherMapApiKey = "<YOUR-MAP-API>";
String city = "<YOUR-CITY>";
String countryCode = "<YOUR-COUNTRY-CODE>";

Queste variabili configurano la richiesta a OpenWeatherMap:
- openWeatherMapApiKey: la tua chiave API personale da openweathermap.org
- city: il nome della città per la quale vuoi i dati meteo
- countryCode: il codice paese corrispondente (es. "IT" per l’Italia, "US" per gli Stati Uniti)

Insieme, questi valori permettono al dispositivo di costruire una richiesta API corretta e ottenere i dati meteo in tempo reale.

Costruire l’URL di Richiesta API

String serverPath = "http://api.openweathermap.org/data/2.5/weather?q=" +
                    city + "," + countryCode +
                    "&APPID=" + openWeatherMapApiKey +
                    "&units=metric";

Crea dinamicamente l’URL completo per la richiesta HTTP GET a OpenWeatherMap.
Include la città, il codice paese, la chiave API e le unità in formato metrico (°C, m/s).

Inviare la Richiesta e Fare il Parsing del JSON

jsonBuffer = httpGETRequest(serverPath.c_str());
myObject = JSON.parse(jsonBuffer);
if (JSON.typeof(myObject) == "undefined") return;

Invia la richiesta usando httpGETRequest() (definita altrove).
Analizza la risposta JSON in myObject.
Se il parsing fallisce, la funzione termina.

Estrarre i Dati Meteo

weather     = JSON.stringify(myObject["weather"][0]["main"]);
temperature = JSON.stringify(myObject["main"]["temp"]);
humidity    = JSON.stringify(myObject["main"]["humidity"]);
sea_level   = JSON.stringify(myObject["main"]["sea_level"]);
wind_speed  = JSON.stringify(myObject["wind"]["speed"]);
city_js     = JSON.stringify(myObject["name"]);

Recupera e memorizza:
- Condizione meteo principale (es. “Clear”, “Rain”)
- Temperatura in °C
- Umidità (%)
- Pressione al livello del mare (hPa)
- Velocità del vento (m/s)
- Nome della città

Determinare l’Icona Meteo

if (weather.indexOf("cloud") >= 0)           weather_flag = 1;
else if (weather.indexOf("clear") >= 0)      weather_flag = 3;
else if (weather.indexOf("rain") >= 0)       weather_flag = 5;
else if (weather.indexOf("thunderstorm") >= 0) weather_flag = 2;
else if (weather.indexOf("snow") >= 0)       weather_flag = 4;
else                                         weather_flag = 0;

In base alla parola chiave nella descrizione meteo, viene impostato weather_flag per mostrare l’icona corrispondente sullo schermo ePaper.

Ecco il file aggiuntivo pic.h.

Se vuoi cambiare l’immagine grafica, puoi usare il convertitore online.

RGB Image to Byte Array Converter for Arduino TFT Displays

Grazie

Firmware and OTA update management
1. Firmware management
  1. ESP32: flash compiled firmware (.bin)
  2. ESP32: flash compiled firmware and filesystem (.bin) with GUI tools
2. OTA update with Arduino IDE
  1. ESP32 OTA update with Arduino IDE: filesystem, firmware, and password
3. OTA update with Web Browser
4. Self OTA uptate from HTTP server
5. Non-standard Firmware update
  1. ESP32 firmware and filesystem update from SD card
  2. ESP32 firmware and filesystem update with FTP client

Support forum

Spread the love