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
Una risposta.
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??