Floorplan now available as a Lovelace card

exetico · December 22, 2020, 4:18pm

Are you using the latest (still “pre-release”) version? Please provide a full example dump, if possible. Include both SVG, styling and config if possible.

xefil · December 22, 2020, 9:28pm

Hello @exetico!

Of course, here all what needed.
HA 0.117.6
Floorplan installed via HACS, so I think last version. Looking into files I can see a floorplan-card.js with inside ‘Date: 2020-05-04T22:49Z’. BTW if you can help me in looking which version, I can share it with you. HACS is not telling me there are updates.
The code used is, on a tab with panel mode activated (eve not activated, same result) the following custom card:

config:
  image: /local/community/lovelace-floorplan/xefilhome/xefilhometest.svg?v=1.1.14
  log_level: error
  rules:
    - action:
        service: homeassistant.toggle
      element: light.dimmer_switch_15
      entity: light.dimmer_switch_15
      image_template: >-
        /local/community/lovelace-floorplan/xefilhome/lightbulb_${entity.state}.svg
      more_info: false
title: XefilHome TEST
type: 'custom:floorplan-card'

Then here the files:

http://music.xefil.com/HA/lightbulb_on.svg
http://music.xefil.com/HA/lightbulb_off.svg
http://music.xefil.com/HA/xefilhometest.css
http://music.xefil.com/HA/xefilhometest.svg

Thanks for the help!

Simon

pkozul · December 23, 2020, 6:59am

Hi @xefil,

If you update to the newest version of Floorplan (v1.0.8), you should be able to use this as your Floorplan config (you can remove the stylesheet line if it doesn’t apply):

type: 'custom:floorplan-card'
title: XefilHome TEST
config:
  image: /local/xefilhome/xefilhometest.svg
  stylesheet: /local/xefilhome/xefilhometest.css
  log_level: error
  defaults:
    hover_action: floorplan.hover_info
    tap_action: homeassistant.more_info
  rules:
    - element: light.dimmer_switch_15
      entity: light.dimmer_switch_15
      state_action:
        - service: floorplan.image_set
          service_data: /local/community/lovelace-floorplan/xefilhome/lightbulb_${entity.state}.svg
      tap_action:
        - service: homeassistant.toggle

As you can see above, the events/triggers (tap_action, hold_action, etc.) are now consistent with Lovelace actions, so it should hopefully make Floorplan even easier to use.

Let us know how you go.

Cheers,
Petar

pkozul · December 23, 2020, 7:55am

@xefil,

Oh yes, regarding the embedded light bulb SVG being displayed in the top left corner instead of in the middle of the circle, I believe it’s due to the placeholder (<g> element) you created.

The relevant section of your SVG file looked like this:

I replaced it with a simple <rect> element, like this:

So as a general rule, when setting up your floorplan to use swappable embedded SVGs, it’s best to just create simple <rect> elements that will be replaced at runtime with the appropriate embedded SVG images.

Cheers,
Petar

xefil · December 23, 2020, 7:57am

Hello @pkozul and @exetico !
Thanks for the hints, give me some hours and I’ll try it out.
How to update and check the actual version?
Using HACS I’ve no popup showing me it needs to be updated and there is only a MASTER branch.
Should be done manually?

And about the placeholders… I’ve done it via INKSCAPE, is there something to set to prevent looking into the file manually? This is a test, but as soon I’ll take my floorplan from autocad it will be more complicated.

Thanks!
Simon

pkozul · December 23, 2020, 7:58am

@xefil Sure, in Inkscape, just delete the original element you created, and draw a new rectangle, giving it the ID of your light entity.

I’ll let Tobias (@exetico) follow up on the HACS installation…

xefil · December 23, 2020, 8:02am

Uhm what’s the difference on what I’ve done? I mean, I’ve done the following:

drawn a rectangle in the middle of the document
then drawn a circle in the middle of the rectangle
then imported a bulb and moved in the middle of the circle. This bulb was then changed with the light id.

Should I remove the last step and link directly the drawn circle?

For the updates, I’ll wait @exetico

Thanks!!

pkozul · December 23, 2020, 8:02am

A good way to check which version of Floorplan you have, is to open Developer Tools in Google Chrome, and when you reload the page, you should see the version information in the console:

xefil · December 23, 2020, 8:07am

Ok @pkozul , seems 1.0.0:

Let me know if you can about the drawing steps i’ve done on inkskape, thank you!

Simon

pkozul · December 23, 2020, 8:07am

