『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 37189|回复: 1022

[UI界面] HA彩平图UI分享(2024-11-17阶段性更新)-保姆级教程!

  [复制链接]

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
发表于 2024-8-9 18:45:19 | 显示全部楼层 |阅读模式
本帖最后由 消逝 于 2024-11-17 22:25 编辑

2024-11-17更新:阶段性更新,短期内不会再动了,准备研究下手机UI

1、更换主题方式(可自主随意调节颜色,自动调节颜色)
2、增加了很多设备(厨房设备、冰箱、洗衣机、门铃灯)
3、重绘了很多图标
4、时间、日期、星期、节气、农历年月时辰,改由NR本地计算
5、万年历里的日历表各个日期位置改由NR计算
6、重绘电费弹出菜单
7、增加水费、温度、湿度等弹出菜单
8、增加天气小时的弹出菜单
9、暂时想起来这些,还有好多更改的,不记得了
游客,如果您要查看本帖隐藏内容请回复



2024-11-16更新:净化器、水暖毯、浴霸 手搓模块,取消圆环背景图,改由button生成

游客,如果您要查看本帖隐藏内容请回复



2024-11-09更新:再次重构代码

HACS下载Decluttering Card,通过此插件重构代码
1、xiaoshi-ui.yaml主UI文件,只作为位置调整
2、decluttering_templates文件夹内放UI代码
3、popup文件夹放弹出卡片代码
4、button_card_templates文件夹内放button模板代码
游客,如果您要查看本帖隐藏内容请回复

2024-11-08更新:万年历
跳转论坛链接:button_card手搓万年历
微信截图_20241108152920.png

2024-10-26更新:代码架构(无功能性更新,可忽略,看不懂慎改)【需要转换yaml模式,会掉资源,注意备份!!】

1、转换仪表盘为yaml文件形式
上传lovelace.yaml文件至configuration.yaml相同路径

lovelace.yaml文件里添加自己的资源文件路径和仪表盘
并在configuration.yaml添加如下代码
#configuration.yaml
lovelace: !include lovelace.yaml
2、参考附件,上传文件
     【button_templates】文件夹里放button_card模板内容
     【popup】文件夹里放弹出卡片内容
     【ui】文件夹里放ui长代码内容
3、文件引用,相对路径和绝对路径均可,如果是嵌套引用使用绝对路径
!include popup/electricity.yaml                      #相对路径
!include /config/dashboards/popup/electricity.yaml   #绝对路径
4、天气aqi由rest更换为nr,附nr流
5、部分代码重构,功能无太大变化
6、天气添加弹出菜单小时天气(我的pad不支持小时天气,所有手搓了一个,如果本身支持可不要这块)
游客,如果您要查看本帖隐藏内容请回复


2024-10-12更新:主题~~


游客,如果您要查看本帖隐藏内容请回复


  1、下载这个集成Select list Card,select展开显示插件
  2、准备黑底透明墙体图片,作为墙体镂空图
  3、增加辅助元素input_select.theme1,选项内容与纹理图片名字一致,如:熔岩橙、珍珠白
  4、增加辅助元素input_select.theme2,选项内容与文件夹名字一致,如:皮革、丝绒
  5、自动切换,随便加个自动化就可以,也可以使用我得,新增自动化-以yaml编辑-复制代码,保存
  6、背景图片类、按钮等,叠加背景色
- background-image: ' [[[ return "linear-gradient(0deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2)),url(''/local/UI/背景/"+states[''input_select.theme2''].state+"/"+states[''input_select.theme1''].state+".png'')";]]]'

  7、文字类,叠加背景色
- color: rgb(255,255,255,0.5)   #纯透明是显示图片颜色,加白色半透明是增亮
- background-clip: text
- background-image: ' [[[ return "url(''/local/UI/背景/"+states[''input_select.theme2''].state+"/"+states[''input_select.theme1''].state+".png'')";]]]'


2024-10-07更新:附最新完整代码及UI(2024-10-06),和之前相比未列出的文件均是弃用
游客,如果您要查看本帖隐藏内容请回复

2024-10-07更新:
     1、弄了一个极简版,只能控制灯、净化器、加湿器、空调等少量设备,状态条只有展示没有操作UI
     2、纯黑、适合当卧室常亮中控
     3、适合新手接触HA移植
游客,如果您要查看本帖隐藏内容请回复

137BB2B9F982D0940C57027B16A9D1C8.png

2024-10-06更新:更新一组净化器和加湿器动画图标:
游客,如果您要查看本帖隐藏内容请回复

2024-09-28更新:详情跳转帖子:button_card制作天气ui界面       
     1、图标库不全的,自行下载补充图标,网址:https://bas.dev/work/meteocons
     2、增加宽度,修改width: 50(单列的宽度,总宽度将*5)
     3、增加使用天气自带温湿度,还是使用自有实体的选择
     4、温度弯折的更大了一下,微调颜色   
     5、合并代码,除模板外的UI部分,只有1段代码
     6、更新温度雨量增加圆角,修复了宽度过大显示不全
游客,如果您要查看本帖隐藏内容请回复

2024-09-13更新:详情跳转帖子:button_card制作净化器、浴霸、水暖毯界面
    1、手搓模块:净化器、浴霸、水暖毯,代码完全独立
    2、简化代码、去除template模拟实体、去除scripts脚本等
    3、净化器主体部分代码简化(去除温度、湿度、pm实体的调用)
    4、净化器的【-】【+】加减号修改为:调整最爱模式的风力大小
    5、水暖毯的【-】【+】加减号修改为:调整目标温度的大小
游客,如果您要查看本帖隐藏内容请回复

2024-09-24更新:
    风格2:没有室外传感器的,借用天气预报实体【weather.tian_qi】   
    风格2:改变背景自动更换逻辑,由【按时间变化】变为【按室外温度+室外湿度变化,撞色显示(左上温度/右下湿度)】
    风格1:改变背景自动更换逻辑,由【按时间变化】变为【按室外温度变化】,并去除背景图片改为代码颜色
游客,如果您要查看本帖隐藏内容请回复

2024-08-10更新:时间模块内:农历年、农历月更新(UI获取数据微调)
游客,如果您要查看本帖隐藏内容请回复


======================以下正文======================

微信截图_20240809200955.png



感谢,日历本地化和诗词本地化方案提供者【bugprogrammer】bugprogrammer · GitHub

1、前期准备彩平图的背景图片附教程贴:彩平图户型图制作教程
2、HACS集成:
   browser_mod:弹出卡片(hacss搜索下载,重启ha,集成-添加集成,左侧菜单栏出现browser_mod即安装成功)
   chineseholiday:节假日卡片(hacss添加自定义库后,搜索下载,重启ha)
       github库地址:https://github.com/Crazysiri/chineseholiday
   ③qweather:和风天气(hacss添加库自定义库后,搜索下载,重启ha)
       github库地址:https://github.com/dscao/qweather
       本 论坛链接:和风天气完整配置版本2024.1.4
  battery-state-card:电池状态卡(hacss,搜索下载,reroad刷新下)
   button-card:按钮卡片(hacss,搜索下载,reroad刷新下)
   gauge-card:扇形卡片(hacss,搜索下载,reroad刷新下)
   mini-media-player:迷你播放器(hacss,搜索下载,reroad刷新下)
   vacuum-card:扫地机器人卡(hacss,搜索下载,reroad刷新下)
   kiosk-mode:隐藏状态栏(hacss,搜索下载,reroad刷新下)
   ⑩mushroom-entity-card:蘑菇卡片(hacss,搜索下载,reroad刷新下)
