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

 找回密码
 立即注册
查看: 610|回复: 6

[技术探讨] 用picture-elements做户型平面图的几个问题

[复制链接]

44

主题

153

帖子

1127

积分

金牌会员

Rank: 6Rank: 6

积分
1127
金钱
974
HASS币
0
发表于 2024-3-1 03:59:36 | 显示全部楼层 |阅读模式
本帖最后由 zgxman 于 2024-3-1 04:07 编辑

我花了几天时间用picture-elements做个智能家居的户型平面图,目前已经基本成型,但还是有几个问题,想向各位大佬请教一下:
1、我是在电脑上做的界面,在电脑上显示正常,可是在ipad的客户端或者网页,图片和图标之类的都正常,就是显示的文字部分,总是错位,请问怎么才能设置文字也是按比例缩放呢?
2、我原来用的是NMC weather这个插件的,但是从昨天晚上开始不能用了,然后我又下载了和风天气的集成,按照文档进行了设置,但是还是未出现天气的实体,请问应该怎么解决?
3、我点击打界面的任何其他空白区域都会弹出次卧灯的控制界面,不知道这是为什么,有没有办法解决4、我想点按一个图标,就弹出一个卡片,不知道我应该怎么输入代码,卡片类似这样:
QQ20240301-040657@2x3626.png
下方是图片和部分代码
QQ20240301-033518@2x.png
电脑界面
截屏 2024-03-01 03.32.01.jpeg
截屏 2024-03-01 03.31.26.jpeg
ipad界面
QQ20240301-034418@2x3.png
编辑界面
文字代码:
  - type: state-label
    entity: sensor.time
    tap_action: nome
    style:
      color: rgba(255, 255, 255, 1)
      font-size: 500%
      left: 8.3%
      top: 7%
  - type: state-label
    entity: sensor.date
    tap_action: nome
    style:
      color: rgba(255, 255, 255, 0.7)
      font-size: 130%
      letter-spacing: 0.2vw
      left: 8.3%
      top: 12%
  - type: state-label
    entity: sensor.cgllc_cgd1st_f493_temperature
    tap_action: nome
    style:
      left: 41.7%
      top: 50.2%
      text-align: center
      font-size: 20px
      letter-spacing: '-0.05vw'
      color: black
      overflow: hidden
  - type: state-label
    entity: sensor.cgllc_cgd1st_f493_environment
    tap_action: nome
    style:
      left: 44.2%
      top: 50.2%
      text-align: center
      font-size: 20px
      letter-spacing: '-0.05vw'
      color: black
      overflow: hidden
和风天气添加的内容:
QQ20240301-040103@2x66.png
回复

使用道具 举报

16

主题

212

帖子

1640

积分

论坛DIY达人

积分
1640
金钱
1423
HASS币
20
发表于 2024-3-1 08:34:30 | 显示全部楼层
picture-elements的自由度不高,帮不了忙。您可以试一试butron-card,如果能玩转CSS和JS,这货能让您充分发挥想象空间,设计您想要的卡片。
回复

使用道具 举报

39

主题

2072

帖子

7767

积分

元老级技术达人

积分
7767
金钱
5680
HASS币
110
发表于 2024-3-1 08:45:38 | 显示全部楼层
butron-card自由度有了,但是配置有些繁琐,元素多的话
我用的是ha-floorplan,元素都是SVG的,矢量 就不会出现放大缩小的问题
弹窗用browser mod2,注意看issues,作者很久没更新了
回复

使用道具 举报

44

主题

153

帖子

1127

积分

金牌会员

Rank: 6Rank: 6

积分
1127
金钱
974
HASS币
0
 楼主| 发表于 2024-3-1 19:39:21 | 显示全部楼层
ghostist 发表于 2024-3-1 08:45
butron-card自由度有了,但是配置有些繁琐,元素多的话
我用的是ha-floorplan,元素都是SVG的,矢量 就不会 ...

好的,我试一试
回复

使用道具 举报

44

主题

153

帖子

1127

积分

金牌会员

Rank: 6Rank: 6

积分
1127
金钱
974
HASS币
0
 楼主| 发表于 2024-3-1 23:01:58 | 显示全部楼层
ghostist 发表于 2024-3-1 08:45
butron-card自由度有了,但是配置有些繁琐,元素多的话
我用的是ha-floorplan,元素都是SVG的,矢量 就不会 ...

我试过了,我的图片都是png格式的,我网上转了一下格式转成SVG格式,结果显示不出来,第一步就折戟成沙了
回复

使用道具 举报

9

主题

115

帖子

1178

积分

论坛技术达人

积分
1178
金钱
1058
HASS币
20
发表于 2024-3-1 23:47:29 | 显示全部楼层
本帖最后由 hunl1986 于 2024-3-1 23:50 编辑

https://cdkm.com/cn/png-to-svg,这个网址基本可以转,不过基础转为固定像素的
回复

使用道具 举报

0

主题

11

帖子

64

积分

注册会员

Rank: 2

积分
64
金钱
53
HASS币
0
发表于 2024-3-2 10:51:20 | 显示全部楼层
hunl1986 发表于 2024-3-1 23:47
https://cdkm.com/cn/png-to-svg,这个网址基本可以转,不过基础转为固定像素的

感谢,顺便问问   ha-floorplan比起picture-elements的优势是什么,是流畅点还是配置方便?
目前我按着一个picture-elements的教程做完了想要的效果,就是在HA的页面里开关灯都会整个背景图卡顿变白闪一下
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-5-14 14:21 , Processed in 0.751504 second(s), 31 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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