no one has gotten a 404 error on their floorplan.css ?
Usually 404 means chrome can’t find the file requested, so I would check the file is in the right place, then clear the cache then restart chrome.
1 Like
tried all those things. Path appears correct as well 
So your .svg and .css files are in something like the following…
/home/homeassistant/.homeassistant/www/custom_ui/floorplan
I’m on a PI using the AIO installer, if you aren’t using AIO installer it will be different before the www dir I think. If the www/custom_ui/floorplan dir’s don’t exist you will have to create them.
<app-toolbar hidden$='{{!showHeader}}'>
Thanks for the write up. just the last part about the app-toolbar is a little fuzzy for me. I couldn’t figure out where to find that… is that in the HA code?
You mean code which hides toolbar itself? This one is just mine implementation. You can use your own logic based on other criteria.
Hi there,
Just added support for hiding the application toolbar, which means true fullscreen support (when floorplan is used as a custom panel). This means you don’t need to write your own code to make this happen. You simply add the hide_app_toolbar: option to your floorplan config.
name: Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
warnings:
hide_app_toolbar:
Make sure to grab the latest version of panels/floorplan.html from the repo.
The GitHub repo doco has also been updated to include this new option.
3 Likes
Thanks for your input. I have integrated some of this into the code base. Hiding the app toolbar can now be done via config.
When I update to the latest version, do I only have to swap the html-file? Or any other files?
For the latest update, you only need to swap the panels/floorplan.html with the new one from GitHub. Also, you need to make the change to the config as I have explained in my earlier message (i.e. add the hide_app_toolbar: option to the floorplan.yaml).
As a rule of thumb, it’s best to look at the files/folders on the GitHub repo to see when they were last updated, and grab the ones that have changed since you last updated… until we get some sort of versioning happening… 
Here is my write up on my FloorPlan experience and the final end result.
4 Likes
Okey, thank you! I haven’t updated for quite a while, so I better check out the updates on github then. Thanks!
I’m trying to build my svg in illustrator, and I’m having some problems. First, when naming my paths in AI, I have to use spaces instead or underscores. Then after I’ve save it and put the svg on my server, when I click any of the paths I’ve made, it activates all of the rest of them too. Is there something special I need to do?
Hi Bryan. New version fixes this issue. Just grab the latest www/custom_ui/floorplan/ha-floorplan.html from the GitHub repo.
Downloaded the latest version. When using the custom panel I’m noticing it loads in Google Chrome, however using an Amazon Fire Tablet, I’m getting the load spinner and it never completes loading.
How about clearing the cache? Sometimes that helps…
Tried clearing cache, and a restart of the device. Loads in iOS, so I think it’s something Android/Fire related.
@oobie11
I use Illustrator aswell and I use underscores in the path names, but after saving it as a SVG I have to manually rename the id’s in the svg. For some reason it converts the _ to _x5F_. So I just do a simple find and replace action to fix this.
1 Like
I had this once with a custom made UI. Nothing helped except for uninstalling and reinstalling chrome…maybe that helps?
~Cheers
@pkozul Hi Petar, just updated the floorplan, great new features thanks for the ongoing effort!
I noticed you changed the logic of groups. I used groups to show the state of a group in the floorplan, It now tries to find all the individual entities in the groups. I would like to have the old behavior back, could we make a setting or something to have it shown as a group or to include all the entities of the group? Something like:
- name: Lights
entities:
- light.example
- group.showthisgroupasentity
groups:
- group.addallentitiesinthisgroup
states:
- state: 'on'
class: 'doorbell-on'
- state: 'off'
class: 'doorbell-off'
action:
service: toggle