Hmm, the entity id for that specific fan is switch.fan right?
Also make sure you have #switch\.fan not #switch.fan (notice the slash)
yes, slash is there.
can you please share your svg and css file?
Sure thing, I can’t upload css nor svg here, so here is a link to each in my Drive (haven’t updated my git in a long while)
I did make a couple minor changes since the last post, but mostly just house keeping
6 Likes
Can you share the config as i started getting error
Uncaught TypeError: Cannot read property 'indexOf' of undefined
URL: http://192.168.xx.xx:8123/local/custom_ui/floorplan/ha-floorplan.html
Line: 712, column: 33
Error: {}you can download floorplan.yaml from following link:
thanks for the share… Everything seems to okay in my floorplan.yaml. The time i add animation css i start getting this error. Had to see whats i am doing wrong in CSS i think
here is css code:
/* SVG shapes */
svg, svg * {
vector-effect: non-scaling-stroke !important;
pointer-events: all !important;
}
/* Hover over */
.entity:hover {
stroke: #03A9F4 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}
/* Bootstrap succsss */
.success-text {
fill: #3c763d !important;
}
.success-background, .success-text-background {
fill: #dff0d8 !important;
fill-opacity: 1 !important;
stroke: #d6e9c6 !important;
stroke-width: 1px !important;
}
/* Bootstrap info */
.info-text {
fill: #31708f !important;
}
.info-background, .info-text-background {
fill: #d9edf7 !important;
fill-opacity: 1 !important;
stroke: #bce8f1 !important;
stroke-width: 1px !important;
}
/* Bootstrap warning */
.warning-text {
fill: #8a6d3b !important;
}
.warning-background, .warning-text-background {
fill: #fcf8e3 !important;
fill-opacity: 1 !important;
stroke: #faebcc !important;
stroke-width: 1px !important;
}
/* Bootstrap danger */
.danger-text {
fill: #a94442 !important;
}
.danger-background, .danger-text-background {
fill: #f2dede !important;
fill-opacity: 1 !important;
stroke: #ebccd1 !important;
stroke-width: 1px !important;
}
/* Last motion entity */
.last-motion {
stroke: #808080 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}
/* Alarm Panel */
.alarm-disarmed {
fill: #3c763d !important;
}
.alarm-armed {
fill: #8a6d3b !important;
}
/* Camera */
.camera-idle {
/* fill: #B9CEF7 !important; */
fill: #6FAECE !important;
}
/* Light */
.light-off {
fill: #C3B7F4 !important;
}
.light-on {
fill: #F8D2B9 !important;
}
/* Doorbell */
.doorbell-off {
fill: #C3B7F4 !important;
}
.doorbell-on {
fill: #F8D2B9 !important;
}
/* Temperature sensor */
.temp-very-low-background {
fill: #d9edf7 !important;
fill-opacity: 1 !important;
}
.temp-below-average-background {
fill: #dcefe8 !important;
fill-opacity: 1 !important;
}
.temp-average-background {
fill: #dff0d8 !important;
fill-opacity: 1 !important;
}
.temp-very-high-background {
fill: #f2dede !important;
fill-opacity: 1 !important;
}
/* Media player */
.squeezebox-off {
fill: #8AA8A7 !important;
}
.squeezebox-on {
fill: #2baaa6 !important;
}
/* svg aniamtion start */
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
#switch\.fan {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #424242 !important;
}
/* svg aniamtion end */I tried that also not working same error. I think something to do with animation css. I will search it more
I did a quick shot of what my Floorplan looks like in reality. There are still a few things to fix on my end to get the areas to light up properly, as I’m not using the default Floorplan settings. 
4 Likes
@ggravlingen I like expandable thing. can you share config+css+svg etc for expandable icon in your video?
So this looks like a fire tablet. What are you using to get it to wakeup automatically and show you the floorplan?
Thanks! It’s the light toggle and light settings part here:
You will find css, svg, automations and input_booldan as well in my repo!
2 Likes
Yes, it’s a fire. As per suggestion of @CCOSTAN I’m using the Fully Kiosk Browser. Enable the screen saver and use the camera for motion detection.
2 Likes
I’m having some trouble with the CSS on this. I added just the rotation portion below from your linked CSS file, and it breaks the rest of the css, just shows the vanilla svg. I’m pretty novice at CSS, so I may be missing something basic. I’ve tried this in both Safari and Chrome with same behavior.
/* Animation */
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
Hmm, I honestly have no idea why that would break your stylesheet. I would just double check your CSS and make sure that there aren’t any syntax errors. If you want, you can shoot it my way and I’ll take a peek
I threw it into a css validator, and didn’t get any errors, for whatever that is worth. Only thing of real note was a warning on the vector-effect property under .svg. Here is the complete file. I appreciate you taking a look! I wonder if it is something in my svg maybe?
/* Animation */
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
/* SVG shapes */
svg, svg * {
vector-effect: non-scaling-stroke !important;
pointer-events: all !important;
}
/* Hover over */
.entity:hover {
stroke: #03A9F4 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}
/* Bootstrap succsss */
.success-text {
fill: #3c763d !important;
}
.success-background, .success-text-background {
fill: #dff0d8 !important;
fill-opacity: 1 !important;
stroke: #d6e9c6 !important;
stroke-width: 1px !important;
}
/* Bootstrap info */
.info-text {
fill: #31708f !important;
}
.info-background, .info-text-background {
fill: #BABABA !important;
fill-opacity: 1 !important;
}
/* Bootstrap warning */
.warning-text {
fill: #8a6d3b !important;
}
.warning-background, .warning-text-background {
fill: #AACDE3 !important;
fill-opacity: 1 !important;
}
/* Bootstrap danger */
.danger-text {
fill: #a94442 !important;
}
.danger-background, .danger-text-background {
fill: #f2dede !important;
fill-opacity: 1 !important;
}
/* Last motion entity */
.last-motion {
stroke: #808080 !important;
stroke-width: 1px !important;
stroke-opacity: 1 !important;
}
/* Alarm Panel */
.alarm-disarmed {
fill: #3c763d !important;
}
.alarm-armed-away {
fill: #EB2323 !important;
}
.alarm-armed-home {
fill: #EB8E23 !important;
}
/* Doors */
.door-closed {
fill: #3c763d !important;
}
.door-open {
fill: #EB2323 !important;
}
/* Home booleans */
/*
.home-off {
visibility: hidden !important;
}
.home-on {
}
*/
/* Camera */
.camera-idle {
/* fill: #B9CEF7 !important; */
fill: #6FAECE !important;
}
/* Light */
.light-off {
fill: #424242 !important;
}
.light-on {
fill: #FFE852 !important;
}
/* Switch */
.switch-off {
fill: #424242 !important;
}
.switch-on {
fill: #FFAB52 !important;
}
/* Fan */
.fan-off {
fill: #424242 !important;
}
.fan-on {
fill: #FFAB52 !important;
}
/* Temperature sensor */
.temp-very-low-background {
fill: #d9edf7 !important;
fill-opacity: 1 !important;
}
.temp-below-average-background {
fill: #dcefe8 !important;
fill-opacity: 1 !important;
}
.temp-average-background {
fill: #dff0d8 !important;
fill-opacity: 1 !important;
}
.temp-very-high-background {
fill: #f2dede !important;
fill-opacity: 1 !important;
}
Your CSS looks good, I’m thinking it may be an issue with the SVG
I was scrolling through and this made me laugh extremely hard 
5 Likes