The problem with changing the animation

[Borsh231]

Good afternoon, I wanted to make my house plan work by clicking on the area, and not on the switch icon. I did it according to the tutorial, but no matter how hard I try, the picture does not change to a light one. The only thing I have achieved is that the area of the included room is highlighted with a border. I'm not good at code, and I hope someone will tell me where I made a mistake. I have already met a similar discussion, but I still did not understand how the problem was solved.

Here is the code of my panel

views:

• title: Floorplan
  path: Floorplan
  icon: mdi:floor-plan
  theme: lovelace-blue-blur
  panel: true
  cards:
  • title: Floorplan
    path: floorplan
    icon: mdi:floor-plan
    theme: lovelace-blue-blur
    type: custom:floorplan-card
    style: |
    ha-card {
    max-width: 150vh;
    margin: 0 auto;
    background: none;
    }
    config:
    image: /local/ha-floorplan/floorplane_optimised.svg
    stylesheet: /local/ha-floorplan/floorplan.css
    rules:
    - name: rooms
    entities:
    - entity: light.ylica
    element: area.ylica
    - entity: light.vannaia_light_2
    element: area.bafroom
    - entity: light.prihojaia
    element: area.vhod
    - entity: light.son2_light
    element: area.son2
    - entity: light.son1_lighta
    element: area.son1
    - entity: light.tyalet_3
    element: area.pipi
    - entity: light.kyxny_light_2
    element: area.kyxny
    - entity: light.tz3000_46t1rvdu_ts0002_light
    element: area.kotel
    - entity: light.koridor_light_2
    element: area.koridor
    - entity: light.gostinnaia_light
    element: area.gosti
    - entity: light.garash2123213
    element: area.garage
    tap_action: light.toggle
    state_action:
    service: floorplan.class_set
    service_data: light-${entity.state}
    - entities:
    - light.ylica
    - light.vannaia_light_2
    - light.vannaia_light_2
    state_action: null
    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));

cod ccs

` 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;
}a

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

#areas .motion-on
{
fill: #ff00002e;
stroke: #ff000087;
stroke-width: 3px;
stroke-opacity: 1;
filter: unset;
animation: fade-in 1s infinite alternate;
}

#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);
}
`

and file svg

and file svg


[Trzinka]

Did you maybe read something from #411?

I don't see from the attached that it has cropped images when the light is on in individual rooms. Right now you're just showing lines (stroke) around the room where the light should be on.

On the aforementioned page you have a zip file with the entire content of my floor plan https://github.com/user-attachments/files/17265726/20241005.zip

The ZIP file contains the fp.yaml and fp.css files with some comments.

[Borsh231]

Good afternoon, you do not see cropped pictures of the premises due to the fact that I did not attach them to the file. as it is, I have them on my server. I'll fix it now

[Borsh231]

I also looked at your code and it's too complicated for me. I would just like to understand where my mistake is. Since the modules are working on switching, the zone is highlighted

[Borsh231]

floor.zip