本帖最后由 咸味土豆 于 2019-4-19 15:24 编辑
作用
拾取图片的css坐标
说明
Lovelace配置一些图片卡片的时候，需要用到一些类似下面这样的配置:
style:
top: 60%
left: 67%
官方说法：
style
(object)(Required)Position and style the element using CSS.
Default value: position: absolute, transform: translate(-50%, -50%)
今天心血来潮想试着把以前的floorplan转换成lovelace的配置，摸索了半天才找到这个插件，分享给大家（其实你知道的，我是在水贴）。
来源
文章来源：
Lovelace: Helper for Floorplan - Plan coordinates
效果展示：
右上角就可以看到坐标了，方便不少。
插件下载：
https://raw.githubusercontent.co ... plan-coordinates.js
配置
用yaml配置的在ui-lovelace.yaml文件中加入以下两段代码即可：
头部：
resources:
- url: /local/plan-coordinates.js?v=1
type: js
配置卡片：
- title: Main Floor
id: main-floor
icon: mdi:wrench
panel: true
cards:
- type: vertical-stack
cards:
- type: custom:plan-coordinates
- type: picture-elements
image: /local/floorplan/mainfloor.jpg
elements:
- type: state-icon
entity: light.mudroom_light_level
tap_action: toggle
style:
top: 60%
left: 67%
趁最近有空，赶紧收拾收拾配置下picture-elements玩玩，做好了在分享给大家。
##### 哎，第一次学大佬们用这么高大上的格式发水帖，好紧张。
| 
发表于 2019-4-19 15:25:16
，今早爬了好些帖子也没头绪，就想着用新的吧，早知道。。。
，刷新比重启好多了吧，精确的坐标调整肯定是要刷新的，要是调个0.5的坐标测试还重启，真得崩溃了，不比从前了，很感恩了。
