Maybe you should start telling that you’ve tried, how you’ve added the floorplan and so on. 
There’s also a few suggestions in the docs, too.
I can’t figure out how to make this work at all.
This is what I have done:
- I am using the home assistant container so I started by running
docker exec -it /homeassistant /bin/bashto get a shell. - I ran
cd /config; wget -q -O - https://install.hacs.xyz | bash -in that shell to install HACS. - I spent about half an hour trying to find HACS in the UI before I figured out that I have to add it as an integration.
- I added the HACS integration and connected it to github with the 8 digit code.
- I added the ha-floorplan repository.
- I read that I must “Remember to add the
/hacsfiles/ha-floorplan/floorplan.jsas a module to your resource file - like you do with other modules.” however I have absolutely no idea how to do this. I don’t know what a resource file is, or where I would find it. - I moved on to following Floorplan now available as a Lovelace card - #323 by exetico
- The first step says "Please validate that the resources is added in
http://{HA-IP}:8123/config/lovelace/resources" I assume that this is what is meant in step 6. It was not added, so I added it, like this:
- I then restarted the home assistant server.
- I proceeded to follow the rest of the steps.
- I copied the code from github into the view.
- The result is a red box saying “Custom element doesn’t exist: floorplan-card”.
(I would post a screenshot of it, but as a new new user I can only post one screenshot.)
Update: I clicked reload, and now I see an empty card with the following error log:
27/06/2021, 12:37:14 ERROR fetchText/<@http://localhost:8123/hacsfiles/ha-floorplan/floorplan.js:65:2777 s@http://localhost:8123/hacsfiles/ha-floorplan/floorplan.js:65:734
27/06/2021, 12:37:14 INFO INIT Floorplan for Home Assistant (ha-floorplan) v1.0.23
I still have no idea what to do next.
Ignore this?.....
Hi,
If you’re unsure about how to use HACS-elements, please debug with another simple Home Assistant module, before trying to get started with ha-floorplan. Or at least, give it a try.
I bet it’s something related to how your HACS-files are resolved.
If you’re looking in your Home Assistant directory, do you have a www foler? If so, check what’s in it. You should see a community folder. In that, ha-floorplan should be present.
It looks like the instance are trying to fetch the floorplan-module, but it’s somewhat not working as expected. For most people, the hardest part will be to get the first module working as expected. So, without access to your system, I’ll still recommend you to give another simpel module a try, to see how that works 
But maybe that’s just my take on it. It’s very hard to point out, what’s wrong in your situation.
I’ve just spotted your debug, in the Update:…
If you’re seeing INFO INIT Floorplan for Home Assistant (ha-floorplan) v1.0.23, ha-floorplan are initiated.
Please share your YAML setup, so we can help you with the next step in the process. It’s also important to know if you’re running Home Assistant in a YAML-mode, or in the “GUI-based” mode (can’t remember what it’s called by the HA-team).
Where do I find my YAML setup and how do I tell what mode I am running in?
edit: nvm, the problem is I don’t have the example svg.
edit 2: reported [FEATURE] Better error messages when a file is not found on the server · Issue #122 · ExperienceLovelace/ha-floorplan · GitHub
Hi,
I am fiddling arround with Floorplan and I have created my home with SweetHome 3d.
Now I’m trying to figure out the correlation between the SVG which I created in InkScape, the LoveLace YAML and the CSS file, but that is not so easy as it seems. Lack of good documentation is not helping.
Reading this thread helps though, but is not sufficient.
I’ve created these rendered maps of my first floor:
As you see one is without light on, and the second one has a light on in the hall. This one is standard opacity: 0;
I’ve brought both rendered maps as an object in InkScape to an SVG, and have ID’d both layers uniquely.
I have also added a third invisible layer over the hall which I have ID’d area.hall. This is needs to work as an area to toggle the light in the hall.
Once the lamp is on, the layer with the light on should get opacity: 1;.
This is the code I copied from the examples, and this adds a class .light-on or .light-off depending on the state of the entitiy light.hall. This is clear.
- entity: light.hall
element: area.hall
state_action:
action: call-service
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
tap_action: toggle
But how do I tie the action to this that my layer with the light on gets opacity 1; ?
this is my plain CSS:
#floorplan {
padding: 10px;
}
#floorplan>svg {}
svg * {
vector-effect: non-scaling-stroke !important;
}
/* Binary sensors */
.light-on {
opacity: 1;
transition: opacity 1s ease;
}
.light-off {
opacity: 0;
transition: opacity 3s ease;
}
Can anyone put me in the right direction, or direct me to proper documentation?
OK proper docs is easy. That is here: Usage - Floorplan for Home Assistant
Otherwise it looks like you are on the right track. The only thing I don’t know about is where you say
I am not sure what you are trying to do here. You should just have the two layers and the top layer with the light would have the ID as area.hall. You actually don’t even need the element area.hall you could just label the lights on layer the same as your entity so light.hall. I describe that here: Floorplan now available as a Lovelace card - #416 by OzGav
So your floorplan code could be:
- entity: light.hall
state_action:
action: call-service
service: floorplan.class_set
service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
tap_action: toggle
1 Like
Thanks for the link to the documentation. It is indeed somehow explaining, but it is not complete. So still a lot to find out on trial and error.
Thanks for sharing that I am on the right way.
I’m puzzled however how to proceed, as I need to create a picture of every possible light on/off combination and label them logicaly and then create the logics to have the sofware select the right picture/layer within the SVG.
I started with the logical describing layer id’s (and corresponding filenames) that contain every light or light group with an own identifier. So is my Livingroom row of spotlights (WoonKamer Spotjes in Dutch) identified with WKS0 for off an WKS1 for on, and my Toilet with T0 or T1 for resp. off and on.
The filename and ID for a map with all the lights off is then:
WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G0
I am afraid however that the SVG file will be huge, or maybe too huge to process, and that applying the logic is pretty complex.
My question here is now: Can anyone help me out on how to add JavaScript in the Lovelace-Floorplan.YAML and tell me what is returned to what. I lack a good description of the integration of JS in Floorplan.YAML to be honest.
My goal is to have a piece of JS code that changes the selected element by generating the variable to for instance:
WDStraat_BG_WKS0_WKSL0_ET0_KH0_H0_T0_TK0_G0 or
WDStraat_BG_WKS1_WKSL1_ET1_KH0_H0_T0_TK0_G1 etc. etc.
What I’m trying to achive with this layer is a touch-area so that you only have to tick or click on the room or near a lamp to switch it on or off. This seems to me handy for mobile phones in particular.
What you are trying to achieve is exactly how floorplan works. I think maybe the missing piece is the lights on image does not need to be (and for what you are trying to do shouldn’t be) the whole floorplan. You need to crop out the lights image for EACH room and then place them in the correct position over the base lights off layer. If you are using the code I provided above then what will happen is when you touch anywhere on that (smaller) lights on image (even if you cant see it because it is hidden) that will cause the lights to toggle and the image to show or hide. This also has the added benefit of making the overall SVG smaller since you aren’t importing a number of large images. Now I see in your lights on image that you have light spilling out of the open door on the dining table. I have my way of dealing with this but I will let you just get this much working first and then we can go from there. (And yes it does involve using the invisible area you mentioned before!)
Also have a look at this thread which may give you some more information. I have linked to my post but look above and below it. Share your Floorplan - #676 by OzGav
In my pic the room in the top right has the light on and you can see light spilling outside and into the ensuite. In the top left you can see a desk light on.
Just to be clear this is NOT what you want to do (although you could!). You want to have light on images for each room and they are individually controlled to be shown or hidden in sync with the physical light.
Have a look at this example. The SVG is available by a link at the bottom Floorplanner Home Example - Floorplan for Home Assistant This example is made simpler by not having light spill from one room to another. As I said though this can be done (and I have done so) but it involves more effort.
If you think it’s not completed for your needs, kindly create a PR with your needs, to help other users of ha-floorplan 
. Provide the SVG and YAML too, for the best result.
1 Like
Sorry, this is probably a bit of a newbie question, but I have a floorplan, I want it to work in such a way that if i click a room, it “zooms in” to a different SVG that only contains that room and all the controls (the entire floor view has the most important controls, but can’t change everything in detail). Eventually show more control icons when i click the room. Any tips on how to do this?
Have you seen the multi-floor example? Multi Floor Example - Floorplan for Home Assistant
Instead of a separate button I am thinking you would make the room the button,
Great work Petar.
I have a problem with script invocation which I can’t seem to resolve. I wonder if you (or anyone) can offer advice.
I have a collection of binary sensors linked to corresponding SVG elements. CSS updates are all working nicely and the entity info frame pops up when the associated SVG component is clicked. I now want to execute a script when an SVG element is clicked. My script is in place and executing as expected from the Home Assistant configuration interface.
I have added an action clause to my configuration which references the script, but the script does not get called when I click on an SVG element. No configuration errors and no runtime errors, just no action. The entity info panel continues to pop up as before and I wondered if this was pre-empting the click action? Have I missed something. My configuration is:
- title: Environment
path: environment
visible: []
panel: true
badges: []
cards:
- type: custom:floorplan-card
entity: fp_hydronic
image: /local/beatrice/hydronic-system.svg
stylesheet: /local/community/floorplan-card/floorplan-card-style.css
groups:
- name: Binary sensors
entities:
- binary_sensor.boiler
- binary_sensor.callforch
- binary_sensor.chiller
- binary_sensor.engine
- binary_sensor.generator
- binary_sensor.hydrophore
- binary_sensor.immersion1
- binary_sensor.immersion2
- binary_sensor.thermal_store
states:
- state: 'on'
class: visible
- state: 'off'
class: invisible
action:
domain: script
service: mqtt_update_topic
data:
topic: home/test
message: Hello mum
I guess there’s some inspiration here:
Not 1:1 with your needs, cause it’s related to browser_mod.
Else, taks a look at the docs?
And let us know, if you’re getting stuck . If so, please consider to create a New discussion on GitHub. It’s fine to ask here - but much easier for other to find inspiration, by having each question in a dedicated topic 
.
I am wondering if you are still using an old version of floorplan? states and action don’t look right anymore. Should be state_action and tap_action?
In the latest version calling a script would look like:
- tap_action:
service: script.turn_on
entities:
- script.vacuum_kitchen
100% old version, or wrong rule-usage, at least… That’s why I linked to the current docs.
I should have mentioned the details about the wrong version, too .
I looked at the example, it seems like it uses some classes in the SVG itself to change the picture, instead of poting to a different SVG altogether? Wasn’t quite able to use it the way I wanted.
OK in the github discussions there are these that may help:
You could also use multiple views in your ui-lovelace.yaml and then use window_navigate to jump between each. How to use that? Look at these places: