I have been playing with Floorplan since yesterday, after listening to the podcast and I really like this!
Thanks for developing and sharing.
The pan_zoom function is very useful on my phone and 7" tablets, as my current layout is difficult to operate on these smaller screens.
I would suggest that the zoom part would greatly benefit from some two-finger-pinch-to-zoom-magic, if possible at all?
I redirected the pointer to the CSS-file to a custom one that includes the default css-file that comes with Floorplan. That way I can always keep up with master branch of the Floorplan-code while, while being able to add some custom CSS that I need.
name: Name
image: /local/custom_ui/floorplan/floorplan.svg
stylesheet: /local/custom_ui/floorplan/base_css.css
warnings:
pan_zoom:
hide_app_toolbar:
This is the content of base_css.css
import url("floorplan.css");
// Some custom css stuff
.device-tracker-home {
fill-opacity: 1 !important;
stroke: #00ff00 !important;
stroke-width: 2px !important;
}
.device-tracker-not-home {
fill-opacity: 1 !important;
stroke: #ff0000 !important;
stroke-width: 2px !important;
}
.on-custom {
fill: #00ff00 !important;
}
body {
background-color: yellow;
}
First off thanks again pkozul for this it’s awesome.
I created an SVG that is 1024x600 in Inkscape since I have a Fire 7 tablet, hoping it would fill the screen entirely.
I have ‘hide_app_toolbar’ enabled and no pan/zoom or warning enabled.
Running wallpanel and it is showing up with a white bar on both sides and on the bottom
Anyone have any idea what I messed up?
This is the reason I added the body-element in my post above. But you might want to type black instead of yellow. 
Hmmm that didn’t seem to do anything
For my fire tablets, I made sur to make the background the exact dimension of the fire tablet.
<rect
id="Background"
y="0"
class="st0"
width="1024"
height="600" />
You mean within the svg file data? I’m not sure what the heck i did. I even pulled your svg in to check this and the bars remain.
I forgot. I made a custom change to the floorplan.html in Panels.
https://github.com/CCOSTAN/Home-AssistantConfig/blob/master/panels/floorplan.html#L8
It was chopping 64px from the height. try making the change or just take my whole floorplan.html file.
thank you it is working now.
i saw that 64px in there and removed it myself but it didnt work.
tried again at your suggestion and cleared the cache and now it is working.
@CCOSTAN I think the CSS should be changed to what you have suggested. Subtracting 64px from the height was something taken from another custom panel (while I was developing this), but since the .container has a relative position, this may be totally redundant.
I have changed my floorplan custom panel to use this height and it’s working fine:
height: 100%;
If there are no issues with it, I will update the code on GitHub.
@kevinfcook Getting back to your idea about integrating the Dark Sky icons (Skycons). That looked promising, but I then noticed the positioning was out of whack on different devices, and even on different laptops, and Chrome was used in all cases. Ended up abandoning that idea. I don’t think there is good browser support for embedding non-SVG stuff (i.e. HTML5 canvas) into SVGs. Too bad Skycons aren’t available as SVG (from what I could see anyway).
Not all is lost though. I manged to get dynamic SVG images working in the floorplan. To test it, I found an alternative source for animated weather icons, and they are in SVG format:
I tried on several browsers, on different devices and it seems to work well. The only catch is that they don’t animate in the Microsoft Edge browser. I read some posts about this not being supported, but still need to look further into this. Not a problem - the icons are still there
In any case, below is how it looks. You can see the ‘partly cloudy’ weather icon (the rays around the sun spin around slowly).
The latest code on GitHub has been updated to support this. It was a relatively simple change is and is totally non-intrusive. The new functionality only kicks in if you add the relevant option in your floorplan config.
Below is an example of how to use it. As you can see, there is a new section image_template that lets you write some rules around which image should be displayed based on the state of your entity. In this example, my entity is a Dark Sky weather sensor that I added in HA. Of course, I had to create the associated element in the SVG file, which I simply implemented as a `rect, as it’s only purpose is to serve as a placeholder (bounding box for the image being loaded). The dynamic image gets scaled to fit exactly within the SVG element.
groups:
- name: Dark Sky Sensors
entities:
- sensor.melbourne_dark_sky_icon
image_template: '
var imageName = "";
switch (entity.state) {
case "clear-day":
imageName = "day";
break;
case "clear-night":
imageName = "night";
break;
case "partly-cloudy-day":
imageName = "cloudy-day-1";
break;
case "partly-cloudy-night":
imageName = "cloudy-night-1";
break;
case "cloudy":
imageName = "cloudy";
break;
case "rain":
imageName = "rainy-1";
break;
case "snow":
imageName = "snowy-1";
break;
}
return "/local/custom_ui/floorplan/images/weather/" + imageName + ".svg";
'
One thing I found with the weather icons I mentioned above, is that the weather SVG files had the wrong case for the viewBox attribute. It was originally all lower case, but the B is supposed to be upper case. I changed it in all the files, and that allowed the image to resize properly.
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="64"
height="64"
viewBox="0 0 64 64">
Anyway, this is ready to be used, so let me know if you give it a go.
BTW, this is actually a very powerful new feature. It means we finally have the ability to use dynamic images, with the ability to swap out different images based on the states of our entities.
Hi guys, I have the same setup, but for some reason I cannot get my floorplan to display. i’m using ha 0.48.1 ver with google chrome. So far all i get is a blank white page. Any ideas.
@mistrovly Have you gone through the troubleshooting steps? They are towards the bottom of the doco on GitHub? Cheers.
Thank you for replying, the only think that I noticed under network is the floorplan url was red and i selected it; it said “page not found” error 404.
@mistrovly Which directory did you place the floorplan files in? And does that directory match up with the URLs in the floorplan config?
Here is how my floorplan.yaml file look like:
name: Marc Home Floor Plan
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)
#last_motion_entity: sensor.template_last_motion
#last_motion_class: last-motion
groups:
- name: Master Bedroom LEDs
entities:
- light.master_bedroom
- light.mbed_lightstrip
- light.dresser_lightstrip
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
- name: Patio LED Light
entities:
- light.patio_led_light
- input_slider.patioled_animation_speed
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
here is also my panel_custom.yaml file look ike
- name: floorplan
sidebar_title: Marc Floor Plan
sidebar_icon: mdi:home
url_path: floorplan
config: !include floorplan.yaml
And these are where all those files reside.
in Dev tools go into ‘Console’ and screenshot the errors
@mistrovly Cannot see anything obvious. File locations and config looks OK at a quick glance. Strange how the HA front end is returning a 404 for the file. Could there be any software blocking the page? I recall someone recently figured out that an ad-blocker was preventing some of the floorplan files from reaching the browser. Just one of many possibilities I guess…
i’m not running any adblocker software and so far my firewall is set to allow all traffic going and coming from HA.
here is the screenshot for the console:
