Abbiamo visto in questo post come implementare un monitoraggio semplice ma puntuale dei consumi elettrici della nostra casa. Sulla base di questo, come promesso alla fine del post, andiamo a costruire una dashboard che ci consenta di vedere a colpo d’occhio come stanno andando le cose.

Cosa vogliamo fare

Lo scopo di questo post è quindi quello di implementare una schermata che sia capace di veicolare tutte le informazioni raccolte dal monitoraggio dei consumi, che ci permetta in sostanza di avere sotto controllo:

  • la potenza istantanea assorbita dalla nostra casa, per capire se siamo a ridosso delle soglie critiche, ed il trend delle ultime 24h
  • l’andamento orario dei consumi, per individuare anomalie durante la giornata
  • l’andamento giornaliero dei consumi, per analizzare l’impatto dei nostri comportamenti giorno dopo giorno
  • la fascia tariffaria corrente e le tariffe applicate in ciascuna fascia, informazione utile per ricordarci quando possiamo osare di più senza eccedere nei costi
  • il dettaglio dei consumi di eventuali dispositivi connessi - non incluso nel package
  • la previsione di spesa mensile per prepararci all’arrivo della fattura

Cosa ci serve

L’hardware minimo necessario per implementare il monitoraggio è riepilogato nel post dedicato al package. Qui invece elenchiamo i mattoncini con cui abbiamo costruito la nostra dashboard, scaricabili da HACS:

  • Bar-Card per visualizzare la potenza istantanea in formato barra
  • Button-card per l’indicazione e la gestione delle fasce orarie
  • Layout-card per organizzare il contenuto della dashboard
  • Mini-Graph-Card per il trend istantaneo ed i grafici orario e giornaliero
  • Multiple-entity-row per il dettaglio dei consumi e dei costi

Nota Per la realizzazione dei grafici in questa dashboard, in alternativa alla card sopra indicata, è stata valutato l’utilizzo della card Apexcharts-card, che è davvero molto potente, ma al contempo complessa. Non è escluso che in futuro possa fare delle prove che senz’altro troverete in un nuovo post.

Scriviamo il file yaml

Partiamo quindi con il codice della nostra dashboard. Si tratta ovviamente di una view lovelace, che possiamo definire, come da documentazione ufficiale:

#views:
  - title: Consumi
    path: energy  
    icon: 'mdi:flash'
    panel: true  
    badges: []
    cards:

Layout

L’organizzazione della dashboard è semplice e schematica: nella parte di sinistra tutti i grafici in colonna, ordinati secondo il riferimento temporale (valore puntuale e trend della potenza istantanea, consumo orario e giornaliero); nella parte destra, in testa le informazioni sulle tariffe e nella colonna tutti i dettagli disponibili sulle voci di consumo e costo. Le dimensioni di queste aree possono essere cambiate all’occorrenza in base alla superficie disponibile per la visualizzazione.


Che tradotto in codice yaml diventa:

    - type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        grid-template-columns: 350px 600px
        grid-template-rows: 60px auto
        grid-template-areas: |
          "charts tariff"
          "charts info"          
      cards:
        # AREA GRAFICI
        - type: vertical-stack
          view_layout:
            grid-area: charts
          cards:
            ...
        # AREA TARIFFE
        - type: horizontal-stack
          view_layout:
            grid-area: tariff
          cards:
            ...
        # AREA DETTAGLI
        - type: vertical-stack
          view_layout:
            grid-area: info
          cards:
            ...

I grafici

Andiamo ora a costruire il contenuto dell’area grafici, ovvero della card vertical-stack. Partiamo con la potenza istantanea: l’informazione che ci interessa è il valore in questo momento, con una indicazione rispetto alle soglie di controllo mediante codice colore:

  • verde se il valore è sotto la soglia di 2500 watt (75% del massimo di 3.3KW)
  • giallo se si entra in zona critica, tra il 75% ed il 90% del massimo
  • rosso se si supera la soglia dei 3000 watt, oltre la quale sono possibili distacchi

Useremo ovviamente queste soglie in entrambi i grafici sulla potenza istantanea: sia sul valore puntuale, come appena esposto, sia sul trend dell’assorbimento delle ultime 24h, in modo da poter riconoscere velocemente eventuali anomalie.

  #Potenza istantanea, valore puntuale
  - type: custom:bar-card
    name: Potenza istantanea
    entity: sensor.home_total_w
    animation: 'off'
    height: 20px
    positions:
      icon: 'off'
      indicator: 'off'
    min: 0
    max: 3500
    severity:
      - from: 0
        to: 2000
        color: green        
      - from: 2000
        to: 2500
        color: Orange
      - from: 2500
        to: 4500
        color: red   
  #Potenza istantanea, trend 24h
  - type: custom:mini-graph-card
    entities:
    - sensor.home_total_w
    name: Potenza 24h
    icon: mdi:flash
    hours_to_show: 24
    points_per_hour: 60
    hour24: true    
    smoothing: false
    upper_bound: 3500
    lower_bound: 0
    line_width: 1
    height: 170
    show:
      name: false
      icon: false
      points: false  
      labels: true
      state: false
      extrema: false
    color_thresholds_transition: smooth
    color_thresholds:
      - value: 0
        color: green
      - value: 2500
        color: yellow
      - value: 3000
        color: red

