Sweet Home 3D

Sweet Home 3D is a free interior design application that helps you draw the plan of your house, arrange furniture on it and visit the results in 3D. ( download from SourceForge )

I used a  picture-elements  card to set up home controls overlayed on a scene from Sweet Home.


https://slite.com/api/files/zbC1dhGURe/house-demo.gif?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk





Getting a Floorplan


My first attempt at digitally recreating my home involved running around with a tape measure and creating a rough sketch of the walls. This was a waste of time and my measurements were way off. I also contacted my landlord, who did not have a copy of the floorplan. Worried Face

The next attempt came a few days later when my Roborock arrived and started vacuuming. I took the floorplan generated from the Roborock app and used that as a background image in Sweet Home by right clicking the grid and selecting Import background image... This made building the walls and sizing the furniture so much easier.


https://slite.com/api/files/CRmXvQc5oF/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

RoboCop's artwork




Building the House

Using the Create Walls tool, create some walls! Start with the longest walls and work your way in, do not make a bunch of short connected walls in a straight line.


https://slite.com/api/files/17MoL7~3kt/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Next, add some doors then use the Create Rooms tool and double click each room on the map to create the rooms (hide the room label).




Furnishing the House

I found a lot of my furniture on  3D Warehouse  (download as collada format) and imported it directly into the house by dragging and dropping. If you shop at IKEA, this step will be easy.

A fraction of the custom furniture I imported.

https://slite.com/api/files/lv5p11vZJ6/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Detailing

I spent a few days adding furniture a few pieces at a time while I figured out the rest of this process. This was, by far, the longest step. At one point I was running around taking pictures of all my hung artwork and imported them as custom textures (double click an item to modify textures).

Image vs. Render

https://slite.com/api/files/th_DBFGocU/image0.jpg?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


https://slite.com/api/files/uBWsS2v_A/room.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

How it looks in the floorplan.

https://slite.com/api/files/KuDeyZV3l/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk






Rendering an Image


Hide all the lights to generate a dark house image to use as the base

https://slite.com/api/files/DpwXkDvPH/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Pick a good angle in the 3D view and save it with CTRL+Alt+R

https://slite.com/api/files/x~uptOlaPx/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Then you can go back to it in the dropdown menu 3D view > Go to point of view

https://slite.com/api/files/fpydycQbRD/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Create a photo from 3D view

https://slite.com/api/files/k814~Xf3le/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


These are the options I used. Try changing the time to get the desired level of darkness.

https://slite.com/api/files/x9CHRnHD5s/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk





Dynamic Lighting


This was a pain in the ass, but it's worth it.


Generating Overlay Images


The method I used to generate overlay images in  Photopea  was the following:

Export photo with no lights on at 8:22 PM in Sweet Home -  dark.png 
Turn on a single light (or group of lights associated with a single switch), then take a picture. Repeat for each light source.

Export another with up to one light on per room -  some lights.png 
Open  dark.png   some lights.png  in Photopea and duplicate both layers.
Right click the top layer and Rasterize the image.
Re-arrange the layers as follows and set the top layer to  Difference  blend

https://slite.com/api/files/fi_sZEjQU/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

Shift click the top two layers to select them both
Right click the layers and select Merge Layers

https://slite.com/api/files/AbctKOlfD1/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

Duplicate the newly merged layer so you have one layer for each light turned on. In my case, there are two lights on - the red lamp and the office lights.
For each layer, isolate the light by filling the rest of the image with black - I used the rectangle select tool + paint brush for this step.


https://slite.com/api/files/wKUoUf5tgq/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

This would be easy if the picture-element's  style  setting worked with the   mix-blend-mode   css style, we could use images like this and just apply a  screen  blend mode. But it doesn't work, so we have more work to do. (You can try this out by setting the layer to  Screen  to see the effect).

Select the Magic Wand tool

https://slite.com/api/files/vZzWDoVRKC/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Click and Shift-Click to select all the black areas. This usually only takes one click, but I clicked in the window reflection here to cut out all the unused areas.

https://slite.com/api/files/edZLuQOifl/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

Click on Refine Edge in the top bar
Set the border to 20 (This was the first number I picked and it looked decent, feel free to play with this)
Change the dropdown to  Selection  and press OK

https://slite.com/api/files/pvUtCA04xU/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

Duplicate the  some lights  layer and move it up under the current layer.
Hide the current layer and click on the newly made copy.

https://slite.com/api/files/IHiOKQqaSv/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

Press delete to remove all the non-lit pixels.
Hide all the other layers then toggle this on and off to make sure it looks right

https://slite.com/api/files/OyqhurR77n/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk

If it looks good, rename it to  red lamp  and delete the black layer above it.
Repeat this for all lights (you will have to export a few different  some lights.png 's)


https://slite.com/api/files/kYfUpbiNAi/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Go to File > Export Layers
Uncheck everything except 1x
Export Layers

https://slite.com/api/files/oTSWdr0nJt/image.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiS3RaRDNlSXk1WSIsImlhdCI6MTcxNjIxNTQyMiwiaXNzIjoiaHR0cHM6Ly9zbGl0ZS5jb20iLCJqdGkiOiIySlY5TWlGWXNhcllvOCIsImV4cCI6MTcxODgwNzQyMn0.yI03tpT6O_fwZgwN3lhrfbWrGeCVQYVb8NzTdNaIztk


Adding to Home Assistant

Unzip  assets.zip  and copy the images to the home assistant server
ssh root@homeassistant "mkdir --parents config/www/layers"
scp assets/* root@homeassistant:config/www/layers

Here's a snippet of the Lovelace UI code - the living room red lamp.
type: picture-elements
image: /local/layers/dark.png
elements:
  ## State Images
  # Living Room - Red lamp
  - entity: light.living_room_red
    type: image
    image: /local/layers/livingroom-red.png
    state_filter:
      'on': opacity(100%)
      'off': opacity(0%)
    style:
      left: 50%
      top: 50%
      width: 100%

  ## State Icons
  # Living Room - Red lamp
  - entity: light.living_room_red
    type: state-icon
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    style:
      left: 26.3%
      top: 36.75%