Well, it’s working just fine here. See screenshots below.
Select Lovelace as the category while adding it as a custom repo. I’ve just tested it again, and it’s working just fine 
(We’ve already submitted the PR to HACS, but waiting for them to handle the request. It’s totally ready to be used as a custom repo already)
its this part:
So, plese remove the old repo from HACS, and replace it with with custom repo:
https://github.com/ExperienceLovelace/ha-floorplan
That’s not HACS. You’re in HA’s own store for the Hass.io solution.
Please add HACS to your HA env. 
…
Check this:
In HACS, you’ll find a lot of other great plugins, components, and much more 
so i got as far as installing the card?
but how do i add the card to home view? it does not show up as a card there
Now you’ll need to add the resource, to your resource file
I can already see a Floorplan in the background. Are that just a image, or is that your SVG file?
Hi. Today (17 oct., 2022) is … a new day for me. Yesterday i planned and recorded a video on how to get started with ha-floorplan. It’s done with Home Assistant OS, which are the easiest way to get started with Home Assistant.
I really hope that I’ll find time to create more videos in the future, with more specific content - but I’ve received quite a few requests on how to get started with Home Assistant, in the last couple of years.
Happy floorplanning everyone!
It’s my first video in English and as a “teacher”, but I’ve executed it the best I can, during a rainy sunday.
There’s many ways of adding the Floorplan. I’ve spinned up my Hass.io test-instance, and create a guide for you 
I’ll like to mention, that it’s totally OK that you’re asking. It’s helping us to know, what we need to include in our docs, for a “Beginners” guide ! That’s great.
Please note that this is ONLY FOR the Hass.io solution!
Note about non-hass-io solution:
Static-files for non-hassio setups, are normally within your .homeassistant/www (.homeassistant are the same folder, as where your configuration.yaml file lives.)
At this point, you’ve already installed HACS, and added the ha-floorplan repo as a custom reposition, and installed it, too
Let’s take the last steps together…
http://{HA-IP}:8123/config/lovelace/resourcesAttention: You’d have to enable “Advanced mode” on your Home Assistant user-account. Read more here.
Create a new view:
Go to the “raw” editor:
Scroll down, and find “Floorplan”
Replace the Floorplan-content with the following code (open the link, and copy it):
Note that “type” are missing in our docs (I’ve created a note about that, so we’ll remember to have it 100% copy-paste friendly).
I’ve just added it as the viewst view, so here it looks like this:
Now you’ll be able to see an empty card, if your CSS and SVG-files are missing:
If you’re unsure about how to transfer files to your Hass.io instance, I’ll recommend you to use the “File editor” add-on from the “Supervisor” section.
You can see that the defined path are /local/floorplan/examples/home/home.svg, for the svg-file. /local/ translates into /www/:
Let’s create the folders needed. Note that / will be used to create a folder, within a folder path (that’s a default thing on most Unix-systems).
Navigate to floorplan > examples > home
Upload the “home.svg” and “home.css” file to the folder, with the “Upload file” button.
IMPORTANT: If you created the “www” folder yourself, you’ll need to restart Home Assistant before continue. If you’re unsure whether the “www” folder was created with config from the beginning, please restart Home Assistant - just to be sure.
Enjoy Floorplan
Bonus-info: You can remove the console by removing the log_level: info-line from the config.
Also… It’s totally possible to use the GUI for almost every step, if you like to do so.
Use the “+” button, after you’re created the “Floorplan” view:
Press “Manual”
Paste in this wall of code (open the link, and copy it):
that is just an image… its a thing i found that was installed from the beginning
thanks for the guide, it worked for me, but a restart was needed
now on to making an SVG
Hello @exetico and @pkozul
I’m back trying to apply the first rules on a floorplan I’ve converted from Autocad. Seems its not working. The main difference I’m trying to apply the rules to a GROUP of converted polylines that forms a door. Could it be the problem? HAving it grouped and setting it with correct ID, the color change is not applied. If I apply it to a single rectangle created by me, it works.
Ideas?
Thanks!
Simon
Could you please wrap-up the problem, and secure that you’re using ha-floorplan?
Examples can be found here (select them in the menu in the left sidebar). The light-build should do the RGB just fine. @pkozul has already tested it
Also, remember that a few keys/options has been renamed:
I’m not 100% sure about, what you’re thinking off, when you’re writing:
Are nothing triggered, if you’re pressing a element on the SVG-file, or?
Personally I’ve create some ID’s in the SVG file, and are poing to them. They’re not a 100% match - cause I knowit will change in Home Assistant, down the line.
Here’s one example with my living-room:
name: Livingroom
entities:
- group.livingroom
element: area.livingroom
# groups: # Can be used to open group
# - group.office
tap_action:
service: light.toggle
service_data:
entity_id: light.aeotec_zw111_nano_dimmer_level
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "light-on" : "light-off"}'
Here area.livingroomare the “ID” given in the SVG-file to the livingroom-svg element. The group.livingroom are used to see, if one (or more) light are on, and if they are, it will add the state called light-on. If i press the element mathing the ID (area.livingroom), it will trigger my light entity called light.aeotec_zw111_nano_dimmer_level.
I hope that can help you a bit? I know the docs are not ready for the public, but we’re trying to do our best to make everything ready, as fast as possible
It seems I am having difficulty converting a template if you don’t mind helping:
state_action:
action: call-service
service: floorplan.image_set
service_data: |
>
var imageName = '';
switch (entity.state) {
case 'sunny': imageName ='day'; break;
case 'clear-night': imageName = 'night'; break;
case 'partlycloudy': imageName = 'cloudy-day-1'; break;
case 'partly-cloudy-night': imageName = 'cloudy-night-1'; break;
case 'cloudy': imageName = 'cloudy'; break;
case 'rain': imageName = 'rainy-1'; break;
case 'snow': imageName = 'snowy-1'; break;
}
return 'image: /local/floorplan/active/weather_icons/' + imageName + '.svg';
Does the switch function no longer work?
Thanks.
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
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? 
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.
Ok, I’ll post my question there
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
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.
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 
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!
Thanks! Unfortunately, I don’t have a to-scale drawing of it–just the measurements.