ESPHome visualizzare entità da Home Assistant su display

---

Monitorare le informazioni essenziali con Home Assistant ed ESPHome

Chi utilizza Home Assistant sa bene quanto sia importante avere sempre sott’occhio alcune entità fondamentali, come ora, data, temperatura, umidità e consumi elettrici. Visualizzarle in modo chiaro e immediato può fare davvero la differenza nella gestione quotidiana della casa intelligente.

In questo articolo, grazie all’integrazione tra Home Assistant ed ESPHome, ti guiderò passo dopo passo nella realizzazione di un display personalizzato che mostra tutte queste informazioni in modo ordinato e sempre aggiornato.

Pronto a cominciare? Iniziamo!

🧰 Cosa ci servirà

Per realizzare il nostro display informativo con Home Assistant ed ESPHome, avremo bisogno di:

• 🏠 Home Assistant installato e funzionante Può essere su Raspberry Pi, server locale o VM. Assicurati che sia accessibile via browser.
• 🔌 ESPHome installato e correttamente integrato con Home Assistant Puoi usare l’add-on ufficiale oppure installarlo separatamente. Verifica che i dispositivi ESP siano riconosciuti.
• 🖋️ Font personalizzati Per migliorare la leggibilità e l’estetica del display. Ti guiderò su come caricarli e usarli nel codice.

🔧 Componenti elettronici necessari

🔤 Preparazione dei font e delle icone

Per rendere il nostro display più leggibile e gradevole, iniziamo scaricando i font e le icone che ci interessano.

🖋️ Font

📌 Io utilizzo il font Arial, uno dei più comuni e leggibili, scaricato da DaFont (o da un’altra fonte affidabile).

Una volta scaricato il file .ttf del font:

1. Rinominalo in modo semplice, ad esempio arial.ttf, se necessario.
2. Crea una cartella chiamata fonts all’interno della directory del tuo progetto ESPHome (se non esiste già).
3. Copia il file arial.ttf nella cartella fonts.

🖼️ Icone

Per arricchire graficamente il display, utilizzeremo icone tratte da Material Design Icons, che offrono una vasta libreria di simboli chiari e moderni.

1. Scegli le icone che ti interessano (es. temperatura, umidità, orologio, energia, ecc.).
2. Scaricale in formato monocromatico PNG o convertile in BMP se necessario.
3. Crea una sottocartella chiamata immagini all’interno della cartella esphome.
4. Inserisci tutte le icone nella cartella immagini.

🚀 Iniziamo il progetto su ESPHome

Ora passiamo alla parte più concreta: caricare il software su ESPHome.

Naturalmente, è logico che ognuno di voi utilizzerà i propri nomi di entità, i propri sensori e le proprie preferenze grafiche. In questa guida ti mostrerò un esempio funzionante e ben strutturato, che potrai facilmente adattare alle tue esigenze.

⚙️ Creazione del progetto su ESPHome

Quando crei un nuovo progetto su ESPHome, è fondamentale selezionare il microcontrollore corretto nella schermata iniziale.

🟦 Nel nostro caso, il chip è un ESP32-C3, quindi nella tendina “Device Type” dovrai selezionare:

Codice

ESP32-C3 Dev Module

📌 Se usi l’interfaccia web di ESPHome (via Home Assistant), segui questi passaggi:

1. Clicca su “+ NUOVO DISPOSITIVO”.
2. Inserisci un nome per il tuo progetto (es. display_info).
3. Alla voce Tipo di dispositivo, seleziona ESP32-C3 Dev Module dal menu a tendina.
4. Procedi con la configurazione della rete Wi-Fi e completa la creazione del progetto.

Una volta creato, potrai modificare il file YAML per aggiungere la configurazione del display, dei font e delle entità da visualizzare.

🧾 Inseriamo il codice nel progetto ESPHome

Una volta creato il progetto e selezionato il microcontrollore corretto (ESP32-C3), possiamo passare alla configurazione vera e propria.

📌 Importante: la prima parte del file YAML (quella che contiene esphome:, wifi:, logger:, api:, ecc.) sarà la vostra configurazione personale, con i vostri dati di rete, nome dispositivo, credenziali, ecc.

🔽 Qui sotto trovate la parte da copiare e incollare nel vostro file YAML, a partire da captive_portal:. Questa sezione contiene la configurazione del display, dei font e delle entità da visualizzare.

captive_portal:

time:
 
  - platform: homeassistant
    id: esptime

