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 
this is a pic of the end of my .SVG
here the CSS
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#switch.fan {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #424242 !important;
}
##############################################
her is the .YAML file
- name: Appliances
entities:- switch.panel_washing_machine
- switch.panel_hotwater_heater
states: - state: ‘on’
class: ‘fan-on’ - state: ‘off’
class: ‘fan-off’
What am I missing ?
There are some great ideas on here keep them coming. I especially like the pendants which I plan to implement:
Below is my first attempt:
-Top left leaf icon is the state of my Nissan Leaf Battery
-Top Middle is a custom alarm with code
-I have a mix of zwave motion/door/window sensors which you can see activated in red in the hall (motion) and kitchen back door and window. Light green is where there is a sensor but no motion/closed.
-I also have zigbee hue lights, IR devices (TVs), 433mhz lights and LED strips (kitchen and Lounge behind sofa)
-The panel on the kitchen floor activates/deactivates the heated flooring (Warmup system)
-Plan to add a gradient to the lamps for the ones switched on.
-The panel on the left in blue is the garage, I plan on adding the live camera feed to the top box. Not sure if this can be embedded within the svg file but going to give it a shot.
Any comments/suggestions welcomed. 
Hass/Floorplan is the mutts nuts!!!
6 Likes
@robinson, I really like the gradients for lights and the video projector, how did you do that?
I tried with CSS shadow effects, but no luck…
This can be achieved using CSS
fill: url(#MyGradient);
You have to ensure that the gradient #MyGradient is defined in your SVG file
ie:
<svg width=“100” height=“50” version=“1.1” xmlns=“http://www.w3.org/2000/svg”>
<style type=“text/css”>
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id=“MyGradient”>
<stop offset=“5%” stop-color="#F60" />
<stop offset=“95%” stop-color="#FF6" />
</linearGradient>
</defs>
<rect width="100" height="50"/>
</svg>Thanks for the tip, that would be useful. BTW, to experiment with SVG code I found useful JSFiddle (e.g. https://jsfiddle.net/b99mw899/ ).
I am missing something to use it as in Robinson’s floorplan: a light is a single circle styled to be solid grey when off and solid yellow with glow when on, or the solid circle and the gradient are two different objects?
In case of the former, when styling the circle with the gradient the whole object (solid yellow plus gradient) will be as large as the gray circle, so too little.
In case of the latter, I don’t know how to connect the style of two objects with sthe state of one HA entity in Floorplan.
I suspect the gradient and the circle are two separate objects grouped together.
When ‘Off’ gradient set to transparent with the solid circle changing colour.
You could set the style on the group ID with different styling per child ID in CSS
Am also trying to do the spinning fan with no luck. if you look at post 163 for my name and you see my codes.
The problem am having is the fan does not spin on center instead have a wide spin on the outer dia instead of the center axis.
I can’t see anywhere in your svg file where you have set the entity. Try setting this on the group
This is my setup, slightly different as my css accounts for multiple motion sensor rotations:
SVG:
<g
transform="matrix(0.07260097,0,0,0.07260097,124.975,370.09682)"
style="display:inline;enable-background:new"
id="top_floor_motion_sensor"
inkscape:label="#g1611-2">
<path
id="path1595-5"
d="m 60.9,50.2 c 0,6 -4.9,11 -10.9,11 -6,0 -10.9,-5 -10.9,-11 0,-6 4.9,-11 10.9,-11 6,0 10.9,4.8 10.9,11 z"
inkscape:connector-curvature="0" />
<g
id="g1609-0">
<path
id="path1597-1"
d="m 18.2,50.2 c 0,-10.6 5.2,-19.9 13.3,-25.6 L 30.1,22.8 C 21.5,28.9 16,39 16,50.4 c 0,11.2 5.4,21.1 13.8,27.3 l 1.4,-1.8 c -7.9,-6.1 -13,-15.2 -13,-25.7 z"
inkscape:connector-curvature="0" />
<path
id="path1599-0"
d="M 84,50.2 C 84,39 78.5,28.9 69.9,22.8 l -1.3,1.8 c 7.9,5.7 13.2,15.1 13.2,25.6 0,10.4 -5.1,19.5 -12.8,25.4 l 1.4,1.8 C 78.6,71.2 84,61.3 84,50.2 Z"
inkscape:connector-curvature="0" />
<path
id="path1601-6"
d="M 92.8,50.2 C 92.8,64.1 86,76.6 75.6,84.4 L 77,86.2 C 87.8,77.9 95,64.8 95,50.1 95,35.1 87.6,21.9 76.4,13.8 L 75,15.5 c 10.9,7.8 17.8,20.4 17.8,34.7 z"
inkscape:connector-curvature="0" />
<path
id="path1603-5"
d="M 7.2,50.2 C 7.2,36 14.3,23.3 24.9,15.5 L 23.5,13.7 C 12.3,22 5,35.2 5,50.2 5,65 12.2,78.1 23.3,86.3 l 1.4,-1.8 C 14,76.7 7.2,64.3 7.2,50.2 Z"
inkscape:connector-curvature="0" />
<path
id="path1605-9"
d="m 29.1,50.2 c 0,-7 3.5,-13.2 8.9,-16.9 l -1.4,-1.8 c -5.9,4.2 -9.8,11 -9.8,18.6 0,7.5 3.8,14.3 9.3,18.5 l 1.4,-1.8 C 32.4,62.9 29.1,56.9 29.1,50.2 Z"
inkscape:connector-curvature="0" />
<path
id="path1607-3"
d="m 73.1,50.2 c 0,-7.6 -3.9,-14.4 -9.6,-18.6 l -1.4,1.8 c 5.2,3.8 8.7,9.9 8.7,16.8 0,6.8 -3.3,12.8 -8.2,16.5 l 1.3,1.8 c 5.5,-4.4 9.2,-10.8 9.2,-18.3 z"
inkscape:connector-curvature="0" />
</g>
</g>
CSS:
.motion-detected g[id*=“motion_sensor”] g {
transform-origin: 50% 50%;
display: inline-block !important;
animation: spin 1s linear infinite !important;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
yaml:
- name: Motion Sensors
entities:
- binary_sensor.hall_multi_sensor_sensor
- binary_sensor.kitchen_multi_sensor_sensor
- binary_sensor.lounge_multi_sensor_sensor
- binary_sensor.toilet_multi_sensor_sensor
- binary_sensor.top_floor_multi_sensor_sensor
states:
- state: 'off'
class: 'motion-undetected'
- state: 'on'
class: 'motion-detected'
1 Like
.light-on .glow {
visibility: visible;
}
.light-on .inner {
fill: #FFFF00 !important;
}
.light-off .glow {
visibility: hidden;
}
.light-off .inner {
fill: #808080 !important;
}
Here is a snippet of the CSS. I used a group tag to group the glow and inner elements. This tag receives the id of the particular light.
For the multiple downlights, I grouped 4x or 2x of them together. This effect means that I can press on the hidden glow area as well to activate the light. Just means the touch points slightly larger and easier to press.
The glow is a circle with a radial gradient that turns from visible to hidden. The inner is a regular circle that changes color.
Hope that also answers @namadori question too.
2 Likes