open .svg in any editor and remove extra tags as you can see in image below:
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
Thanks… I am fairly new to CCS code, so can I ask what do you mean about a tag to group them both please?
<!-- bedroom light -->
<g id="light.bedroom">
<circle class="o glow" cx="820" cy="865.42" r="93.14"/>
<circle class="j inner" cx="820.37" cy="865.02" r="18.03"/>
</g>
The bedroom light entity now belongs to the group tag.
In this example, the tag as well as both of the tags receive the light-on or light-off class which allows the CSS rules posted above to work.
Thanks for posting… I’ve tried to get it working and I am going to have to give up as I am too thick to get this to work 
Cheers
Mark
@robinson , @gazoscalvertos , thanks a lot for your explanation. Now I understand!!! 
The missing link was that I was unaware that an object in SVG can have a “class” attribute, because Inkscape has no option to add it.
I will share the result when I manage to have a graphically decent result 
Just thought I’d share mine, have been tweaking it for a while. Circles are lights that I can toggle on/off with a click. There are windows, doors, garage doors,motion sensors. Car is tracked with automatic and disappears when I am out. Front motion comes from ring doorbell. Clicking on cameras brings up feed. Clicking on blue satellite icon brings up current weather radar image. Lock is an august deadbolt; clicking locks it (but won’t unlock for security reasons). Indoor environmental data comes either from Elk keypads, the Nest, or from ESP8266 modules with DHT22 sensors (plus some extra air quality sensors). Refrigerator icons turn red when the doors are open. Dog icon shows last time dog food bin was opened to feed dog. The greens shield icons just show if all doors/windows on each level are all closed (turns red if anything is open). I have this running on several kindle fires (7 HD) using Fully Kiosk app. Elk M1G security data comes in via ISY interface. Some sensors are Z-wave through the wink.
4 Likes
How do you make a “button” on the stairs to another floor? Can you link to another .svg or do you hide/show layers?
I’m currently switching from Domoticz to home assistant and would like to duplicate my floorplan.
All lights are dimmable
Current functionality = Click/tap light to switch on (to whatever % it was set previously)
Hold down to show the slider menu to adjust brightness levels.
Is this slider popup for dimming something HA Floorplan can do as well? In the screenshots posted above it seems to be on/off only?
1 Like
I really appreciate @Steffen_Pohl 's floorplan. So I decide to make one single-room with 3D view. Here’s a semi-draft.
I use two pillows to show temperature and humidity. A live moon phase sits at upper left corner. When it is daytime, the outside background will turn white and cover the moon.
There are still many things to wrap. Monitor’s screen is supposed to show the game title or picture PS4 is loading. More animation will add. No extra button I want to add since automation finishes many jobs.
10 Likes
Hi SmartMedia
Can you or someone on here explain the programming for the pendants? Id love to use this approach in my floorplan.
Can you share your files so I can see how you’ve done it?