i pm you
ty
I am sorry to report that this update is not working for me. With this update, the entire floor plan is not shown. Clearing cache and restarting didn’t help either … 
Wrap-up after Teamviewer:
Don’t save the CSS file as .css.txt in Windows. It took all the way too long time to spot 
But hey… We finally made it 
1 Like
is it possible to create a “configuration file” and then include it in the floreplan? something like !include floorplan.yaml in the lovelace?
Yes 
It’s really up to you. My personal system are in YAML-mode, and all changes is done directly in the .yaml files.
In my ui-lovelave.yaml, I’ve the following part for the floorplan:
- title: Floorplan
icon: 'mdi:floor-plan'
panel: true
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- config: !include lovelace/floorplan/_config-floorplan1.yaml
type: 'custom:floorplan-card'
full_height: true
My _config-floorplan1.yaml looks like this:
image: /local/floorplan/floorplan1.svg?v=1.1.14
#log_level: error
rules:
!include_dir_list rooms/
stylesheet: /local/floorplan/floorplan1_main.css?v=1.1.14
id: floorplan1
And within the rooms folder, my files are arranged lige this:
My tip is to start our simple, and see what you can find out. It’s a bit hard at first, but I’ll get it to work, after a few tries
Good luck
1 Like
is it possible to change the color of an mdi icon based on the chhange of it’s state? For example the icon of a car that change the color based on “home” / “not_home”?
- entity: device_tracker.CAR
state_action:
action: call-service
service: floorplan.style_set
service_data:
style: >
fill: ${ entity.state === "home" ? "#f50707" :
"#37d60b" }; transition: ${ entity.state ===
"not_home" ? "fill 5s ease" : "" };
this is the code that i am tring now, but it does not work…
There’s already a question like this in the Discussion on GitHub, if I remember correctly. Also, there’s a few color-change examples in the docs, too. If you still need help. please create a discussion-thread for it, on GitHub.
It’s probably better to create CSS classes to control your styles, rather than set the styles directly.
It could be that you need to change the fill of nested elements, embedded within your main device tracker element. Can you have a look at this discussion?
https://github.com/ExperienceLovelace/ha-floorplan/discussions/65
It shows how to change styles of nested elements.
Floorplan already has support for using an external config file.
In your Lovelace config, you simply need to to point your card’s config to the floorplan YAML config file.
cards:
- type: 'custom:floorplan-card'
config: /local/floorplan/examples/home/home.yaml
that’s a great project, i don’t understand (in your example) the use of svg file and the css file. In the wiki there is an example of a light with a dedicated svg and css. To use it i need to add the svg and the css in the floorplan folder? or i need to add the css in MY .css file and the lamp.svg in my HOME.svg?
if it’s not too much effort can you provide an example of te home.yaml file?
it’s not clear if i have to use the space at the begginning or not.
local translates to www, so in this case, you’ll move your XAML-file to your www folder, too.
But again, it’s up to how you’d like it to be. Nor pkozul or I can tell you to do Y, without knowing X (what you’re planning to do).
I’ll recommend you to browse some more here on the community, and looking through the docs. Home Assistant will require the try-and-errror way, from time to time.
Floorplan doesn’t care where you please your files, it just needs to be within the www folder, so Floorplan can download the files in your browser. Floorplan arn’t handling that part in the back-end. It’s 100% handled in the frontend.
With that said, if you’re using include in your YAML code, for other YAML-files, that part are handled through the native support in HA - In the backend.
I hope that gives your a better understanding of how to include files. Also, as suggested… If you have a specific request/question, please provide the case itself, and ask om GitHub, in our Discussions-area 
.
Fighting with the custom card and my own firt tinkerings… I have a svg file edited to have more lights for more rooms and a modified home example as custom card config:
type: 'custom:floorplan-card'
config:
image: /local/floorplan/examples/home/home.svg
stylesheet: /local/floorplan/examples/home/home.css
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entities:
- entity: light.wohnzimmer
element: light.wohnzimmer
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
tap_action: toggle
- entity: light.esszimmer
element: light.esszimmer
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
tap_action: toggle
- entity: light.schlafzimmer
element: light.schlafzimmer
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
tap_action: toggle
- entity: light.heimkino
element: light.heimkino
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
tap_action: toggle
- entity: light.bad
element: light.bad
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
tap_action: toggle
- entity: light.kueche
element: light.kueche
state_action:
action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
tap_action: toggle
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" : "" };
Getting there was a pain already. Took a while to understand that you need a “- entities:” when trying to get more than one working… Now I have them in there, but the lights are not handled as one anymore, I can click on all single elements it was made off and none of them toggles light…
SVG: https://pastiebin.com/6058ad0525f10
What did I do wrong?
Can you try using the config below? As you can see, there is just one rule which is used to handle all of your lights. The state_action (i.e. when the state of each light changes) consists of two actions.
Does that work?
type: 'custom:floorplan-card'
config:
image: /local/floorplan/examples/home/home.svg
stylesheet: /local/floorplan/examples/home/home.css
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entities:
- light.wohnzimmer
- light.esszimmer
- light.schlafzimmer
- light.heimkino
- light.bad
- light.kueche
state_action:
- action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
- action: call-service
service: floorplan.style_set
service_data:
style: >
fill: ${ entity.state === "on" ? "#F9D27C" : "#7CB1F9" };
transition: ${ entity.state === "off" ? "fill 5s ease" : "" };
tap_action: toggle
1 Like
Hi, thanks for the reply. OK, if I used yours 1:1 all lamps are drawn and work, IF I remove the light_off.svg and light_on.svg. The lamps are then the non replaced ones from my main svg I guess and that’s why they bahve like single parts as explained above (just that they do some toggle now). If I put the two svgs back in, only one lamp is drawn and the one works as expected, but only one lamp is there… In my case light.schlafzimmer. Close, but not there yet.
I am not sure why you are changing the image and applying a style? If you look at the example YAML there are three “rules” to do with the garage button. One changes the bulb appearance, one changes the button colour and one changes the text on the button. I think all you want is to change the bulb appearance so do you need the style change?
Perhaps this: (Note this format is based on the latest v 1.0.23)
type: 'custom:floorplan-card'
config:
image: /local/floorplan/examples/home/home.svg
stylesheet: /local/floorplan/examples/home/home.css
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entities:
- light.wohnzimmer
- light.esszimmer
- light.schlafzimmer
- light.heimkino
- light.bad
- light.kueche
state_action:
- action: call-service
service: floorplan.image_set
service_data:
image: /local/floorplan/examples/home/light_${entity.state}.svg
cache: true
tap_action: toggle
2 Likes
Yep, as @OzGav said, you probably don’t want to apply styles to these dynamically-loaded images. In any case, I got your example working.
The rule I ended up using is below:
rules:
- entities:
- light.wohnzimmer
- light.esszimmer
- light.schlafzimmer
- light.heimkino
- light.bad
- light.kueche
state_action:
- action: call-service
service: floorplan.image_set
service_data: '/local/floorplan/examples/home/light_${entity.state}.svg'
- action: call-service
service: floorplan.class_set
service_data: 'light-${entity.state}'
tap_action: toggle
For your styles, I ended up creating some CSS classes.
.light-on,
.light-on * {
fill: #F9D27C !important;
}
.light-off,
.light-off * {
fill: #7CB1F9 !important;
transition: fill 5s ease !important;
}
In any case, the reason your light images were all being displayed in the same location (i.e. stacked on top of each other) is because of the transforms that are used in your SVG. Below is an example of one of the lights. As you can see, the <g> element has a transform applied to it. When floorplan loads the SVG image, it replaces the <g> element with the new SVG image, but the transform never seems to be retained, and that causes the image to end up in a different location.
<g
id="light.kueche"
inkscape:label="light.kueche"
transform="translate(100.52719,11.964558)">
<path
transform="matrix(0.10946544,0,0,0.10946544,52.401348,140.07825)"
I have made a fix so that now, floorplan never replaces the <g> element with the SVG image being loaded, but instead, it adds the loaded SVG image as a nested element. I did some tests and it all seems to work just fine.
The new version is 1.0.24 and will be released to HACS over the course of the next day or so.
Cheers.
1 Like
Hey, thanks for the big help both of you 
Well, was my first time I tinkered with Inkscape. I was quite sure I destroyed something myself in there. No clue why and how to fix that normally, but thanks for the upcoming fix. So with the new version I can try to make a real floorplan of my flat and hopefully won’t kill everything again? Btw, the lamps look… flat/single colored on your pic ^^
That’s because of the style change. If you just use the image_set it will look like the example. Glad it is coming together for you. Floorplan really is the most elegant way to display and control your HA IMO! 
2 Likes
OK, now I feel stupid… What else should a fill command in css do than what I just witnessed… Fixed that. (= commented out the style change I just borrowed from the example anyways) Works flawless with master installed from HACS. Thx once more. Time for some old floorplan scanning and SVG converting then ^^
1 Like