3、配置主题文件:
   上传主题AAAAAAAA.yaml文件,路径:themes\AAAAAAAA\AAAAAAAA.yaml
   并且在configuration.yaml添加2行如下配置:
#configuration.yaml
frontend:
  themes: !include_dir_merge_named themes
    开发者工具→服务(动作)→找【重载加载主题】→调用服务(执行动作)
4、配置模拟实体template
   上传模拟实体template.yaml文件,放置configuration.yaml相同路径
   并且在configuration.yaml添加1行如下配置:
#configuration.yaml
template: !include template.yaml
    开发者工具→YAML配置→模拟实体(TEMPLATE)重载
    说明:比如想要统计的电量(低于10%)的设备数量,可以将需要统计的实体重命名为:【dianliang_xxxxxxxx
          这样就可以直接使用过滤器搜索【dianliang_】开头的所有实体,来统计总数量,比较方便的一个方法
          过滤器更详细的使用方法,详细参照Jinja2 模板文档:Template Designer Documentation
                 本人设置如下:
                     时间:格式是时分秒20:24:00,且按秒刷新
                     全屋灯光:将指示灯类实体禁用,或者加rejectattr('attributes.friendly_name','search','指示灯')来屏蔽指示灯
                     全屋厨房设备:实体名修改为【chufang_】开头
                     全屋耗材设备:实体名修改为【haocai_】开头
                     全屋电量设备:实体名修改为【dianliang_】开头
                     全屋更新设备:不用修改,可直接使用
                     全屋离线设备:不用修改,可直接使用(本人排除了电视和电脑,这2设备关机就会变成离线,所以排除)
                     全屋空调设备:不用修改,可直接使用
                     全屋加湿器设备:不用修改,可直接使用
                     全屋净化器设备:不用修改,可直接使用
                     全屋浴霸设备:实体名修改为【yuba_】开头
                     全屋媒体设备::不用修改,可直接使用(电视状态获取不正常一直idle,本人通过ping-ip方式判断电视是否开机,集成-添加-ip设备)
                     全屋其他设备:实体名修改为【other_】开头
- name: fullroom_battery_num
      state: >
        {{  states.sensor
            | selectattr('entity_id','search','dianliang_')  #搜索dianliang_开头的实体
            | rejectattr('state','eq','unavailable')  #排除未知状态的实体
            | map( attribute ='state')  #搜索状态
            | map('int',-1) 
            | select('le',10)  #搜索状态小于10的实体
            | list | count  }}
5、配置脚本scripts
     手搓模块需要用到(手搓的净化器等),如不需要,可以跳过此项
   上传脚本scripts.yaml文件,放置configuration.yaml相同路径,
   并且在configuration.yaml添加1行如下配置:
#configuration.yaml
script: !include scripts.yaml
   开发者工具→YAML配置→脚本(SCRIPT)重载
6、配置api接口rest:
   天气数据aqi和本地化诗词会用到此项
    上传rest.yaml文件,放置configuration.yaml相同路径,
    并且在configuration.yaml添加1行如下配置:
#configuration.yaml
rest: !include rest.yaml
   开发者工具→YAML配置→REST实体及其通知服务REST)重载
7、配置实体sensor:
   节假日插件会用到此项,可以参照论坛使用,也可以直接参照我得配置文件
   上传sensor.yaml文件,放置configuration.yaml相同路径,
   并且在configuration.yaml添加1行如下配置,重启ha生效
#configuration.yaml
sensor: !include sensor.yaml
8、配置本地化诗词:
   上传【诗词.txt】到主机上/mnt/诗词.txt,也可以自行编辑此文档,格式:题目-朝代-作者-正文1-正文2
   运行docker容器,第1个是普通平台,第2个是arm64v8平台

   xxxx替换成想要的端口,如8000,安装完后,访问地址:http://IP地址:8000
docker run -d -p xxxx:5000 -v /mnt/诗词.txt:/app/shici.txt --name jinrishici --restart="unless-stopped" bugprogrammer/shici:latest
docker run -d -p xxxx:5000 -v /mnt/诗词.txt:/app/shici.txt --name jinrishici --restart="unless-stopped" bugprogrammer/shici:latest_arm64v8
   同时也提供在线接口:https://v2.jinrishici.com/sentence可以通过rest获取也可以通过NR获取,附nr流导入文件
9、配置本地化日历:
   运行docker容器,
   xxxx替换成想要的端口,如8001,安装完后,访问地址:http://IP地址:8001
docker run -d -p XXXX:80 --name calendar-remark --restart="unless-stopped" bugprogrammer/calendar-remark:latest_arm64v8
10、配置自动化:
    定时更新api、重启后更新api等,也可以手动添加自动化
    上传automations.yaml文件,放置configuration.yaml相同路径,
    并且在configuration.yaml添加1行如下配置,重启ha生效
#configuration.yaml
automation: !include automations.yaml

资源文件下载:

游客,如果您要查看本帖隐藏内容请回复
















评分

参与人数 19金钱 +147 HASS币 +20 收起 理由
a439771597 + 6 高手,这是高手!
hhh. + 16 高手,这是高手!
book123 + 10 论坛有你更精彩!
cooliscool + 5
woodybaby + 5
mobility + 10 感谢楼主分享!
nbxzl + 4 感谢楼主分享!
liy517 + 8
froyo + 6 高手,这是高手!
penguinmm + 6 高手,这是高手!
summ99111 + 8 高手,这是高手!
+ 20 + 20 高手,这是高手!
土豪七 + 2 感谢楼主分享!
z665211z + 5
DIYSmartHome + 8 高手,这是高手!
askyanan + 5 高手,这是高手!
aiqienanguatou + 10 在下对你的景仰犹如滔滔长江之水,连绵不绝.
隔壁的王叔叔 + 12 感谢楼主分享!
sanwangxiang + 1 论坛有你更精彩!

查看全部评分

回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-8-9 19:15:11 | 显示全部楼层
本帖最后由 消逝 于 2024-8-9 21:42 编辑

UI代码详细讲解:长文警告!!!
1、基础结构了解:
kiosk_mode: #<span style="background-color: rgb(255, 255, 255);">隐藏状态栏</span>
  hide_header: true
  hide_sidebar: true
views:
  - type: panel
    title: Home
    cards:
      - type: picture-elements
        image: /local/UI/null.png
        elements:
          - type: image
            xxxx: xxxxx

          - UI代码部分…………

button_card_templates: #模板部分
  template1: #模板1
   xxxx:
   xxxx:

  template2: #模板2
   xxxx:
   xxxx:

  button模板部分……

2、全屏开关切换
     【设备与服务】【辅助元素】【创建辅助元素】【选切换开关/开关(新版叫二元选择器)】名字设定为:input_boolean.full
kiosk_mode:
  entity_settings:
    - entity:
        input_boolean.full: 'on'
      hide_header: true
      hide_sidebar: true
    - entity:
        input_boolean.full: 'off'
      hide_header: false
      hide_sidebar: false
