Lovelace插件小工具：plan-coordinates.js

咸味土豆

作用

拾取图片的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.com/ciotlosm/custom-lovelace/master/plan-coordinates/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玩玩，做好了在分享给大家。

##### 哎，第一次学大佬们用这么高大上的格式发水帖，好紧张。

xieahui

东西多一样要 来个坐标啊  不然刷新+刷新+刷新+……

hellerx

如果能有个图片上的坐标就好了，可以做定位指代

killadm

最近新出了个floorplan-card，和经典界面的floorplan很像，配置迁移应该很简单，只是不支持模板
https://github.com/chr1st1ank/floorplan-card

情非殇

没错。我也是水贴的，感谢分享，等开始折腾lovelace时可以来看

咸味土豆

killadm 发表于 2019-4-19 17:15
最近新出了个floorplan-card，和经典界面的floorplan很像，配置迁移应该很简单，只是不支持模板
https://gi ...

昨晚上就想问问你能不能迁移的，，今早爬了好些帖子也没头绪，就想着用新的吧，早知道。。。

咸味土豆

情非殇 发表于 2019-4-19 18:13
没错。我也是水贴的，感谢分享，等开始折腾lovelace时可以来看

还没开始用嘛，这个可他么折腾人了。

咸味土豆

hellerx 发表于 2019-4-19 16:55
如果能有个图片上的坐标就好了，可以做定位指代

尴尬，定位指代是什么啊

情非殇

咸味土豆 发表于 2019-4-19 18:23
还没开始用嘛，这个可他么折腾人了。

懒呀，光看不练，主要是我用homekit多

咸味土豆

情非殇 发表于 2019-4-19 18:28
懒呀，光看不练，主要是我用homekit多

我是搞的杂，啥都想试一试，可惜都没搞利索，趁这段时间有心气，赶紧把ha弄个界面出来，然后玩玩nodered去。