Creating a Smart Home Floorplan: A Step-by-Step Guide

In this tutorial, we'll walk through the process of creating an interactive smart home floorplan using Sweet Home 3D and Home Assistant. This advanced method allows you to visualize the state of your smart home devices in a clean, intuitive layout.

Step 1: Creating the Floorplan in Sweet Home 3D

1. Download Sweet Home 3D from their website (free version available).
2. Draw your floorplan using the wall tool and rough measurements of your home.
3. Add furniture and decor from the built-in library or import custom assets.
4. Place light fixtures, ensuring they're at the correct elevation:
   • Use incandescent bulbs for ceiling lights
   • Add table lamps with proper elevation
5. Set all lights to 0% brightness initially.
6. In the 3D view, find an angle that shows all devices you want to be able to control.
7. Right-click and select "Store Point of View" to save this angle.
8. Create your base photo:
   • Right-click and select "Create Photo"
   • Set dimensions to 1920x1080
   • Choose date and time for desired lighting (e.g., 8:00 AM for soft light)
   • Use default lens settings
9. Save this image as your "Base" image.
10. For each light:
    • Set its brightness to 50%
    • Go to the saved point of view
    • Create a photo using the same settings as the base image
    • Save with a descriptive name (e.g., "DiningRoomLight.png")
    • Reset brightness to 0% before moving to the next light
11. To create an "open garage" effect:
    • Hide the garage door
    • Add a visible door frame
    • Create a photo showing the "open" state

Step 2: Setting Up in Home Assistant

1. Upload all images to your Home Assistant instance (e.g., in the www folder).

2. Create a new panel dashboard called "Floorplan" or "Floorplan Test".

3. Add a new card using the Manual card type.

4. Use the provided custom code as a template.

   New dashboard code:

   • The first section (line 1-6) sets up the dashboard
   • The next section (line 7-33) sets up the image (Remember to replace <entity> and ‘entity’ with the proper entity you are wanting to control)
   • The third section (line 34-42ish) set up the buttons

   views:
     - title: Floorplan
       type: panel
       path: first
       badges: []
       cards:
         - type: horizontal-stack
           cards:
             - type: picture-elements
               image: /local/
               panel: true
               elements:
                 - type: image
                   entity: <entity>
                   style:
                     left: 50%
                     top: 50%
                     width: 100%
                     mix-blend-mode: lighten
                     filter: >-
                       ${ "hue-rotate(" +
                       (states[‘entity’].attributes.hs_color ?
                       states[‘entity’].attributes.hs_color[0] : 0) +
                       "deg)"}
                     opacity: >-
                       ${states[‘entity’].state === 'on' ?
                       (states[‘entity’].attributes.brightness / 255)
                       : '0'}
                   state_image:
                     'on': /local/
                     'off': /local/
                   tap_action:
                     action: none
   
                 - type: state-icon
                   entity: <entity>
                   style:
                     left: 5%
                     top: 55%
                     opacity: 
                   tap_action:
                     action: toggle
   

Step 6: Configuring the Floorplan Card