3、总是不能全屏?,这里/local/UI/null20_15.png空白图片必须使用与屏幕分辨率相同的长款比
      比如设备像素是2048:1536,那这里也必须是2048:1536,化简后4:3,我使用了20:15
views:
  - type: panel
    title: Home
    cards:
      - type: picture-elements
        image: /local/UI/null20_15.png
        elements:
4、全屏切换开关,默认未知在最左上角30px:40px,默认没有任何显示,可自行添加icon等图标,icon: mdi:xxxx
          - type: custom:button-card
            entity: input_boolean.full
            show_name: false
            show_icon: false
            tap_action:
              action: toggle
            styles:
              card:
                - width: 40px
                - height: 80px
            style:
              left: 30px
              top: 40px
5、背景图片
比如设备像素是:2048*1536
准备的图片要使用相同像素:2048*1536
width=设备像素宽/2=2048/2=1024px
entity_picture.width=100%,始终100%top=设备像素高/4=1536/4=384px
left=设备像素宽/4=2048/4=512px
          - type: custom:button-card
            show_entity_picture: true
            entity_picture: /local/UI/背景/背景.png
            style:
              pointer-events: none
              top: 384px
              left: 512px
            styles:
              entity_picture:
                - width: 100%
              card:
                - width: 1024px
                - filter: >
                    [[[return
                    "hue-rotate("+states['sensor.time_deg'].state*6+"deg)"]]]
6、房间图
     背景图、房间框图、房间家具图,可以分开准备3张图,也可以准备1张图,不影响效果
     分开的好处,房间/家具的位置/透明度可以随时调整,后期还可以加工不同主题/花纹等
          - type: image
            style:
              pointer-events: none
              top: 489px
              left: 635px
              width: 660px
            image: /local/UI/背景/房间框图.png
          - type: image
            style:
              pointer-events: none
              opacity: 0.4
              top: 489px
              left: 635px
              width: 660px
            image: /local/UI/背景/房间家具.png
7、灯光控制
避免image有大块的触摸反馈,本人基本全部更换为了button_card
border-radius: 100%,是指100%圆角,即按钮是圆形的,配合圆形的灯,触摸反馈也是圆形的
entity_picture:直接获取灯光状态对应的图片文件
          - type: custom:button-card
            entity: switch.ciwokaiguan_right
            show_name: false
            show_entity_picture: true
            entity_picture: '[[[return "/local/UI/灯光/灯光"+entity.state+".png" ]]]'
            styles:
              entity_picture:
                - width: 100%
              card:
                - border-radius: 100%
                - width: 35px
            style:
              top: 275px
              left: 407px
button_card也提供了屏蔽触摸反馈
            styles:
              card:
                - '--mdc-ripple-press-opacity': 0
8、扫地机器人border-radius: 100%,触摸反馈圆形
entity_picture:直接获取扫地机器人状态对应的图片文件
tap_action: action: fire-dom-event  browser_mod.popup 点击直接是弹出菜单
content: 往下开始是弹出菜单内容
使用了一个机器人卡片type: custom:vacuum-card(带清扫地图功能的也可以放清扫地图的集成)
          - type: custom:button-card
            entity: vacuum.xiaomi_vacuum
            show_entity_picture: true
            show_name: false
            entity_picture: '[[[return "/local/UI/扫地机器人/扫地机器人"+entity.state+".svg"]]]'
            style:
              top: 380px
              left: 482px
            styles:
              entity_picture:
                - width: 100%
              card:
                - border-radius: 100%
                - width: 38px
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  content:
                    type: custom:vacuum-card
                    entity: vacuum.xiaomi_vacuum
                    stats:
                      default:
                        - entity_id: sensor.saodijiqiren_zhushua_shengyushijian
                          subtitle: 主刷
                          unit: h
                        - entity_id: sensor.saodijiqiren_zhushua
                          subtitle: 主刷
                          unit: '%'
                        - entity_id: sensor.saodijiqiren_bianshua_shengyushijian
                          subtitle: 边刷
                          unit: h
                        - entity_id: sensor.saodijiqiren_bianshua
                          subtitle: 边刷
                          unit: '%'
                        - entity_id: sensor.saodijiqiren_lvwang_shengyushijian
                          subtitle: 滤网
                          unit: h
                        - entity_id: sensor.saodijiqiren_lvwang
                          subtitle: 滤网
                          unit: '%'
                      cleaning:
                        - attribute: fan_speed
                          subtitle: 风扇
                        - attribute: battery_level
                          subtitle: 电量
                        - attribute: vacuum_extend.cleaning_time
                          unit: min
                          subtitle: 清扫时间
                        - attribute: vacuum_extend.cleaning_area
                          unit: ㎡
                          subtitle: 清扫面积
                        - attribute: vacuum_extend.cleaning_mode
                          subtitle: 清扫模式
9、电脑
entity_picture:直接获取电脑状态对应的图片文件
电脑屏幕截图、cpu、内存、硬盘等电脑信息是在PC电脑安装这个软件IOT-Link
opne-configuration.yaml,里配置ha的mqtt的ip、用户名密码即可
          - type: custom:button-card
            entity: switch.diannao
            show_entity_picture: true
            show_name: false
            entity_picture: '[[[return "/local/UI/电脑/电脑"+entity.state+".png"]]]'
            style:
              top: 380px
              left: 633px
            styles:
              entity_picture:
                - width: 100%
              card:
                - width: 60px
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  content:
                    type: picture-elements
                    image: /local/UI/null.png
                    elements:
                      - type: custom:button-card
                        entity: camera.pc_screen
                        show_name: false
                        show_entity_picture: true
                        size: 100%
                        styles:
                          card:
                            - width: 400px
                            - height: 260px
                        entity_picture: |
                          [[[
                               if (states['switch.diannao'].state =='on') return entity.attributes.entity_picture
                               else return '/local/UI/电脑/电脑pc-off.png'
                          ]]]             
                        style:
                          pointer-events: none
                          top: 155px
                          left: 266px
                          width: 400px
                      - type: custom:gauge-card
                        entity: sensor.pc_cpu_usage
                        title: CPU
                        scale: 40px
                        style:
                          top: 330px
                          left: 30%
                          width: 20%
                      - type: custom:gauge-card
                        entity: sensor.pc_memory_usage
                        title: 内存
                        scale: 40px
                        style:
                          top: 330px
                          left: 70%
                          width: 20%
                      - type: custom:button-card
                        entity: switch.diannao
                        tap_action:
                          action: toggle
                        icon: mdi:power
                        styles:
                          card:
                            - width: 120px
                            - height: 60px
                            - border-radius: 7px
                            - background: rgb(0,0,0,0.2)
                        style:
                          top: 500px
                          left: 273px
