Lovelace: Helper for Floorplan - Plan coordinates

ciotlosm · July 13, 2018, 9:02pm

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

Instructions

The instructions are also found on the above repo.

Download plan-coordinates.js
Place the file in your config/www folder
Include the card code in your ui-lovelace.yaml

resources:
  - 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

Write configuration for the card in your ui-lovelace.yaml

  - 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%

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

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

WARNINGS

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

if you like the cards so much that wish to express your gratitude.

andriej · July 21, 2018, 3:25pm

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

ciotlosm · July 22, 2018, 10:02am

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

Mathoosala · July 23, 2018, 2:25am

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.

ciotlosm · July 23, 2018, 9:35am

@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).

petro · July 23, 2018, 2:39pm

@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.

ciotlosm · July 23, 2018, 3:28pm

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

onkytonk · August 17, 2018, 5:56am

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

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

GIMP Method 1 (Free Alternative)

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

GIMP Method 2 (Free Alternative)

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

ciotlosm · August 20, 2018, 8:47am

@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!

riemers · October 7, 2018, 7:48pm

@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?

ciotlosm · October 8, 2018, 7:46am

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.

riemers · October 8, 2018, 8:00am

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)

riemers · October 8, 2018, 9:42pm

Hard to describe, so here is a movie https://youtu.be/aKa_VTihqmM

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

El_Duderino · November 30, 2018, 9:25pm

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