@xefil I think it’s best not to import the embedded SVG at all, and just create a rectangle as a placeholder (and give it the ID of your light entity). When Floorplan loads, it will populate the rectangle with the embedded SVG, and you won’t see the issues with the image appearing in the wrong place. Does that make sense?

This is an example of what you want:

xefil · December 23, 2020, 8:08am

OOOkey, so delete step 3 and give to my circle the id!
I’ll let you know soon!

Simon

pkozul · December 23, 2020, 8:11am

@Oscar When you try the new version of Floorplan, just keep in mind the 100% height behaviour will work when your Lovelace view is set to panel mode, and that view only contains a single card, which is Floorplan card.

For example, this is how mine is set up:

  - title: Floorplan
    path: floorplan
    icon: 'hass:floor-plan'
    panel: true
    badges: []
    cards:
      - type: 'custom:floorplan-card'
        title: Floorplan
        config: /local/floorplan/examples/home/home.yaml

xefil · December 23, 2020, 8:17am

Hello again @pkozul ,
Also, now it works as expected! Yuppie!
Only one thing is not working, your example about action, but as you’ve written, I need to update to version 1.0.8, so I’ll wait until @exetico gives me some hints on how update. With my code I can see the bulb where it should be, and it works. With your example, the bulb is missing and if I press on the circle, which should be replaced with the bulb, I obtain the popup window of the entity, and not the action turning the light on or off.
For now, thanks for the fast support!
Simon

pkozul · December 23, 2020, 8:22am

@xefil One way to get Floorplan directly, is simply to save the floorplan.js file to the relevant folder where you’d like to store it.

Right-click this link below, and choose ‘Save link as…’

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

I store mine in the {HOME_ASSISTANT}/www/floorplan folder, and then create the Lovelace resource for it.

/local/floorplan/floorplan.js?v=1.0.8

The great thing about this new version is that everything is in this single file.

xefil · December 23, 2020, 9:02am

Hello @pkozul , ok, wait I fear I’m bit confused.
Under HACS I have as repo “https://github.com/ExperienceLovelace/lovelace-floorplan” and you are pointing me to a raw file into repo “https://github.com/ExperienceLovelace/ha-floorplan”.
Is this the way you switch between master and test? Using different repos instead of braches?
Do you suggest to delete in HACS the lovelace-floorplan and use the ha-floorplan instead?
Or leave the HACS with the lovelace-floorplan and use this as manual setup? So they could be used together, it dipends on the resource called… but I’m not sure on what I’m writing
Thanks!
Simon

exetico · December 23, 2020, 9:04am

I’m sorry for the mess. I implemented the HACS support for the old version (lovelace-floorplan), but the new version are almost ready. @pkozul have pushed the fix to the new version (where the codebase are completly rewritten, and includes new features, too.).

So, plese remove the old repo from HACS, and replace it with with custom repo:
https://github.com/ExperienceLovelace/ha-floorplan

We’re waiting for it to be added in the main HACS repo. The PR is submitted #751.

Please note that you need to make the following changes in your current floorplan config:

on_hover -> hover_action
on_click -> tap_action
on_long_click -> hold_action
on_state -> state_action
data -> service_data (this is the bit that sits beneath the service call)

Also, you must be using the old actiontrigger. It should be replaced with on_click

pkozul · December 23, 2020, 9:09am

Until we get the docs completed, the best reference is to see the examples:

On the left navigation menu, you can choose between 3 examples:

Home
Light
Ring

And for each example, you can see the Floorplan in action, as well as view the YAML and CSS being used.

xefil · December 23, 2020, 9:57am

Thanks @pkozul and @exetico , repo deleted and added the other one, all works perfectly!
Downside: my files were stored into the old www path, and removing the repo and uninstalaling it, they were deleted, but not so bad, I have a copy on my pc.
Now your code @pkozul works.
Next steps, test motion sensor and the way an area gets colored on motion. hope I’ll able to accomplish it easy

Simon

PS: devel mode recognized Floorplan for Home Assistant (ha-floorplan)Version 1.0.9

exetico · December 23, 2020, 10:03am

That’s great to hear! I just edited my post, cause it was a bit unclear, to be honest.

The first “public” / non-pre release will be ready soon. Only the docs, and the submit to HACS’s default lib, are currently waiting

Let us know, if you’re facing any issues.

xefil · December 23, 2020, 10:22am

@pkozul are the examples based on the same SVG found here?

https://raw.githubusercontent.com/ExperienceLovelace/lovelace-floorplan/master/examples/simple/simple.svg

I would try following what happens on bedroom, that should be the case I could follow for my binary_sensor.sensore_motion01

Thanks, Simon