Hi @ATWindsor. The advantage of Floorplan is that it’s based on vector images, so everything gets rescaled automatically based on the real estate available. Also, it allows you to get really creative with your design, so you can use CSS animations, styles, etc. to dynamically make your design come to life. The idea behind Floorplan is provide a generic framework for displaying and interacting with your Home Assistant entities. There are some great examples of what others have done in the ‘Share your Floorplan’ thread.
1 Like
Hi @levickij. Looks like your browser is holding onto an older version of Floorplan. Can you post your Lovelace config? Also, you tried adding the simple example to make sure all is working?
I had recommended a great tool I use everyday which is free (unlimited number of files, and unlimited exports) but since my post was flagged as spam I’ve edited it to remove the name of the software.
1 Like
Toggling of lights work fine but fill colors from stylesheets are still not applied.
Maybe it is because of this error in Chrome devtools console:
2019.05.13. 18:22:31 ERROR ERROR Uncaught SyntaxError: Invalid or unexpected token<br>URL: https://mydomain.duckdns.org/local/floorplan/lib/yaml.min.js<br>Line: 1, column: 1479<br>Error: {}
Uncaught SyntaxError: Invalid or unexpected token
UPDATE: After extensive investigation and bleeding eyes going through yaml I found out root cause - I had wrongly copy-pasted stylesheet parameter from example outside config block. It visually seemed to fit there.
Now everything works in lovelace same as it was in old UI.
Once again @pkozul thank you for your hard work making floorplan.
The only questing now remains if there is a friendly way how to disable debug mode to prevent spamming console?
1 Like
Thanks for helping Petar. Some of the styling is still actually being observed such as colour change on state. It just looks like animation, and hidden/visible layer when called are not being observed which is toggled on the older floorpan, with the new floorplan for Lovelace the area clicked is now invoking the popup to allow the switch of entity.
I will forward my Lovelace config and try your sample CSS file now, but to be honest I was not expecting to have had to make any changes to my CSS which was why I did not try your example as CSS had previously worked in the old floorplan config. I have also emptied the browser cache with hard reload.
- icon: mdi:floor-plan
title: Floor Plan
panel: true
cards:
- type: 'custom:floorplan-card'
title: Ground Floor
config:
image: /local/floorplan/config/home/home.svg
stylesheet: /local/floorplan/config/home/home.css
rules:
- entities:
- sensor.dining_room_temperature
- sensor.lounge_room_temperature
- sensor.met_office_temperature
- sensor.wc_temperature
- sensor.dining_room_setpoint
- sensor.lounge_room_setpoint
- sensor.wc_setpoint
- input_number.dining_boost_timer
- input_number.lounge_boost_timer
- input_number.wc_boost_timer
- sensor.dining_state
- sensor.wc_state
- sensor.lounge_state
- switch.dining_room_lamp
- sensor.time
- sensor.date
- binary_sensor.bollard_light
- binary_sensor.dining_room_lamp
- binary_sensor.lamp
- binary_sensor.lounge_floor_lamp
- binary_sensor.nas
- binary_sensor.outside_camera_front
- binary_sensor.tp_link_wifi_plug
- binary_sensor.wiser_heat_hub
- binary_sensor.xbox_one
- light.outside_light
- camera.4k_camera
- group.lounge_lamps
- sensor.heating_relay_state
states:
- state: 'off'
class: device-off
- state: 'on'
class: device-on
- state: 'on'
class: layer-visible
- state: 'off'
class: layer-hidden
- state: 'on'
class: light-on
- state: 'off'
class: light-off
- state: 'on'
class: image-on
- state: 'off'
class: image-off
- state: 'on'
class: visible
- state: 'off'
class: invisible
- state: 'off'
class: blinking
- state: 'on'
class: boiler-on
- state: 'on'
class: switch-on
- state: 'on'
class: switch-offHi @inutilis. Just pushed a change to floorplan v1.1.11. Debugging to the console is now disabled by default. If you ever want to get spammed by the console again, you can do it by setting debug: true
- cards:
- config:
image: /local/floorplan/examples/simple/simple.svg?v=1.1.11
log_level: error
debug: true
Try the new version and let me know how you go.
1 Like
Hi @levickij. Can you send a PM with your floorplan SVG, config and CSS file? I can then look into why it’s not fully working.
If anyone uses Floorplan’s transition feature, I think this is something that should be removed, and instead, we should be using pure CSS to do that. It should make the whole thing more efficient and smoother too. So, in the simple example, I have now added a 5 second transition when the binary sensors go from ‘on’ to ‘off’.
Whoever uses Floorplan transitions, can you please try moving the transitions into your CSS? Let me know how you go.
.binary-sensor-on {
fill: #F9D27C !important;
}
.binary-sensor-off {
fill: #7CB1F9 !important;
transition: fill 5s ease;
}
You can get the latest Floorplan (v.1.1.12) which no longer manages transitions within the actual Floorplan code.
Just a quick update.
@levickij has been testing a new version of Floorplan (thanks!), which is looking quite promising.
This is a revamp which has involved the following:
- Re-coding the entire library in Typescript (to improve code quality and reduce errors)
- Producing the entire library as a single file (floorplan-card.js) which is under 80 KB in size (i.e. lib folder no longer required - much quicker to load in the browser)
- Developing Floorplan as standalone library (can be easily tested outside of Home Assistant)
- Supporting Floorplan as both a Lovelace card, and a custom panel
- (more to come…)
Will have something ready in the next few days. Stay tuned.
BTW, as part of this new version, I’d like to develop on online showcase that can be used to demo different types of floorplans, use cases, etc. with a Home Assistant ‘simulator’ running in the background to generate and manage states. This would provide some read-to-use ‘recipes’ for people who need a starting point and ideas, so each floorplan in the showcase would also include all the files needed to make it work (SVG file, CSS file, and YAML config).
3 Likes
I love that you use jquery! the king of js libraries lives on in home assistant!!
@dubsix The new version will actually be without jQuery 
File size of Floorplan will be greatly reduced as a result.
2 Likes
Not sure what I am doing wrong. I have followed everything in the insructions and got the floorplan Lovelace card working as shown in the first picture. However if you look at the bathroom, bedroom and livingroom “H” it should show the humidity same with the “T” in the bedroom. As you can see the Bathroom and livingroom are working fine as well as the humidity from dark sky and if I hover over the “T” or “H” it gives me the proper info. I have pointed the .svg and .css to the same floorplan files as the Floorplan Panel which is shown in picture 2 and is working fine. Please help me as it is driving me nuts and I cant see what I am overlooking.
LOVELACE CARD
config:
image: /local/custom_ui/floorplan/floorplan.svg?v=1.1.14
rules:
- entities:
- sensor.dark_sky_temperature
- sensor.aeotec_multisensor_6_temperature
- sensor.aeotec_multisensor_6_temperature_3
- sensor.aeotec_multisensor_6_temperature_4
- camera.front_door
- camera.local_file
- sensor.dark_sky_humidity
- sensor.dark_sky_precip_probability
- sensor.aeotec_multisensor_6_relative_humidity_4
- sensor.aeotec_multisensor_6_relative_humidity
- sensor.aeotec_multisensor_6_relative_humidity_3
- sensor.weather_summary1
- sensor.weather_summary2
- light.dining_kitchen
- light.dining_window
- light.livingroom_back_left
- light.livingroom_tv_left
- light.livingroom_tv_right
- light.bedroom_lamp_left
- light.bedroom_lamp_middle
- light.bedroom_lamp_right
- light.bathroom_light
- light.chris_bedroom_light
- sensor.dodgers_light_red
- switch.dodgers_light
- sensor.dodgers_light_blue
- climate.home
- input_boolean.bedroom_heater
- sensor.livingroom_heater
- switch.livingroom_dab_rig
- switch.bedroom_dab_rig
- input_boolean.samsung_powerbot
- input_boolean.toggle_livingroom_air_conditioner
- input_boolean.bedroom_air_conditioner
- camera.usps_mail
- media_player.livingroom_tv
- media_player.samsung_tv_remote
- media_player.bedroom_3
- media_player.chris_tv
- input_boolean.bedroom_television
- switch.bedroom_tv
- sensor.sleepysostoney
- switch.bedroom_box_fan
- switch.livingroom_fan
- zwave.aeotec_z_stick_gen5
- input_select.harmony_harmony_hub
- sensor.current_activity1
- sensor.current_activity2
- sensor.current_activity3
- sensor.front_door_sensor
- switch.lava_lamp
states:
- class: light-off
state: ‘off’
- class: light-on
state: ‘on’
- class: dodgers-light-on-red
state: ‘on’
- class: dodgers-light-off-red
state: ‘off’
- class: dodgers-light-on-blue
state: ‘on’
- class: dodgers-light-off-blue
state: ‘off’
- class: vacuum-on
state: ‘on’
- class: vacuum-off
state: ‘off’
- class: ac-on
state: ‘on’
- class: ac-off
state: ‘off’
- class: heat-on
state: ‘on’
- class: heat-off
state: ‘off’
- class: media-on
state: ‘on’
- class: media-off
state: ‘off’
- class: fan-on
state: ‘on’
- class: fan-off
state: ‘off’
- class: door-closed
state: Closed
- class: door-open
state: Open
stylesheet: /local/custom_ui/floorplan/floorplan.css?v=1.1.14
type: ‘custom:floorplan-card’
icon: ‘mdi:floor-plan’
id: system
title: Floorplan
Your welcome, thank you for allowing me to test it.
I’m loving that we can now use Floorplan in Lovelace, it’s the best of both worlds!
I have everything set up and floorplan is rendering in my lovelace setup, but how do I get the floorplan card to resize so it actually fits my floorplan.svg? See the image below, it looks like the floorplan card is a predefined size…My goal is to have the floorplan.svg drive the entire space. Would I need to set it to panel mode?
1 Like
That’s a very neat card ! I’m struggling with something, maybe you guys can help: I’d like to change the background of the livingroom area based on the status of the lights.
Current config:
- title: Simple Floorplan
type: 'custom:floorplan-card'
config:
image: /local/pictures/floorplan.svg
log_level: error
rules:
- class_template: 'background-${entity.state}'
element: area_livingroom
entity: light.hg_hall
more_info: false
propagate: false
stylesheet: /local/floorplan/lib/floorplan.css
That works fine, but I keep getting infos about the entity when the mouse hover the area:
-> I want to get rid of all infos, and just apply the class to the element of the svg (no info, no action or whatsoever). Is there any way at the moment to achieve this ?
Hi there. Setting more_info: false in each rule should do the trick.
Or, you could get the same result by setting this at the top level of the floorplan config:
defaults:
more_info: false
@j4Media Thanks for testing out the new version. I believe it’s now scaling OK for you? In the next few days, I will release the new version that contains the entire floorplan library in a single 80 KB file (i.e. lib folder no longer needed).
@pkozul, yes everything is scaling just fine. New version is working great! Just need to figure out the compact-custom-header issue. Also, I’m noticing that my floorplan svg is not rendering exactly as developed in the lovelace card. For example, an object will render as a different color in the lovelace card than I had originally designed in the svg. I’m thinking this may have something to do wtih the lovelace theme.
1 Like
@j4Media Could it be that the compact-custom-header is affecting your SVG? I can see that the compact-custom-header does, in fact, contain some CSS that changes the fill of SVG objects, but not sure if propagates down to your floorplan:
Can you try removing compact-custom-header temporarily, just to see if that’s the cause?
ah, false alarm, as I look back to my original svg, the objects are correctly rendered, it’s just the font color being driven by the lovelace theme that is making it look different.
1 Like