分享一个自用的小清新手机UI房间卡片

gasment · 发表于 2025-2-21 11:08:41

如图：

这是单个卡片，布局适合水平堆叠2个，多个房间，就添加多个卡片即可，视图布局为部件
整体效果：

水平位置使用了相对布局，不同分辨率、尺寸的手机，显示效果应该差不多，不要低于最小宽度即可
依赖卡片：button-card
按钮弹出可以使用browser_mod和bubble-card，我推荐bubble-card（bubble-card的使用可以查考我另一篇帖子：bubble-card弹窗卡片使用方法分享 - 『HomeAssistant』综合讨论区 - 『瀚思彼岸』» 智能家居技术论坛 - Powered by Discuz!
yaml代码：

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

方便抄作业，解析下大概内容，因为迭代过多次，写法有点混乱随性，见谅，能力有限

整体布局，这里不做修改（点击行数右边的小箭头可以折叠当前字段下的内容），分为环境信息区：存放温度湿度年度等环境类信息；房间名区：存放房间图标和一个控制按钮；按钮区：存放电器弹窗按钮（这里3个button不是指3个按钮，是划定第三行全部为button区，3个按钮的布局不在这里，不理解的可以深入学习下button-card的grid部分）

env区的布局，不做修改，由上到下分别为，温度，湿度，亮度&人在传感
注意，如果你没有这些实体设备，比如人在传感，湿度计等，只需要删掉对应的字段，比如缺少温度，就删掉temp字段，注意是custom_fields下的，不要动grid里的，这样位置还是会占用，但是没有内容，不会影响界面布局

temp区，修改对应的温度实体即可，图标背景色和变化阈值可以按自己喜好修改，我这里是<28度为deepskyblue，<31为orange，>31为orangered，这个js代码非常简单了，颜色代码可以在在线颜色选择器 - 码工具这个网站找到，英文可，rgb值也可（比如orange的rgb值为255 165 0，就把orange换成rgb(255,165,0)

这里需要一个svg图标，我喜欢在iconfont-阿里巴巴矢量图标库找图标，比如我要找主卧图标，直接搜索"主卧"，下载svg格式的图标，如果想添加文字或者把不同svg组合（比如我把一个灯图标与一个电源图标组合，就得到了一个自制的灯开关图标），可以用photoshop(推荐旧版2020的可以直接导出svg)打开，添加文字，改变颜色等等，导出为svg，上传到ha的/config/www/icon目录，修改entity_picture对应路径即可

room的ctl控制区，我这里是对应房间的自动化总开关，用来启用/禁用房间的自动化流程，这个在nodered里比较好做，没有的话直接删掉ctl字段即可，nodered可以使用第三方节点gate来实现流开关

举例其中一个,b1,这里的实体entity是一个开关合集，包含了房间内的所有灯，只要有一个灯亮，这个开关合集就为on，至于怎么做这个合集，可以用ha的模板传感器，或者辅助元素什么的，我这里还是用nodered比较方便

tap_action是navigaton，指向bubble的弹窗路径

其他就没什么好说的了，没有使用button-card-template，存在重复代码，拢共400行，各位按需食用吧

shengmingfa · 发表于 2025-2-21 11:43:01

感谢分享，学习下

qyfdjl · 发表于 2025-2-21 13:45:24

谢谢分享

sunshine · 发表于 2025-2-21 18:59:47

谢谢分享

空蝉 · 发表于 2025-2-21 21:52:25

学习一下

taioner · 发表于 2025-2-23 04:10:13

谢谢分享

wenbieba · 发表于 2025-2-23 17:24:54

本帖最后由 wenbieba 于 2025-2-23 21:49 编辑

改了半天还是失败了

sui · 发表于 2025-2-24 09:42:56

谢谢大佬分享研究一下

Ari · 发表于 2025-2-24 10:20:10

本帖最后由 Ari 于 2025-2-24 10:40 编辑

顶一个，喜欢这个，马上安排，亮度可以把数值显示出来吗？另外我的为什么有边框呢

wenbieba · 发表于 2025-2-24 11:53:47

Ari 发表于 2025-2-24 10:20
顶一个，喜欢这个，马上安排，亮度可以把数值显示出来吗？另外我的为什么有边框呢 ...

这代码我用着咋一大片报错，什么都没显示出来

		自动登录	找回密码
密码			立即注册

[UI界面] 分享一个自用的小清新手机UI房间卡片