HA彩平图UI分享（停更-移步新帖）

消逝

请移步新帖↓↓↓↓↓↓↓↓↓↓↓↓

HA彩平图UI分享（2024-08-09更新）-保姆及教程！

请移步新帖↑↑↑↑↑↑↑↑↑↑↑↑

----以下正文----
补充：弹出菜单，去hacs下载brower_mod这个，安装重启ha后，左面侧边栏会有这个菜单，代表安装成功，ui代码中使用popup-card弹出菜单
0、前言     基础结构参照B站up主jenny的智能生活（其实就是图片模板type: picture-elements），部分灵感来源up主群的群友【网上邻居】
1、主界面


背景设置了随时间变化自动调整色相，使颜色不再单调。
首先根据时间的分钟数值，转换成0到360模拟实体数值。

- name: time_m1
  state: "{{ states.sensor.time.state[3:5]|round(0)*6  }}"

复制代码

使用custom:button-card自动设置色相

- type: custom:button-card
  show_entity_picture: true
  entity_picture: /local/UI/背景/背景1.png
  style:
    pointer-events: none
    top: 384px
    left: 50%
    width: 2560px
  styles:
    card:
      - filter: >
           [[[return "hue-rotate("+states['sensor.time_m1'].state+"deg)"]]] 

复制代码

2、设备数量显示，灯光使用的是灯组，其他设备是手动堆叠的，具体在模拟实体template.yaml
首先先对非on/off状态的设备，进行on/off状态转换

- name: pobiji2
  state: >
    {% if   states.sensor.pobiji2.state=='busy' or 
            states.sensor.pobiji2.state=='paused' or 
            states.sensor.pobiji2.state=='keep_warm' or 
            states.sensor.pobiji2.state=='completed'  %} 
      on
    {% else %}
      off
    {% endif %}

复制代码

其次进行数量堆叠及整体状态on/off

#####  全屋 厨房 状态转换####
- name: quanwuchufang
  state: >
    {% if   states.sensor.kongqizhaguo2.state=='on' or 
            states.sensor.dianfanbao2.state=='on' or 
            states.sensor.zhengzhuguo2.state=='on' or
            states.sensor.pobiji2.state=='on' or 
            states.sensor.youyanji.state=='on'  or 
            states.sensor.xiwanji2.state=='on'  
            %} 
        on
    {% else %}
        off
    {% endif %}

复制代码

- name: quanwuchufang_shuliang
  state: >
    {% if  states.sensor.kongqizhaguo2.state =='on' %}
    {% set num1 = 1 %}
    {% else %}
    {% set num1 = 0 %}
    {% endif %}
    {% if  states.sensor.dianfanbao2.state =='on' %}
    {% set num2 = 1 %}
    {% else %}
    {% set num2 = 0 %}
    {% endif %}
    {% if  states.sensor.zhengzhuguo2.state =='on' %}
    {% set num3 = 1 %}
    {% else %}
    {% set num3 = 0 %}
    {% endif %}
    {{num1+num2+num3}}

复制代码

3、电费详情，使用了popup-card弹出菜单（所有2级界面均是popup-card弹出菜单，hacs搜索安装这个集成browser_mod）

电费详情使用了horizontal-stack和vertical-stack排版，调用实体type: sensor
4、灯光

灯光详情使用了horizontal-stack和vertical-stack排版，调用实体type: entities及light灯的实体
5、厨房



厨房仅作为显示工作状态/非工作状态，不做控制（危险且没啥用），这里会有动图gif雾气效果
6、电量和耗材



电量和耗材均使用了此插件custom:battery-state-card
7、媒体

媒体使用了插件custom:mini-media-player
8、空调

空调使用基础ha自带的模块
9、加湿器

加湿器使用了基础ha自带的模块
10、净化器

净化器太新的设备没有太好的卡片支持，所以手搓了一个
11、浴霸、其他

直接使用净化器手搓的button-card复制使用（实际上手搓的时候兼容了其他设备）
12、扫地机器人

不知道什么时候打扫地图的功能挂了，现在没有扫地地图了，用了一个custom:vacuum-card卡片显示
13、电脑

可以显示电脑截屏，cpu、内存、硬盘等信息，使用的是IOT Link这个软件获取信息（mqtt）
14、电视

相当于直接带遥控器，带电视截屏，使用的是XiaoMi Miot Auto里的官方推荐代码，进行微调的
15、古诗词
古诗词点击可以直接通过小爱同学播放

- type: custom:button-card
  show_state: false
  show_name: false
  show_icon: false
  styles:
    card:
      - width: 400px
      - height: 40px
      - background-color: rgba(255,255,255,0)
  style:
    left: 510px
    top: 133px
  tap_action:
    action: call-service
    service: text.set_value
    data:
      value: |
        [[[ return states['sensor.gu_shi_ci_title'].state]]]
    target:
      entity_id: text.redmi_zhixingmingling

复制代码

古诗词有的很长，显示不下，这里做了一个根据长度自动缩小字体
首先做个模拟实体：

####################      古诗词长度计算  ##############################
    - name: gushici_len
      state: >
        {{(states.sensor.gu_shi_ci_name.state|length*14.5)|round(0)|string+"px"}}  
    - name: gushici_content_len
      state: >
        {{(states.sensor.gu_shi_ci_content1.state|length)|round(0)}} 