10、电视
使用的是Xiaomi Miot Auto集成提供的电视遥控器的方案
链接:hass-xiaomi-miot ❤️ mini-media-player · Issue #250 · al-one/hass-xiaomi-miot · GitHub
          - type: custom:button-card
            entity: binary_sensor.xiaomidianshi
            show_entity_picture: true
            show_name: false
            entity_picture: '[[[return "/local/UI/电视/电视"+entity.state+".png"]]]'
            style:
              top: 523px
              left: 714px
            styles:
              entity_picture:
                - width: 100%
              card:
                - width: 160px
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  content:
                    type: picture-elements
                    image: /local/UI/null.png
                    elements:
                      - type: custom:button-card
                        entity: media_player.xiaomidianshi
                        show_name: false
                        show_entity_picture: true
                        size: 100%
                        entity_picture: '[[[ return entity.attributes.entity_picture ]]]'
                        styles:
                          card:
                            - width: 400px
                            - height: 260px
                        style:
                          top: 150px
                          left: 273px
                      - type: custom:mini-media-player
                        entity: media_player.xiaomidianshi
                        style:
                          top: 415px
                          left: 275px
                          width: 450px
                        hide:
                          icon: true
                        tts:
                          platform: service
                          data:
                            message_field: text
                            service: xiaomi_miot.intelligent_speaker
                            service_data:
                              entity_id: media_player.redmiyinxiang
                              execute: true
                              silent: true
                        shortcuts:
                          columns: 5
                          buttons:
                            - type: service
                              icon: mdi:home
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: home
                            - type: service
                              icon: mdi:arrow-up
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: up
                            - type: service
                              icon: mdi:menu
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: menu
                            - type: service
                              icon: mdi:volume-plus
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: volumeup
                            - type: service
                              icon: mdi:television-play
                              id: xiaomi_miot.intelligent_speaker
                              data:
                                entity_id: media_player.redmiyinxiang
                                text: 打开电视
                                execute: true
                                silent: true
                            - type: service
                              icon: mdi:arrow-left
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: left
                            - type: service
                              icon: mdi:keyboard-return
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: enter
                            - type: service
                              icon: mdi:arrow-right
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: right
                            - type: service
                              icon: mdi:play-pause
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: play_pause
                            - type: service
                              icon: mdi:numeric-1-box
                              id: xiaomi_miot.intelligent_speaker
                              data:
                                entity_id: media_player.redmiyinxiang
                                text: 电视播放第一集
                                execute: true
                                silent: true
                            - type: service
                              icon: mdi:cog
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_app_current
                                option: 电视设置 - com.xiaomi.mitv.settings
                            - type: service
                              icon: mdi:arrow-down
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: down
                            - type: service
                              icon: mdi:backspace
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: back
                            - type: service
                              icon: mdi:volume-minus
                              id: select.select_option
                              data:
                                entity_id: select.xiaomidianshi_keycodes
                                option: volumedown
                            - type: service
                              icon: mdi:television-off
                              id: xiaomi_miot.intelligent_speaker
                              data:
                                entity_id: media_player.redmiyinxiang
                                text: 关闭电视
                                execute: true
                                silent: true



回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-8-9 21:44:27 | 显示全部楼层
本帖最后由 消逝 于 2024-8-9 22:33 编辑

10、净化器、加湿器、空调、浴霸、厨房设备、其他等设备
entity: sensor.fullroom_fan_num 实体这里默认是全屋设备数量的实体,和右侧状态栏使用的是同一实体,目的是点击将跳转对应弹出菜单
也就是,客厅的净化器图标、主卧的净化器图标、右侧状态栏全屋净化器,这3个点击弹出的是同一弹出菜单
variables:
   entity: fan.jinghuaqi_keting,这里是当前净化器实体,用于显示状态

entity_picture: 显示variables.entity内实体的状态图标
厨房设备没有对应关联弹出菜单(不超做厨房设备,没用且危险)
          - type: custom:button-card
            entity: sensor.fullroom_fan_num
            variables:
              entity: fan.jinghuaqi_keting
            show_name: false
            show_entity_picture: true
            tap_action:
              action: more-info
            entity_picture: |
              [[[ var state = states[variables.entity].state;
                  return '/local/UI/净化器/净化器'+state+'.svg']]]
            styles:
              entity_picture:
                - width: 100%
              card:
                - width: 25px
            style:
              top: 536px
              left: 606px
11、时间、日期、生日、节假日
时间、日期、星期、节气、时辰,是本地计算,不需要关联实体,复制即用
农历年、农历日期、生日、节日,是使用的【节假日集成】,对应默认的实体是:sensor.holiday
弹出菜单是关联的本地日历:使用的是iframe浏览器组件关联网址http://192.168.31.208:8001/
variables:
              jieqi_tiaozheng: 1,是节气的偏移量,目前是1,因为节气不是整天,所以会偏移,不准的时候调整这个调节
          - type: custom:button-card
            style:
              left: 142px
              top: 95px
            variables:
              jieqi_tiaozheng: 1
            styles:
              grid:
                - grid-template-areas: |
                    "time time time time"
                    "date week jieqi jieqi"
                    "year mon mon day"
                    "line line line line"
                    "shengri shengri shengri shengri"
                    "jieri jieri jieri jieri"
                - grid-template-columns: 80px 58px 16px 72px
                - grid-template-rows: 70px 22px 22px 10px 22px 22px
                - text-align: left
                - font-weight: bold
                - font-size: 16px
              card:
                - width: 230px
                - height: 188px
              custom_fields:
                time:
                  - font-size: 57px
                  - font-weight: 430
                  - text-align: center
                jieqi:
                  - text-align: right
                day:
                  - text-align: right
            custom_fields:
              time: '[[[return states[''sensor.time''].state]]]'
              date: |
                [[[
                   let date = new Date(), month = date.getMonth()+1, day = date.getDate();
                   if (month < 10) month = `0${month}` ;
                   if (day   < 10) day   = `0${day}` ;
                   return `${month}月${day}日`;
                ]]]
              week: |
                [[[
                    var day  = new Date().getDay();
                    var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[day]
                    return week;
                ]]]
              jieqi: |
                [[[
                     var now =new Date();
                     var year=now.getYear(), mon=now.getMonth(), day=now.getDate()+variables.jieqi_tiaozheng;
                     var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨","立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑","白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
                     var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693,263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
                     var solarTerms = "",num1=1, num2=1;
                     while (solarTerms==""){ num1 = num1+1;
                       var temp1 = new Date((31556925974.7*(year-1900)+sTermInfo[mon*2+1] * 60000)+Date.UTC(1900,0,6,2,5));
                       var temp2 = temp1.getUTCDate();
                       if (temp2 == day) solarTerms = solarTerm[mon*2+1];
                       temp1 = new Date((31556925974.7*(year-1900)+sTermInfo[mon*2]*60000)+Date.UTC(1900,0,6,2,5)); 
                       temp2 = temp1.getUTCDate(); 
                       if(temp2==day) solarTerms = solarTerm[mon*2]; 
                       if(day>1){day=day-1;} else { mon=mon-1;if(mon<0){year=year-1; mon=11;}day=31; }} 
                     return solarTerms+" 第"+(num1-1)+"天"; 
                ]]]
              year: >
                [[[ return
                states['sensor.holiday'].attributes.data.lunar.slice(0,4)]]]
              mon: >
                [[[ return
                states['sensor.holiday'].attributes.data.lunar.slice(5,9)]]]
              day: |
                [[[
                    let tzArr = ['子','丑','寅','卵','辰','巳','午','未','申','酉','戌','亥'];
                    let skArr = ['一','二','三','四','五','六','七','八'];
                    var h = new Date().getHours();
                    var m = new Date().getMinutes();
                    if (h%2 ==0)  var shike = skArr[parseInt(m/15)] ;
                    if (h%2 ==1)  var shike = skArr[parseInt(m/15)+4];
                    return  tzArr[parseInt(h/2)] + '时' + shike +'刻';
                ]]]
              line:
                card:
                  type: custom:button-card
                  styles:
                    card:
                      - width: 228px
                      - border-top: 2px solid white
                      - margin-top: 18px
              shengri: |
                [[[
                   var jieri1 =  states['sensor.holiday'].attributes.纪念日 ;
                   var jieri2 =  states['sensor.holiday'].attributes.最近的纪念日 ;
                   var jieri3 =  states['sensor.holiday'].attributes.最近的纪念日还有 ;
                   if (jieri1 != undefined ) return`${jieri1}`;
                   if (jieri1 == undefined ) return`${jieri2} ${jieri3}`;
                ]]]
              jieri: |
                [[[
                   var jieri1 =  states['sensor.holiday'].attributes.节日 ;
                   var jieri2 =  states['sensor.holiday'].attributes.最近的节日 ;
                   var jieri3 =  states['sensor.holiday'].attributes.最近的节日还有 ;
                   if (jieri1 != undefined ) return`${jieri1}`;
                   if (jieri1 == undefined ) return`${jieri2} ${jieri3}`;
                ]]]            
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  content:
                    type: iframe
                    url: http://192.168.31.208:8001/
                    aspect_ratio: 124%
