Hi all,
How I have my Floor plan working with a few light bulb images I want to set the whole room area as a bulb and have that change colour to show the light state. I guess i am missing something obvious here but do I just draw a shape in Inkscape and set its properties to the bulb Entity ID? when trying this I see nothing on the floorplan, am i doing it wrong?
If you want the room to change color based on whether the light is on or off, you need to draw a shape to match the shape of the room, move the new shape to the top and name it with the entity ID of the light bulb.
Thanks, Yes that’s what I tried but it didn’t show. I’ll try again in the morning, do I need to do anything else to the shape for it to display?
Trying to get started with floorplan and used pkozul tutorial. I am also getting a double and sometimes triple image. Once refreshed they are gone for while.
Did this get resolved.
You also need to setup a css entry for it so the browser knows what to do with it. There is an example of on-off in the sample css from the repo
ok here is the user icon - i made them in powerpoint and exported to jpg. then imported to the svg (text is a different layer). you should be able to do the same. Linked in picture is round, but powerpoint has a nice auto crop round feature too if not. i would edit in PPT (unless your a artist) then save the png 
The temperature is just 2 circles and text in the middle - the color is set from css based on temp being high or low. probably take longer to copy than just drag 2 circles out and add text.
not that i’m aware of - could be a javascript_version issue
hi, how do you show the bulbs that are on vs. off differently please?
Loving the floorplan and got it working fairly pain free (once i read about firefox on desktop not working).
How can i get the colours of my lights to reflect the colour they are set to (like on the default states page instead of in customs css)?
I have the states recording with the default example and CSS:
states: - state: 'on' class: 'light-on' - state: 'off' class: 'light-off'
Using Ikea Tradfri bulbs and running home assitant from a virtual environment on a RPI3.
Man ythanks
I’ve been able to get everything working however I can’t get the floorplan.svg to show. All I get is the below screen shot. I’m trying to get the default one to work before I start creating my own.
I’ve gone through the thread and thought I’ve tried everything but I’m probably missing something.
Group:
Config:
binary_sensor:
Floorplan.yaml is the default one in the repo.
What happens when you click the circle?
Have you got all the files in the correct places?
Where local is really the www dir
/www/custom_ui/state-card-floorplan.html
/www/custom_ui/floorplan/floorplan.css, floorplan.svg, ha-floorplan.html
www/custom_ui/floorplan/lib/jquer-3.2.1.min.js, moment.min.js, svg-pan-zoom.min.js
and
floorplan.yaml in the config dir.
Sensors, groups, and frontend setup in config. And you are using chrome browser.
I struggled with this for a while too.
Assuming your setup is correct, you may want to try:
Ok. I’m getting closer. I can see the default layout in the details.
I gave up and went with a custom panel and it’s starting to move along but the top part is being cut off.
edit: I was outside of the box and was cutting everything off. I guess this is why I should do this at home and not when working
tried this:
- name: Sensors entities: - sensor.dark_sky_temperature text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}' class_template: ' var temp = parseFloat(entity.state); return temp + '°C'; '
but no sigar. How do i add °C to temperature?
I Simply use
text_template: ‘${entity.state ? Math.ceil(entity.state) : “undefined”}°C’
However i want to colour the text depending on temp which i have not worked out yet.
are you using SSL? how did you set your floorplan up I am pulling my hair out !!!
I am having the same errors and have installed the js-files in the lib directory. Is that incorrect?
