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

[Trzinka]

Did you notice the error?

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

fix it

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

[Trzinka]

Your configuration:

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));

Try it

rules:
######
#rooms
######
entities:
  - entity: light.ylica
    element: area.ylica
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.vannaia_light_2
    element: area.bafroom
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.prihojaia
    element: area.vhod
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.son2_light
    element: area.son2
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.son1_lighta
    element: area.son1
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.tyalet_3
    element: area.pipi
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.kyxny_light_2
    element: area.kyxny
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.tz3000_46t1rvdu_ts0002_light
    element: area.kotel
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.koridor_light_2
    element: area.koridor
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.gostinnaia_light
    element: area.gosti
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}
  - entity: light.garash2123213
    element: area.garage
    tap_action: 
      service: homeassistant.toggle
    state_action:
      service: floorplan.class_set
      service_data: light-${entity.state}

  - entities:
    - light.ylica
    - light.vannaia_light_2
    - light.vannaia_light_2                        #  SAME ENTITY ???????
      tap_action: 
         service: homeassistant.toggle
      state_action:
         service: floorplan.class_set
         service_data: light-${entity.state}

[Trzinka]

in CSS you are missing:

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

    to {
        opacity: 1;
    }
}

[Trzinka]

The CSS should look like this:

svg,
svg * {
    pointer-events: all !important;
    cursor: default !important;
    margin: 0px !important;
    padding: 0px !important;
    max-height: 100vh !important;
    z-index: 0;
}

svg path {
    stroke: inherit;
    stroke-width: 0px !important;

 #areas {
	fill: none;
  }

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

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

    to {
        opacity: 1;
    }
}

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

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

[Trzinka]

Hi.
It is not usual for others to do the settings for you!

You should be aware that the FLOOR PLAN CARD is the most demanding add-on in Home assistant and requires quite a bit of prior knowledge, at least of the web front end. You can imagine that none of us are clairvoyants and the advice is given purely by feeling and you have to know at least approximately what they mean.

So, as for the remote link offered to the access menu, in principle you can send it to me, but the question immediately arises, what will happen the next time something doesn't work for you or you want to add something?

I feel that the main problem is that you are using the light entity instead of the switch entity.
So it's not enough just to have smart bulbs (you can add this later if you think it's necessary to adjust the colors and brightness), right now you should start with smart switches to turn the light on and off physically "without a home assistant" (an example of a smart switches https://www.aliexpress.com/item/1005006668845973.html). When you have something like this installed "even in home assistant", then you can continue working. This way, you will receive information even if someone physically turns on the light or the motion sensor activates it.
So as for the hardware, I don't know what you have.

I have a feeling you watched the video https://youtu.be/MCNxgb0mrSA?list=PLNaeA0iHcKdQ5T4ZBqRtoYvHaCglP-c1D which is a good start but also quite complicated.

Maybe check out #406

and #403

So the best way to solve the problem is to learn, because the floor plan card add-on enables so many things that, in principle, the configuration is never over, because you will certainly get new ideas of what else to display.

[Borsh231]

Yes, you are absolutely right, I did everything 1 in 1 on the video of this person. I use exactly such light switches only on the zigbee protocol. at the moment, I have a house plan, but icons are used to control the light and everything was easy to set up there. But the fact that on different devices the problem with scaling and the inconvenience in these icons led me to the video of this person. It's just that the problem is that I've been working on this task for the 2nd month. I've read a lot of articles on this forum, but I haven't gained any more knowledge. The only thing I could do was trace the contour where the switch went off. At the very beginning of the journey, even this did not work.

[OzGav]

I would recommend reducing your YAML to just one room and the CSS to the minimum required. Get that working and then you can expand.

[Borsh231]

I think I'll do that. plus, I'll try to assemble a house plan from scratch using other guides. It is possible that I did something wrong there too

[OzGav]

You will get it and it will be awesome looking at what you have already. Starting small is always best.