This tutorial got me started:
https://github.com/pkozul/ha-floorplan/blob/master/own-floorplan-svg-file-tutorial.md
Did you try it?
Using chrome dev tools (f12) is really the only way to troubleshoot the loading circle that i know of.
Try that and post what errors you are getting
This is what I got
paper-drawer-panel is deprecated. Please use app-layout instead! frontend-5a2a3d6181cc820f5b3e94d1a50def74.html-75.js:1:1629
Loading failed for the with source “https://secret:8123/local/custom_ui/floorplan/lib/jquery-3.2.1.min.js”. floorplan:1
Loading failed for the with source “https://secret:8123/local/custom_ui/floorplan/lib//moment.min.js”. floorplan:1
Loading failed for the with source “https://secret:8123/local/custom_ui/floorplan/lib/svg-pan-zoom.min.js”. floorplan:1
ReferenceError: $ is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:793:7
ReferenceError: jQuery is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:158:7
ReferenceError: $ is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:793:7
ReferenceError: moment is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:89:15
ReferenceError: $ is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:793:7
ReferenceError: moment is not defined[Learn More] data:%0A%20%20Polymer(%7B%0A%20%20%20%20is%3A%20’ha-floorplan’%2C%0A%0A%20%20%20%20ready()%20%7B%0A%:89:15
Without seeing the configuration files for your floorplan installation, the only thing I question is do you have an SSL certificate installed on your HA installation?
yes, i have letsencrypt
I had the same issue (spinning wheel). I found that when I copied the files from the github to my www folder I forgot to copy the ‘lib’ folder. In the folder where you put the SVG and CSS file there should be a lib sub folder. Do you have that? Once I did that it worked right away.
It still doesn’t work on my iPad though but it seems like that is related to HA version 0.51…
1 Like
yeap, it worked, it was missing the lib folder, thank so much for this.
ps to the creator, add this to the read me file. plz
Mine does not work on my iPad as well… I haven’t been able to fix that one.
My floorplan is not working on my computer anymore. I use Firefox 54.0.1 with HASS 51.1.2 and I only got a white page.
It works with Chrome on the computer and also with Chrome on Android.
Thank you! I made changes to reflect this this morning and so far it seems to be working. It was probably the wifi wakelock that did it.
how do I go about changing the color of an element depending on state…
ex:
I want my Lights icon to be back or dark gray when off and Green or yellow when on.
also my motions sensor to be red when on. and so on
I have tried to added straight to the config with a class color and/or fill, but it didnt work.
where should i add or change in the files to get this?
edited - Never mind, I got it, its the floorplan.css
2 Likes
if I group multiple SVG elements, how can I style the individual paths in that group?
ie:
According to this http://svgtutorial.com/styling-svg-with-css/ I should be able to do something like…
/* Fans */
.fan-on {
.fan-circle {
stroke: #cbe960 !important;
}
.fan-icon {
fill: #000000 !important;
}
}
But the styling isn’t showing up (clicking the group does perform my toggle action though).
Thats SASS. You would need to do:
/* Fans */
.fan-on .fan-circle {
stroke: #cbe960 !important;
}
.fan-on .fan-icon {
fill: #000000 !important;
}
1 Like
Semi-final result
Working now to link a light to a zone.
ex: when kitchen light turns on, change the kitchen bg color lighter.
I have a problem with my new Floorplan setup. I have added 5 cameras, a number of lights, 1 Chromecast and a Google Home. I have added all to the sample floorplan.html file and only 2 of the cameras are working. None of the lights or Google devices work.
Here is a screenshot and my floorplan.yaml file, plus the floorplan part of my configuration.yaml.
configuration.yaml:
panel_custom:
- name: floorplan
sidebar_title: Floorplan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
floorplan.yaml
groups:
- name: Sensors
entities:
- sensor.dark_sky_temperature
- sensor.dark_sky_hourly_summary
#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.hall
- light.lego_lamp
- light.front_porch
- light.desk_lamp
- light.boy
- light.girls
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: Cameras
entities:
- camera.front_yard
- camera.driveway
- camera.front_door
- camera.backyard_left
- camera.backyard_right
states:
- state: 'idle'
class: 'camera-idle'
- name: Media Players
entities:
- media_player.master_bedroom_home_2
- media_player.gorgon_2
states:
- state: 'off'
class: 'squeezebox-off'
- state: 'idle'
class: 'squeezebox-off'
- state: 'paused'
class: 'squeezebox-off'
- state: 'playing'
class: 'squeezebox-on'So for some reason the floorplan wont load on my phone, it works perfectly on my computer using chrome, but when i use the IOS app or the phone browser it just shows empty (just white screen where the floorplan should go) any ideas? i even tried just adding a small square and same issue…
I am having the exact same problem. I get the same behavior as you from iphone or ipad whether using chrome or safari, but it does work from my samsung tablet using chrome.
Make sure the icons are on top in your design tool (in Inkscape select the icon, from the top menu select Object and from the drop down menu select “Raise to Top”) as if they are not than they are not accesseble if you click on them
This happened since version 0.51
I downgraded and now it is working (although still not working on my ios9.3 device)