sensor:
  - platform: homeassistant
    id: temperatura
    entity_id: sensor.temperatura_paullo_temperatura
    internal: true

  - platform: homeassistant
    id: umidita
    entity_id: sensor.temperatura_paullo_umidita
    internal: true

  - platform: homeassistant
    id: wattora
    entity_id: sensor.potenza_attiva_prelevata_istantanea
    internal: true

  - platform: homeassistant
    id: f1
    entity_id: sensor.tot_energ_att_prel_giorno_1_f1
    internal: true

  - platform: homeassistant
    id: f2
    entity_id: sensor.tot_energ_att_prel_giorno_1_f2
    internal: true

  - platform: homeassistant
    id: f3
    entity_id: sensor.tot_energ_att_prel_giorno_1_f3
    internal: true

  - platform: homeassistant
    id: prezzo_pun
    entity_id: sensor.pun_prezzo_fascia_corrente
    accuracy_decimals: 3
    internal: true

  - platform: wifi_signal
    id: wifi1
    name: "WiFi Signal Sensor"
    update_interval: 60s

font:
  - file: 'fonts/arial.ttf'
    id: font1
    size: 5
  - file: 'fonts/arial.ttf'
    id: font2
    size: 10
  - file: 'fonts/arial.ttf'
    id: font3
    size: 15
  - file: 'fonts/arial.ttf'
    id: font4
    size: 20
  - file: 'fonts/arial.ttf'
    id: font5
    size: 24
  - file: 'fonts/arial.ttf'
    id: font6
    size: 30
  - file: 'fonts/arial.ttf'
    id: font7
    size: 35

image:
  - file: "thermometer.png"
    id: t
    type: BINARY
    resize: 40x40
  - file: "water-percent.png"
    id: u
    type: BINARY
    resize: 40x40
  - file: "clock-outline.png"
    id: clock1
    type: BINARY
    resize: 40x40
  - file: "calendar.png"
    id: calendar1
    type: BINARY
    resize: 40x40
  
  
  - file: "flash.png"
    id: flash
    type: BINARY
    resize: 50x50
  - file: "currency-eur.png"
    id: euro
    type: BINARY
    resize: 50x50
  - file: "gauge.png"
    id: g
    type: BINARY
    resize: 50x50
  - file: "wifi.png"
    id: wifii
    type: BINARY
    resize: 50x50


color:
  - id: RED
    red: 100%
    green: 0%
    blue: 0%
  - id: GREEN
    red: 0%
    green: 100%
    blue: 0%
  - id: BLUE
    red: 0%
    green: 0%
    blue: 100%
  - id: YELLOW
    red: 100%
    green: 100%
    blue: 0%
  - id: WHITE
    red: 100%
    green: 100%
    blue: 100%
  - id: ORANGE
    red: 100%
    green: 67%
    blue: 20%

globals:
  - id: page
    type: int
    restore_value: no
    initial_value: '0'

interval:
  - interval: 3s
    then:
      - lambda: |-
          id(page) += 1;
          // Aggiornato a 9 per supportare 10 pagine (0-9) totali
          if (id(page) > 9) id(page) = 0;

spi:
  clk_pin: 9
  mosi_pin: 8

