HA 隨天氣變化的動態背景+透明化主題

Home Assistant
1

Demo

1.先去HACS Frontend 安裝 兩個插件
Lovelace Animated Background
iOS Dark Mode Theme

  1. 新增 javascript 模組
    /local/animated-background.js

3.使用文字編輯模式編輯主面板

貼上以下 entity那邊請改成你自己的天氣實體

animated_background:
  default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
  entity: weather.gohome
  state_url:
    sunny:
      - 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
    partlycloudy:
      - https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
      - https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
      - https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
      - https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
      - https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
      - https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4
    cloudy:
      - https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4
      - https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4
      - https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4
      - https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4
      - https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4
      - https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4
    mostlycloudy:
      - https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4
      - https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4
      - https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4
    clear-night:
      - https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4
      - https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4
      - https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
      - https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4
    fog:
      - https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4
      - https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4
    rainy: https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4

4.去個人設定把你的主題改成 ios-dark-mode 就搞定了

3個讚
2

實在有夠棒，剛好試著重用一個ha

3

請問這個可以設定固定背景圖嗎

4

背景圖在 views 底下設置即可（需改用手動 YAML 來配置 Lovelace），或是透過自定義的 theme。

1個讚