Blank screen usually means you haven’t setup everything in the correct dirs and added all lines to config, follow the setup procedure outlined in the post above and it should work. Also try refreshing the chrome cache (CTRL-F5). you will obviously need to restart HA as well 
I just copy all dir and modified my configuration.yaml .
It the start I don’t copy all dir.
@bachoo786
hi guys
yours answer help me 
I have one more
I have sonoff switch and I add the Entity to my floorplan.yaml
for exp:
the entity of my sonoff switch is : switch.hall1h
I add this to floorplan.yaml under switch
- name: Switches
entities:
- switch.hall1h
states:
- state: ‘on’
class: ‘doorbell-on’
- state: ‘off’
class: ‘doorbell-off’
it working buy when I click on my floorplan switch it open a window ,I like when I click the icon it will turn on the light not the popup
@keithh666 I think its my floorplan.yaml that is causing the blank screen.
All I have in my floorplan.yaml is the following:
name: Demo Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
# These options are optional
# warnings: # enable warnings (to find out why things might ot be working correctly)
# pan_zoom: # enable experimental panning / zooming
# hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
# date_format: DD-MMM-YYYY # Date format to use in hover-over text
# last_motion_entity: sensor.template_last_motion
# last_motion_class: last-motion
groups:
- name: Lights
entities:
- light.bedroom_lights
- light.gateway_light_34ce00908ea4
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'It’s a yaml file so your indentations need to be correct and your entities are incorrectly spaced
@keithh666 so I changed my config and this is how it looks now:
name: Demo Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
# These options are optional
# warnings: # enable warnings (to find out why things might ot be working correctly)
# pan_zoom: # enable experimental panning / zooming
# hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
# date_format: DD-MMM-YYYY # Date format to use in hover-over text
# last_motion_entity: sensor.template_last_motion
# last_motion_class: last-motion
groups:
name: Lights
entities:
- light.bedroom_lights
- light.gateway_light_34ce00908ea4
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
and i get the following errors:
2018-02-16 23:02:49 ERROR (MainThread) [frontend.js.es5.201802090] :0:0 Script error.
2018-02-16 23:06:09 ERROR (MainThread) [frontend.js.es5.201802090] :0:0 Script error.
2018-02-16 23:09:29 ERROR (MainThread) [frontend.js.es5.201802090] :0:0 Script error.
2018-02-16 23:12:49 ERROR (MainThread) [frontend.js.es5.201802090] :0:0 Script error.
2018-02-16 23:16:09 ERROR (MainThread) [frontend.js.es5.201802090] :0:0 Script error.
2018-02-16 23:19:29 ERROR (MainThread) [frontend.js.es5.201802090] :0:0 Script error.Entities and states are now incorrectly spaced
groups:
name: Lights
entities:
- light.bedroom_lights
- light.gateway_light_34ce00908ea4
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
Two spaces not one
I can only go with what you post, YOU need to check everything is correct and in place ;), I would check what you have for the frontend, it should be 1 of 3 values auto, latest or es5, what it is depends on your browser and what it supports I think, so experiment, I don’t think there is anything wrong with the floorplan.yaml - that doesn’t mean there are not other errors else where
@keithh666 So I tried all what you mentioned but no joy.
Can you please show me what the following three files would look like for a simple entity (e.g. switch_heater):
1). svg
2). css
3). floorplan.yaml
The above files may be causing an issue as I have just copied the ones in the demo from github and used them.
The css doesn’t matter as long as you haven’t changed it, it’s only for formatting the html output. The svg file only need you to edit the appropriate entity_id’s for each object you have and want to display, I suggest you delete all named entity shapes bar one light, or just create a new svg with only one circle in it with an entity_id you know is correct (checked from the states table in HA).
A very simple floorplan.yaml would look like this…
name: Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
# These options are optional
warnings: # enable warnings (to find out why things might ot be working correctly)
#pan_zoom: # enable experimental panning / zooming
#hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
date_format: DD-MMM-YYYY # Date format to use in hover-over text
groups:
- name: Lights
entities:
- light.zw_uplight_dimmer_level
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: light
service: toggle
A very basic floorplan.css file would look like this…
/* SVG shapes */
svg, svg * {
vector-effect: non-scaling-stroke !important;
pointer-events: all !important;
}
.static-text
{
fill: #FFFFA6;
font-family : Helvetica;
font-weight : bold;
font-size : 15px;
}
.static-text-date
{
font-family : Helvetica;
font-weight : bold;
font-size : 16px;
fill : #FFFFA6;
}
.static-text-time
{
font-family : Helvetica;
font-weight : bold;
font-size : 35px;
fill: #FFFFA6;
}
.static-temp
{
font-family: Helvetica;
font-size: 22px;
fill: #FFFFA6;
}
/* switches */
.switch-on {
fill: red !important;
}
.switch-off {
fill: grey !important;
}
/* Light */
.light-off {
fill: yellow !important;
fill-opacity: 0.15 !important;
stroke: black !important;
stroke-width: 1 !important;
stroke-opacity:0.1 !important;
}
.light-on {
fill: yellow !important;
fill-opacity: 1.0 !important;
stroke: black !important;
stroke-width: 1 !important;
stroke-opacity:0.1 !important;
}
In Inkscape you have to set the object properties to the entity_id as shown below, the label and title don’t matter, once copied in to the ID field, you must click the set button for the name to stick 
@keithh666 I have literally spent my whole Sunday sorting it out to no avail.
I have followed what you asked me to do and I finally decided to debug the issue by checking the Console section of Chrome, here are the results:
There are no error there so I don’t think that’s the issue, usually it’s because the filenames are incorrect or not in the stated dirs or the yaml files are incorrectly formatted.
Why don’t you just load everything as in the docs from the repo, we know that works.
If that doesn’t work state all dirs and contents of files here and we will see what you are doing wrong. It’s usually something simple, however trying to debug someone else’s mistakes which can be anywhere and anything is very hard
1 Like
@keithh666 so what could be the problem then? this is one of the hardest HA thing I have ever come across. I have been browsing other Floorplan Topics looking for similar issues and applying the solutions but nothing works !
1), What hardware are you running?
2). Where have you placed all the files?
3). What is the contents of all of the files including the config.yaml
1). I am running Hassbian HA 0.63.3
2). I have placed all my files in the following folders:
- /home/homeassistant/.homeassistant/www/custom_ui/floorplan/ha-floorplan.html
- /home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.svg
- /home/homeassistant/.homeassistant/www/custom_ui/floorplan/floorplan.css
- /home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
- /home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib/moment.min.js
- /home/homeassistant/.homeassistant/www/custom_ui/floorplan/lib/svg-pan-zoom.min.js
- /home/homeassistant/.homeassistant/panels/floorplan.html
- /home/homeassistant/.homeassistant/floorplan.yaml
My home assistant configuration contains the following:
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
I just copied the original floorplan.yaml from pkozul github it looks like this:
name: Demo Floorplan
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/floorplan.css
These options are optional
warnings: # enable warnings (to find out why things might ot be working correctly)
pan_zoom: # enable experimental panning / zooming
hide_app_toolbar: # hide the application toolbar (when used as a custom panel)
date_format: DD-MMM-YYYY # Date format to use in hover-over text
last_motion_entity: sensor.template_last_motion
last_motion_class: last-motion
groups:
- name: Sensors
entities:
- sensor.dark_sky_temperature
#text_template: '${entity.state ? entity.state : "unknown"}'
# An example of rounding up a number, i.e. a temperature of 90.1 becomes 91
text_template: '${entity.state ? Math.ceil(entity.state) : "undefined"}'
class_template: '
var temp = parseFloat(entity.state.replace("°", ""));
if (temp < 10)
return "temp-low";
else if (temp < 30)
return "temp-medium";
else
return "temp-high";
'
- name: Lights
entities:
- light.hallway
- light.living_room
- light.patio
- group.kitchen_lights
- group.living_room_lights
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant # This optional parameter allows you to use other services such as homeassistant.toggle like here.
service: toggle
- name: Switches
entities:
- switch.doorbell
states:
- state: 'on'
class: 'doorbell-on'
- state: 'off'
class: 'doorbell-off'
- name: NVR
entities:
- binary_sensor.blue_iris_nvr
text_template: '${(entity.state === "on") ? "online" : "offline"}'
states:
- state: 'off'
class: 'danger-text'
- state: 'on'
class: 'success-text'
- name: Alarm Panel
entities:
- alarm_control_panel.alarm
states:
- state: 'armed_away'
class: 'alarm-armed'
- state: 'armed_home'
class: 'alarm-armed'
- state: 'disarmed'
class: 'alarm-disarmed'
- name: Binary sensors
entities:
- binary_sensor.front_hallway
- binary_sensor.kitchen
- binary_sensor.master_bedroom
- binary_sensor.theatre_room
states:
- state: 'off'
class: 'info-background'
- state: 'on'
class: 'warning-background'
state_transitions:
- name: On to off
from_state: 'on'
to_state: 'off'
duration: 10
- name: Cameras
entities:
- camera.hallway
- camera.driveway
- camera.front_door
- camera.backyard
states:
- state: 'idle'
class: 'camera-idle'
- name: thermostat_temp
entities:
- climate.downstairs
- climate.upstairs
text_template: ‘${entity.attributes.current_temperature ? entity.attributes.current_temperature : “undefined”}’
The above text_template uses extended attributes from the climate.* objects to get current temperature.
- name: text_states
entities:
- sensor.downstairs_thermostat_humidity
- sensor.dark_sky_temperature
- sensor.last_message
text_template: ‘${entity.state ? entity.state.replace(/\s{2,}/g,"") : “undefined”}’
The above text_template uses jQuery syntax to search and replace any instance of 2 consecutive (or more) spaces in a string of text.
@keithh666 I would expect the original to work from github without me changing anything but it doesnt 
Do I have to change the ha-floorplan.html or the floorplan.css?
I wouldn’t expect the ,css file to affect anything but how it looks on screen so don’t worry about it
In custom_ui there should also be the state-card-floorplan.html if using a state card.
The svg and floorplan.yaml will obviously need changing as you won’t have the same entity_id’s as the repo.
You needn’t touch anything in the ha_floorpanel.html either
Do you have …
extra_html_url:
- /local/custom_ui/state-card-floorplan.html
under frontend: ?
I am trying to display the floorplan as Option 2: Floorplan custom panel, so I dont need the state-card-floorplan.html .
I had made a simple svg file according to your instructions and had changed the floorplan.yaml to reflect but had no joy.
I dont have the below under frontend
extra_html_url:
- /local/custom_ui/state-card-floorplan.html
as I am not using the custom state card i.e. option 1
OK, PM me the svg and I’ll try it on my system, zip it first In fact zip the lot and I’ll try it here