找回密码
 立即注册

微信扫码登录

搜索
楼主: Camera4893

[UI界面] 终于弄了个比较满意的仪表盘

[复制链接]

1

主题

14

回帖

136

积分

注册会员

积分
136
金钱
121
HASS币
0
 楼主| 发表于 2025-11-12 13:02:43 | 显示全部楼层
主页第一行用 Mushroom 的 chips 实现:

第一个 chip 类型为天气 Weather,选择天气实体。
第二个 chip 类型为模板 Template,数据来自 lights_on 这个自定义模板传感器,图标颜色根据亮着的灯的数量变化,点击动作为导航到 lights 这个视图
第三个 chip 类型也是模板,显示室内温度传感器的最低值和最高值
第四个 chip 类型还是模板,根据门磁的状态显示

YAML 代码如下

       cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: weather
                entity: weather.tian_qi
                show_conditions: true
                show_temperature: true
              - type: template
                content: '{{ states(''sensor.lights_on'') }}'
                icon: mdi:lightbulb-group
                icon_color: |-
                  {% if ((states('sensor.lights_on') | int) > 0) %}
                    amber
                  {% else %}
                    gray
                  {% endif %}
                tap_action:
                  action: navigate
                  navigation_path: lights
              - type: template
                tap_action:
                  action: navigate
                  navigation_path: indoor
                content: >-
                  {{ label_entities('Sensor:IndoorTemperature') | expand |
                  map(attribute='state') | min | round(1) }}°C - {{
                  label_entities('Sensor:IndoorTemperature') | expand |
                  map(attribute='state') | max | round(1) }}°C
                icon: mdi:thermometer
                icon_color: light-green
              - type: template
                icon: >-
                  {% if
                  is_state('binary_sensor.door_window_sensor_158d00015ae934',
                  'off') %}mdi:door-closed{% else %}mdi:door-open{% endif %}
                icon_color: >-
                  {% if
                  is_state('binary_sensor.door_window_sensor_158d00015ae934',
                  'off') %}blue{% else %}red{% endif %}
                content: >-
                  门{% if
                  is_state('binary_sensor.door_window_sensor_158d00015ae934',
                  'off') %}关{% else %}开{% endif %}着
                tap_action:
                  action: navigate
                  navigation_path: security
            alignment: center

回复

使用道具 举报

1

主题

14

回帖

136

积分

注册会员

积分
136
金钱
121
HASS币
0
 楼主| 发表于 2025-11-12 13:04:30 | 显示全部楼层
本帖最后由 Camera4893 于 2025-11-12 13:05 编辑

计算当前有几个灯亮着的 Template Sensor 代码如下,需要先把要统计的灯光实体打上 “Light” 标签:
{{ label_entities('Light') | expand | selectattr('state', 'eq', 'on')  |  list | count }}
回复

使用道具 举报

0

主题

11

回帖

111

积分

注册会员

积分
111
金钱
100
HASS币
0
发表于 2025-11-12 14:33:05 | 显示全部楼层
在手机上很好看
回复

使用道具 举报

zkxa 手机认证

5

主题

280

回帖

2200

积分

金牌会员

积分
2200
金钱
1915
HASS币
0
发表于 2025-11-12 14:49:30 | 显示全部楼层
整个代码可以分享一下么。
回复

使用道具 举报

1

主题

14

回帖

136

积分

注册会员

积分
136
金钱
121
HASS币
0
 楼主| 发表于 2025-11-12 16:39:28 | 显示全部楼层
基本上就是水平堆叠卡片 + Mushroom 实体卡片 + Mushroom 模板卡片的重复使用
回复

使用道具 举报

1

主题

22

回帖

128

积分

注册会员

积分
128
金钱
105
HASS币
0
发表于 2025-11-18 12:27:49 | 显示全部楼层
我直接懒人平铺
微信图片_20251118122516_90_222.png
回复

使用道具 举报

8735 手机认证

0

主题

22

回帖

73

积分

注册会员

积分
73
金钱
51
HASS币
0
发表于 昨天 09:40 | 显示全部楼层

您这个不错,实用,请问能分享分享吗
回复

使用道具 举报

8735 手机认证

0

主题

22

回帖

73

积分

注册会员

积分
73
金钱
51
HASS币
0
发表于 昨天 10:06 | 显示全部楼层
Camera4893 发表于 2025-11-12 13:02
主页第一行用 Mushroom 的 chips 实现:

第一个 chip 类型为天气 Weather,选择天气实体。

我创建一个新的仪表盘,然后复制粘贴,提示错误
回复

使用道具 举报

2

主题

111

回帖

1105

积分

金牌会员

积分
1105
金钱
987
HASS币
20
发表于 昨天 21:49 | 显示全部楼层
想抄个作业,请问大佬环境,灯光那一排是用水平堆叠加什么卡片实现的
回复

使用道具 举报

1

主题

22

回帖

128

积分

注册会员

积分
128
金钱
105
HASS币
0
发表于 1 小时前 | 显示全部楼层
8735 发表于 2026-1-3 09:40
您这个不错,实用,请问能分享分享吗

直接用系统自带区域
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian ( 晋ICP备17001384号-1 )

GMT+8, 2026-1-4 13:31 , Processed in 0.087465 second(s), 8 queries , MemCached On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表