3. Floorplan
These pages contains all information to build up the 3D floorplan with the picture elements card as the foundation. If you have any questions, feel free to start a discussion.
I used the following sources for guidance and inspiration:
- Salvamipc's tutorial for SweetHome3D: https://youtu.be/3Umo0vkLxRY
- Tweakers.net 'Show your setup'-topic (Dutch): https://gathering.tweakers.net/forum/list_message/76466906#76466906
These integrations are installed specifically to get to the desired end-state of the floorplan:
| Integration | Description | Repository |
|---|---|---|
| wallpanel | To display the floorplan fullscreen, without the top and side bars | link |
| browser_mod | Used to be able to pop-up cards (i.e. blinds, climate, and media) | link |
| card-mod | Enables advanced CSS modification for ha-cards | link |
| button-card | For displaying animated icons and advanced CSS | link |
| clock-weather-card | Displays weather information in the top-right and bottom left | link |
| neerslag-card | Shows the predicted rain fall for the next two hours | link |
| Ground floor | First floor | Roof |
|---|---|---|
 |
 |
 |
 |
 |
 |
Larger versions of the screenshots can be found here
I've used the following tools to draw my house in 3D and to create overlays when lights are turned on:
- SweetHome3D: https://sweethome3d.com
- Paint.net: https://www.getpaint.net
- Find the resulution of the tablet that you're going to use as a display. This is required when exporting a view (taking a 'photo') from SweetHome3D
- Set the compass correctly, so the time & date you're going to use when exporting are in line with real life
- I used date
07/26/2023and time6:00 PMfor the darker grey background while the sun is coming from the right in the picture - I used date
11/30/2023and time4:20 PMfor generating the base image during the night. Using these, the furniture in the house is still visable when using the darkmode. I made the background of the image black by editing the picture in Paint.net - When generating the overlays for the lights, I used date
11/30/2023and time9:00PM to ensure every room where lights were turned off was completely black. This also speeds up the 3D image generation
- I used date
- The opacity of the overlays is set to 150 (out of 255) in Paint.net so they are placed more smoothly on top of the base image
- I used the following naming convention when generating images:
<FLOOR#>_<DAY/NIGHT>_<TYPE>_<ROOM>. So for example:00_night_light_diningroom.png10_night_light_bedroom.png20_night_hue.png
- Take your time. The whole process took me at least 20 hours to build (generating images, making mistakes, placing transparant buttons. positioning sensor information, etc.)
Note
The full raw code of the floorplan dashboard can be found here
On the top of the dashboard yaml the wallpanel configuration is defined first:
wallpanel:
enabled: true
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0My dashboard contains three different views: 1 for the ground floor (Beneden in Dutch), 1 for the first floor (Boven), and 1 for our roof terrace (Dakterras). These different views are defined as follows in the yaml-file (on line 8, line 1101, and line 1607):
views:
- title: Beneden
type: panel
path: beneden
badges: []
cards:
...
- title: Boven
path: boven
type: panel
badges: []
cards:
...
- title: Dakterras
path: dakterras
type: panel
badges: []
cards:Every view is built up in the same way. In this example I'm using the view for the ground floor to explain how it's built. The foundation for the view is defined as a conditional card where either the day or night picture is displayed based on the sun.sun entity:
- type: picture-elements
entity: sun.sun
state_image:
above_horizon: /local/pictures/floorplan/00_day.png
below_horizon: /local/pictures/floorplan/00_night.png| Day | Night |
|---|---|
 |
 |
Next, we need to define the elements that are the first overlays containing semi-transparant pictures when lights are turned on. In the code below, the following is important to understand:
- The conditional element is defined, so the overlay is only displayed when entity
sun.sunhas the statusbelow_horizon - Next, the tap, hold, and double tap actions are defined. Make sure these are set to none
- Under the
stylecode, the picture is positioned in the middle (50% from the top, 50% from the left) and the size is defined as 100% of the available space - When the lamp next to the TV (
light.lamp_televisie) is turned on, the overlay 00_night_light_tv.png is displayed. If it's turned off, a transparant image of the full window size is displayed.
elements:
- type: conditional
conditions:
- entity: sun.sun
state: below_horizon
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
entity: light.lamp_televisie
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/pictures/floorplan/00_night_light_tv.png
'off': /local/pictures/floorplan/00_transparant.png| Overlay picture | End result |
|---|---|
 |
 |
