I 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?
From my perspective, I would like to ensure that the main file www/custom_ui/floorplan/ha-floorplan.html is always ‘upgradable’, so that everyone can just grab the latest version and everything should ‘just work’ (famous last words 
).
I think I will need to at least introduce some versioning scheme, however crude and simple it might be. At least that way you will know whether on the latest or not.
Happy to take any suggestions!
4 Likes
Keeping the HTML file “clean” would be best imho. There you could include a HTML comment with the version and maybe a headline in your github readme with the current version. That’d be the easiest way I think.
For updates I handle this the same way I do with the xiaomi component. I have a script that restarts home assistant and copies files from specific folders…which are the git repos. Those get updated every time I restart HA.
~Cheers
2 Likes
Hello, can you post your script here?
Sure my folder structure looks like this:
|-config (homeassistant config folder)
|-venv (virtualenv folder)
|-xiaomi (xiaomi git clone)
|-floorplan (floorplan git clone)
|-start.sh (script that gets called to start HA)
start.sh looks like this:
#!/bin/bash
sudo chown -R homeassistant:homeassistant /opt/homeassistant/config/.git
git -C /opt/homeassistant/config fetch --all
git -C /opt/homeassistant/config reset --hard origin/master
sudo chmod -R 777 /opt/homeassistant/config/
cd /opt/homeassistant/xiaomi
git pull
cp -r components/* /opt/homeassistant/venv/lib/python3.4/site-packages/homeassistant/components/
cd /opt/homeassistant/floorplan
git pull
cp www/custom_ui/floorplan/state-card-floorplan.html /opt/homeassistant/config/www/custom_ui/state-card-floorplan.html
cp www/custom_ui/floorplan/ha-floorplan.html /opt/homeassistant/config/www/custom_ui/floorplan/ha-floorplan.html
cp www/custom_ui/floorplan/svg-pan-zoom.min.js /opt/homeassistant/config/www/custom_ui/floorplan/svg-pan-zoom.min.js
source /opt/homeassistant/venv/bin/activate
hass -c /opt/homeassistant/config --daemon --log-rotate-days 2 --pid-file /opt/homeassistant/homeassistant.pid
Stuff at the top just makes sure to grab my config from the repo after that is some xiaomi stuff and then the floorplan stuff. If there are more questions I’m glad to answer.
~Cheers
1 Like
Hi @pkozul, your comments helped me sort out the problem: I had groups: in the config, but with no value (list). It is working great now. Excellent feature!
1 Like
(edited out my address at the top)
Got my floorplan showing in home assistant now! Great success. Now I went back into inkscape to add more zones (and clean up/change colors ect) and everything is blank
Huge failure! Everything is an adventure with this stuff lol
5 Likes
Could be that Inkscape has changed some ids or done something weird.
Have you enabled the warnings: option in your floorplan config to see if anything is reported?
For the people who would also like tabs in the panel view, here is how I did it:
configuration.yaml:
panel_custom:
- name: floorplans
sidebar_title: Floorplans
sidebar_icon: mdi:map
url_path: floorplans
config: !include floorplans.yaml
floorplans.yaml:
floorplans:
- name: Downstairs
icon: mdi:stairs
config: !include downstairs.yaml
- name: Upstairs
config: !include upstairs.yaml
- name: Attic
config: !include attic.yaml
panels/floorplans.html:
<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>
<dom-module id="ha-panel-floorplans">
<template>
<style include="ha-style">
iron-pages {
height: 100%;
vertical-align: top;
position: relative;
}
[hidden] {
display: none !important;
}
paper-tabs {
margin-left: 12px;
--paper-tabs-selection-bar-color: #FFF;
text-transform: uppercase;
}
</style>
<app-header-layout has-scrolling-region id='layout'>
<app-header effects="waterfall" condenses fixed slot="header">
<app-toolbar hidden$='{{!showAppToolbar}}'>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>[[panel.title]]</div>
</app-toolbar>
<div sticky>
<paper-tabs
scrollable
selected='{{selected}}'
>
<template is='dom-repeat' items='[[floorplans]]'>
<paper-tab>
<template is='dom-if' if='[[item.icon]]'>
<iron-icon title$='[[item.name]]' icon='[[item.icon]]'></iron-icon>
</template>
<template is='dom-if' if='[[!item.icon]]'>
[[item.name]]
</template>
</paper-tab>
</template>
</paper-tabs>
</div>
</app-header>
<iron-pages
selected='{{selected}}'
>
<template is='dom-repeat' items='[[floorplans]]'>
<div class="container">
<ha-floorplan hass=[[hass]] config=[[item.config]] is-panel></ha-floorplan>
</div>
</template>
</iron-pages>
</app-header-layout>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-panel-floorplans',
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: true,
},
showAppToolbar: {
type: Boolean,
value: false,
},
panel: {
type: Object,
observer: 'panelChanged',
},
floorplans: {
type: Array,
},
selected: {
type: Number,
value: 0,
}
},
panelChanged: function() {
var hideAppToolbar = ((this.panel.config.hide_app_toolbar === null) ||
(this.panel.config.hide_app_toolbar !== undefined));
this.showAppToolbar = !hideAppToolbar;
this.floorplans = this.panel.config.floorplans;
},
});
</script>
4 Likes
thats my plan! 
I don’t love the colors I chose for the different things (the red cars are not doing it for me in particular) and I need to adjust the size and side panel more (going to have button on the side panel disable alarm and such).
Did you find a way to do this?
I’ve got 8 hue light in my living room and I don’t want to controll them separately.
@TheCellMC, yes. Add to the config
combine_groups: false
Then edit ha-floorplan.html:
- After start of
loadFloorPlanfunction add (line 160)
loadFloorPlan(callback) {
var conf = this.config;
- Line 177 add another if condition
if (conf.combine_groups && entityId.indexOf('group.') == 0) {
P.S. I just realized that I called it combine groups and actually doing the opposite But you should get the point
1 Like
It will be configurable in the next version…
3 Likes
Is there any way to act differently on a click? I’d like to implement some switches but right now if I click them I get the state card. I’d like to just do the action needed. E.g. for switch /input_boolean a toggle if this would be configurable would be even better as I only need this for 1 ‘floor’ as I plan to use one panel to show running services on my server and be able to start/stop them.
~Cheers
1 Like