While the rotating fans were working fine in Chrome on my PC, on my wall mounted Android tablet (in both Chrome and Kiosk Browser) they were still boomeranging around the house until I added that line, so thanks for the suggestion.
Good you got it working 
Probably worked on your computer if you had an older version than 64 of chrome on that. The android platform updates Chrome automatically i presume.
Thanks for the ideas above guys. Of course nothing ever works the same for everyone! I had to change my fan.on css to
.fan-on {
fill: #ff8a65 !important;
animation: rotation 2s infinite linear;
transform-box: fill-box;
transform-origin: center;
}
Here is my mobile friendly floorplan. That needs larger icons, and less elements in each layer. So I have multiple layers showing, depending on which button in the middle I press.
I have 8 layers.
Here is some of them:
1 Like
I haven’t made a floorplan yet, but I was really inspired by @Steffen_Pohl to start creating one. I really want to make a 3D floorplan, but don’t have the skill to do it. So, I started to look around on the internet and found this site: floorplanner.com.
I created the following as a test to see how fast I could create something. I made this in about 5 minutes:
You can even add furniture if you want to:
Just wanted to share this, since the result looks great. They have a pricing plan, but the free version should suffice for a Home Assistant floorplan.
5 Likes
Go here … its free,
- Click this : http://www.sweethome3d.com/
- Install the software, and libraries for items … as many as you wish
- Don’t look back … :-), thank me later
2 Likes
That does look great for just 5 mins effort.
I agree with @SMARTMEDIA - check out SweetHome3D - if you scroll back 15-20 posts you will see 2 screenshots (look for the green grass).
All the editing is done in 2D mode and probably similar to what you have already done - the 3D renders (including lighting/shadows) are just a couple of extra mouse clicks - you just choose the camera point of view and click Render - so 3D views are not any harder to create than a basic 2D floorplan.
The only gotcha is for those items that are located above floor level (such as TV’s, pictures on the wall, etc) you have to specify the elevation (in CM) for those items. But you may have already had to do with that your floorplan above anyway, for the wall mounted basins?
@systmworks Thanks for the link. It seems that they work the same. With the site I posted you also work on the normal (2D) mode and after it you can render 3D views.
When using paintings on the wall you do need to set the elevation, but when you’re placing a book on a table or a wall mounted basin I didn’t have to do it.
They may work the same, but the pricing is better in favor of Sweet Home 3D. If you hurry you can still get it for free. And the libraries are huge.
Here is my floor plan so far. Currently working on the fan animations but can’t get the fans to stay in one place.
I wouldn’t stress about hurrying… its been free for many years now!
If you are having trouble with fans spinning around your house (instead of on the spot) add this line to your .fan-on section in the floorplan.css
transform-box: fill-box;
Example:
.fan-on {
fill: #000000 !important;
-webkit-animation: rotation 3s infinite linear;
transform-box: fill-box;
}
5 Likes
Edit: Removed the lower layer that produces the yellow and it works. Thanks for your help.
That works better. It’s not across the entire screen and one fan works while the other doesn’t. The orange fan on the bottom right should be in the room that is yellowish, while it does spin correctly just in the wrong spot.
#fan\.ge_12730_fan_control_switch_level , #fan\.ge_12730_fan_control_switch_level_2 {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
transform-box: fill-box;
}
.fan-off {
fill: #424242 !important;
}Hi @systmworks
How have you rendered your 3d? What are your dimensions i.e. width and height in pixels? The quality? Basically every setting to render the 3d image in sweethome 3d.
Thanks.
While there are some optional settings you can adjust, I just do the following:
-
Drag the divider line up near the top of the screen so the 3D preview is displayed on most of the screen (this seems to set the vertical resolution of the render).
-
Click 3D View menu -> Create Photo
-
Click the Create Button
Done.
I never adjust the resolution settings - on mine its currently 1920 x 1141 (but the 1141 varies slightly based on how high I dragged the dividing line).
I leave Quality on Best (why would you not??) - and Lens as Default (but feel free to try others).
I do recommend you play with the time of day as that will affect the shadows and brightness of the rendered image. I like the shadows around 9 AM and 3 PM.
Be sure you have set your geographic location and timezone (under Plan -> Modify Compass) or else the lighting and shadows will be wrong (possibly completely eg night time instead of day - if you get a pitch black render).
2 Likes
Just wanted to say I came across this thread and was inspired. I’ve decided to give up HASSdashboard and go with floorplan instead. Total WAF as well I’ve fleshed out my floorplan and current setup using floorplanner.com and then start with Inkscape doing as someone suggested with layers.
Can’t wait to get started once I’m done everything image-wise.
EDIT: Scale is important. The “larger” items will be interactive whereas the “smaller” items will simply light up when active.
How did you display the temperature units? I cannot get it to work my text_template is as follows:
text_template: '${entity.state ? entity.state + " °C" : "undefined"}'
All I get is the numerical value not the °C
Here it is for me where I need to:
-
Display W after some variable:
text_template: '${entity.state ? entity.state + " w": "undefined"}'
class_template: 'return "font-3";' -
Display °C after some variable:
text_template: '${entity.state ? entity.state + "°C": "undefined"}'
class_template: 'return "font-3";' -
Display the rounded value of a decimal number, in this case MegaBytes:
text_template: '${entity.state ? Math.ceil(entity.state) + "MB": "undefined"}'
class_template: 'return "font-1";'
You can see some of it’s results here, for some ° and w:
*sorry I hovered with the mouse too long before the snapshot and the info label popped up
And here, for some MB:
2 Likes