DO you have javascript_version set as latest? I was having a similar issue and that fixed it for me. You will need to clear the browser cache after this change as well.
Using 0.74.0 here and figured I’d offer this up for everyone to help - I use this little script to keep it updated. It lives in ~hass/.homeassistant
It’s not much but hopefully it helps someone. I have the SVG and CSS commented out because I don’t want it clobbering mine.
root@freenas:/home/hass/.homeassistant# cat floorplan_update.sh
#!/bin/sh
wget https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/ha-floorplan.html -O /home/hass/.homeassistant/www/custom_ui/floorplan/ha-floorplan.html
#wget https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/floorplan.svg -O /home/hass/.homeassistant/www/custom_ui/floorplan/floorplan.svg
#wget https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/floorplan.css -O /home/hass/.homeassistant/www/custom_ui/floorplan/floorplan.css
wget https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/lib/jquery-3.2.1.min.js -O /home/hass/.homeassistant/www/custom_ui/floorplan/lib/jquery-3.2.1.min.js
wget https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/lib/moment.min.js -O /home/hass/.homeassistant/www/custom_ui/floorplan/lib/moment.min.js
wget https://raw.githubusercontent.com/pkozul/ha-floorplan/master/www/custom_ui/floorplan/lib/svg-pan-zoom.min.js -O /home/hass/.homeassistant/www/custom_ui/floorplan/lib/svg-pan-zoom.min.js
chown -R hass:users wwwLove the fact your running in a jail (I assume)
Where I must put this line?
javascript_version: latest extra_html_url:
In your configuration file under “frontend”
frontend:
javascript_version: latest
Thanks @shire210.
Now I can see first picture of my floorplan, but when I click on it next not show?
Any idea why?
I have this working internally but externally the floorplan doesnt show.
I have a feeling this has something to do with my NGINX proxy.
The wheel just spins and spins when I try to load the floor plan outside of my network. If I load it internally using the public domain its fine.
My NGINX is as follows -
server {
listen 443 ssl http2;
root /srv/www;
ssl_certificate /etc/nginx/ssl/wildcard.cer;
ssl_certificate_key /etc/nginx/ssl/wildcard.key;
# Make site accessible from http://localhost/
server_name hass.mydomain.com;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
error_log stderr;
location / {
proxy_pass http://172.28.8.143:8123;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
# Mitigate httpoxy attack (see README for details)
proxy_set_header Proxy "";
## Required for websockets
proxy_http_version 1.1;
proxy_set_header Connection "upgrade";
proxy_set_header Upgrade $http_upgrade;
proxy_read_timeout 600s;
## Optional: Do not log, get it at the destination
access_log off;
}
}
Anyone got any ideas if I would 1st be correct in saying NGINX is the problem? And 2nd how I go about solving this?
For users of Fully Kiosk Browser - I’ve got HASS/Floorplan running on several kindle fires on Fully Kiosk Browser - the update of changes seems to be very spotty. Sometimes I can see real-time changes, other times it will be showing data from several hours ago unless I force a manual refresh. I’ve played around with the refresh settings on FKB but haven’t found a reliable setup.
Anyone getting this type of setup to stay current?
I’m having the exact same issue with Fully Kiosk on a Fire. I had it working solidly for a few months but the latest update to Fire OS seemed to cause problems. I updated to the new version of Fully for Fire, and that seemed to work for a couple of weeks, but then I started having the same symptoms you’re describing.
I’m thinking about giving up on Fire. I’ve done tests with Fully on Android tablets and it seems to work fine.
Here’s my first attempt at a floorplan.
I will be tweeking it a bit.
The screenshot is displaying a the icons much larger then they actually are for some reason.
Any Idea why I see only first picture of my floorplan?
Errors:
http://hass:8123/local/custom_ui/state-card-custom-ui.html:1:6099 Uncaught TypeError: Cannot read property ‘LOGIC_STATE_ATTRIBUTES’ of undefined
http://hass:8123/local/custom_ui/state-card-custom-ui.html:1:20198 Uncaught TypeError: Polymer.mixinBehaviors is not a function
http://hass:8123/local/custom_ui/state-card-custom-ui.html:1:13969 Uncaught ReferenceError: StateCardDisplay is not definedI used this App on my iPhone
Then I just took a screenshot and saved it to my computer, the app is a bit tricky but if your creative and take your time a pretty nice floor plan can be made.
As far as your errors, I’m not in no way very good at HA yet but I would believe it has something to do with your Lovelace.yaml maybe wording or spacing. Spacing is key on everything here, with lots of trial and error I finally got it to work. Now I just need to learn how to tweek it and to get the rest of my UI setup to look as good as some others on here. The documentation’s are not always the clearest. So I just keep searching the forum for examples and try them out.
If you post your relevant yaml if I can’t figure it out I’m sure that a much smarter then me member will point you in the right direction
Hi, is it still possible to run floorplan using ES5?
I think my problem is I have a wall mounted IPAD IOS 10 witch can run ES5. When setting javascript_version to latest the floorplan isn’t working anymore. I’m runing FP 0.75 en the latest version of floorplan 1.0.13
Anything I can do to let run?
Floorplan/Kiosk Browser stays current without any manual refreshes on android?
does anybody know if a state-icon can be hidden in a picture-element
the reason i ask is because i did a remote using the floorplan idea and the scripts for each button are covering up the buttons on the remote.
so I was hoping there was a way to hide them.
Unfortunately this didn’t work.
show_name: false
show_state: false
``
1 Like
Hi guys, any clue why my weather animated icon .svg won’t show up?
i have this under floorplan.yaml
groups:
- name: Dark Sky Sensors
entities:
- sensor.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";
'
Then I have all the icons in the right location:
This is my “cloudy-day-1.svg” file:
<?xml version="1.0" encoding="utf-8"?>
<!-- (c) ammap.com | SVG weather icons -->
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="256"
height="256"
viewBox="0 0 64 64" >
<defs>
<filter id="blur" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="4" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.05"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css"><![CDATA[
/*
** CLOUDS
*/
@keyframes am-weather-cloud-2 {
0% {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
}
50% {
-webkit-transform: translate(2px,0px);
-moz-transform: translate(2px,0px);
-ms-transform: translate(2px,0px);
transform: translate(2px,0px);
}
100% {
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
-ms-transform: translate(0px,0px);
transform: translate(0px,0px);
}
}
.am-weather-cloud-2 {
-webkit-animation-name: am-weather-cloud-2;
-moz-animation-name: am-weather-cloud-2;
animation-name: am-weather-cloud-2;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/*
** SUN
*/
@keyframes am-weather-sun {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.am-weather-sun {
-webkit-animation-name: am-weather-sun;
-moz-animation-name: am-weather-sun;
-ms-animation-name: am-weather-sun;
animation-name: am-weather-sun;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
-ms-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes am-weather-sun-shiny {
0% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
50% {
stroke-dasharray: 0.1px 10px;
stroke-dashoffset: -1px;
}
100% {
stroke-dasharray: 3px 10px;
stroke-dashoffset: 0px;
}
}
.am-weather-sun-shiny line {
-webkit-animation-name: am-weather-sun-shiny;
-moz-animation-name: am-weather-sun-shiny;
-ms-animation-name: am-weather-sun-shiny;
animation-name: am-weather-sun-shiny;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
]]></style>
</defs>
<g filter="url(#blur)" id="cloudy-day-1">
<g transform="translate(20,10)">
<g transform="translate(0,16)">
<g class="am-weather-sun">
<g>
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(45)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(90)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(135)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(180)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(225)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(270)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
<g transform="rotate(315)">
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
</g>
</g>
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
</g>
<g class="am-weather-cloud-2">
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#C6DEFF" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
</g>
</g>
</g>
</svg>
Then on the floorplan, I have a square the same colour as the gray background which should turn into the animated .svg file, but it doesn’t.
And here is the floorplan.svg showing the square and the ID as sensor.dark_sky_icon
The Dark Sky Icon is configured correctly as it shows correctly in the list.
Any idea why it wouldn’t work? I’ve tried Chrome, Firefox and mobile and won’t show up. (the square is not invisible as i had it as full black and still the same issue)
Hi @pkozul , if you don’t mind could you please let me know what i am doing wrong as the dark_sky icon is not showing up. Thanks in advance!