After you have placed all overlays containing the lights, it's time to create buttons and actions to turn lights on and off. It's best practice to use a non-transparant picture first to position your button as an overlay. The following code is used to position the button:
- type: image
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
entity: light.spotjes_voorraadkast
style:
top: 40%
left: 61%
width: 7%
'--divider-color': none
state_image:
'on': >-
/local/pictures/floorplan/buttons/04_verlichting_voorraadkast.png
'off': >-
/local/pictures/floorplan/buttons/04_verlichting_voorraadkast.png| Button | Floorplan |
|---|---|
 |
 |
Lastly, we're going to put (non-)actionable sensor information on the floorplan. For example, the Tado thermostat on the radiator in the entrance:
- type: state-label
tap_action:
action: more-info
entity: climate.gang
attribute: current_temperature
suffix: °C
style:
top: 27.8%
left: 71%
font-size: 12px
font-weight: bold
color: whiteThe weather prediction for the coming days in the bottom left, where the background of the card has been removed and the temperature bars have been made more slim:
- type: custom:clock-weather-card
tap_action:
action: none
entity: weather.thuis
hide_today_section: true
hide_forecast_section: false
hide_clock: true
hide_date: true
card_mod:
style: |
forecast-temperature-bar {
height: 18% !important;
opacity: 0.9 !important;
}
style:
top: 84%
left: 17%
width: 280px
color: white
'--ha-card-background': none
'--ha-card-border-width': 0pxThe icons placed on the top left for navigation:
- type: icon
icon: mdi:bed-outline
tap_action:
action: navigate
navigation_path: /lovelace-plattegrond/boven
style:
top: 5%
left: 10%
border: 2px solid
color: whiteOr the icon in front of the current battery level of my electric car. browser_mod is used to open a pop-up with an external website showing available charging stations nearby.
- type: icon
icon: mdi:car-hatchback
tap_action:
action: call-service
service: browser_mod.popup
data:
dismissable: true
autoclose: false
content:
type: iframe
url: >-
https://chargepoints.eco-movement.com/widget/500/600/key/52.7734339/5.1043484/15
aspect_ratio: 80%
title: Laadpalen
target:
device_id: c2623bbee2226a47f09d6befe07a40ca
hold_action:
action: none
double_tap_action:
action: none
style:
top: 2%
left: 23%
transform: scale(0.6,0.6)
color: whiteAfter all overlays and sensor-information have been stored, the end result looks like this during the day:
And during the evening/night:
In addition to the 'regular' turning lights on or off, the floorplan contains some specifics.
The lights downstairs are grouped in a way, so that if you double tap the lights in the living or dining room, or in the kitchen, all lights are toggled at once. This is achieved by turning a helper on or off when all lights in these rooms are on or off.
- type: image
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.verlichting_beneden
entity: light.verlichting_bank
style:
top: 65%
left: 80%
width: 23%
'--divider-color': none
state_image:
'on': /local/pictures/floorplan/buttons/04_verlichting_bank.png
'off': /local/pictures/floorplan/buttons/04_verlichting_bank.pngBy default 4 spots are turned on in the garden when it's dark. However, we also have festival lights which we occassionally use during a BBQ for example. Double tapping the garden will turn the festival lights on or off. To keep the floorplan clean, the lights of the 4 spots in the garden are not displayed when the festival lights are turned on, and vice versa. This is achieved by the following code:
- type: conditional
conditions:
- entity: sun.sun
state: below_horizon
- entity: switch.festivalverlichting
state: 'off'
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
entity: switch.tuinverlichting
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/pictures/floorplan/00_night_light_garden.png
'off': /local/pictures/floorplan/00_transparant.png
- type: conditional
conditions:
- entity: sun.sun
state: below_horizon
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
entity: switch.festivalverlichting
style:
top: 50%
left: 50%
width: 100%
state_image:
'on': /local/pictures/floorplan/00_night_light_festival.png
'off': /local/pictures/floorplan/00_transparant.png| Messy | Clean |
|---|---|
 |
 |
I own an Eufy Video Doorbell S330, and while the doorbell itself works fine, it has some limitations:
- No direct stream is available, for example via RTSP
- No 24/7 streaming is possible, because it would drain the battery. Even when it's wired to a power outlet
Thanks to the Eufy Security and WebRTC integrations I'm able to monitor and control Eufy devices. So, when the doorbell is pressed entity binary_sensor.deurbel_ringing is set to active. That's the trigger for the following automation to start a P2P stream (by clicking the 'Start P2P stream'-button, and send that as a popup to the iPad that I'm using for the floorplan:
alias: Display popup when doorbell is ringing
description: ""
trigger:
- platform: state
entity_id:
- binary_sensor.deurbel_ringing
to: "on"
condition: []
action:
- device_id: 314e7f45026050001b7829e0cad7d55b
domain: button
entity_id: 0f8857bc8a19f416a941de7da6f9463e
type: press
- service: browser_mod.popup
target:
device_id: c2623bbee2226a47f09d6befe07a40ca
data:
dismissable: true
autoclose: false
timeout: 15000
content:
type: custom:webrtc-camera
entity: camera.deurbel_2
poster: https://ha.hostname.tld/local/pictures/eufy_loading.png
ui: false
- delay:
hours: 0
minutes: 0
seconds: 15
milliseconds: 0
- device_id: 314e7f45026050001b7829e0cad7d55b
domain: button
entity_id: 18b7a97114eb91ff545eef1c71a7c26b
type: press
mode: singleBy integrating the button-card you're able to animate icons on your floorplan. I've implemented this for the following two use cases:
- Turning the ventilator in the bathroom on or off, where the icon starts spinning when the ventilator is turned on
- Flashing the smoke detector icons when smoke is detected
- type: custom:button-card
show_name: false
icon: mdi:fan
tap_action:
action: toggle
entity: switch.badkamer_ventilator
state:
- value: 'on'
color: white
spin: true
styles:
icon:
- filter: opacity(50%)
- value: 'off'
color: white
spin: false
styles:
icon:
- filter: opacity(50%)
style:
top: 54.5%
left: 47%
width: 4%
'--ha-card-background': none
'--ha-card-border-width': 0px
...
- type: custom:button-card
show_name: false
icon: mdi:smoke-detector-variant-alert
tap_action:
action: more-info
entity: binary_sensor.rookmelder_woonkamer
state:
- value: 'on'
color: red
spin: true
styles:
icon:
- animation: blink 1s ease infinite
- filter: opacity(50%)
- value: 'off'
color: white
styles:
icon:
- filter: opacity(0%)
style:
top: 51%
left: 68%
width: 6%
'--ha-card-background': none
'--ha-card-border-width': 0px| Ventilator | Smoke detector |
|---|---|
 |
 |
Note
For some reason the speed of the video has been decreased when converting the MOV-file into a GIF. Actual speed is higher.
The heating icon is displayed at the airconditioning when the status is either set to heat or to cool. In the screenshot below the airconditioning is heating. The icon turns blue when the system is cooling.
When the Xiaomi Mi Air Purifier 3/3H is turned on in our bedroom the icon turns green. The icon is hidden when it's turned off.
- type: custom:button-card
show_name: false
icon: mdi:heat-wave
tap_action:
action: more-info
entity: climate.ac_slaapkamer
state:
- value: heat
color: orange
styles:
icon:
- filter: opacity(50%)
- value: cool
styles:
icon:
- filter: opacity(50%)
- value: 'off'
styles:
icon:
- filter: opacity(0%)
style:
top: 60.5%
left: 68%
width: 6%
'--ha-card-background': none
'--ha-card-border-width': 0px
- type: custom:button-card
show_name: false
icon: mdi:air-filter
tap_action:
action: more-info
entity: fan.mi_air_purifier_3_3h
state:
- value: 'on'
color: green
styles:
icon:
- filter: opacity(50%)
- value: 'off'
color: white
styles:
icon:
- filter: opacity(0%)
style:
top: 30%
left: 74.5%
width: 4%
'--ha-card-background': none
'--ha-card-border-width': 0px