找回密码
 立即注册
查看: 797|回复: 48

[UI界面] 手机UI界面分享(06-04更新)

[复制链接]

10

主题

191

回帖

1725

积分

金牌会员

积分
1725
金钱
1524
HASS币
0
发表于 4 天前 | 显示全部楼层 |阅读模式
本帖最后由 hungheo 于 2025-6-4 19:26 编辑

之前做了一版手机UI(在这里:https://bbs.hassbian.com/thread-26299-1-1.html)
虽然显示内容齐全,但总感觉很乱,这次重新规划了一下。

2025-06-04新增
4楼,滑动卡片导航栏

先放效果:


0、准备
(1)、插件
button card 主卡片结构
bubble card 弹出卡片及内容(不喜欢这个插件的,可以用browser_mod插件替换,我的其他帖子有怎么全局设置)
swipe card 房间卡片切换
Kiosk Mode 隐藏顶部导航栏
card mod 修改部分css(我的这个版本没用
(2)、辅助元素、动作脚本
select辅助元素,用于导航栏切换
input_boolean辅助元素,用于Kiosk Mode 隐藏顶部导航栏
每个房间灯的全关、全开脚本
每个房间的灯、空调、插座统计实体(我是用nodered+mqtt生成的,以后有空了再分享)
(3)、bubble card modules
自定义modules,批量修改卡片样式,详见3楼
(4)、背景图片
简单的写一个html,处理背景图片虚化,虚化值是25px,底色加个透明黑rgba(0,0,0,0.2)
(5)、卡片背景图片
我是用AI工具生成的,用html加了从下到中间的黑色过度,这个根据自己的喜好调


分为主页面和弹出页面:
两个卡片样式不同,主页面类似与IOS的毛玻璃效果,主要通过主题文件实现
弹出页面类似于手机下拉菜单,以bubble card默认样式为主

一、自定义主题
详见附件(调了很久很久。。。。)
有些小细节没有调好,欢迎反馈,也可以加个dark模式,防止没定义的颜色出现异常
modes:
    dark:

以暗主题为主,有2套不同的card配置,如果要统一或者反转,修改default-card和pop-up两类:
游客,如果您要查看本帖隐藏内容请回复



卡片样式

微信图片_2025-06-02_113318_734.jpg

title cardmushroom entity card 在弹出页面需要用card_mod修改样式:
title card修改:
游客,如果您要查看本帖隐藏内容请回复

二、页面
放附件了
1、主页面
button card为主,做了类型分区:
从上到下依次是:
导航栏--信息看板--全屋控制--房间卡片(swipe card 切换)

微信图片_2025-06-02_115140_072.jpg



2、弹出页面
以bubble card为主,以设备类型分类,方便复用。

微信图片_2025-06-02_122650_484.jpg


页面.zip (16.55 KB, 下载次数: 21, 售价: 4 金钱)

主题.zip (947 Bytes, 下载次数: 19, 售价: 4 金钱)












评分

参与人数 2金钱 +17 收起 理由
61801600 + 1 感谢楼主分享!
90後の插班生 + 16 高手,这是高手!

查看全部评分

回复

使用道具 举报

10

主题

191

回帖

1725

积分

金牌会员

积分
1725
金钱
1524
HASS币
0
 楼主| 发表于 4 天前 | 显示全部楼层
本帖最后由 hungheo 于 2025-6-3 00:01 编辑

button card 使用
所有template都在附件中,button card 默认的tap_action是toggle,如果不是可以开关的类型,记得修改一下,不然会报错(有些地方可能我没修改)。
可以参考我的另外的帖子:https://bbs.hassbian.com/thread-26299-1-1.html
1、房间卡片
variables最好都写完,如果没有的填写null,示例如下:
type: custom:button-card
entity: sensor.devices_count_light_all #主ID
template: rooms_template
variables:
  room_name: 客厅
  room_path: "#keting_control" #控制类弹出窗口路径
  background_image: url('/local/home_picture/keting.jpg') #卡片背景图片
  temperature: sensor.a4c138d5271a_temperature #温度
  humidity: sensor.a4c138d5271a_humidity #湿度
  light_entity: sensor.devices_count_light_keting #房间开灯统计
  light_path: "#keting_light" #灯弹出窗口路径
  move_entity: binary_sensor.esp32_keting_presence #人体传感
  move_path: "#keting_move" #人体传感弹出窗口路径
  havc_entity: climate.qdhkl_cn_proxy_532016519_0103_ac #空调

2、户型图预览
需要设置总宽高,里面的每个房间大小动画可以根据总宽高等比例放大缩小
type: custom:button-card
template: floorplan #模板名称
variables:
  entities:
    zhuwo: #房间名称
      - entity: binary_sensor.esp32_2450_presence #触发实体名称,没有的可以不写
        path: "#zhuwo_move" #点击跳转路径,没有的可以不写
    keting:
      - entity: binary_sensor.esp32_keting_presence
        path: "#keting_move"
    zhuwei:
      - entity: binary_sensor.d4f0ead95521_occupancy
        path: "#zhuwei_move"
    kewei:
      - entity: binary_sensor.a4c138419493_occupancy
        path: "#kewei_move"
    chufang:
      - entity: binary_sensor.ccb5d1f2b505_occupancy
        path: "#chufang_move"
  width: 300 #宽度 ,每个房间的尺寸和动画范围根据这个动态调整
  height: 300 # 高度,每个房间的尺寸和动画范围根据这个动态调整
  accent_color: var(--amber-color)  #触发高亮颜色,默认是var(--accent-color),可以不写
3、天气卡片
需要自己准备图标(需要修改图标路径)
天气的集成用的是https://github.com/hasscc/tianqi,跟和风天气一样的用
屏幕截图 2025-06-03 000029.png

4、其他
triggers_update使用:
在button card中,JS模板是静态模板,如果主entity 不更新的话,里面的其他enttiy.state是不会更新的,因此要用到triggers_update单独更新

type: custom:button-card
entity: sensor.mysensor #主enttiy ID
triggers_update:
  - switch.myswitch  #这里需要填上entity ID 单独更新
show_label: true
label: "[[[return  states['switch.myswitch'].state]]]" #其他enttiy ID











回复

使用道具 举报

10

主题

191

回帖

1725

积分

金牌会员

积分
1725
金钱
1524
HASS币
0
 楼主| 发表于 4 天前 | 显示全部楼层
本帖最后由 hungheo 于 2025-6-2 19:49 编辑

bubble card 使用
bubble card的版本是beta.8基本满足使用,不会有任何错误提示,但是homeassistant的UI界面编辑反应特别慢,特别是弹出窗口多了以后,建议调试好后再复制代码
参考我的其他帖子:
https://bbs.hassbian.com/thread-29264-1-1.html
https://bbs.hassbian.com/thread-29279-1-1.html

1、弹出窗口设置

背景虚化是第一个弹出窗口设置的全局变量,其他弹出窗口设置了没用
游客,如果您要查看本帖隐藏内容请回复


2、Modules
2.1、修改灯卡片背景透明度
modules文件添加以下内容
游客,如果您要查看本帖隐藏内容请回复

UI编辑引用


屏幕截图 2025-06-02 152457.png

代码引用:
游客,如果您要查看本帖隐藏内容请回复



2.2、修改主页卡片背景及阴影

适用于主页面的bubble card 卡片样式,modules文件添加以下内容:
游客,如果您要查看本帖隐藏内容请回复



回复

使用道具 举报

10

主题

191

回帖

1725

积分

金牌会员

积分
1725
金钱
1524
HASS币
0
 楼主| 发表于 4 天前 | 显示全部楼层
本帖最后由 hungheo 于 2025-6-4 19:25 编辑

其他:
1、swipe-card
虽然是个老插件了,但是很好用,唯一的缺点就是,在设置默认从第几张开始的时候,会自动跳转到第一张。
滑动效果是可以调整的,所有的参数详见:https://swiperjs.com/swiper-api#parameters
效果预览:https://swiperjs.com/demos
我的设置:
游客,如果您要查看本帖隐藏内容请回复


滑动卡片增加导航栏
用的是custom:mod-card修改,点击名称可以快速切换:
屏幕截图 2025-06-04 191926.png

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



2、其他过程中的卡片
2.1、空调卡片
改过一版空调的界面,感觉太复杂了,就没用,用的是自带的和bubble card的,需要的自行下载


WPS拼图0.png
代码引用:

type: custom:button-card
entity: climate.qdhkl_cn_proxy_532016519_0103_ac #空调主ID
template: climate
variables:
  tem_entity: sensor.a4c138d5271a_temperature #温度
  auto_entity: input_boolean.auto_air_keting #自动温控开关
climate.zip (2.16 KB, 下载次数: 7, 售价: 4 金钱)


2.2、房间卡片

过程中,做了一版透明的房间卡片,喜欢的自行下载


屏幕截图 2025-06-02 181120.png


roomcard.zip (2.12 KB, 下载次数: 6, 售价: 4 金钱)





回复

使用道具 举报

9

主题

197

回帖

2758

积分

金牌会员

积分
2758
金钱
2552
HASS币
0
发表于 4 天前 来自手机 | 显示全部楼层
研究下
看起来不错
回复

使用道具 举报

3

主题

88

回帖

851

积分

论坛技术达人

积分
851
金钱
755
HASS币
20
发表于 4 天前 | 显示全部楼层
厉害厉害,这个值得学习
回复

使用道具 举报

0

主题

74

回帖

389

积分

中级会员

积分
389
金钱
315
HASS币
0
发表于 4 天前 | 显示全部楼层
好高大上呀谢谢分享
回复

使用道具 举报

0

主题

1

回帖

25

积分

新手上路

积分
25
金钱
24
HASS币
0
发表于 4 天前 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

9

回帖

45

积分

新手上路

积分
45
金钱
36
HASS币
0
发表于 4 天前 | 显示全部楼层
不错                    
回复

使用道具 举报

15

主题

485

回帖

2749

积分

金牌会员

积分
2749
金钱
2249
HASS币
0
发表于 4 天前 | 显示全部楼层
每次看到好看的UI都想搞,一搞头就大,都半途放弃
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-6-6 03:26 , Processed in 0.225285 second(s), 27 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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