Request help with Overlays

[tsx-5]

Hi,

Continuing my journey to a working 3D layout... I've gotten my Basement layout (drawn with SH3D) into Inkscape and have added overlays (see svg file below). I can hide/unhide different areas while I'm in Inkscape. I followed this tutorial ( https://www.youtube.com/watch?v=f_3KAPc53hQ&t=614s ) to get the floorplan to show up in HA. However, the overlays are not working consistently in HA. Sometimes they show up when I inspect the code, but using the ID's prior to me changing them. Other times they don't show up at all. The only other hint I have is that the symbol next to the ID is different on mine than in the video

Anyone have any ideas?

/homeassistant/www/floorplan/home_nasa/Basement-ink-floorplan.css
/* All good */
.entitystate-on(
opacity: 0;
)

.entitystate-off(
opacity: 0.7;
fill: rgb(49,45,45);
)

Edit YAML code:
title: Modern Floorplan
views:

• title: My Modern Floorplan
  path: floorplan
  theme: Google Dark Theme
  panel: true
  type: panel
  badges: []
  cards:
  • config:
    console_log_level: info
    defaults:
    hover_action: hover-info
    tap_action: more-info
    image: /local/floorplan/home_nasa/Basement-ink-floorplan.svg
    rules:
    - element: Basement.open.light
    entity: light.scene_capable_dimmer
    state_action:
    action: call-service
    service: floorplan.style_set
    service_data: entitystate-${entity.state}
    double_tap_action:
    action: call-service
    service: homeassistant.toggle
    stylesheet: /local/floorplan/home_nasa/Basement-ink-floorplan.css
    full_height: true
    type: custom:floorplan-card

[tsx-5]

Ok,

Seems part of the problem was the cache needing to be cleared. After a few tries, I've gotten the default actions to work - but the element doesn't toggle the area opacity as the video illustrates.

[OzGav]

For a start can you properly format your yaml by using the <> button

[tsx-5]

Thanks for pointing that out! A bit of trying it out and now I can post updated code block that inserts way better.

title: Modern Floorplan
views:
  - title: My Modern Floorplan
    path: floorplan
    theme: Google Dark Theme
    panel: true
    type: panel
    badges: []
    cards:
      - config:
          console_log_level: info
          defaults:
            hover_action: hover-info
            tap_action: more-info
          image: /local/floorplan/home_nasa/Basement-ink-floorplan.svg
          rules:
            - element: Basement.open.light
              entity: light.scene_capable_dimmer
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
              double_tap_action:
                action: call-service
                service: homeassistant.toggle
            - element: Basement.patio.light
              entity: light.scene_capable_dimmer_2
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
              double_tap_action:
                action: call-service
                service: homeassistant.toggle
            - element: Basement.gaming.light
              entity: light.gaming
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
              double_tap_action:
                action: call-service
                service: homeassistant.toggle
            - element: Basement.laundry.light
              entity: light.laundry_room_fix_hs2000
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
              double_tap_action:
                action: call-service
                service: homeassistant.toggle
            - element: Basement.workout.light
              entity: light.micro_smart_energy_illuminator_g2_2
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: entitystate-${entity.state}
              double_tap_action:
                action: call-service
                service: homeassistant.toggle
          stylesheet: /local/floorplan/home_nasa/Basement-ink-floorplan.css
        full_height: true
        type: custom:floorplan-card

[OzGav]

I think @exetico made mention in the videos that . In element names is problematic so I would remove those for a start.
Then I don’t use double tap action so change one of those to tap_action for testing (if the lights actually toggle but it is just the opacity that doesn’t change then disregard this)
Lastly, please show your CSS file (formatted)

[tsx-5]

/* All good */
.entitystate-off(
    opacity: 0;
)

.entitystate-on(
    opacity: 0.7;
    fill: rgb(38,45,45);
)

I'll rename the elements, as you suggest - and report back (likely after work)

[Trzinka]

Hello!

I don't see that you using this

svg, svg * {
  position: relative !important;
  margin: 0px !important;
  max-height: 100vh !important;
  width: auto  !important;
  padding-top: 150px !important;
  padding-bottom: 150px !important;
  z-index: 0 !important;
}

svg path {
  fill: none;
  stroke: inherit;
}

#background {
  visibility: visible !important;
  opacity: 1 !important;
	mix-blend-mode: lighten !important;
}

#switch-coverings {
  visibility: hidden;
  transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.entitystate-on {
  visibility: visible !important;
  opacity: 1 !important;
  transition: opacity 0.5s linear !important;
  animation: fade-in 0.75s linear forwards !important;
}

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

Use

mix-blend-mode: lighten !important;

in your default background ID name:

[tsx-5]

Trzinka,

Thanks for the feedback. Have a few questions though... The SVG section above causes the background and the overlays to be out of alignment - do I need it? Applying the other changes you suggested didn't affect the outcome. But, I do still need to fix the element names.

[Trzinka]

First of all, do you have a problem with the alignment of images or elements?
And where do you have a problem in the Inksacape or floorplan card?

I guess you have wrong settings in inkscape (from experience #401)!!!!

I hope you can look at the size of the image/images you use for the background/lights.

Do the following in inkscape when you have uploaded your project:

For this, first check the base size:

After that, check the size of all elements and their position (you set the first element and correct the others):

If I didn't meet your wishes, write specifically what you use, how far you think everything is OK, attach a screenshot...

[tsx-5]

I REALLY appreciate the screenshots - they are awesome. And nope, I didn't have the size set correct within Inkscape. Fixed that. That said, my alignment problem only exist when I added the following code in the .css file:

svg, svg * {
  position: relative !important;
  margin: 0px !important;
  max-height: 100vh !important;
  width: auto  !important;
  padding-top: 150px !important;
  padding-bottom: 150px !important;
  z-index: 0 !important;
}

which led to this:

vs.

So, I was trying to figure out what the code snipet does for me... What does also work, is clicking in an area and getting device info dialog box to open. What doesn't work is changing the opacity of any area. Everything just stays the way the included image shows.

[Trzinka]

By the way, when you are developing a page or need to clear the cache, you should use this setting and you won't have to do it.
Only bao was enough (ctrl+F5=reload the entire page)

[Trzinka]

If you want, take a look (there is always a solution at the end):

#396
#397
#403
#404

Do not use fill or
set it tofill: none
and solve the problem with
opacity:

[tsx-5]

Wow,

Great job learning how to switch images based on time of day... I'm surely going to be modeling my floorplan after that!

[tsx-5]

That last part of the statement led me to the answer... within the CSS I had both background and the layers set to 1, when I set the opacity of the layer to 0 - the switching worked!

[Trzinka]

###I'm glad it worked out for you! ;=)))
Don't worry, it's not over yet.

New headaches will keep coming!

I'm bothered by the overlapping of the edges when the light is on in the
room and it was killing me so much that I started over and took a slightly 
different approach.

The solution is yet to come

#406

Don't do that!!!!!

I saw too late that you like changing the picture depending on the time of day!!!!!

I'm still working on this too, because the picture is not realistic considering the cloudiness, the time of year and the angle under which the sun shines, etc.

Now I'm testing with one image over which I have an opacity layer according to the cloudiness sensor (currently)!!!

If you are satisfied with the answer that bothered you, click on the Close discussion button at the bottom of the page (right "purple icon")