12、电费
数据源,自行到github搜索国家d网,这里不方便提供
默认是2个户的。
界面使用了蘑菇卡片,mushroom-entity-card
          - type: custom:button-card
            style:
              left: 155px
              top: 220px
            styles:
              grid:
                - grid-template-areas: >
                    "name1 balance1 month1"  "name2 balance2 month2"  "time time
                    time" 
                - grid-template-columns: 65px 95px 100px
                - grid-template-rows: 18px 20px 18px
                - text-align: left
                - font-size: 13px
              card:
                - width: 260px
                - height: 76px
              custom_fields:
                name1:
                  - font-weight: bold
                name2:
                  - font-weight: bold
            custom_fields:
              name1: '海蓝城:'
              name2: '世纪颐园:'
              balance1: >
                [[[ var num =
                Math.floor(states['sensor.dianfei_hailancheng_balance'].state*100)/100;
                    return '金额: '+num+' 元' ]]]
              balance2: >
                [[[ var num =
                Math.floor(states['sensor.dianfei_shijiyiyuan_balance'].state*100)/100;
                    return '金额: '+num+' 元' ]]]
              month1: >
                [[[ var num =
                Math.floor(states['sensor.dianfei_hailancheng_month_ele_num'].state*100)/100;
                    return '本月: '+num+' kwh' ]]]
              month2: >
                [[[ var num =
                Math.floor(states['sensor.dianfei_shijiyiyuan_month_ele_num'].state*100)/100;
                    return '本月: '+num+' kwh' ]]]
              time: >
                [[[return
                states['sensor.dianfei_shijiyiyuan_refresh_time'].state ]]]
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  content:
                    type: vertical-stack
                    cards:
                      - type: vertical-stack
                        title: 海蓝城 - 用电信息
                        cards:
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_balance
                                name: 电费余额
                                icon_color: yellow
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_daily_lasted_date
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_daily_ele_num
                                name: 日总用电
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_last_month_ele_num
                                name: 上月用电
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_year_ele_num
                                name: 本年用电
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_month_ele_num
                                name: 本月用电
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_last_month_ele_cost
                                name: 上月电费
                                icon_color: yellow
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_hailancheng_year_ele_cost
                                name: 本年电费
                                icon_color: yellow
                      - type: vertical-stack
                        title: 世纪颐园 - 用电信息
                        cards:
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_balance
                                name: 电费余额
                                icon_color: yellow
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_daily_lasted_date
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_daily_ele_num
                                name: 日总用电
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_last_month_ele_num
                                name: 上月用电
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_year_ele_num
                                name: 本年用电
                          - type: horizontal-stack
                            cards:
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_month_ele_num
                                name: 本月用电
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_last_month_ele_cost
                                name: 上月电费
                                icon_color: yellow
                              - type: custom:mushroom-entity-card
                                entity: sensor.dianfei_shijiyiyuan_year_ele_cost
                                name: 本年电费
                                icon_color: yellow
1个户,将开头改成如下即可,或者放着其他字段
          - type: custom:button-card
            style:
              left: 155px
              top: 220px
            styles:
              grid:
                - grid-template-areas: >
                    "name1 balance1 month1"  "time time
                    time" 
                - grid-template-columns: 65px 95px 100px
                - grid-template-rows: 18px 18px 
                - text-align: left
                - font-size: 13px
13、温度、湿度分布图
前提,每个房间要有温湿度传感器,可以用空调的、净化器的、加湿器的,或者购买温湿度计
根据温湿度变色,是调用了button模板wendubeijing和shidubeijing

QQ截图20240809221055.png
          - type: custom:button-card
            styles:
              grid:
                - grid-template-areas: |
                    "a a a z2 z11 z11 z11 z11 z11 z11"
                    "a a a z2 d1 z12 z12 z12 z12 z12"
                    "z1 z1 z1 z1 d1 z12 z12 z12 z12 z12"
                    "b z3 d d d d d d d z13"
                    "z4 z4 z4 z4 d2 z10 z10 z10 z10 z10"
                    "c c c z5 d2 z9 g1 g1 g g"
                    "c c c z5 z6 z6 z6 z6 g g"
                    "c c c z5 e z7 f z8 g g"
                - grid-template-columns: 25.5px 1.4px 9.8px 2.5px 20px 3px 21.21px 1.8px 24px 14px
                - grid-template-rows: 20px 12px 1.6px 41px 2.3px 7px 3px 26px
              card:
                - width: 125px
                - height: 122px
            style:
              left: 85px
              top: 680px
            custom_fields:
              a:
                ……
              b:
                ……
              c:
                ……
button_card_templates:
  wendubeijing:
   ……
  shidubeijing:
   ……

14、头像
如果有外网,可以使用app获取定位,获得是否在家
如果没有外网,可以使用Ping(ICMP),集成,添加集成,找到Ping,添加手机ip,判断在家间隔可以设置长一些,如10分钟
          - type: custom:button-card
            style:
              top: 65px
              left: 827px
            styles:
              grid:
                - grid-template-areas: '"img" "home"'
                - grid-template-columns: 100x
                - grid-template-rows: 60px 20px
              card:
                - width: 100px
                - height: 90px
                - background: rgba(0,0,0,0.2)
                - border-radius: 10px
              custom_fields:
                img:
                  - width: 44px
                  - height: 44px
                  - justify-self: center
                  - border-radius: 22px
                  - background: |
                      [[[
                        var state= states['device_tracker.zhangqiang'].state;
                        if (state =='home') return 'rgba(135,206,250,0.5)';   
                        if (state =='not_home') return 'rgba(255,55,50,0.5)';       
                      ]]]
                home:
                  - font-size: 15px
                  - color: |
                      [[[
                        var state= states['device_tracker.zhangqiang'].state;
                        if (state =='home') return 'rgb(135,206,250)';   
                        if (state =='not_home') return 'rgb(255,55,50)';       
                      ]]]  
            custom_fields:
              img:
                card:
                  type: custom:button-card
                  entity: device_tracker.zhangqiang
                  show_entity_picture: true
                  show_name: false
                  entity_picture: /local/UI/头像/ZQ.png
                  styles:
                    entity_picture:
                      - width: 100%
              home: Zhangqiang
