Sfondi Animati su Home Assistant

HassioHelp

Sfondi Animati su Home Assistant

.

Argomento: Lovelace

Livello: Novizio (Novizio,Esperto, Pro)

Difficoltà: Bassa (Bassa, Media, Alta)

Home Assistant: v. 0.109.3

Hacs: v. 0.24.3

Premessa

Nel caso vi siate annoiati dei soliti sfondi statici nelle pagine del vostro Home Asistant, ora sarà possibile inserire degli sfondi animati che andranno a vivacizzare il vostro ambiente domotico. Questo grazie ad un plugin scaricabile da Hacs (se non lo avete ancora installato vedi  HACS guida all’installazione)

Installazione Plugin Lovelace

Andate su Hacs nella sezione plugin ed inserite Animated Background 

successivamente install

e per finire premete ADD TO LOVELACE e nel pop-up successivo su Yes. In questo modo abbiamo aggiunto la nuova risorsa sul menù Cruscotti Lovelace nella sezione Risorse (vedi Multi Dashboard: come crearle e gestirle). 

Copia file dal repository

Ora dovremmo copiarci alcuni file dalla repositi dell’autore di questo plugin, quindi da questo link https://github.com/Villhellm/lovelace-animated-background clicchiamo su Clone or Download e successivamente Download Zip.

Dal file zip andiamo a copiarci la cartella background-animations contenuta in \lovelace-animated-background-master\dist\ nella cartella \config\www in Home Assistant (nel caso non abbiate la cartella www createla).
Attenzione a non rinominare la cartella o i files al suo interno.

Preparazione Lovelace per le animazioni

Non ci resta altro che inserire i riferimenti hai file appena copiati. È possibile anche evitare di copiare i file in locale e richiamarli direttamente dalla repository, personalmente preferisco avere tutto il locale anche perché quando si andrà ad inserirne di nuove o personalizzate dovremo comunque copiarle nella cartella di Home Assistant, tanto vale partire già con quest’ottica. 

Andiamo quindi ad editare la configurazione di Lovelace. Premiamo i 3 puntini in alto a destra in Home Assistant:

selezioniamo Configurare l’interfaccia Utente

successivamente Editor di Configurazione testuale

Andiamo ad aggiungere le seguenti righe:

animated_background:
default_url: /local/animated-background/background-animations/sunny.html
state_url:
'sunny': /local/animated-background/background-animations/sunny.html
'partlycloudy': /local/animated-background/background-animations/cloudy.html
'cloudy': /local/animated-background/background-animations/cloudy.html
'mostlycloudy': /local/animated-background/background-animations/mostlycloudy.html
'clear-night': /local/animated-background/background-animations/night.html
'fog': /local/animated-background/background-animations/fog.html
'rainy': /local/animated-background/background-animations/rainy.html

Queste righe vanno prima della riga Title: e se lo avete già impostato un’immagine di sfondo con background: potete tranquillamente toglierla.

Ora basterà uscire e fare un refresh del browser (F5). Ad ogni schermata nuova o ad ogni refresh l’immagine animata cambierà.

Configurazioni

È possibile inserire delle personalizzazioni opzionali, vediamone alcune:

default_url: se non viene trovato uno stato corrispondente, questo è l’URL di fallback

enabled: impostare su falso per disabilitare lo sfondo animato

display_user_agent: se impostato su true, riceverai un avviso con il tuo attuale user agent. Ciò contribuirà a determinare il dispositivo da utilizzare in excluded_devicesoincluded_devices

debug: ricevi messaggi di registro più dettagliati

views: consente di impostare configurazioni personalizzate per vista

groups: consente di impostare configurazioni personalizzate a cui è possibile fare riferimento nelle configurazioni della vista lovelace

entity: entità per verificare la presenza di cambiamenti di stato

state_url: mappa degli stati e degli URL. Richiesto se entitydefinito

included_users: elenco di utenti che visualizzeranno lo sfondo animato. Se questa opzione è impostata, tutti gli utenti non inclusi in questo elenco verranno esclusi.

included_devices: elenco dei dispositivi che visualizzeranno lo sfondo animato. Se questa opzione è impostata, tutti i dispositivi non inclusi in questo elenco verranno esclusi. Es: iphone, ipad, windows, macintosh, android

excluded_users: utenti da escludere

excluded_devices: dispositivi da escludere Es: iphone, ipad, windows, macintosh, android


Esempio di configurazione avanzata:

animated_background:
  default_url: /hacsfiles/lovelace-animated-background/background-animations/sunny.html
  included_users:
    - Villhellm
  # Dark Sky is just an example, you do not need Dark Sky for this to work
  entity: "weather.dark_sky"
  state_url:
    'sunny': /hacsfiles/lovelace-animated-background/background-animations/sunny.html
    'partlycloudy': /hacsfiles/lovelace-animated-background/background-animations/cloudy.html
    'cloudy': /hacsfiles/lovelace-animated-background/background-animations/cloudy.html
    'mostlycloudy': /hacsfiles/lovelace-animated-background/background-animations/mostlycloudy.html
    'clear-night': /hacsfiles/lovelace-animated-background/background-animations/night.html
    'fog': /hacsfiles/lovelace-animated-background/background-animations/fog.html
    'rainy': /hacsfiles/lovelace-animated-background/background-animations/rainy.html

  views:
    - path: gaming
      config:
        default_url: /hacsfiles/lovelace-animated-background/background-animations/sunny.html
        entity: "light.game_room"
        state_url:
          'on': /hacsfiles/lovelace-animated-background/background-animations/sunny.html
          'off': /hacsfiles/lovelace-animated-background/background-animations/night.html 
title: Home
views: ...

Personalizzare i propri background animati

Per personalizzare gli sfondi animati abbiamo bisogno di brevi video (per non sovraccaricare il browser) nel formato MP4. Li potete cercare anche su internet ad esempio questo sito può fare al caso vostro https://www.videezy.com/free-video/background-mp4 ma ne esistono molti altri, altrimenti li potete creare voi stessi.

Dopo aver scaricato o creato il file lo copiamo in una sotto cartella di \config\www, io ho preferito inserirla direttamente in  \config\www\background-animations. Il file l’ho rinominato in sfondo_animato.mp4.

Andiamo ora ad editare uno dei file html contenuti nella cartella background-animations, inoltre è possibile anche crearne di nuovi, basta richiamare il file html da lovelace.

Per comodità andrò ad richiamare il mio video dal file sunny.html, basterà aggiungere un virgola alla riga precedente e il percorso del file video MP4.

    }
var cinemagraphs = [
"https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4",
"https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4",
"https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4",
"https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4",
"https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4",
"/local/background-animations/sfondo_animato.mp4"
];

Infine per visualizzare il nuovo background animato basterà fare il refresh della pagina o al massimo cancellare la cache del browser.

Argomenti correlati

Lovelace

 

Una risposta.

  1. Avatar Giovanni ha detto:

    Ciao fatto tutto come da procedura, ma aggiornando la pagina lo sfondo da blu che avevo con il tema istallato è tornato ad essere bianco.
    Ho sbagliato qualcosa??

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *