Lovelace: Helper for Floorplan - Plan coordinates

Plan coordinates

As getting a basic floorplan is now doable in Lovelace using picture-elements, getting the right % coordinates for items was becoming a problem. Nobody likes to guess and refresh and guess again!

Here is a helper addon (Warning - it only works on Chrome), that lets you just hover your mouse on top of your Floorplan image in Home Assistant and it will show you the coordinates in %.

You can find the code here


The instructions are also found on the above repo.

  1. Download plan-coordinates.js
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace.yaml
  - url: /local/plan-coordinates.js?v=1
    type: js

Note: You can change v=1 to a higher number whenever updating code to avoid having to clear cache in all browsers

  1. Write configuration for the card in your ui-lovelace.yaml
  - title: Main Floor
    id: main-floor
    icon: mdi:wrench
    panel: true
      - type: vertical-stack
          - type: custom:plan-coordinates                    
          - type: picture-elements
            image: /local/floorplan/mainfloor.jpg
              - type: state-icon
                entity: light.mudroom_light_level
                tap_action: toggle
                  top: 60%
                  left: 67%

Thanks to kylerw for the config that uses panel

If you don’t use panel: true you can go minimal setup:

- type: custom:plan-coordinates
  1. Reload your Lovelace tab (no need to restart Home Assistant or other things) and now when you hover your floorplan you should see the coordinates appear on the right.

FAQ: GitHub - ciotlosm/lovelace-thermostat-dark-card: 🌡 Thermostat card with a round and black feel to it


  • This feature only works with Chrome that supports Event.path on MouseMove.

Buy Me A Coffee if you like the cards so much that wish to express your gratitude.

1 Like

There’s an error i thread above: instead of url: /local/bignumber-card.js?v=1 should be /local/plan-coordinates.js :wink:

1 Like

Thanks @andriej. I’ve also updated the component to allow it to be visible when scrolling.

I have this enabled, but the coordinates are off for me. Does the image have to be certain size for this to work? I also notice if the iframe panel is open or closed it changes the coordinates.

@Mathoosala Coordinates provided by plan-cooridnates are accurate, however there might be a difference when picture-elements renders. If the picture elements uses % to position the center of the element than coordinates might seem a bit off. Image doesn’t have to be a certain size, as everything is in %, so even if it scales differently, the % on that axes stay constant.

Can you make a video of the resize problem? I can’t seem to reproduce. I tried it with left hand menu (if that is what you call iframe panel).

@Mathoosala are you zooming in (ctrl+mouse wheel)? I’ve noticed that the percents are off when you aren’t at 100% zoom on the page. I tend to zoom alot and it bit me once or twice.

I haven’t thought of this. I will add it in the FAQ

Not to overstep, or undermine the work done on this project, but I started using an alternative way to discover the percentage coordinates.

Adobe Photoshop Method

  1. Open the image in Photoshop and go to Edit > Preferences > Units & Rulers
  2. Under “Units”, set Rulers to “Percent”. Click OK
  3. Turn on rulers by going to View > Rulers
  4. Go to Windows > Info
  5. Percentage coordinates will now show up in the Info dialog.

GIMP Method 1 (Free Alternative)

  1. Open the image GIMP and go to Image > Print Size
  2. Unlink the ratio and set Width: 100mm and Height: 100mm
  3. In the bottom left of the window, set Units to mm.
  4. Percentage coordinates will now be displayed just to the left of the Units setting.
  5. Alternatively, go to Windows > Dockable Dialogs > Pointer

GIMP Method 2 (Free Alternative)

  1. Open the image GIMP and select the Rectangle Select Tool (top right in the tools palette).
  2. Draw a rectangle selection over your image.
  3. In the menu option on the left, set position 0 and 0.
  4. Set size to %.
  5. Now drag the bottom right corner of the rectangle. The percentage coordinates will be displayed under “Size”.


@onkytonk Great examples! My project was to get people up and running faster when they keep tweaking to avoid having to swap tools, however there are many quirks to the solution and a setup using and actual image processing software is far more accurate. Thanks for sharing!

@ciotlosm: i also have different coordinates. If i open/close the hamburger menu it changes the coordinates. Same when resizing the chrome browser. Icons don’t map to the correct place either when trying it.

Any tips?

You must be using chrome. You also have to reset any custom zoom level (ctrl+0). Coordinates are relative to the image corner, so things like hamburger menu changes should not influence coordinates.

Using 100% zoom (normal level) and using chrome. Also notice that if you move around the image from the top it jumps a bit downwards too. Perhaps i should test a smaller image (just for testing sake)

Hard to describe, so here is a movie :slight_smile:

I’am actually resizing it during the movie, also to avoid the flickering i had (which sometimes happens)

I too would like some help with correct coordinates. I’m using Chrome on osx if that makes a difference.