Could you be a bit more specific on the SVG and css part? Could you copy /paste a class / element from your CSS/ svg into here that uses the theming?
~Cheers
You can just replace every color in either the CSS or the inline styles, so if it was:
color: #fff;
It becomes:
color: var(–variable-name, #ffffff);
Same for fill, background-color etc.
1 Like
Will try this out! Thanks!
~Cheers
Very cool, I’ll give it try, thanks!
Here’s what I’ve come up with so far. Really nice to just tap on a room to light it up (and I still have to work on the furniture 
)
I love this addon, so much fun to play around with!
47 Likes
STFU… How did you do that? Which program do you use?
That looks AWESOME. Respect!!!
2 Likes
Thanks! I built the “floorplan” in cinema 4d and the rest is illustrator for the paths and buttons. Took a while but worth it imho. Now I need some more sensors to put in the rooms 
4 Likes
Here it is in action on the crappy wallmounted tablet in our entrance area.
(sorry for spamming)
18 Likes
Thanks for sharing.
That is a labour of love!
Holy Batman, this is insane! Great work!
@CCOSTAN @pkozul @PhyberApex recommend you to check this post out.
2 Likes
Hi guys,
Here is what I have so far. Thank you everybody for your work and inspiration on this project.
The temperatures change colour depending on threshold, light blue for cold, gray-ish for normal temp and red for hot.
6 Likes
Wow that looks awesome dude!
~Cheers
That is really impressive, really really impressive! I guess this was not the first time you’ve been using cinema 4D.
Great work and thanks for sharing!
thank you! and you’re right, it’s not. But since it is a still image of mostly simple geometric shapes and i didn’t have to model the furniture myself it wasn’t that hard to do either.
What did you use to create this floorplan ?
I used CorelDraw X8 … export as *.svg, then imported into Inkskape to play with object layers and names. Now I’m doing it in Sweet Home 3D, to obtain the 3D look as our coleague above. It’s easy to work with, free, and has hundreds of already made objects like furniture and doors and house appliances … etc. Can be found here :Sweet Home 3D and it has a nice presentation / animation right on the front page !, just click play and enjoy ! Hope it helps.
3 Likes
And you sir are good!!!
Do you mind sharing with us on how you got that theme?
Thank you.
maybe i’ll get to make a quick ‘how to’ soon, but it’s really not that complicated.
the tables with the buttons and the image of the apartment are one layer (as mentioned befor made in cinema 4d and illustrator but can probably be achieved using any other 3d software and inkscape).
for lighting up the rooms i just drew paths around the outline of each room and filled it with black. I gave these 50% opacity so it looks darker when lights are off and 0% when on, and that’s basically it.
Same goes for the buttons, they are images of buttons i drew up and arranged in illustrator. There are always two images on top of one another, the top one is the actual button that has 100% opacity when off and 0% when on, revealing the underlying image with the colored rim. Then just linked the top *png buttons to their home assistant entities.
As far as the theme goes, i just drew some buttons and colors i liked (and mostly what came up when i googled dashboards).
3 Likes
Looks really nice! Great application of the Floorplan. I toyed with the 3d environment (I have my house modeled in Sketchup already) but it didn’t work with the number of elements I have on my screen.
Super awesome Job though!
1 Like
