did anyone solve this.
On full refresh (Ctrl + F5) there is only one
however switching to another state card tab and coming back, creates the double image
I had the same problem at one point, turns out I’d saved my floorplan as “Floorplan.svg” (uppercase F), when the floorplan.yaml specifically looks for “floorplan.svg” - changed the F to lowercase and reloaded it, worked fine.
Hi all,
Im tearing my hair out trying to get my floor plan to show. I followed the guide here:
Replacing the .svg file with my own and altering the floorplan.yaml to:
-
name: Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.cssgroups:
- name: Sensors
entities:- sensor.bedroom_temp
- name: Sensors
-
name: Lights
entities:- light.bed
- light.computer
- light.wall
- light.wardrobe
states: - state: ‘on’
class: ‘light-on’ - state: ‘off’
class: ‘light-off’
I dont seem to be getting any HA errors or any errors in the chrome console. I have tried both the display options:
Statecard:
Custom Panel:
As you can see on the statecard I see a cirlce which when I click displays:
On the custom panel i just see white.
I have tried clearing the browser cache which doesnt seem to make any difference.
Can anyone help please?
What is in your binary_sensors.yaml file. did you add this? I think you have to have the floorplan setup as a dummy sensor
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: floorplan
Yes I added that:
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: floorplanyou may want to post the snippets from all of your setup files so everyone can review the entire setup. I’m new to this too. a couple rookie mistakes I made were, check the case of all of your files and references to them. Floorplan is not the same as floorplan.
Also when I saved my first yaml file in Notepad++ it used a .yml extension not .yaml.
is this in your configurations.yaml?
binary_sensor: !include binary_sensors.yaml
always make sure to restart the server too.
before making any mods, did you get it to work with the sample files provided? I did that first before making any changes. then as you change the setup you can trace your steps back to what you changed.
Thanks HaoleBoy your help is much appreciated.
I have checked the case of everthing and i think its all OK.
Snippets:
configurations.yaml
frontend:
extra_html_url:
- /local/custom_ui/state-card-floorplan.html
extra_html_url_es5:
- /local/custom_ui/state-card-floorplan.html
config: !include floorplan.yaml
binary_sensor: !include binary_sensors.yaml
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
floorplan.yaml:
- name: floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
groups:
- name: Sensors
entities:
- sensor.bedroom_temp
- name: Lights
entities:
- light.bed
- light.computer
- light.wall
- light.wardrobe
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
panel_custom.yaml:
- name: floorplan
sidebar_title: floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
binary_sensors.yaml:
- platform: mqtt
state_topic: dummy/floorplan/sensor
name: floorplan
groups.yaml:
plan:
name: Plan
view: yes
entities:
- binary_sensor.floorplan
customize.yaml:
binary_sensor.floorplan:
custom_ui_state_card: state-card-floorplan
config: !include floorplan.yaml
frontend.yaml:
extra_html_url:
- /local/custom_ui/state-card-floorplan.html
\config\panels\floorplan.html:
<link rel="import" href="/local/custom_ui/floorplan/ha-floorplan.html" async>
<dom-module id="ha-panel-floorplan">
<template>
<style include="ha-style">
.container-fullscreen {
height: calc(100%);
vertical-align: top;
position: relative;
}
.container-with-toolbar {
height: calc(100% - 64px);
vertical-align: top;
position: relative;
}
[hidden] {
display: none !important;
}
</style>
<app-toolbar hidden$='{{!showAppToolbar}}'>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>[[panel.title]]</div>
</app-toolbar>
<div class$='[[containerClass]]'>
<ha-floorplan hass=[[hass]] config=[[panel.config]] is-panel></ha-floorplan>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-panel-floorplan',
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: true,
},
showAppToolbar: {
type: Boolean,
value: false,
},
panel: {
type: Object,
observer: 'panelChanged',
},
containerClass: {
type: String,
value: 'container-fullscreen',
}
},
panelChanged: function() {
var hideAppToolbar = ((this.panel.config.hide_app_toolbar === null) || (this.panel.config.hide_app_toolbar !== undefined));
this.showAppToolbar = !hideAppToolbar;
this.containerClass = this.showAppToolbar ? 'container-with-toolbar' : 'container-fullscreen';
},
});
</script>
\config\www\custom_ui\state-card-floorplan
<link rel="import" href="floorplan/ha-floorplan.html" async>
<dom-module id="state-card-floorplan">
<template>
<ha-floorplan hass=[[hass]] config=[[stateObj.attributes.config]]></ha-floorplan>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-floorplan',
properties: {
hass: {
type: Object,
},
stateObj: {
type: Object,
},
},
});
</script>
All the other files from the demo are the same and in the correct place.
looks like indentation is off
- name: Lights
entities:
- light.bed
- light.computer
- light.wall
- light.wardrobe
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'I replaced the floorplan.yaml with:
- name: floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
groups:
- name: Sensors
entities:
- sensor.bedroom_temp
- name: Lights
entities:
- light.bed
- light.computer
- light.wall
- light.wardrobe
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
its still the same as before, white screen.
Any other ideas?
not sure if it was your copy and paste, but the indentation under groups: is off. -name and all other lines below it should have a spacing of two…I think
To get the floorplan panel to work, can you just use the original svg file (demoplan) and the original floorplan.yaml? The picture should show in the panel even if you don`t do anything to the floorplan.yaml. If it shows up then, there probably is something wrong with your edited floorplan.yaml.
Thanks dwinnn , like this:
- name: floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
groups:
- name: Sensors
entities:
- sensor.bedroom_temp
- name: Lights
entities:
- light.bed
- light.computer
- light.wall
- light.wardrobe
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
Thanks Zepixir starting ovwr is my next option.
You don`t need “-” before “name: floorplan”
And you should have two spaces for the lines under groups.
So it should look like this:
name: floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
groups:
- name: Sensors
entities:
- sensor.bedroom_temp
- name: Lights
entities:
- light.bed
- light.computer
- light.wall
- light.wardrobe
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'Has any progress been made in regards to dimmer/slider support?
Good you got it working 
Hello there,
I’m trying to have the floorplan configured in the docker running on synology. I have followed the tutorial without success and I have some doubts about the right filepath since on my installation there is no www folder nor panels one so I did created those myself but without luck… Once I add the panel_custom in the configuration.yaml and restart the service the ha web page doesn’t load anymore. Anyone managed to have this configured in a docker install?
I would highly appreciate any support!
Here below is my floorplan:
3 Likes
Anyone found a working solution on this already?
Thanks
I’ve been trying to figure this out in Synology Docker as well.