Hi,
can you please explain a bit more in details how you implement # More TV Channels, # Radio Control Layer, # Weather Layer? did you use ?
thank you in advance
@ mudasar8k Hi what exactly did you change to get it to work.Sit with the same problem. My fan make some funny circles.
Hope you’re still around… I’m working on my HA floorplan, and was intrigued by your post. It seems you are able to create layer objects of the lighting renders from sh3d using photoshop! The results, with accurate shadows etc are impressive. Only way I know to do that is multiple renderings, one for each lighting permutation in the matrix (in my case with 50 lights, that would be 2500 rendered images… if the corresponding yaml wasn’t already too much, my PC also takes about 7min to render one 1080p frame 
).
How did you pull that off? Would you mind please sharing some links to guides that show how you were able to use photoshop to accomplish this?
I tried using the plugin (SVG) but creating the floorplan was too complicated so I went for Picture Elements FloorPlan using SweetHome3D and GIMP and created this floorplan (video)
The main goal was to have the day-2-day activations and information always available/visible and everything else (like schedulers, history graphs) available upto 1-click away.
This UI is used on 15.6" wall mounted touchscreens (for mobile phone I have a different UI).
7 Likes
@Ratsathome, here is my working css for spinning fans… right out of the simple example, but sped up a bit:
/* Spinning Animation */
.spinning {
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
transform-box: fill-box;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Sometimes it’s good to mention subtleties… in this case the origin at 50/50 means the center of rotation is placed centered between the image object’s Xmax/min and Ymax/min. So make sure the svg object you use in inkscape as a fan has it’s axle centered in the object. Most mdi fan icons will work fine. OTOH, say for example you draw a custom fan object in inkscape, with a transparent rectangle far off to the side of the fan. That rectangle to the side will shift the 50/50 position for that object off of the fan’s axle. So if you are using this css and it still wobbles funny… you might want to verify the shape and symmetry of your fan object (ensure the axle is centered in the object’s bounding box).
2 Likes
Wow, impressive how you got the light shadowing/gradients to spill over between rooms like that. I’m guessing that takes a lot of rendering and images to accomplish. I mentioned above my apprehension to doing that for my home… it’s about as complicated as your’s, so the sheer number of renders is scaring me off. Right now I have a ‘clean’ looking 2d floorplan that has lots of bells and whistles like yours… just considering what it would take to bring it to the next level like you did (3d impressiveness yet still clean enough to actually use daily 
).
Any tips you can give as far as your work flow?
I created one ALL LIGHTS ON image and one ALL LIGHTS OFF image in SweetHome3D.
I set the lights’ intensity to ~50%.
I used GIMP with ALL LIGHTS OFF as background image and created each “Light on” picture based on duplicating ALL LIGHTS ON image with Mask and Gadient Transparency (Controlling the gradient radius and fading) using the following method:
How to fade image layers using Gimp gradient/blend tool
1 Like
I love this… where do I start!?
SweetHome3D
I don’t think you need to worry about all the permutations. I just did one for each room and then when the light layer is on it is only at 65% opacity so they blend with each other.
Some tweaking was required when borders of two images were maybe too hard… I actually mocked it all up in Gimp first using the layers in there and clicked the light layer on and off to see how it looked. Adjusting the order of the layers I found was important.
Once I was happy I just exported each room. Some room had two images if there was a bedside light and a main bed light. In this case I use an icon to tap on to switch the bedside light and tap the room to switch on the main light.
1 Like
i like your floorplan with furnitures,
which software did you use to make it ?
How did you the nice top and bottom part?
I know it’s a long time since your post but I’m interested in seeing how you created the glow effects. I’m currently creating a new floorplan and want to use a similar effect. Would you mind sharing links to your configs and SVG?
@BoundedAnimal, @geoff.wray, what I did was generate overlays of the 6 primary and secondary colores plus white, and then use the custom config-template-card to modify the opacity of the overlays according to the RGB value.
Hi! what if i have no RGB lights?
I have white bulbs and Shellies on MQTT.
Thank you!
This is awesome!!! May i ask you the code for covers? i would like tyo create the different colour square on top of every window.
Thank you!!!
I used the state_image option in image type element with different color squares
state_image:
closed: /local/images/floorplan/shutters/square_closed.png
closing: /local/images/floorplan/shutters/square_closing.png
open: /local/images/floorplan/shutters/square_open.png
opening: /local/images/floorplan/shutters/square_opening.png
1 Like
Hello @aswam, how to draw the green closed door which gets red open as soon it’s opened? Thanks!
Simon
Hello,
This is an image (I have 4 depending on the direction the doors can be opened)
For exemple this is for a vertical door opening right side, the door_c_r.png is the green image, and the door_o_r.png is the orange one 
- entity: binary_sensor.openclose_fenetre_doudou
image: /local/images/door_o_r.png
state_image:
'off': /local/images/door_c_r.png
'on': /local/images/door_o_r.png
style:
left: 15%
top: 39.7%
width: 5.6%
title: fenetre chambre doudou
type: image