Floorplan now available as a Lovelace card

xefil · December 28, 2020, 5:44pm

Sorry @exetico I’ve not explained enough.
My first tests were on a SVG with simple rectangles or cicrles drawn by me. Then, after your help, I was able to test a lightbulb, a motion sensor and a contact door. As soon the sensor changes, the related item, identified by the ID, changes his color, good.
The next step was to take my Home DWG, convert it with a tool into SVG and try to apply these tests on my home plan. Here I would like to select my converted home door and give them the contact.sensor ID, but I’ve noticed that the item is in really a group composed by different items:

So applying the ID to a group of items, seems not to work, is that posible?

Or as alternative, I could redraw the door with a single rectangle, no problem, but how in case to switch between a green open door and a red closed door? Another problem is the on-mouse-over area of the door is small. Better would be that the whole entrance is on-hoverso that the mouse could show informations on the whole area, so that if the door is closed or open, in the same place the information is available. Soggestions / examples to follow? Thanks!

Thanks, Simon

xefil · December 29, 2020, 3:45pm

Hello, back again @exetico and @pkozul . Forget the previous post, even if interested why it’s not working.
I’m redrawing the door, so no problem to match the item into svg, so the same time I’m trying to apply a rotate effect. I’ve taken some examples from the forum as well from your site, but the door changes on-hover state, but not animating, neither changes color. Ideas?

Here CSS and YAML:

css:

/* SVG size */

#floorplan  {
  padding: 10px;
}

#floorplan > svg {
  max-width: 1900px;
}

/* SVG elements */

svg * {
  vector-effect: non-scaling-stroke !important;
}

/* Hover over */

