Error floorplan-card : Cannot read properties of undefined (reading 'ForEach')

[HugoNaza]

Hello Home Assistant Community,

I am reaching out for some guidance regarding issues I've encountered while setting up a 3D floorplan on Home Assistant. Despite following the BitBorn tutorial closely and integrating all elements (including IDs, xlink:href, href, areas, and entities) via Inkscape, I am facing persistent error messages that I'm unable to resolve.
I have dowload floorplan and plugin associate with floorplan, and install the cards not in HACS manually like floorplan-card. I work also with YAML dashboard.

After uploading the SVG with only the background, the same errors occur. My YAML and CSS configurations seem correct, without apparent duplications that the error suggests. Even with a minimal YAML configuration, the error persists. Furthermore, all configurations have been double-checked for accuracy.

The SVG appears to load correctly initially upon clearing the cache and refreshing, displaying images, areas, entities, and shapes. However, after a few seconds, the following error messages appear: Cannot read properties of undefined (reading 'ForEach')
I have already try to hard-refresh, re-installe the plugin, search double occurrence, dowgrade home-assistant to update 2023.11.3 (I was in 2023.12).

I am attaching the error messages and the relevant portions of my code for reference.

Error :

YAML :

views:
  - title: 'Floorplan'
    path: 'floorplan'
    icon: 'mid:floor-plan'
    theme: 'lovelace-blue-blur'
    panel: true
    cards:
      - type: 'custom:floorplan-card'
        entity: fp-card
        image: "/local/floorplan/floorplan_optimised.svg"
        stylesheet: '/local/floorplan/floorplan.css'
        style: >
          ha-card {
            max-width: 150vh;
            margin: 0 auto;
            background: none;
            box-shadow: none;
          }
        config:
          rules:
            - entity: media_player.tele_du_salon_2
              tap_action: more-info
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'media-player-tv media-player-${entity.state}'

            - entity: media_player.tv_chambre_2
              tap_action: more-info
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'media-player-tv media-player-${entity.state}'

            - entities:
                - binary_sensor.sensor_salon_v_2_mouvement
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'motion motion-${entity.state}'

            - entities:
                - light.buanderie
                - light.bureau
                - light.canape
                - light.couloir_01
                - light.couloir_02
                - light.cuisine
                - light.douche
                - light.escalier_mur
                - light.escalier_top
                - light.frigo
                - light.lit
                - light.miroir
                - light.mur_chambre
                - light.toilette
                - light.tv_back
                - light.tv_top
              tap_action: false
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'

            - entities:
                - light.buanderie
                - light.bureau
                - light.canape
                - light.couloir_01
                - light.couloir_02
                - light.cuisine
                - light.douche
                - light.escalier_mur
                - light.escalier_top
                - light.frigo
                - light.lit
                - light.miroir
                - light.mur_chambre
                - light.toilette
                - light.tv_back
                - light.tv_top
              tap_action:
                action: 'toggle'
              hold_action:
                action: more-info
              state_action:
                action: call-service
                service: floorplan.style_set
                service_data:
                  element: "${entity.entity_id.replace('light.', 'light_overlay.')}"
                  style: |
                    if (entity.state != 'on') {
                      return 'display: none;';
                    }
                    let hue = 0;
                    let sat = 0;
                    if (entity.attributes.hs_color) {
                      hue = entity.attributes.hs_color[0];
                      sat = entity.attributes.hs_color[1];
                    }
                    if (sat < 10) {
                      return `
                        display: block;
                        filter: brightness(calc(${entity.attributes.brightness} / 255));`;
                    }
                    return `
                      display: block;
                      filter: sepia(100%)
                        hue-rotate(calc(${hue}deg - 55deg))
                        saturate(calc(${sat}% * 2))
                        brightness(calc(${entity.attributes.brightness} / 255));`

CSS :

`@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

svg, svg * {
  pointer-events: all !important;
  cursor: auto !important;
}

svg path {
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}

#light-overlays image {
  display: none;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;

}

#light-overlays image.light-on {
  display: block;
}

#areas path {
  fill: none;
}

#areas .light-on {
  stroke-width: 6px;
  stroke-opacity: 1;
  stroke: #a5e0e1;
}
`

