Having issues with my first floor plan

[martinarva]

Hi!

I made my floorplan and imported it in Inkspace:

Then draw areas and named objects:

With these fill settings. Did not use stroke, as there are some overlaping areas an I did not want lines there. Also used some blur, so overlaping areas would be smooth.

Here is the svg file:

CSS:
`/* All good :/ */
.entitystate-on {
opacity: 0;
}

.entitystate-off {
opacity: 1;
fill: rgb(49, 45, 45) !important;
}`

YAML:
`title: Floorplan
views:

• theme: Backend-selected
  title: First Floor
  path: floorplan
  panel: true
  badges: []
  cards:
  • config:
    console_log_level: info
    defaults:
    hover_action: hover-info
    tap_action: more-info
    image: /local/floorplan/1st_floor/first_floor_v6.svg
    rules:
    - element: lights_stairs
    entity: light.stair_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_wc
    entity: switch.downstairs_wc_mirror_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_kitchen_ceiling
    entity: light.kitchen_ceiling_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_kitchen_island
    entity: light.kitchen_island_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_sauna_lobby
    entity: light.sauna_lobby_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_sauna_washing_room
    entity: light.sauna_wahing_room_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_sauna
    entity: light.sauna_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_hallway
    entity: light.hallway_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_garage
    entity: light.garage_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_dining_table
    entity: light.dining_table_lights_4
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    - element: lights_living_room
    entity: light.living_room_lights
    state_action:
    action: call-service
    service: floorplan.class_set
    service_data: entitystate-${entity.state}
    tap_action:
    action: call-service
    service: homeassistant.toggle
    stylesheet: /local/floorplan/1st_floor/first_floor.css
    type: custom:floorplan-card
    full_height: true
    `

Light switching works, but i don't get the result where lights on will hide the object.

Lights off result:

Lights on (marked on the picture) result:

So when lights are on, it's even more darker instead of hiding the object.

[martinarva]

Looks like I solved it, by adding !important to on state. :

.entitystate-on { opacity: 0 !important; }

I used the CSS sample from here: https://github.com/exetico/Home-Assistant_Attachments-for-YouTube/blob/main/2_1_Create-your-own-floorplan-in-Inkscape-and-ha-floorplan-logics/home_modern.css

Might be good idea to add the !important to this file as well.

[exetico]

I'll definitely change that. Thanks for pointing that out. I guess it didn't conflict with my own draft SVG.

https://youtu.be/oqO4Vx6U1Mo

Take a look at this, for more information about CSS styling, and the usage of !important.

If you're into a bit more advance usage, take a look at:
https://github.com/exetico/Home-Assistant_Attachments-for-YouTube/blob/main/2_2_Create-your-own-floorplan-in-Inkscape-and-ha-floorplan-logics/home_modern_original_scope.css