display:
  - platform: st7735
    model: "INITR_REDTAB"
    reset_pin: 2
    cs_pin: 1
    dc_pin: 3
    rotation: 180
    device_width: 128
    device_height: 128
    col_start: 0
    row_start: 0
    eight_bit_color: true
    update_interval: 1s
    lambda: |-
      // CORNICE
      it.line(0, 0, 127, 0);    // bordo superiore
      it.line(0, 127, 127, 127); // bordo inferiore
      it.line(0, 0, 0, 127);    // bordo sinistro
      it.line(127, 0, 127, 127); // bordo destro
      
      // La posizione (39, 35) centra un'icona 50x50 orizzontalmente (128 - 50 = 78 / 2 = 39)
      const int ICON_X_50 = 39;
      const int ICON_Y_50 = 35;


      // ORA

      if (id(page) == 0) {
        // Pagina 1 - Ora con Secondi
        it.printf(31, 5, id(font6), RED, "ORA");
        it.strftime(6, 80, id(font7), GREEN, "%H:%M", id(esptime).now());
        it.strftime(95, 85, id(font4), GREEN, "%S", id(esptime).now());
        it.image(46, 40, id(clock1));
      }

      // DATA

      else if (id(page) == 1) {
        // Pagina 2 - Data
        it.printf(25, 5, id(font6), RED, "DATA");
        it.strftime(4, 80, id(font7), GREEN, "%d.%m", id(esptime).now());
        it.strftime(92, 85, id(font3), GREEN, "%Y", id(esptime).now());
        it.image(40, 40, id(calendar1));
      }

      // TEMPERAURA

      else if (id(page) == 2) {
        // Pagina 3 - Temperatura
        it.printf(9, 5, id(font3), RED, "TEMPERATURA");
        it.printf(15, 80, id(font6), GREEN, "%4.1f °C", id(temperatura).state);
        it.image(44, 35, id(t));
      }

      // UMIDITA

      else if (id(page) == 3) {
        // Pagina 4 - Umidità
        it.printf(24, 5, id(font4), RED, "UMIDITA");
        it.printf(15, 80, id(font6), GREEN, "%4.1f %%", id(umidita).state);
        it.image(44, 35, id(u));
      }

      // POTENZA PRELEVATA INSTANTANEA

      else if (id(page) == 4) {
        // Pagina 5 - Potenza Istantanea (wattora)
        it.printf(3, 5, id(font3), RED, "POTENZA ISTANT");
        it.printf(10, 85, id(font6), GREEN, "%4.0f W", id(wattora).state);
        it.image(ICON_X_50, ICON_Y_50, id(flash)); // Usando 'flash'
      }

      // FASCIA F1

      else if (id(page) == 5) {
        // Pagina 6 - Consumo Giornaliero F1 (f1)
        it.printf(15, 5, id(font3), RED, "CONSUMO F1");
        it.printf(5, 90, id(font3), GREEN, "%4.2f kWh", id(f1).state);
        it.image(ICON_X_50, ICON_Y_50, id(g)); // Usando 'g' (gauge)
      }

      // FASCIA F2

      else if (id(page) == 6) {
        // Pagina 7 - Consumo Giornaliero F2 (f2)
        it.printf(15, 5, id(font3), RED, "CONSUMO F2");
        it.printf(5, 90, id(font3), GREEN, "%4.2f kWh", id(f2).state);
        it.image(ICON_X_50, ICON_Y_50, id(g)); // Usando 'g' (gauge)
      }

      // FASCIA F3

      else if (id(page) == 7) {
        // Pagina 8 - Consumo Giornaliero F3 (f3)
        it.printf(15, 5, id(font3), RED, "CONSUMO F3");
        it.printf(5, 90, id(font3), GREEN, "%4.2f kWh", id(f3).state);
        it.image(ICON_X_50, ICON_Y_50, id(g)); // Usando 'g' (gauge)
      }

      // PREZZO PUN

      else if (id(page) == 8) {
        // Pagina 9 - Prezzo PUN (prezzo_pun)
        it.printf(14, 5, id(font3), RED, "PUN PREZZO");
        // Usiamo un font più piccolo per far stare il valore a 3 decimali e l'unità
        it.printf(5, 90, id(font4), GREEN, "%4.3f E/kWh", id(prezzo_pun).state); 
        it.image(ICON_X_50, ICON_Y_50, id(euro)); // Usando 'euro'
      }

      // SEGNALE WIFI

      else if (id(page) == 9) {
        // Pagina 10 - Segnale WiFi (wifi1)
        it.printf(14, 5, id(font3), RED, "SEGNALE WIFI");
        it.printf(14, 90, id(font4), GREEN, "%4.1f dBm", id(wifi1).state);
        it.image(ICON_X_50, ICON_Y_50, id(wifii)); // Usando 'wifii'
      }

🔌 Collegamenti tra ESP32-C3 e Display ST7735

Ora che abbiamo tutto pronto, è il momento di collegare fisicamente il display al nostro ESP32-C3 SuperMini. Di seguito trovi la tabella con i pin da utilizzare:

📋 Tabella collegamenti

🔌 Collegamenti tra ESP32-C3 SuperMini e Display ST7735

Segui la griglia qui sotto per replicare esattamente i collegamenti mostrati nella foto:

ESP32-C3	Display ST7735	Funzione
5V	VCC	Alimentazione
GND	GND	Massa
3V3	LED	Retroilluminazione
GPIO8	SCL (CLK)	Clock SPI
GPIO10	SDA (MOSI)	Dati SPI
GPIO3	RESET	Reset display
GPIO2	CS	Chip Select
GPIO1	DC	Data/Command

ESEMPIO DI COLLEGAMENTI:

Il tuo display è pronto e operativo per visualizzare in tempo reale tutte le entità che hai configurato: ora, data, temperatura, umidità, consumi elettrici e qualsiasi altro dato tu voglia aggiungere.

Hai completato:

✅ La scelta e il collegamento dei componenti ✅ La configurazione del progetto ESPHome ✅ L’integrazione dei font e delle icone ✅ Il wiring corretto tra ESP32-C3 e display ST7735 ✅ Il codice YAML con entità Home Assistant collegate

🔍 Ora puoi testare il tutto: accendi il dispositivo, verifica che il display si illumini correttamente e controlla che i dati vengano aggiornati in tempo reale.

Se vuoi aggiungere pagine multiple, icone grafiche, animazioni, o un pulsante per cambiare schermata, posso aiutarti a espandere il progetto con eleganza e modularità.

Vuoi che passiamo alla creazione di una seconda pagina per visualizzare altri dati o magari una guida per pubblicare tutto sul tuo sito?