Hi everyone.
I’ve spent the last 5 hours following a tutorial on how to get a floor plan in to HA and I am stuck.
This is the tutorial I have followed but he goes sooooo fast and there are some assumptions I know things that I clearly do not. Interactive 3D floor plan with colour syncing lights using SweetHome 3D - YouTube
-
I uploaded all the images of the plans into the media section on the left navigation bar.
-
Then I created a folder in config named ‘www’.
-
I then added the image files in the ‘www’ folder which were the filepaths for the images which are saved in the media section. These can be seen in the attached screengrab labelled ‘folders and files’
-
In the code the image paths are “image: /config/www/local/images/GFNight.png” etc
As far as I can tell, there is nothing else to do to get the floor plan into Home Assistant but it’s just not working and I don’t know why.
Any help is greatly appreciated.
This is the code I have put into a folder called floorplan within config
title: Floorplan
icon: mdi:floor-plan
path: Floorplan
panel: true
cards:
- type: "custom:config-template-card"
entities:
- switch.3g_wifi_switch_wifi_ble_switch_1
- switch.3g_wifi_switch_wifi_ble_switch_2
- switch.3g_wifi_switch_wifi_ble_switch_3
- switch.cabinet_lights_switch_1
- light.utility
- light.sonoff_a48004c80f
- switch.hall_switch_1
- switch.downstairs_toilet
card:
type: picture-elements
image: /config/www/local/images/GFNight.png
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1)
}
elements:
- type: image
action: none
entity: sun.sun
state_image:
above_horizon: /local:8123/media/local/GFFirst.png
below_horizon: /config/www/local/images/transparent.png
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
top: 50%
width: 100%
tap_action:
action: none
hold_action:
action: none
- type: image
action: none
entity: switch.3g_wifi_switch_wifi_ble_switch_1
hold_action:
action: none
image: /config/www/local/images/GFKitchenSpotsON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_left_orb'].attributes.hs_color
? states['light.sitting_left_orb'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_left_orb'].state === 'on' ? (states['light.sitting_left_orb'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: switch.3g_wifi_switch_wifi_ble_switch_2
hold_action:
action: none
image: /config/www/local/images/GFDiningON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_left_orb'].attributes.hs_color
? states['light.sitting_left_orb'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_left_orb'].state === 'on' ? (states['light.sitting_left_orb'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: switch.3g_wifi_switch_wifi_ble_switch_3
hold_action:
action: none
image: /config/www/local/images/GFKitchen1ON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_left_orb'].attributes.hs_color
? states['light.sitting_left_orb'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_left_orb'].state === 'on' ? (states['light.sitting_left_orb'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: switch.cabinet_lights_switch_1
hold_action:
action: none
image: /config/www/local/images/GFCabinetON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_left_orb'].attributes.hs_color
? states['light.sitting_left_orb'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_left_orb'].state === 'on' ? (states['light.sitting_left_orb'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.utility
hold_action:
action: none
image: /config/www/local/images/GFUtilityON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.bedroom_light'].attributes.hs_color
? states['light.bedroom_light'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.bedroom_light'].state === 'on' ? (states['light.bedroom_light'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: light.sonoff_a48004c80f
hold_action:
action: none
image: /config/www/local/images/GFLoungeON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.bedside_right'].attributes.hs_color
? states['light.bedside_right'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.bedside_right'].state === 'on' ? (states['light.bedside_right'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: switch.hall_switch_1
hold_action:
action: none
image: /config/www/local/images/GFHallON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.sitting_room_main'].attributes.hs_color
? states['light.sitting_room_main'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.sitting_room_main'].state === 'on' ? (states['light.sitting_room_main'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none
- type: image
action: none
entity: switch.downstairs_toilet
hold_action:
action: none
image: /config/www/local/images/GFWCON.png
style:
filter: >-
${ "hue-rotate(" + (states['light.counter_led'].attributes.hs_color
? states['light.counter_led'].attributes.hs_color[0] : 0) + "deg)"}
left: 50%
mix-blend-mode: lighten
opacity: "${states['light.counter_led'].state === 'on' ? (states['light.counter_led'].attributes.brightness / 255) : '0'}"
top: 50%
width: 100%
height: 100%
tap_action:
action: none