homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

作者:紫殤情結

曬圖

瀏覽器樣式

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

ipad樣式

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

簡介

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配置,當然很簡單,效果如圖

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

在垂直堆疊的卡片中,設計需要的樣子

如我的首頁中,左邊第一列是一個垂直堆疊的卡片,其中又嵌套了7個子卡片,下面詳述

mushroom-chips-card 安裝mushroom後自帶,作為導航用效果:

例子:

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

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 時鐘、日期

效果:

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

例子:

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 水平堆疊

當需要某些實體顯示在一行中時,使用該卡片

效果:

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

例子:

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

小技巧

善用HASS模板

hass中有很多卡片支援模板,來取各種裝置、實體的屬性,或者做出判斷等等。

例如我最常用的markdown card

效果:

homeassistant 篇一:使用mushroom lovelace在ui介面中配置儀表盤

例子:

{% 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‘)}}

使用水平堆疊、垂直堆疊卡片

根據自己的設計,使用水平堆疊或者垂直堆疊,可以將想要放到一起顯示的內容集中展示

最後

祝各位玩出自己喜歡的樣子了!

由於大媽家實在是對程式碼不太友好,所以沒辦法放出來我的配置 有需要的可以聯絡我咯

頂部