请选择 进入手机版 | 继续访问电脑版

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

 找回密码
 立即注册
查看: 8247|回复: 230

[UI界面] HA彩平图UI效果分享

  [复制链接]

5

主题

38

帖子

737

积分

论坛UI达人

积分
737
金钱
694
HASS币
8
发表于 2024-6-24 23:31:39 | 显示全部楼层 |阅读模式
本帖最后由 19919992769 于 2024-7-18 16:53 编辑

1、界面分享:链接:HA也玩了一段时间了,目前使用的UI界面
2、教程贴:链接:带你了解插件button_card详细用法

3、教程贴:链接:彩平图户型图制作教程
4、教程贴:链接:button_card制作天气ui界面----以下正文----
补充:弹出菜单,去hacs下载brower_mod这个,安装重启ha后,左面侧边栏会有这个菜单,代表安装成功,ui代码中使用popup-card弹出菜单
0、前言     基础结构参照B站up主jenny的智能生活(其实就是图片模板type: picture-elements),部分灵感来源up主群的群友【网上邻居】
1、主界面
3333.png

背景设置了随时间变化自动调整色相,使颜色不再单调。
首先根据时间的分钟数值,转换成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)
带你飞.png
电费详情使用了horizontal-stack和vertical-stack排版,调用实体type: sensor
4、灯光
微信截图_20240624222943.png
灯光详情使用了horizontal-stack和vertical-stack排版,调用实体type: entities及light灯的实体
5、厨房
微信截图_20240624221907.png


厨房仅作为显示工作状态/非工作状态,不做控制(危险且没啥用),这里会有动图gif雾气效果
6、电量和耗材
微信截图_20240624221920.png 微信截图_20240624221914.png


电量和耗材均使用了此插件custom:battery-state-card
7、媒体
微信截图_20240624221927.png
媒体使用了插件custom:mini-media-player
8、空调
微信截图_20240624225057.png
空调使用基础ha自带的模块
9、加湿器
微信截图_20240624222014.png
加湿器使用了基础ha自带的模块
10、净化器
微信截图_20240624222020.png
净化器太新的设备没有太好的卡片支持,所以手搓了一个
11、浴霸、其他
微信截图_20240624222025.png 微信截图_20240624222031.png
直接使用净化器手搓的button-card复制使用(实际上手搓的时候兼容了其他设备)
12、扫地机器人
微信截图_20240624221938.png
不知道什么时候打扫地图的功能挂了,现在没有扫地地图了,用了一个custom:vacuum-card卡片显示
13、电脑
微信截图_20240624221943.png
可以显示电脑截屏,cpu、内存、硬盘等信息,使用的是IOT Link这个软件获取信息(mqtt)
14、电视
微信截图_20240624221954.png
相当于直接带遥控器,带电视截屏,使用的是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图片、透明主题
游客,如果您要查看本帖隐藏内容请回复








评分

参与人数 20金钱 +159 HASS币 +28 收起 理由
hhh. + 10 高手,这是高手!
mrna + 1 感谢楼主分享!
CrossedF + 1 高手,这是高手!
jeelinbear + 5 感谢楼主分享!
cyiooi + 5 高手,这是高手!
无头Faln骑士 + 2
cooliscool + 5
隔壁的王叔叔 + 12 感谢楼主分享!
+ 20 + 20 高手,这是高手!
book123 + 10 论坛有你更精彩!
hungheo + 8 感谢楼主分享!
咸味土豆 + 20 膜拜大神!
Roger + 10 + 8 论坛有你更精彩!
6907367 + 7
eric + 20 感谢楼主分享!
wjh1025 + 5 你就是大神!
C哩C哩 + 5 赠人玫瑰,手留余香!
ck3 + 4 大神666!
佚蓝 + 5 感谢楼主分享!
www + 4 感谢楼主分享!

查看全部评分

回复

使用道具 举报

123

主题

1866

帖子

5783

积分

元老级技术达人

积分
5783
金钱
3912
HASS币
30
发表于 2024-6-25 00:24:54 | 显示全部楼层
没有半年搞不好
回复

使用道具 举报

22

主题

139

帖子

1544

积分

金牌会员

Rank: 6Rank: 6

积分
1544
金钱
1405
HASS币
0
发表于 2024-6-25 07:37:24 | 显示全部楼层
这种的户型图怎么画?
回复

使用道具 举报

21

主题

590

帖子

2543

积分

金牌会员

Rank: 6Rank: 6

积分
2543
金钱
1953
HASS币
0
发表于 2024-6-25 08:11:41 | 显示全部楼层
我拿着代码不问大佬的话,,,根本无从下手
回复

使用道具 举报

5

主题

188

帖子

823

积分

高级会员

Rank: 4

积分
823
金钱
635
HASS币
0
发表于 2024-6-25 09:57:59 | 显示全部楼层
不错,这是我见过的最不花哨而且直接好看的UI了。不知道手机界面显示如何。
回复

使用道具 举报

5

主题

38

帖子

737

积分

论坛UI达人

积分
737
金钱
694
HASS币
8
 楼主| 发表于 2024-6-25 10:07:16 | 显示全部楼层
hamtalk 发表于 2024-6-25 09:57
不错,这是我见过的最不花哨而且直接好看的UI了。不知道手机界面显示如何。 ...

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

使用道具 举报

5

主题

38

帖子

737

积分

论坛UI达人

积分
737
金钱
694
HASS币
8
 楼主| 发表于 2024-6-25 10:09:42 | 显示全部楼层
qiaofei828 发表于 2024-6-25 07:37
这种的户型图怎么画?

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

使用道具 举报

1

主题

17

帖子

94

积分

注册会员

Rank: 2

积分
94
金钱
77
HASS币
0
发表于 2024-6-25 10:10:09 | 显示全部楼层
我看了也是白看,看不懂。。。刚来半个月
回复

使用道具 举报

0

主题

195

帖子

2549

积分

金牌会员

Rank: 6Rank: 6

积分
2549
金钱
2354
HASS币
0
发表于 2024-6-25 10:20:13 | 显示全部楼层
膜拜大佬。
回复

使用道具 举报

0

主题

19

帖子

56

积分

注册会员

Rank: 2

积分
56
金钱
37
HASS币
0
发表于 2024-6-25 13:53:10 | 显示全部楼层
感谢分享,抄个作业
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-7-20 14:05 , Processed in 0.091036 second(s), 36 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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