Looks awesome @oakbrad! Where did you get the icons (like the bulbs) from?
I got everything from https://thenounproject.com/
I did a lot of work on it thanks to the help and ideas in this thread. What do you all use for making animated screenshots? Adding subtle animations really makes a difference (filaments in the bulbs ‘glow’, fans spin, etc). Still working on top left but bottom row is scenes, weather info, where car is parked map, and toggle plant icon visibility.
13 Likes
If anyone’s interested, I just finished, and published a stand for use with a qi wireless charger, specifically for my Nexus 7’s, but would work with any Android tablet that supports qi wireless charging. It’s over on Thingiverse.
Next version will allow for wall mounting, and adjustable viewing angle.
6 Likes
I was lucky enough to find a nexus 7 2012 landscape pogo pin charger on ebay for a reasonable cost.
Shame the device is a bit slow these days, but the dock does work nicely.
My Nexus 7 2012 was not usable for this at all. It would drain the battery faster then it could be charged with the display always on. With motion detection for the screen it would take up to a minute to respond to any button presses on the touchscreen. I got a fire 7 warehouse deal for 35 €…way better!
~Cheers
Yeah the nexus 7 is getting a bit long in the tooth…
My Fire 7 is pretty slow to respond actually, takes a while to respond after waking. I wonder if I need to scale back the animations. Any of you with more complicated floorplans having responsiveness issues on the Fire?
I have issues with the fire 7 being slow occasionally as well. No idea what causes it.
I removed all my CSS animations and it works a lot better now. It’s still a little slow at times but before it was totally unusable. Biggest difference was made by turning off the animation for motion detection.
Too bad it looked so good on my laptop with all the animations 
I am not 100% sure but you could disable animations with media queries on the tablet only.
~Cheers
I just tried that out and it works. This only works for CSS animations of course not for svg animations (like the weather ones, although it might be possible for those as well) You just have to replace the animation name and set the things you want in a media query in the css file. Here is mine for an example.
/* Disable animations for tablet */
@media (max-width:1025px){
.layer-visible {
animation-name: none;
visibility: visible;
}
.layer-hidden {
animation-name: none;
visibility: collapse;
}
.door_closed {
animation-name: none;
}
.door_open {
animation-name: none;
}
}
~Cheers
PS: max-width is 1024 because my 5th gen fire tablet has a resolution of 1024.
PPS: Make sure to put the media query on the bottom of the CSS file or put an “!important” behind your rules or else they will be overwritten…(yes I learned that the hard way).
4 Likes
This is mine… very rough and ready so far. Ideas and help taken from here. How do I get the date and time on please?
Still loads to put on… just ran out of ideas 
3 Likes
I believe the issue of date and time have been covered previously in this thread.
Hi guys I just found this room. here is what I did so far, I have the yellow ring change base on temp. example, blue, green, yellow and red. So 32 to 79 is blue, 80 to 82 is green, 83 to 86 is yellow and 87 to 99 is red 
The cool, heat Emheat and the fan status also works when condition changes
1 Like
How did you dial in on the fan spinning wide? I have a fan spinning and I am having the same problem you did when you 1st started. I try copying your code and it helps a bit with the rotation. however, it is not spinning on the center radius it seems to be spinning on the outside radius instead.
I just made this player … The green speakers blink for one second on/off continuously when the music is playing
I will add a all speaker off button next
Thought I better share my floorplan…
I have all of the lights working and temperature sensors except the one on the left… I’m waiting for the hardware device to arrive.
TV in the bedroom works using SONOFF POW to detect energy usage. Using Template Binary Sensor to create a on/off value for that.
Chargers are plugged into a SONOFF s20 socket and the icon is animated similar to the battery recharge icon.
Air Conditioner fan spins when it is on and it stays white for fan only, turns blue for cooling mode and turns red for heating mode.
Still need to get the roller shutters working on the left.
Thanks @pkozul!
14 Likes
It is elegant~
Just sharing my setup so far:
Main Floor:
Upstairs:
Planning on adding media soon once I finish my multi-room audio project.
1 Like
very very very nice, would you share your css file please? I love the lighting effects and would love to steal it 