Configuration.yaml :

frontend:
  themes: !include_dir_merge_named themes

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

lovelace:
  mode: yaml
  dashboards:
    home-dashboard:
      mode: yaml
      title: Home
      filename: lovelace/dashboards/home/home-dashboard.yaml
  resources: # This should not be under dashboards
    - url: /local/cards/floorplan-card/floorplan-card.js
      type: module
    - url: /local/community/ha-floorplan/floorplan.js
      type: module
    - url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
      type: module
    - url: /local/cards/card-mod/card-mod.js
      type: module
    - url: /local/cards/autoentities/autoentities.js
      type: module
    - url: /local/cards/button-card/button-card.js
      type: module`

I have search in internet, github or homeassistant forum, even ChatGPT, but I don't find any solution.
Could anyone please provide insights into what might be causing these issues or suggest further troubleshooting steps?

Thank you for your time and assistance.

Best regards,

[OzGav]

Can you please format all the yaml with the <> button

[HugoNaza]

Thanks a lot for your answer, effectively the presentation was not optimal. I have reorganize the informations and put the code in box <> to be more clear.

If you need any others informations or have any suggestions, I'm available. Thanks for your time.

[OzGav]

Have you installed ha-floorplan via HACS?

[OzGav]

Just trying to look at this now. Firstly, the tutorial you are trying to follow is very advanced. Try the following simplified yaml (I also fixed typos (e.g. mid in your icon line) and removed unnecessary quotes)

views:
  - title: Floorplan
    path: 'floorplan'
    icon: 'mdi:floor-plan'
    panel: true
    cards:
      - type: 'custom:floorplan-card'
        config:
          image: /local/floorplan/floorplan_optimised.svg
          stylesheet: /local/floorplan/floorplan.css
          rules:
            - entity: media_player.tele_du_salon_2
              tap_action: more-info
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'media-player-tv media-player-${entity.state}'

            - entity: media_player.tv_chambre_2
              tap_action: more-info
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'media-player-tv media-player-${entity.state}'

            - entities:
                - binary_sensor.sensor_salon_v_2_mouvement
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'motion motion-${entity.state}'

            - entities:
                - light.buanderie
                - light.bureau
                - light.canape
                - light.couloir_01
                - light.couloir_02
                - light.cuisine
                - light.douche
                - light.escalier_mur
                - light.escalier_top
                - light.frigo
                - light.lit
                - light.miroir
                - light.mur_chambre
                - light.toilette
                - light.tv_back
                - light.tv_top
              tap_action: false
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'

I assume you haven't shown your entire CSS as there are multiple missing classes....

[HugoNaza]

Thank you for your assistance so far.
I have find a solution to correct the major problem. With the current code, the SVG loads correctly and interactions work as intended. However, I'm still encountering persistent issues with Floorplan in Home Assistant:

- Device Status Integration in YAML: I'm struggling to display the status (on/off) of my lights or TV using a class to trigger the "lighten" mode in CSS. It appears the YAML file isn't transmitting the ".light-on" status change needed to activate the corresponding CSS.

- Console Errors: There are ongoing errors in the development console, and I'm uncertain of their impact or how to resolve them.

Here's the current YAML code where I've added a group to fix a previous error, enabling correct entity detection. However, the integration of device states is still problematic:

YAML :

- type: 'custom:floorplan-card'
        entity: fp-card
        image: "/local/floorplan/floorplan_optimised.svg"
        stylesheet: '/local/floorplan/floorplan.css'
        style: >
          ha-card {
            max-width: 150vh;
            margin: 0 auto;
            background: none;
            box-shadow: none;
          }
        groups:
          - entitiy: sensor.chambre_temp
            state_action:
              action: call-service
              service: textTemperatureChambre
              service_data:
                element: sample.multilinegroup_text
                shift_y_axis: 1.5em
                text: |

          - name: LightToggles
            entities:
              - media_player.salon_remote_tv
              - media_player.chambre_remote_tv
              - media_player.salon_enceinte
              - media_player.chambre_enceinte
              - media_player.douche_enceinte
              - cover.rideaux_salon_rideau
              - cover.rideau_buanderie_rideau
              - cover.rideau_chambre_rideau
              - light.salon_global
              - light.chambre_global
              - light.cuisine_global
              - light.salle_de_bain_global
              - light.buanderie
              - light.bureau
              - light.canape
              - light.porte
              - light.couloir
              - light.cuisine
              - light.douche
              - light.escalier_mur
              - light.escalier_top
              - light.frigo
              - light.lit
              - light.miroir
              - light.mur_chambre
              - light.toilette
              - light.tv_back
              - light.tv_top
            tap_action:
              action: 'toggle'
            hold_action:
              action: more-info

        rules:
          - entity: media_player.salon_remote_tv
            element: media_player_overlay.salon_remote_tv
            state_action:
              action: call-service
              service: floorplan.class_set
              service_data:
                class: 'media-player-${entity.state}'
          - entity: media_player.chambre_remote_tv
            element: media_player_overlay.chambre_remote_tv
            state_action:
              action: call-service
              service: floorplan.class_set
              service_data:
                class: 'media-player-${entity.state}'
          - entity: light.escalier_mur
            element: light_overlay.escalier_mur
            state_action:
              action: call-service
              service: floorplan.class_set
              service_data:
                class: '${entity.state === "on" ? "light-on" : "light-off"}'

CSS :

svg, svg * {
  pointer-events: all !important;
  cursor: auto !important;
}

svg path {
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}


#areas {
  fill: none;
}

#light-overlays image {
  display: none;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;
}

#light-overlays image.light-on {
  display: block;
}


#areas .light-on {
  stroke-width: 6px;
  stroke-opacity: 1;
  stroke: #a58ee1;
}

g path:active, g use:active, .light-on:active, g#entities > g:active path:not(.touch-area) {
	stroke: #9ed8ff99 !important;
	stroke-width: 4px;
	stroke-opacity: 0.7;
}

g#entites path, g#entites ellipse {
	stroke: var(--paper-item-icon-color);
	stroke-width: 1px;
	stroke-opacity: 1;
	fill: none;
}
g#entites .light-on {
	stroke: var(--paper-item-icon-active-color);
}

Screen errors :

I appreciate any help you can provide to resolve these issues.

[OzGav]

I don’t see any light-off class that can be applied

[HugoNaza]

Oh yes effectively, before the code YAML was this one :

state_action:
              action: call-service
              service: floorplan.class_set
              service_data: 'light-${entity.state}'

and it dosn't work with this configuration also ?

YAML actual part :

- entity: light.escalier_mur
            element: light_overlay.escalier_mur
            state_action:
              action: call-service
              service: floorplan.class_set
              service_data:
                class: '${entity.state === "on" ? "light-on" : "light-off"}'

But if I replace the class by : 'light-${entity.state}' like in the first YAML I have show you, it dosent work also.

CSS actual part :

#light-overlays image {
  display: none;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;
}

#light-overlays image.light-on {
  display: block;
}

Is it the good methode to blend in lighten mode the different PNG ? Or it's an other solution to do that ?

[OzGav]

Look at your css though. You have some classes called light-on but there are no classes called light-off. So I expect all your lights will probably show when they turn on but nothing will happen when they turn off?

here is a section of my css

/* lights and lamps */

.light-off, .light-off * {
  fill: #E0E0EB !important;
}

.light-on, .light-on * {
  fill: #FFFF99 !important;
}

.lamp-off, .lamp-off *  {
  opacity: 0.5 !important;
  stroke-opacity: 0 !important;
}

.lamp-on, .lamp-on * {
  stroke: #03A9F4 !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

[HugoNaza]

Effectively this configuration was false in all the case, but I have try different varient, but in all the case it dosent work. I can show you which configuration doesn't work.

But it's seem come from the YAML when he change the ID of my light into the ID of my entity to define my png. When I inspect my console, he show only the CSS with the display none and without the "light-on" (or even off because he don't indicate at all the state of the light).

Have you an idea where it can come from ? What is the good way to create that ?

1. First iteration :

YAML :

  - type: 'custom:floorplan-card'
        entity: fp-card
        image: "/local/floorplan/floorplan_optimised.svg"
        stylesheet: '/local/floorplan/floorplan.css'
        style: >
          ha-card {
            max-width: 150vh;
            margin: 0 auto;
            background: none;
            box-shadow: none;
          }

groups:
          - entitiy: sensor.chambre_temp
            state_action:
              action: call-service
              service: textTemperatureChambre
              service_data:
                element: sample.multilinegroup_text
                shift_y_axis: 1.5em
                text: |

etc.

rules: 

          - entity: light.escalier_mur
            element: light_overlay.escalier_mur
            state_action:
              action: call-service
              service: floorplan.class_set
              service_data:
                class: '${entity.state === "on" ? "light-on" : "light-off"}'

CSS :

#light-overlays image.light-off {
  display: none;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;
}

#light-overlays image.light-on {
  display: block;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;
}

2. Iterations

YAML :

same

groups:
          - entitiy: sensor.chambre_temp
            state_action:
              action: call-service
              service: textTemperatureChambre
              service_data:
                element: sample.multilinegroup_text
                shift_y_axis: 1.5em
                text: |

etc.

rules: 


service_data_template:
  class: '${entity.state === "on" ? "light-on" : "light-off"}'

CSS :

#light\\.escalier_mur.light-on {
  display: block !important;
  mix-blend-mode: lighten !important;
}
#light\\.escalier_mur.light-off {
  display: none; 
}

3. iteration : But don't work at all

config:
          image: '/local/floorplan/floorplan_optimised.svg'
          stylesheet: '/local/floorplan/floorplan.css'
          rules:

            - entities:
                - media_player.salon_remote_tv
                - media_player.chambre_remote_tv
                - light.buanderie
                - light.bureau
                - light.canape
                - light.porte
                - light.couloir
                - light.cuisine
                - light.douche
                - light.escalier_mur
                - light.escalier_top
                - light.frigo
                - light.lit
                - light.miroir
                - light.mur_chambre
                - light.toilette
                - light.tv_back
                - light.tv_top
              tap_action: false
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'

CSS :

#light-overlays image {
  display: none;
  mix-blend-mode: lighten;
  animation: 0.75s fade-in linear forwards;
}

#light-overlays image.light-on {
  display: block;
}

Thanks a lot for your time

[OzGav]

I think you need to simplify things. Use the yaml from your iteration three above but use this as your css

.light-off, .light-off *  {
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.light-on, .light-on * {
  stroke: #03A9F4 !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

[HugoNaza]

I'm ok to simplify my code to fixe my problem, but your proposition doesn't work.
Like I told you, the YAML don't seem indicate the statut of my different light.

I have try your proposition, but it doesn't work and don't answer to my needs, because if my png are not in lighten mode it doesn't work at all.

Why when I want create a YAML with this format he told me you need to define an entity ?

- type: 'custom:floorplan-card'
        style: >
          ha-card {
              max-width: 150vh;
              margin: 0 auto;
              background: none;
              box-shadow: none;
          }
        config:
          image: '/local/floorplan/floorplan_optimised.svg'
          stylesheet: '/local/floorplan/floorplan.css'
          rules:
          - entities:
                - media_player.salon_remote_tv
                - media_player.chambre_remote_tv
                - light.buanderie
                - light.bureau
                - light.canape
                - light.porte
                - light.couloir
                - light.cuisine
                - light.douche
                - light.escalier_mur
                - light.escalier_top
                - light.frigo
                - light.lit
                - light.miroir
                - light.mur_chambre
                - light.toilette
                - light.tv_back
                - light.tv_top
              tap_action: false
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'

            - entities:
                - media_player.salon_remote_tv
                - media_player.chambre_remote_tv
                - media_player.salon_enceinte
                - media_player.chambre_enceinte
                - media_player.douche_enceinte
                - light.salon_global
                - light.chambre_global
                - light.cuisine_global
                - light.salle_de_bain_global
                - light.buanderie
                - light.bureau
                - light.canape
                - light.porte
                - light.couloir
                - light.cuisine
                - light.douche
                - light.escalier_mur
                - light.escalier_top
                - light.frigo
                - light.lit
                - light.miroir
                - light.mur_chambre
                - light.toilette
                - light.tv_back
                - light.tv_top
              tap_action:
                action: 'toggle'
              double_tap_action:
                action: more-info

[exetico]

As a answer to 387#discussioncomment-7852869:
You're trying to set light-escalier_top as a example, right? I see no rules for .light.escalier_top in your CSS rules. The "set class" will require a class selector (not a id selector). As I'm jumping into this, maybe I'v missed something. However, I dont see how the two things should be alligned.

In general, I also recommend all to not use dots as part of their SVG ID's. That's pointed out in my videoes, and in our documentation. With that said, some users report it works, anyways...

With the content you provided, I cant see any connections between your code.

For a chance to help without spending hours to guess what's going on, I'll always recommend provided a stipped down version of your work, where you share a sample SVG, CSS and YAML pack with one entity or maybe two entities, so it's possible to taggle your issue, without having the noise from all the other things. If other assets are required, share them too.

And oh, thank you for using ha-floorplan 😄 . Let's get this solved 👌 !

[OzGav]

What do you mean by this:

and link in the configuration.yaml

[OzGav]

I'm suspicious of the error you see "the name floorplan card has already been used in this registry"

How have you added the floorplan.js resource?

[HugoNaza]

When I say "link in the configuration.yaml" I mean I added the .js resource to the configuration. I have add my configuration like that :

automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml

lovelace:
  mode: yaml
  resources: # This should not be under dashboards
    - url: /local/cards/floorplan-card/floorplan-card.js
      type: module
    - url: /local/community/ha-floorplan/floorplan.js
      type: module
    - url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
      type: module
    - url: /local/cards/card-mod/card-mod.js
      type: module
    - url: /local/cards/autoentities/autoentities.js
      type: module
    - url: /local/cards/button-card/button-card.js
      type: module
  dashboards:
    test-dashboard:
      mode: yaml
      filename: test.yaml
      title: Test Dashboard
      icon: mdi:test-tube
      show_in_sidebar: true

For the error "the name floorplan card has already been used in this registry" I have any idea where he come from, it's very weird and maybe it's the reason of my bug, but why it happen also in new installation ?!
And I can't bring more information in the console or the logs about that, I find any things.

I put you the screens of my ftp to show you how I have add the plugin :

Also how I have insert my code in the YAML file. :

Thanks, I hope we can find an error I did haha

[OzGav]

You have two floorplan resources loaded. Remove the first one

[HugoNaza]

Oh thanks, it's not necessary to add the floorplan-card ?

Effectively when I remove this two line, he remove this lines of error, but I have others one totally different hahaha

And in the log, he don't say any things exept that :but it's not useful :

2023-12-19 21:30:24.152 WARNING (SyncWorker_2) [homeassistant.loader] We found a custom integration switch_manager which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant
2023-12-19 21:30:24.154 WARNING (SyncWorker_2) [homeassistant.loader] We found a custom integration browser_mod which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant
2023-12-19 21:30:24.155 WARNING (SyncWorker_2) [homeassistant.loader] We found a custom integration hacs which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant
2023-12-19 21:30:24.156 WARNING (SyncWorker_2) [homeassistant.loader] We found a custom integration smartir which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant
2023-12-19 21:30:24.158 WARNING (SyncWorker_2) [homeassistant.loader] We found a custom integration localtuya which has not been tested by Home Assistant. This component might cause stability problems, be sure to disable it if you experience issues with Home Assistant

[HugoNaza]

Oh no perfect ! My last error is just my fault, whem I have copy the code the svg was not the good one.
When I have remove the floorplan-card of my ressources, all seems works correctly !

I try to implement more feature to see if all works, but it seems on the good way !

Thanks a lot for your time and your help, hopefully people like you exist ! <3

[OzGav]

Oh thanks, it's not necessary to add the floorplan-card ?

So glad it’s working. You started with the bitborn tutorial which was showing the old syntax for floorplan. So you can use the ideas from that but you need to follow the current documentation to get it all to work. Good luck.

[HugoNaza]

Ok, thanks a lot for this few new informations. :) I go into the documentation, now all seems more simple already !
I hope I don't need to open a new tickets for others problems or questions, I'm sorry in advance if it was the case hahahah

Thanks for your help !