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

gasment

如图：


这是单个卡片，布局适合水平堆叠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)
  

      

• humi为湿度区，格式与temp一致，按上修改即可
  

• light_motion区有一个嵌套，分为light和motion两个区域
  

      

• light区修改对应的实体值，这里根据实体阈值做了图标和图标背景色变化，可以根据自己喜好修改
  

      

• motion区修改的地方与light一致
  

• room区也有一个嵌套，分控制区和图标区
  

      

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

      

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

      

• button区，嵌套了3个按钮，b1,b2,b3，当然你屏幕宽可以多搞几个按钮，修改对应的grid布局即可
  

      

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

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

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

shengmingfa

感谢分享，学习下

qyfdjl

谢谢分享

sunshine

谢谢分享

空蝉

学习一下

taioner

谢谢分享

wenbieba

改了半天还是失败了

sui

谢谢大佬分享研究一下

Ari

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

wenbieba

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

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