在ui界面中配置仪表盘 - 使用mushroom lovelace

更新：

Hass配置可以通过网盘获取啦

链接：https://pan.baidu.com/doc/share/CBYzhdvmHpbLXJlj9Mwgrw-382382694248922 提取码：3pd1

晒图

浏览器样式

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' %}
&lt;ha-alert alert-type="success"&gt;大门关闭中</ha-alert>
{% else%}
  <ha-alert alert-type="error">大门未关闭，迅速检查</ha-alert>
{% endif %}

{%- set low_batteries = states |
  selectattr('attributes.battery_level', 'defined') |
  selectattr('attributes.battery_level','&lt;=', 30 ) | list -%}
{% if low_batteries | count &gt;= 1 %}
      <ha-alert alert-type="error">{{ low_batteries | list | count  }}个设备电量低：
  {%- for battery in low_batteries -%}
      {%- set message =  "n -  *"+ battery.name + ' (' + (battery.attributes.battery_level | round(0) | string) + '%)*' -%}
      {{ message }}
  {%- endfor -%}
{% else %}
   <ha-alert alert-type="success">所有设备电量都很正常
{% endif %}
</ha-alert>

<ha-alert alert-type="info">
{{ (states.light  and states.switch ) |
   selectattr( 'state', 'eq', 'on') | list | length-1 }}盏灯点亮</ha-alert>

<ha-alert alert-type="info"> 当前电费余额: {{ states('sensor.1056389284_balance') }}
当前阶梯剩余额度: {{states('sensor.1056389284_current_level_remain')}}
</ha-alert>

<ha-alert alert-type="info"> 欧元对人民币汇率: {{ states('sensor.eur_to_cny') }}
美元对欧元汇率: {{states('sensor.open_exchange_rates_usd_eur')}}
</ha-alert>

<ha-alert alert-type="info">
扫地机器人状态: {{states('vacuum.annie')}}
</ha-alert>

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

根据自己的设计，使用水平堆叠或者垂直堆叠，可以将想要放到一起显示的内容集中展示

最后

祝各位玩出自己喜欢的样子了！

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～