15、古诗词
如果是本地诗词,通过rest获取的实体,
ui里使用 states['sensor.gushi'].attributes.题目,获取是信息
如过有人和我一样获取不到属性,只能获得长文本
ui里使用states['sensor.gushi'].state.split('"')[15],获取信息(截断位置分别为3、7、11、15、19)
如果是使用的NR,直接用对应的实体states['sensor.xxxxx'].state,获取信息
刷新按钮:本地诗词是用的重载实体sensor.gushi(NR的是使用流里的input按钮实体)
          - type: image
            info1: '************************************************************'
            info2: '************************   古诗词   ************************'
            info3: '************************************************************'
          - type: custom:button-card
            style:
              left: 550px
              top: 123px
            styles:
              grid:
                - grid-template-areas: |
                    "name refresh" "content1 content1" "content2 content2" 
                - grid-template-columns: 350px 150px
                - grid-template-rows: 25px 20px 20px
              card:
                - '--mdc-ripple-press-opacity': 0
                - padding: 0 0 0 0
                - width: 500px
                - height: 65px
                - font-size: 14px
              custom_fields:
                content1:
                  - margin-left: 14px
                  - justify-self: start
                content2:
                  - margin-left: 14px
                  - justify-self: start
            custom_fields:
              content1: |
                [[[return states['sensor.gushi'].state.split('"')[15]]]]
              content2: |
                [[[return states['sensor.gushi'].state.split('"')[19]]]]
              name:
                card:
                  type: custom:button-card
                  show_label: true
                  styles:
                    card:
                      - width: 350px
                      - '--mdc-ripple-press-opacity': 0
                    label:
                      - font-size: 14px
                      - font-weight: bold
                      - justify-self: start
                  label: |
                    [[[
                         var title   = states['sensor.gushi'].state.split('"')[3];
                         var dynasty = states['sensor.gushi'].state.split('"')[7];
                         var author  = states['sensor.gushi'].state.split('"')[11];
                         return  "「" + title + "」 — "+ dynasty + "·" + author ;
                     ]]]
                  tap_action:
                    action: call-service
                    service: text.set_value
                    target:
                      entity_id: text.redmi_zhixingmingling
                    data:
                      value: |
                        [[[ 
                           var title   = states['sensor.gushi'].state.split('"')[3];
                           var author  = states['sensor.gushi'].state.split('"')[11];
                           return  title + " " + author ;
                         ]]]
              refresh:
                card:
                  type: custom:button-card
                  show_icon: true
                  icon: mdi:refresh
                  tap_action:
                    action: call-service
                    service: homeassistant.update_entity
                    target:
                      entity_id:
                        - sensor.gushi
                    data: {}
                  styles:
                    icon:
                      - width: 20px
                      - height: 20px
                    card:
                      - width: 20px
                      - height: 20px
                      - border-radius: 100%
                      - left: |
                          [[[
                               var title   = states['sensor.gushi'].state.split('"')[3];
                               var dynasty = states['sensor.gushi'].state.split('"')[7];
                               var author  = states['sensor.gushi'].state.split('"')[11];
                               var len =  title + dynasty + author ;
                               return  len.length*13-270 + "px" ;
                           ]]]     
16、天气
使用button手搓的模块
除了复制代码外,还需要复制button模板(模板内weather开头)
aqi不用的话,删除【aqi:启用】这行即可
【width: 52】单列的宽度,建议50-60之间,要不变形严重可以选择使用天气预测实时的温湿度显示,或者用自己阳台的温湿度显示
wendu_entity: sensor.wendu_shiwai
shidu_entity: sensor.shidu_shiwai
或
wendu_entity: 使用天气温度
shidu_entity: s使用天气湿度
          - type: custom:button-card
            template: weather
            variables:
              wendu_entity: sensor.wendu_shiwai
              shidu_entity: sensor.shidu_shiwai
              width: 52
              aqi: 启用
            style:
              left: 150px
              top: 430px
button_card_templates:
  weather_xxx:
  weather_xxx:




回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-8-9 22:35:04 | 显示全部楼层
本帖最后由 消逝 于 2024-8-9 22:40 编辑