复制代码

根据长度大概设定字体大小

  label_gushi:
    show_label: true
    show_name: false
    show_icon: false
    show_state: true
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      card:
        - width: 700px
      state:
        - font-weight: bold
        - color: white
        - justify-self: start
        - font-size: |
            [[[
                if (states['sensor.gushici_content_len'].state > 60) return '10px';
                if (states['sensor.gushici_content_len'].state > 50) return '11px';
                if (states['sensor.gushici_content_len'].state > 40 ) return '13px';   
                if (states['sensor.gushici_content_len'].state > 0  ) return '14px'; 
            ]]]

复制代码

同样原理的，还有古诗词标题后面的刷新按钮，也是根据标题长度自动变换位置的
16、户型图内的设备都可以点击，这个很多教程都有，这个主要看户型图做的好看不好看，以前用过写实的（酷家乐渲染的），现在用的这个奶油风的，看个人喜好
17、本代码使用了大量的button_card模板，这个插件真的很万能，什么都可以做。这个如果看不懂，可以使用简单的button_card而不用模板，部分内容可用image等代替。
例子：一个不同温度显示不同颜色的button模板（主界面左下角的温度分布、湿度分布）

wendubeijing:
  show_icon: false
  show_name: false
  show_label: false
  show_state: true
  show_units: false
  numeric_precision: 1
  styles:
    card:
      - width: '[[[ return  variables.width ]]]'
      - height: '[[[ return  variables.height ]]]'
      - border-radius: 0px
      - border: 0px solid
      - background: |
          [[[
              if (entity.state <  -10 )                      return 'rgba(0,0,255,0.3)';
              if (entity.state >= -10 && entity.state <  0)  return 'rgba(30,144,255,0.3)';
              if (entity.state >= 0   && entity.state < 10)  return 'rgba(0,191,255,0.3)';
              if (entity.state >= 10  && entity.state < 15)  return 'rgba(0,255,255,0.3)';
              if (entity.state >= 15  && entity.state < 20)  return 'rgba(0,255,127,0.3)';
              if (entity.state >= 20  && entity.state < 24)  return 'rgba(0,255,0,0.3)';
              if (entity.state >= 24  && entity.state < 27)  return 'rgba(173,255,47,0.3)';
              if (entity.state >= 27  && entity.state < 30)  return 'rgba(255,215,0,0.3)';
              if (entity.state >= 30  && entity.state < 33)  return 'rgba(255,140,0,0.3)';
              if (entity.state >= 33  && entity.state < 36)  return 'rgba(255,69,0,0.3)';
              if (entity.state >= 36  && entity.state < 39)  return 'rgba(255,0,0,0.3)';
              if (entity.state >= 39 )                       return 'rgba(139,0,0,0.3)';
          ]]] 
    state:
      - text-shadow: 0 0.5px black, 0.5px 0 black, -0.5px 0 black, 0 -0.5px black
      - font-weight: bold
      - font-size: '[[[ return  variables.font_size ]]]'
      - color: white
      - justify-self: center

复制代码

自定义字段的使用

  label:
    show_label: true
    show_name: false
    show_icon: false
    show_state: true
    layout: vertical
    tap_action:
      action: none
    hold_action:
      action: none
    styles:
      card:
        - width: 200px
        - border: 0px solid
        - background-color: transparent
      name:
        - font-weight: '[[[ return variables.font_weight ]]]'
        - font-size: '[[[ return variables.font_size ]]]'
        - color: '[[[ return variables.color ]]]'
        - justify-self: '[[[ return variables.weizhi ]]]'
      label:
        - width: '[[[ return variables.width ]]]'
        - font-weight: '[[[ return variables.font_weight ]]]'
        - font-size: '[[[ return variables.font_size ]]]'
        - color: '[[[ return variables.color ]]]'
        - justify-self: '[[[ return variables.weizhi ]]]'
      state:
        - font-weight: '[[[ return variables.font_weight ]]]'
        - font-size: '[[[ return variables.font_size ]]]'
        - color: white
        - justify-self: '[[[ return variables.weizhi ]]]'
        - writing-mode: '[[[ return variables.writing_mode ]]]'
        - letter-spacing: '[[[ return variables.letter_spacing ]]]'

复制代码

18、代码、插件、UI图片、透明主题

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

bugensui

没有半年搞不好

qiaofei828

这种的户型图怎么画？

a_dongde

我拿着代码不问大佬的话，，，根本无从下手

hamtalk

不错，这是我见过的最不花哨而且直接好看的UI了。不知道手机界面显示如何。

消逝

hamtalk 发表于 2024-6-25 09:57
不错，这是我见过的最不花哨而且直接好看的UI了。不知道手机界面显示如何。 ...

手机端显示不行，手机端先是要单独做，可以参照论坛里的蘑菇卡片得那个，那个手机端很好看

消逝

qiaofei828 发表于 2024-6-25 07:37
这种的户型图怎么画？

户型图是AI+PS+阴影插件shadowify做的，可以搜索【奶油风彩平图】，一般B站、抖音、小红书、知乎都有教程，等我有时间也可以做个教程

4eszxcvgy7

我看了也是白看，看不懂。。。刚来半个月

点来点去

膜拜大佬。

mykc

感谢分享，抄个作业