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: toggleI was guest on the latest podcast (along with Paulus). Discussed the floorplan:
https://player.fm/series/home-assistant-podcast/home-assistant-podcast-3-stats-floorplan-and-047
7 Likes
I’m getting an error when I try to access the panel:
Looks like it’s bombing out on this line:
if (this.config.groups.find(entityGroup => entityGroup.state_transitions)) {
Looks like config.groups is undefined. What does your floorplan config look like?
I temporarily removed the groups: section from my floorplan config and was able to reproduce the exact issue you ran into.
To guard against this scenario, I have now added some code that logs a warning message when this is detected. Of course, to see these types of warning messages, you need to have the warnings: option in your floorplan config.
Latest version is ready on the GitHub repo:
www/custom_ui/floorplan/ha-floorplan.html
Let me know if this helps. I’m guessing your floorplan config is either missing the groups: section, or maybe the indentation is causing it to end up at a different level, etc.
1 Like
Best way to keep the code up to date?
How do you guys update floorplanner code?
Do you compare code line by line from the github?
I guess that if you had your “custom” code (css in floorplan.css and your sensors in floorplan.yaml) in separate files, then you could just overwrite the other files from the github?
Or is there any “git magic” you run that i have missed?