17、顶部状态条这是一个整体,每个模块直接是弹出菜单,这个修改的话需要自己有点动手能力
include是包含设备,自动获取符合条件的,这里同样使用了搜索 sensor.haocai_* 开头的实体
exclude是排除设备,自动排除一些特殊情况
                          type: custom:battery-state-card
                          title: 更新设备统计
                          style:
                            left: 50%
                            top: 50%
                          filter:
                            include:
                              - name: entity_id
                                value: update.*
                            exclude:
                              - name: state
                                value: 'Off'

          - type: custom:button-card
            style:
              left: 524px
              top: 40px
            styles:
              grid:
                - grid-template-areas: |
                    "z1 bar1 bar2 bar3 bar4 bar5"
                - grid-template-columns: 20px 80px 80px 80px 80px 80px
                - grid-template-rows: 5px
              card:
                - '--mdc-ripple-press-opacity': 0
                - width: 440px
                - height: 40px
                - background-color: rgba(0,0,0,0.3)
                - border-radius: 20px
            custom_fields:
              bar1:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_light_num
                  layout: icon_name
                  show_icon: true
                  show_name: true
                  show_state: true
                  icon: mdi:lightbulb-group
                  name: 灯光
                  styles:
                    icon:
                      - margin-top: '-2.7px'
                      - width: 18px
                    name:
                      - margin-left: '-20px'
                      - font-size: 14px
                      - font-weight: bold
                    state:
                      - margin-top: '-19.5px'
                      - margin-left: 63px
                      - font-size: 16px
                      - font-weight: bold
                  state:
                    - value: 0
                      operator: '=='
                      styles:
                        state:
                          - color: transparent
                    - value: 0
                      operator: '>'
                      styles:
                        icon:
                          - color: orange
                        state:
                          - color: orange
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        content:
                          type: horizontal-stack
                          cards:
                            - type: vertical-stack
                              cards:
                                - type: entities
                                  title: 客餐厅
                                  entities:
                                    - light.ketingkaiguan2_right
                                    - light.ketingkaiguan_middle
                                    - light.ketingkaiguan_right
                                    - light.cantingkaiguan_right
                                    - light.cantingkaiguan_left
                                    - light.zoulangdeng_left
                                    - light.xuanguankaiguan_right
                                - type: entities
                                  title: 主卧
                                  entities:
                                    - light.zhuwomentingdeng_left
                                    - light.taideng
                                    - light.zhuwomentingdeng_middle
                            - type: vertical-stack
                              cards:
                                - type: entities
                                  title: 其他房间
                                  entities:
                                    - light.ertongfang_left
                                    - light.xuexideng
                                    - light.ciwokaiguan_right
                                    - light.chufangkaiguan_left
                                - type: entities
                                  title: 卫生间
                                  entities:
                                    - light.yuba_gongwei_deng
                                    - light.gonggongweishengjian
                                    - light.yuba_zhuwei_deng
                                    - light.zhuwoweishengjian
              bar2:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_kitchen_num
                  layout: icon_name
                  show_icon: true
                  show_name: true
                  show_state: true
                  icon: mdi:countertop
                  name: 厨房
                  styles:
                    icon:
                      - margin-top: '-2.7px'
                      - width: 18px
                    name:
                      - margin-left: '-20px'
                      - font-size: 14px
                      - font-weight: bold
                    state:
                      - margin-top: '-19.5px'
                      - margin-left: 63px
                      - font-size: 16px
                      - font-weight: bold
                  state:
                    - value: 0
                      operator: '=='
                      styles:
                        state:
                          - color: transparent
                    - value: 0
                      operator: '>'
                      styles:
                        icon:
                          - color: red
                        state:
                          - color: red
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        content:
                          type: custom:battery-state-card
                          title: 厨房设备统计
                          icon: mdi:countertop-outline
                          filter:
                            include:
                              - name: entity_id
                                value: sensor.chufang_*
              bar3:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_battery_num
                  layout: icon_name
                  show_icon: true
                  show_name: true
                  show_state: true
                  icon: mdi:battery-sync
                  name: 耗材
                  styles:
                    icon:
                      - margin-top: '-2.7px'
                      - width: 18px
                    name:
                      - margin-left: '-20px'
                      - font-size: 14px
                      - font-weight: bold
                    state:
                      - margin-top: '-19.5px'
                      - margin-left: 63px
                      - font-size: 16px
                      - font-weight: bold
                  state:
                    - value: 0
                      operator: '=='
                      styles:
                        state:
                          - color: transparent
                    - value: 0
                      operator: '>'
                      styles:
                        icon:
                          - color: red
                        state:
                          - color: red
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        content:
                          type: horizontal-stack
                          cards:
                            - type: custom:battery-state-card
                              title: 电池电量统计
                              colors:
                                steps:
                                  - '#ff0000'
                                  - '#ffff00'
                                  - '#00ff00'
                                gradient: true
                              sort: state
                              collapse: 10
                              filter:
                                include:
                                  - name: entity_id
                                    value: sensor.dianliang_*
                            - type: custom:battery-state-card
                              title: 耗材统计
                              icon: mdi:drupal
                              colors:
                                steps:
                                  - '#ff0000'
                                  - '#ffff00'
                                  - '#00ff00'
                                gradient: true
                              sort: state
                              filter:
                                include:
                                  - name: entity_id
                                    value: sensor.haocai_*
              bar4:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_update_num
                  layout: icon_name
                  show_icon: true
                  show_name: true
                  show_state: true
                  icon: mdi:update
                  name: 更新
                  styles:
                    icon:
                      - margin-top: '-2.7px'
                      - width: 18px
                    name:
                      - margin-left: '-20px'
                      - font-size: 14px
                      - font-weight: bold
                    state:
                      - margin-top: '-19.5px'
                      - margin-left: 63px
                      - font-size: 16px
                      - font-weight: bold
                  state:
                    - value: 0
                      operator: '=='
                      styles:
                        state:
                          - color: transparent
                    - value: 0
                      operator: '>'
                      styles:
                        icon:
                          - color: red
                        state:
                          - color: red
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        content:
                          type: custom:battery-state-card
                          title: 更新设备统计
                          style:
                            left: 50%
                            top: 50%
                          filter:
                            include:
                              - name: entity_id
                                value: update.*
                            exclude:
                              - name: state
                                value: 'Off'
              bar5:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_offline_num
                  layout: icon_name
                  show_icon: true
                  show_name: true
                  show_state: true
                  icon: mdi:power-plug-off
                  name: 离线
                  styles:
                    icon:
                      - margin-top: '-2.7px'
                      - width: 18px
                    name:
                      - margin-left: '-20px'
                      - font-size: 14px
                      - font-weight: bold
                    state:
                      - margin-top: '-19.5px'
                      - margin-left: 63px
                      - font-size: 16px
                      - font-weight: bold
                  state:
                    - value: 0
                      operator: '=='
                      styles:
                        state:
                          - color: transparent
                    - value: 0
                      operator: '>'
                      styles:
                        icon:
                          - color: red
                        state:
                          - color: red
                  tap_action:
                    action: fire-dom-event
                    browser_mod:
                      service: browser_mod.popup
                      data:
                        content:
                          type: custom:battery-state-card
                          title: 离线设备统计
                          icon: mdi:power-plug-off-outline
                          style:
                            left: 50%
                            top: 50%
                          filter:
                            include:
                              - name: state
                                value: unavailable
                            exclude:
                              - name: entity_id
                                value: select.xiaomidianshi*
                              - name: entity_id
                                value: sensor.pc_*
                              - name: entity_id
                                value: camera.pc_screen


回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-8-9 22:41:23 | 显示全部楼层
本帖最后由 消逝 于 2024-8-9 22:43 编辑