.floorplan-shape:hover,
g.floorplan-hover > :not(text):hover,
g.floorplan-click > :not(text):hover,
g.floorplan-long-click > :not(text):hover,
:not(text).floorplan-hover:hover,
:not(text).floorplan-click:hover, 
:not(text).floorplan-long-click:hover {
  stroke: #03A9F4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}

/* Animation */

.spinning {
  animation-name: spin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-90 {
	100% {
		transform: rotate(-90deg);
	}
}

@keyframes rotateReset-90 {
	0% {
		transform: rotate(-90deg);
	}
	100% {
		transform: none;
	}
}



/* Doors that open to the top left */
#binary_sensor\.0x00158d00047d6600_contact {
  transform-origin: top left;
  transform-box: fill-box;
}

.door_closed {
  fill: #00ccff !important;
  fill-opacity: 1;
  animation-duration: 2s;
  animation-name: rotateReset-90;
}

.door_open {
  fill: rgb(185, 142, 134) !important;
  fill-opacity: 1;
  animation-duration: 2s;
  animation-name: rotate-90;
  animation-fill-mode: forwards;
}

/* Binary sensors */

.binary-sensor-on {
  fill: #F9D27C !important;
}

.binary-sensor-off {
  fill: #7CB1F9 !important;
  transition: fill 5s ease;
}

/* Buttons */

.button-on rect {
  fill: #1ABA92 !important;
}

.button-off rect {
  fill: #d32f2f !important;
}

.button-on tspan,
.button-off tspan {
  fill: white !important;
}

And YAML:

type: 'custom:floorplan-card'
title: XefilHome TEST
config:
  image: /local/community/ha-floorplan/xefilhome/xefilhome.svg
  stylesheet: /local/community/ha-floorplan/xefilhome/xefilhometest.css
  log_level: debug
  console_log_level: debug
  defaults:
    hover_action: floorplan.hover_info
    tap_action: homeassistant.more_info
  rules:
    - entity: light.dimmer_switch_15
      element: light.dimmer_switch_15
      state_action:
        - service: floorplan.image_set
          service_data: >-
            /local/community/ha-floorplan/xefilhome/lightbulb_${entity.state}.svg
      tap_action:
        - service: homeassistant.toggle
    - entities:
        - binary_sensor.sensore_movimento_corridoio_occupancy
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: |
            fill: ${ entity.state === "on" ? "#F9D27C" : "#7CB1F9" };
            transition: ${ entity.state === "off" ? "fill 5s ease" : "" };
    - entities:
        - binary_sensor.0x00158d00047d6600_contact
      states_action:
        action: call-service
        service: floorplan.class_set
        service_data:
          class: '${(entity.state === "on") ? "door_open" : "door_closed"}'

Ideas? Thanks a lot!

PS: Better to open a new thread for every issue?

exetico · January 2, 2021, 4:01pm

That’s a great question… Maybe, but just maybe, you can give the “Discussion” feature on GitHub a try, now this is 1:1 related to “usage”-guidance.

Maybe @pkozul can spot it “as is”. Else, I’ll see if I can spot what’s going on.

xefil · January 2, 2021, 8:40pm

Ok, I’ll post my question there

puk · January 8, 2021, 10:51pm

Apologies if this is answered elsewhere–I’ve looked, but I may have missed it. Does anyone have a suggestion for generating the SVG based on measurements? I’m terrible with GUIs but have decently accurate measurements for our house, and would like to turn that into a floorplan as directly and precisely as possible. Thanks for any suggestions!

-puk

parautenbach · January 9, 2021, 6:18am

Magicplan has an “import and draw” feature where you can basically scan and trace an existing plan. I’ve been using the app for my floorplan but I haven’t used this feature so can’t tell you more than that.

exetico · January 9, 2021, 5:05pm

I’ve updated our docs a bit. There’s still lots of things to do - but what’s the most important thing(s) for you guys?

And oh… We’re now officially added to the HACS-collection of frontend custom solutions to Home Assistant

puk · January 9, 2021, 9:01pm

Just pointing back at my post a few up: generating the initial SVG floorplan has been the thing blocking me for many months. I think once I have that the rest won’t be nearly as unfamiliar and challenging. (I just revisited the project when I saw it pop up on HACS. Nice!) Thanks!

puk · January 9, 2021, 9:07pm

Thanks! Unfortunately, I don’t have a to-scale drawing of it–just the measurements.

OzGav · January 9, 2021, 10:34pm

Given you said you aren’t great with GUIs then I would suggest you draw a to scale floor plan on a piece of paper first. The scan it and then import it into a program to create the SVG. I do it via two steps, I use SweetHome3D to make a PNG of the floor plan then I import that into Inkscape to make the SVG. You should find a number of tutorials on YouTube for SweetHome3D but here is one https://youtu.be/HBXIOj5ndo4

Michel_Anello · January 10, 2021, 12:19am

Hi to everybody.
as soon as the new version of Floorplan came up, I intsalled it via HACS.
Since then, even updating both YAML and CSS files I’m not able anymore to change the fill color of the SVG object. I’m able via CSS to modify the visibility and the opacity but noway for the color.

Here is the CSS part:

.light-on {
  fill: red !important;
}

.light-off {
  fill: white !important;
}

and the YAML part:

    - entities:
        - switch.twinkly
        - light.wled
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off" }'
      tap_action:
        action: call-service
        service: homeassistant.toggle

The YAML part is correct and object are well named infact , changing the CSS to:

.light-on {
  opacity: 1 !important;
}

.light-off {
  opacity: 0.2 !important;
}

it works correctly.

Any suggestion on how to solve it?

exetico · January 11, 2021, 5:23pm

Hi,

I’ll reply to your question on GitHub

gillman99 · January 15, 2021, 3:43pm

I used the example pkozul put together and tried to put in a simple svc file but my dimensions are off. Below is an example of the card. Any idea what is causing the fixed boundary around the start of my floorplan and why this doesn’t just resize to fill the space?

exetico · January 17, 2021, 10:51am

Hi,

Take a look at our updated docs, related to this

While creating your SVG, rememeber to fix the “area” of your SVG, to only be the same as your projects elements - else the SVG-file will have a good amount of “empty fill” which are not handled in your browser (cause the SVG have a object with the fixed size). You can share the SVG, if you like to do so. Also, consider to create a discussion at our discussions-area for more feedback related to this. Remember to share YAML, CSS and SVG

alverman · January 18, 2021, 1:47pm

Hello, I have always used floorplan and I was able to use only that one because it grouped my entire home and I could easily understand the situation.
I’m stuck at hassio version 0.114 because if I update it the floorplan doesn’t work anymore.
So I went to try to use floorplan in the new version.
One thing that is not clear to me is whether I should completely remove the old floorplan or keep it and add the new ha-floorplan.
Do you clarify me?
The current version of floorplan uses an svg file that shows the status of the lights of its area in black if it is off and in yellow if it is on.
I turn the light on or off by clicking on it.
In the test I have done, on the new plan in the card, when I click on the office, for example, I release the slip but does not execute the command.
Can you help me please?
Thanks, Alberto

type: 'custom:floorplan-card'
full_height: true
config:
  image: /local/custom_ui/floorplan/floorplan.svg
  stylesheet: /local/custom_ui/floorplan/floorplan.css
  log_level: info
  console_log_level: info
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entity: light.ufficio1
      element: light.ufficio1
      state_action:
        action: call-service
        service: homeassistant.toggle
      tap_action: toggle
    - entities:
        - binary_sensor.ufficio1
      state_action:
        action: call-service
        service: floorplan.style_set
        service_data:
          style: |
            fill: ${ entity.state === "on" ? "#F9D27C" : "#7CB1F9" };
            transition: ${ entity.state === "off" ? "fill 5s ease" : "" };

alverman · January 18, 2021, 4:17pm

Perhaps it is better to start by modifying the home example.
Then I managed to turn on the light bulb that corresponds to my office.
But if I wanted to turn on the background instead of the light bulb what should I do?
How can I tell to color the background rectangle which is in the plant svg file?

Thanks, Alberto

popsyann · January 21, 2021, 10:15am

Hi
I managed to build my floor plan using the instructions found in the documentation accessible from HACS-Frontend Floor plan.

This is implemented as a card custom:floorplan-card using the panel mode.

I wish to have all this work implemented as a custom_panel. Has somebody done that already? Advice will be appreciated.

Thanks

csdollhopf · January 23, 2021, 4:04am

Hi all,

I’ve tried a few different ways but am not able to get this working. My question is, is it possible to use a template in the confirmation field of the YAML? I have some lights in bedrooms that I’d like it to confirm for at night but not during the day and was wondering the best way to do that. I figured templating would work well but so far have not been able to get it working.

Thanks in advance.

exetico · January 24, 2021, 2:51pm

Hi,

I’d suggest you to share your existing solution, so we’ve something to help you with. With that said, consider to ask in the “Community” section in our repo. It’s much easier to have sepereated threads, for each help, support and feedback-thread

I’m spending very limited amount of time in this thread, cause it’s hard to get a good overview of what’s waiting, not answered, and so on

pkozul · January 25, 2021, 8:11am

Hi @firstof9 From what I can tell, your example should work. The new version supports JavaScript just as the old one did. Is it still not working for you?