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 
4 Likes
Having some fun with floorplans.
Drawn in Autocad and exported as DXF.
Converted with convertio to SVG.
Modified in Inkscape.
Todo:
Animations
Remote door unlocking
Window covers / blinds, still thinking of a nice way to have them in the floorplan
Answer audio / video SIP calls from doorstation …
2 Likes
I am looking at all this stuff and I got to be honest it a little overwhelming what you guys are doing. I finally got my very simple floorplan up . I only have 5 lights on my HASS/Smartthings and I monitor 4 door and two garage doors. Right now I have them turn RED when open, which is cool. I would like them to blink red. Any advice on the CSS to do that.
This should do the trick:
floorplan.css:
.blinking {
animation: blink 2s linear infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
Make sure to add class: blinking to your entity ID in your floorplan.yaml
You can change the speed of the blink by changing the animation time (I just used 2s as a starting point)
3 Likes
Still work to be done, but for now 
- The orange contours fade in and out (2sec) when lights go on or off
- The blue circles in the middle display temperature values
- You can press on those blue circles to turn the light on or off in that specific room
- The db2 filesize is “out in the balcony” …
(that’s 5MB for now) - The big circle outside (on bottom) is Dark Sky outdoors temp. approximation
- The red entities are devices discovered as being “home”
- The small gray / orange circles are sockets/power outlets … some are ON
- Each room with motion triggered, fades its floor in light red
- … AC Unit and door animations incoming !
15 Likes
This is really nice! I’m kinda frustrated that I do not seem to have the design skills to make something look really good.
@smoculetz Very nice!
How do you get the temperature with 1 digit. I’m just starting my floorplan but I noticed temperature is rounded for some reason.
This should do the trick:
text_template: ‘${entity.state ? Math.ceil(entity.state * 10) / 10 + " °C" : “undefined”}’
2 Likes
That works, thanks
The way I go about building designs is I just scribble something together that works. There is software (eg Stanley Floorplan) to get the very plan up and running. Its plan can be exported to your computer for a small fee.
Let’s say I then want to improve the color palette. I would then search for something along the line of “color palette space” or “color palette autumn”. This will give you a set of colors that someone has matched together as working in harmony with each other.
As a next step, you could ensure that objects in your plan are aligned with each other. Looking at the plan of @Smoculetz, for instance, you’ll notice he has his temperature sensors aligned vertically and horizontally to each other. That makes it easier for the eye to follow what goes on.
In regards to symbols, I use the noun project and copy/paste them into my plan for a more professional look.
Good luck!
2 Likes
Thanks for the advice, I am going to give it a try this weekend.