Can I share svg? thank you [email protected]
Thank you, @luuk
I don’t get it to work on my floorplan:
The floorplan elements work well (car bulb alarm, washer liquid and such), but as soon as I put in your code (adjusted to my needs), all the other elements show up (should be hidden, when off.
- element: carbulbs
entity: binary_sensor.hh_yy1114_bulbs
state_action:
action: call-service
service: floorplan.class_set
service_data: entitystate_car-${entity.state}
- class_template: >-
var hum = entity.state; if (hum < 40) return "hum-red"; else
return "hum-green";
element: cartemp
entity: sensor.aerq_temperature_and_humidity_sensor_v2_0_air_temperature
text template: ${entity.state}
of course the css stuff is in place as well:
.hum-green {
fill: #21EC8B !important;
transition: fill 1s ease;
}
.hum-red {
fill: #F40D50 !important;
transition: fill 1s ease;
}
Anything I might have missed (or changed over the recent HA updates)?
Any help is much appreciated.
On my mobile device so all I can say is that the whole class _template section is incorrect. Have a look at the examples in the docs for the correct way to apply a class and separately how to set text.
I can’t comment on the first section as I’m not sure whether you have included your entire css
New video out.
YouTube: ha-floorplan & JavaScript | Format time_date.time entity from military to AM/PM in state_action
This video was done on basis of the input request done here. I hope other people can use it for something.
If you’re normally trying to skip the string-manipulation in JavaScript, maybe this is a good place for you to start.
If you’re used to JavaScript, and already use JavaScript in Floorplan, you’re clearly not the primary audiance, this time 
.
Happy watching 
!
1 Like
Hi,
I have floorplan installed thank you. I have made an SVG of my homes floorplan in adobe illustrator. it’s uploaded and displaying in a view, just as the tutorial demonstrates. now looking to overlay/integrate some entities (things i have working in my dashboard) but am encountering the same issue i had using a picture card. I can only seem to add entities as separate cards. If I try to add them via the raw editor I get errors. can someone point me in the right direction?
Not sure I fully understand your issue but with ha-floorplan you can only use yaml. There should be no other cards. It is just a SVG with a bunch of rules which defines what happens when you interact with elements in the SVG
1 Like
everything is working with my install as expected, i am just after some direction on how to start overlaying my SVG with devices/entities etc. I have everything i want in my dashboard view, i would like to include them on my floorplan view. Information on how to do this seems to be very decentralised.
We have our documentation Floorplan for Home Assistant
There is also the discussions area on GitHub where people have asked similar questions and Tobias has posted some how to videos like this one Getting Started (1) | Add HACS & SVG-files and YAML entity mapping in Home Assistant · ExperienceLovelace ha-floorplan · Discussion #249 · GitHub
1 Like
Can someone have a look and advise where I am going wrong?
I would like to toggle show/hide element (or set opacity to 0) on a few overlay elements. Here is my rule:
- tap_action:
action: call-service
service: floorplan.class_toggle
data:
classes:
- layer-visible
- layer-hidden
default_class: layer-visible
elements:
- layer-overlay
elements:
- button-filter
name: toggles
and associated CSS
/*Layers */
.layer-visible {
display: initial !important;
}
.layer-hidden {
display: none !important;
}
I just cannot seem to get it to work and would really appreciate another set of eyes or guidance.
Many thanks
You need to use class_set or style_set.
Example
- entities:
- light.main_toilet
- light.on_off_light_1_3
name: Lights
tap_action:
service: light.toggle
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'
Look at the examples and similar discussions on github
1 Like
Hello,
I got this error: “ERROR Unterminated template (23:52)”.
Anyone have any idea what this means and how I solve it?
You are going to have to supply way more info. Where do you see this error? What are you trying to do? Is anything working?
Sounds like a browser issue rather than floorplan. Can you use the browser dev tools and check if the style is getting applied.
1 Like
Thank you for your replay OzGav, I’ve kind of solved it. It was an error at the if statement level, basically I was passing numerical values as string using the " " rather than a plain number.
I want to reuse the floorplan multiple times (as a sort template)
is that gonna work, or will I get trouble with the id’s. if used on the same page?
I dont think that’s a problem. But give it a go - shouldb’t take more than 5 minutes to test? 
As you’re not defining how you’re going to reuse it, we’re in a bit of a X-problem situation. But let us know how it goes.
And oh, if you run into any problems, I’ll recommend you to use our Discussion area on GitHub 
.
1 Like
Thanks for producing this guide
Hello, I have been working time from time with this and now reached the point where I have done all the designing and rendering with sweet home 3d, prepared png files and SVG file preparation in Inkscape and finally started configuration.
I followed youtube video that was created several years ago.
I stumbled upon issue how to activate images based on state.
images are name with same names as the light entities.
if i have light.kitchen enitity then I also have kitchen.png file with rendered light for that area.
In svg I also set corresponding entity ID’s for the images under light_overlay layer.
as per video author uses this code to set style_set and activate elements
state_action:
action: call-service
service: floorplan.style_set
service_data:
element: "${entity.entity_id.replace('light.', 'light_overlay.')}"
style: |
>
if( entity.state !== "on" )
return "display: none;";
let hue = 0;
let sat = 0;
if( entity.attributes.hs_color )
{
hue = entity.attributes.hs_color[0];
sat = entity.attributes.hs_color[1];
}
if( sat < 10 )
{
return `
display: block;
filter:
brightness(calc( ${entity.attributes.brightness} / 255));`
}
return `
display: block;
filter:
sepia(100%)
hue-rotate(calc( ${hue}deg - 55deg ))
saturate(calc( ${sat}% * 2 ))
brightness(calc( ${entity.attributes.brightness} / 255));
`
as I understand my issue is that mine lights do not have neither hs_color neither other attributes. it has only state on or off.
I am very bad with coding if anyone would be so kind and help me alter the code so that it enables correct image if related entity has state on.
That bitborn video is the bane of my existence! 
Its old now and too advanced for most people. These are the videos you should watch https://www.youtube.com/playlist?list=PL5xKVw-BInX1phV-Tnjznwd2YG5mEOvWL
Look here for an example for simple on off lights. Floorplanner Home Example - Floorplan for Home Assistant
2 Likes
