Hey @c0revin, thank you. I used SketchUp (a 3D modeling tool). Basically you can use any 3D modeling SW tool (included SweetHome 3D). But currently I’ll working on my app. I would love to inform you when it ready for use publicly.
Here is my first attempt to build a floorplan(trying to use different possibilities in the plan) of the house that is not build yet.
I used the plans from the builder and cleaned them up in paint and colored it in.
I only have a few devices yet but it will increase when the house is ready.
Hi,
I’m working in my Floor plan design. I’ve already my house design in Fusion360. I’m looking for a more realistic light effects than the layers options. I want to render 1 image for every light situation in my room. For example if I have 4 lights (16 options different). I Know that it’s a little overkill but normally I don’t have a lot of lights in all the rooms.
It’s possible to change the card image depending of which light are on or off?
I know how to change the card image depending of 1 light, but I don’t know how to change in function of multiple lights states.
Thank u for the great job!
@algirdasc, Grate information,
I have few questions in how to implement it:
- where exactly in ha-foloorplan.html you add your code? I don’t have code up to line 527, can you share your ha-foloorplan.html?
- where in floorplan.yaml you add fables? does it work with floorplan card? can you share your floorplan.yam?
- I presume in your floorplan.svg you used the id’s your have in labels (climate.air_conditioner.temperature and climate.air_conditioner.current_temperature)
- does this work in newer version of home assistant? ( Home Assistant 0.110)
Thank you in advance
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.