作者:紫殤情結
曬圖
瀏覽器樣式
ipad樣式
簡介
mushroom lovelace是一個可以在hass的ui中配置dashboard的整合,對於ui小白(本人)來說,很友好
B站找到的一個介紹影片:https://www。bilibili。com/video/BV1DP411L7B7/
安裝
幾乎所有用到的卡片,都可以透過hacs安裝參考安裝步驟;
Install HACS if you don‘t have it already
Open HACS in Home Assistant
Go to “Frontend” section
Click button with “+” icon
Search for “Mushroom”
我用到的部分卡片和主題
卡片
Lovelace Mini Graph Card
Vertical Stack In Card
Button Card by @RomRider
Lovelace swipe card
Digital Clock
Mushroom
kiosk-mode
chartjs-card
主題
iOS Themes
使用
設定- 儀表盤 - 建立Dashboard
開啟建立的儀表盤,右上角選擇編輯儀表盤,在彈窗中選擇“從空白儀表盤開始”,點選“自行編輯”
新增第一個卡片
通常我新增到第一個卡片是垂直堆疊的卡片,既然是ui配置,當然很簡單,效果如圖
在垂直堆疊的卡片中,設計需要的樣子
如我的首頁中,左邊第一列是一個垂直堆疊的卡片,其中又嵌套了7個子卡片,下面詳述
mushroom-chips-card 安裝mushroom後自帶,作為導航用效果:
例子:
mushroom-title-card 標題,可以使用HASS的模板 安裝mushroom後自帶
例子:
type: custom:mushroom-title-card
title: |
{% set time = now()。hour %}
{% if (time >= 18) %}
晚上好, {{user}}!
{% elif (time >= 12) %}
下午好, {{user}}!
{% elif (time >= 5) %}
早安, {{user}}!
{% else %}
歡迎回來, {{user}}!
{% endif %}
subtitle: ’‘alignment: start
digital-clock 時鐘、日期
效果:
例子:
type: custom:digital-clock
locale: cn
timeZone: Asia/Shanghai
dateFormat:
weekday: long
day: numeric
month: long
year: numeric
timeFormat:
hour: 2-digit
minute: 2-digit
horizontal-stack 水平堆疊
當需要某些實體顯示在一行中時,使用該卡片
效果:
例子:
小技巧
善用HASS模板
hass中有很多卡片支援模板,來取各種裝置、實體的屬性,或者做出判斷等等。
例如我最常用的markdown card
效果:
例子:
{% if states(’sensor。loock_v4_def2_door_state‘) == ’stuck‘ %}
{% else%}
大門未關閉,迅速檢查
{% endif %}
{%- set low_batteries = states |
selectattr(’attributes。battery_level‘, ’defined‘) |
selectattr(’attributes。battery_level‘,’<=‘, 30 ) | list -%}
{% if low_batteries | count >= 1 %}
{{ low_batteries | list | count }}個裝置電量低:
{%- for battery in low_batteries -%}
{%- set message = “n - *”+ battery。name + ’ (‘ + (battery。attributes。battery_level | round(0) | string) + ’%)*‘ -%}
{{ message }}
{%- endfor -%}
{% else %}
所有裝置電量都很正常
{% endif %}
{{ (states。light and states。switch ) |
selectattr( ’state‘, ’eq‘, ’on‘) | list | length-1 }}盞燈點亮
當前電費餘額: {{ states(’sensor。1056389284_balance‘) }}
當前階梯剩餘額度: {{states(’sensor。1056389284_current_level_remain‘)}}
歐元對人民幣匯率: {{ states(’sensor。eur_to_cny‘) }}
美元對歐元匯率: {{states(’sensor。open_exchange_rates_usd_eur‘)}}
掃地機器人狀態: {{states(’vacuum。annie‘)}}
使用水平堆疊、垂直堆疊卡片
根據自己的設計,使用水平堆疊或者垂直堆疊,可以將想要放到一起顯示的內容集中展示
最後
祝各位玩出自己喜歡的樣子了!
由於大媽家實在是對程式碼不太友好,所以沒辦法放出來我的配置 有需要的可以聯絡我咯