找回密码
 立即注册

微信扫码登录

搜索
查看: 2436|回复: 5

[技术探讨] 怎么把picture-elements的背景图片变透明

[复制链接]

3

主题

17

回帖

262

积分

中级会员

积分
262
金钱
242
HASS币
0
发表于 2024-2-6 10:26:36 | 显示全部楼层
这个是你没有底图,而你的主题默认是白色,你如果想做全屋可视化,代码可以参照homeassistant demo 中的代码
type: picture-elements
image: /assets/arsaboo/floorplans/main.png  #这个是底图,应该是全屋没有开灯的图
elements:
  - type: image                                   #这个是图片,是用来展示你灯亮和灯灭的图层
    entity: input_boolean.abodeupdate     #这是监测的实体  你可以换成灯的实体
    tap_action:
      action: toggle          #这个不用管,是监测切换的动作
    state_image:
      'on': /assets/arsaboo/icons/abode_enabled.png    #这是你需要放的半透明开灯的图
      'off': /assets/arsaboo/icons/abode_disabled.png    #这是你需要放的一张全部透明没有内容的图
    style:
      top: 4%             #这三行是位置和大小   你如果底图和开灯图大小一致,应该三个数值都是50%
      left: 30%
      width: 7%
  - type: state-icon   #这个是按钮,是你要放在图片中的,通过按钮才能控制灯
    entity: input_boolean.abodeupdate     #这是监测的实体  你可以换成灯的实体
    style:
      top: 5%                  #这俩是位置参数,应该可以添加“width: ”这个参数,看需求
      left: 42%

以上是一个房间的代码,需要添加其他房间的时候,添加相应的图片图层和按钮图层就行了,从第四行以下开始添加,图层顺序跟代码有关,我记得好像是写到后面的代码是最顶层,所以按钮类代码要在图片类代码下面
回复

使用道具 举报

3

主题

17

回帖

262

积分

中级会员

积分
262
金钱
242
HASS币
0
发表于 2024-2-6 10:34:20 | 显示全部楼层
说错了,是从第三行以下开始添加,https://demo.home-assistant.io   这个里面可以编辑他的图片模块来查看代码,摸索一下应该就知道怎么写了
回复

使用道具 举报

3

主题

17

回帖

262

积分

中级会员

积分
262
金钱
242
HASS币
0
发表于 2024-2-6 17:00:30 | 显示全部楼层
本帖最后由 bbnomine 于 2024-2-6 17:15 编辑

明白你要做什么了,这个教程应该是你需要的https://bbs.hassbian.com/thread-6019-1-1.html里面讲了如何通过
lovelace-card-modder插件来实现卡片透明和毛玻璃效果
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-8-21 02:33 , Processed in 0.131830 second(s), 12 queries , MemCached On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

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