18、右边动作调修改对应实体就行了
          - type: image
            info: '************************    右边状态栏    ************************'
          - type: custom:button-card
            styles:
              grid:
                - grid-template-areas: |
                    "bar1" "bar2" "bar3" "bar4" "bar5" "bar6"
                - grid-template-columns: 60px
                - grid-template-rows: 80px 80px 80px 80px 80px 80px
              card:
                - '--mdc-ripple-press-opacity': 0
                - width: 60px
                - height: 480px
            style:
              left: 970px
              top: 460px
            custom_fields:
              bar1:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_climate_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:air-conditioner
                  name: 空调
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_climate_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_climate_num'].state;
                                if (num> 0) return 'DeepSkyBlue';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_climate_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_climate_num'].state;
                              if (num> 0) return 'DeepSkyBlue';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar2:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_humidifier_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:air-humidifier
                  name: 加湿器
                  custom_fields:
                    num: >
                      [[[ return
                      states['sensor.fullroom_humidifier_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_humidifier_num'].state;
                                if (num> 0) return 'DeepSkyBlue';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_humidifier_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_humidifier_num'].state;
                              if (num> 0) return 'DeepSkyBlue';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar3:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_fan_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:air-purifier
                  name: 净化器
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_fan_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_fan_num'].state;
                                if (num> 0) return 'LimeGreen';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_fan_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: |
                          [[[ var num =states['sensor.fullroom_fan_num'].state;
                              if (num> 0) return 'LimeGreen';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar4:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_yuba_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:hvac
                  name: 浴霸
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_yuba_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_yuba_num'].state;
                                if (num> 0) return 'DarkOrange';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_yuba_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: |
                          [[[ var num =states['sensor.fullroom_yuba_num'].state;
                              if (num> 0) return 'DarkOrange';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar5:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_media_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:multimedia
                  name: 媒体
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_media_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_media_num'].state;
                                if (num> 0) return 'Magenta';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_media_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_media_num'].state;
                              if (num> 0) return 'Magenta';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)
              bar6:
                card:
                  type: custom:button-card
                  entity: sensor.fullroom_other_num
                  tap_action:
                    action: more-info
                  show_icon: true
                  show_name: true
                  icon: mdi:tune-variant
                  name: 其他
                  custom_fields:
                    num: |
                      [[[ return states['sensor.fullroom_other_num'].state;]]]
                  styles:
                    custom_fields:
                      num:
                        - background: >
                            [[[ var num
                            =states['sensor.fullroom_other_num'].state;
                                if (num> 0) return 'OrangeRed';
                                if (num==0) return 'transparent';   ]]]
                        - color: >
                            [[[ var num
                            =states['sensor.fullroom_other_num'].state;
                                if (num> 0) return 'white';
                                if (num==0) return 'transparent';  ]]]
                        - padding: 1px 1px 0 1px
                        - font-size: 12px
                        - font-weight: bold
                        - width: 16px
                        - height: 16px
                        - border-radius: 100%
                        - position: absolute
                        - margin-left: 40px
                        - align-self: start
                    icon:
                      - padding: 5px 0 0 0
                      - color: >
                          [[[ var num
                          =states['sensor.fullroom_other_num'].state;
                              if (num> 0) return 'OrangeRed';
                              if (num==0) return 'white';  ]]]
                    name:
                      - padding: 0 0 5px 0
                      - font-size: 14px
                      - font-weight: bold
                    card:
                      - '--mdc-ripple-press-opacity': 0.1
                      - padding: 0 0 0 0
                      - width: 60px
                      - height: 65px
                      - border-radius: 10px
                      - background: >-
                          linear-gradient(180deg, transparent 0%,rgba(0,0,0,0.4)
                          50%)


回复

使用道具 举报

10

主题

70

帖子

1587

积分

论坛UI达人

积分
1587
金钱
1507
HASS币
28
 楼主| 发表于 2024-8-9 22:45:28 | 显示全部楼层
本帖最后由 消逝 于 2024-8-9 22:58 编辑

19、全屋空调、加湿器直接使用的ha自带的恒温器和恒湿器
          - type: custom:popup-card
            entity: sensor.fullroom_climate_num
            style: |
              --popup-min-width: 600px;
            card:
              type: horizontal-stack
              cards:
                - type: thermostat
                  entity: climate.kongtiao_keting
                  features:
                    - type: climate-hvac-modes
                    - style: icons
                      type: climate-fan-modes
                    - style: icons
                      type: climate-swing-modes
                - type: thermostat
                  entity: climate.kongtiao_zhuwo
                  features:
                    - type: climate-hvac-modes
                    - style: icons
                      type: climate-fan-modes
                    - style: icons
                      type: climate-swing-modes
20、净化器、浴霸
使用的是button手搓的的模块
除复制代码外,还需要复制模板内device开头的模板
button_card_templates:
    device_xxxx:
    ……
    device_xxxx:
    ……

          - type: custom:popup-card
            entity: sensor.fullroom_fan_num
            style: |
              --popup-min-width: 600px;
            card:
              type: picture-elements
              image: /local/UI/null30_23.png
              elements:
                - type: custom:button-card
                  style:
                    top: 50%
                    left: 25%
                  template: device
                  variables:
                    entity: fan.jinghuaqi_keting #背景环对应的实体
                    button_num: 2  #第一排是2个按钮还是3个按钮
                    name: 客厅净化器  #显示的名字
                    more_entity: fan.jinghuaqi_keting  #右上角更多关联的实体
                    label_entity: fan.jinghuaqi_keting  #文本状态显示的实体
                    wendu_entity: sensor.jinghuaqi_keting_wendu # 下面小写的温度
                    shidu_entity: sensor.jinghuaqi_keting_shidu # 下面小写的湿度
                    state_entity: sensor.jinghuaqi_keting_pm25 # 中间大的数值
                    unit: µg/m³  # 中间的单位
                    a1_entity: fan.jinghuaqi_keting #第1个操作的按钮的实体
                    a2_entity: fan.jinghuaqi_keting #第2个操作的按钮的实体
                    a3_entity: sensor.jinghuaqi_keting_mode #第3个操作的按钮的实体
                    a4_entity: sensor.jinghuaqi_keting_mode #第4个操作的按钮的实体
                    a5_entity: sensor.jinghuaqi_keting_mode #第5个操作的按钮的实体
                    a1_action: call-service #第1个操作的按钮的执行的动作,服务或者点击
                    a2_action: call-service #第2个操作的按钮的执行的动作,服务或者点击
                    a3_action: call-service #第3个操作的按钮的执行的动作,服务或者点击
                    a4_action: call-service #第4个操作的按钮的执行的动作,服务或者点击
                    a5_action: call-service #第5个操作的按钮的执行的动作,服务或者点击
                    a1_service: script.jinghuaqi_keting_mode_on  #第1个操作的按钮链接的服务
                    a2_service: script.jinghuaqi_keting_mode_off  #第2个操作的按钮链接的服务
                    a3_service: script.jinghuaqi_keting_mode_auto  #第3个操作的按钮链接的服务
                    a4_service: script.jinghuaqi_keting_mode_sleep  #第4个操作的按钮链接的服务
                    a5_service: script.jinghuaqi_keting_mode_favorite  #第5个操作的按钮链接的服务
                    a1_state: 'on'  #第1个按钮显示的状态,on显示灰色
                    a2_state: 'off' #第2个按钮显示的状态,off显示灰色
                    a1_mode: 开机  #第1个按钮显示文本或图标
                    a2_mode: 关机  #第2个按钮显示文本或图标
                    a3_mode: 自动  #第3个按钮显示文本或图标
                    a4_mode: 睡眠  #第4个按钮显示文本或图标
                    a5_mode: 最爱  #第5个按钮显示文本或图标



回复

使用道具 举报

3

主题

50

帖子

649

积分

高级会员

Rank: 4

积分
649
金钱
599
HASS币
0
发表于 2024-8-9 19:07:15 | 显示全部楼层
是B站还是这里
回复

使用道具 举报

6

主题

117

帖子

1014

积分

金牌会员

Rank: 6Rank: 6

积分
1014
金钱
897
HASS币
0
发表于 2024-8-9 19:51:54 | 显示全部楼层
需要这种从零讲的、保姆级的
回复

使用道具 举报

2

主题

155

帖子

977

积分

高级会员

Rank: 4

积分
977
金钱
822
HASS币
0
发表于 2024-8-9 19:57:45 | 显示全部楼层
也搬张凳子前排等着!!!!
回复

使用道具 举报

5

主题

75

帖子

457

积分

中级会员

Rank: 3Rank: 3

积分
457
金钱
382
HASS币
0
发表于 2024-8-9 21:10:51 | 显示全部楼层
感谢分享,前几天刚从由管下了些教程翻译然后加字幕搞得好累,然后就看到楼主发的这
回复

使用道具 举报

2

主题

44

帖子

186

积分

注册会员

Rank: 2

积分
186
金钱
142
HASS币
0
发表于 2024-8-9 21:33:02 | 显示全部楼层
感谢大佬
回复

使用道具 举报

0

主题

3

帖子

16

积分

新手上路

Rank: 1

积分
16
金钱
13
HASS币
0
发表于 2024-8-9 21:55:13 | 显示全部楼层
66666666666666666666666
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-12-22 00:52 , Processed in 0.410189 second(s), 40 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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