Help with a floor plan dashboard

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

It’s a long time since I did my own floorplans, so things may have changed, but as I remember “local” maps onto “config/www” - you have both in your path. So the image is (for example) config/www/ground_floor5.png but the path in the dashboard is /local/ground_floor5.png.