Procediamo con i grafici dell’energia, ovvero dei consumi veri e propri con cui siamo abituati a ragionare, in termini di KWh. Sempre nella pila verticale, implementiamo due grafici: consumo orario e consumo giornaliero. Per fare questo, utilizziamo la proprietà aggregate_func: max della card, che ci permette di mostrare il massimo valore dell’entità nel range di punti specificato. Ricordiamo, infatti, che i valori dell’energia sono totalizzatori, per cui hanno un andamento crescente nel relativo periodo di calcolo.

  # Consumo orario
  - type: custom:mini-graph-card
    entities:
      - sensor.total_energy_hour
    name: Consumo orario
    icon: mdi:history
    hours_to_show: 24 # 24 ore
    points_per_hour: 1 # Un valore ogni ora
    hour24: true
    lower_bound: 0
    aggregate_func: max
    group_by: hour
    show:
      graph: bar
      labels: true 
      state: true          
  # Consumo giornaliero
  - type: custom:mini-graph-card
    entities:              
    - sensor.total_energy_day
    name: Consumo giornaliero
    icon: mdi:history
    hours_to_show: 168 # 7 giorni
    points_per_hour: 0.04167 # Un valore al giorno, quindi 1/24 ogni ora
    hour24: true
    lower_bound: 0            
    aggregate_func: max
    group_by: date
    show:
      graph: bar
      labels: true
      state: true

Informazioni sulle tariffe

Nella definizione dei nostri totalizzatori, abbiamo indicato due fasce di contabilizzazione F1 ed F23. Nella dashnoard quindi, vogliamo visualizzare in tempo reale la fascia in utilizzo, con relativo costo, ma anche fornire una funzionalità di aggiornamento di quest’ultimo. Per far questo, per ciascuna delle fasce definite, implementiamo una custom:button-card come l’esempio che segue:

  # Esempio Fascia F1 - Sostituire F1 con F23 per la relativa card
  - type: custom:button-card
    entity: input_number.energy_cost_f1
    name: F1
    tap_action:
      action: more-info
    show_icon: false
    show_state: false
    show_label: true
    label: >
      [[[
        return states['input_number.energy_cost_f1'].state + ' €/kWh';
      ]]]                
    styles:
      card:
        - height: 50px
        - font-weight: bold
      name:          
        - color: >
            [[[
              if (states['utility_meter.total_energy_day'].state == 'f1')
                return 'lime';
              return 'gray';
            ]]]               
      label:
        - color: var(--accent-color)
        - font-size: 13px

Infine, per mostrare un valore di costo complessivo che vada oltre il costo dell’energia, che ci dica cioè il costo in bolletta comprensivo di tutte le spese accessorie, completiamo l’area con la card seguente:

  - type: custom:button-card
    entity: input_number.energy_cost_gross
    name: Totale
    tap_action:
      action: more-info
    show_icon: false
    show_state: false
    show_label: true
    label: >
      [[[
        return states['input_number.energy_cost_gross'].state + ' €/kWh';
      ]]]                 
    styles:
      card:
        - height: 50px 
        - font-weight: bold                       
      label:
        - color: var(--accent-color) 
        - font-size: 13px

Nota Per migliorare il codice della dashboard, si potrebbe utilizzare il meccanismo dei template. Tuttavia, essendo poche le card da istanziare, al netto di una pulizia ed ottimizzazione del codice, non vi sarebbe un grande guadagno.

Dettagli dei consumi

Completiamo la dashboard con un approfondimento sui consumi ed i costi. Realizziamo una tabella di entities ed utilizzando la card custom:multiple-entity-row possiamo inserire in ciascuna riga più informazoni inerenti la voce principale. Quindi, riepiloghiamo per il giorno ed il mese: consumo, costo di ciascuna fascia e costo lordo in bolletta:

  - type: entities
    title: Riepilogo Consumi
    show_header_toggle: false
    view_layout:
      grid-area: info
    entities:
      #Consumi e costo giornalieri
      - type: custom:multiple-entity-row
        entity: sensor.energy_cost_day_gross
        secondary_info: 
          entity: sensor.total_energy_day
          name: "Consumo: "
        state_color: true
        state_header: Bolletta
        name: Costo giornaliero Energia
        icon: mdi:home
        entities:
          - entity: sensor.energy_cost_day_f1
            name: F1              
          - entity: sensor.energy_cost_day_f23
            name: F23
          - entity: sensor.energy_cost_day
            name: F1+F23
      #Consumi e costo mensili            
      - type: custom:multiple-entity-row
        entity: sensor.energy_cost_mth_gross
        secondary_info: 
          entity: sensor.total_energy_mth
          name: "Consumo: "
        state_color: true
        state_header: Bolletta
        name: Costo mensile Energia
        icon: mdi:home
        entities:
          - entity: sensor.energy_cost_mth_f1
            name: F1              
          - entity: sensor.energy_cost_mth_f23
            name: F23
          - entity: sensor.energy_cost_mth
            name: F1+F23

Per chiudere, nella sezione Dettaglio si possono aggiungere, con la stessa card vista sopra per i totali, tante righe di dettaglio quante sono le voci di consumo eventualmente calcolate mediante altri oggetti smart integrati (come ad esempio plug, interruttori o lampadine smart). Di seguito il consumo della lavatrice rilevato mediante Smart Plug:

  #Separatore
  - type: section
    label: Dettaglio
  #Consumo Lavatrice calcolato con Smart Plug
  - type: custom:multiple-entity-row
    entity: sensor.plug_lavatrice_w
    state_color: true
    state_header: Attuale
    name: Lavatrice
    icon: mdi:washing-machine
    entities:
      - entity: sensor.plug_lavatrice_energy_mth
        name: Mensile                
      - entity: sensor.plug_lavatrice_energy_day
        name: Giornaliero

Risultato finale

La dashboard implementata assume l’aspetto mostrato nella cover di questo post. Il codice è disponibile a questo link.

Di seguito un breve video ne mostra il funzionamento:

Enjoy!