Element width change while changing image with 'floorplan.image_set' action

[done7k]

I use floorplan.image_set action to swap element images basing on HA entity status - show open closed windows/doors. In overall it works fine but I noticed the images are shown a bit shorter (both ON and OFF) than they are. Why does it behave like this?

I use inkscape to draw the plan:

• I have a walls plan on layer1.
• then I create an open window element on layer2 ( on the right place ).
• I copy this element into clipboard - create a new SVG file and paste it into it - save the file like "name-ON.svg"
• then draw a "closed window" element - save it into "name-OFF.svg"
• I checked the width in mm in the plan file and ON/OFF files - is absolutely the same.
• But in HA the element width is shown shorter then it is.

[exetico]

Hi

You need to share your svgs including xaml. Else I'd need yo redo all those things to actually see the (possible) bug in action.

Also, kindly to the example as minimal possible 👍.

[exetico]

@done7k - I can't see the CSS in the zip-file. I'm sorry that I forgot to mention that...

[done7k]

did not create any CSS for this package. the one in YAML is leftover from a project I copy-pasted from.. So, no CSS for this test prj. Since it does not wirk w/o or with an empty stylesheet file, I added a dot only CSS to the package.

test-shortening-issue- 2.zip

[exetico]

I have written a looooong answer, but ended up trashing it, cause I'm not what sure if it's actually true.

My bet is that it's due to how you're defining the two svg-elements, and have transform in use, too. I'm not the best SVG-expert here, but I could get around it, by stipping down some of the things.

Here is the answer, but I'm not that happy about sharing it here, cause I expect it to be (sort of) wrong. I also stopped typing before I created a proper conclusion. But feel free to read it.

[done7k]

Thank you so much for your message. I have tried to clean the SVG code a bit but w/o much success. I can see if I set width same for all elements the overlapping elements looks shorter anyway. I could not find any explanation to this effect so far - where the scaling appears. And what is more here it pretty simple example, you can imagine what is going on in my real SVG created in the Inkscape. But I was sure the scaling happens in the floorplan add-on somehow, for some reason.

But let's take it from scratch. So, I have a square as a base then create a rectangle (rect-base) in the same file. To be able to change the rect-base in yaml I need to create two separate SVG files with rect-on and rect-off . Let' say the rect-on is full copy of the rect-base element meaning it graphically looks same. When the rect-off looks differently. For example, rect-base visually represents an open window; rect-on - open window as well; rect-off represents a closed window visually. If something wrong here please make a correction.
Or maybe someone can create all these simple elements in Inkscape (or another editor) and share here. I would be able to compare with my SVG to see what can be wrong.

[done7k]

I have created a test plan and can see the issue: on the screenshot you can see the yellow box is shorter than grey box. but in the main SVG and elements SVG they are the same size - 150mm width
Screenshot:

Main SVG

Package:
test-shortening-issue.zip

[OzGav]

This must not be what you are trying to do but two SVG squares on top of each other. Works fine for me.

  - icon: 'mdi:border-outside'
    id: test2
    title: Test2   
    panel: true
    cards:
      - full_height: true
        type: 'custom:floorplan-card'      
        config:
#          log_level: info
          image:
            location: /local/floorplan/test_square.svg
            cache: false
          stylesheet:
            location: /local/floorplan/floorplan.css
            cache: false
          defaults:
            hover_action:
              action: hover-info
            tap_action:
              action: more-info
          rules:
            - entities:
                - light.kids_desk_light
              name: Control Visbility of Elements
              tap_action: toggle
              state_action:
                service: floorplan.class_set
                service_data: 
                  class: '${(entity.state === "on") ? "room-light-fadein" : "room-light-fadeout"}'

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
   sodipodi:docname="test_square.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="-87.142857"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1138"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="opacity:1;fill:#ff110c;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.63300002;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="rect815"
       width="49.514877"
       height="46.869045"
       x="76.729164"
       y="114.05952"
       ry="1.8708873" />
    <rect
       style="opacity:1;fill:#110cff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.63300002;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="light.kids_desk_light"
       width="49.514881"
       height="46.869045"
       x="76.729164"
       y="114.05952"
       ry="1.8708873"
       inkscape:label="light.kids_desk_light" />
  </g>
</svg>

.room-light-fadein {
  visibility: visible !important;
  opacity: 0.65 !important;
  transition: opacity 0.5s linear !important;
}

.room-light-fadeout {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: visibility 0s 0.5s, opacity 0.5s linear !important;
}

[OzGav]

I see you are trying to use image set but I don't know why. Just hide the top image.

[done7k]

I see you are trying to use image set but I don't know why. Just hide the top image.

But then I do not know how I can hide the bottom element image if the top one does not overlap the bottom one fully. For example open/close door below:

[OzGav]

As @exetico said you need to use CSS. There are many solutions to this problem. (1) Make the red door image with a background that covers the green door. Red door is labelled with the door entity ID and show and hide it as needed (2) Use a binary sensor in HA that is opposite to the door state and then use CSS to show and hide the green and red doors. Assign the door entity ID to one door and the binary sensor to the other. (3) Use just one image and use CSS to rotate the door open. This is the most elegant but is challenging to get it just right. There is an example of this in the HA forums

[done7k]

Ok, thanks! I will look for a suitable solution.

[OzGav]

Have a look here for an example of (3) https://community.home-assistant.io/t/share-your-floorplan/21315/33?u=ozgav

[exetico]

You should look into how to style things with CSS. It sounds like you're just trying to hide one object, right? Use a 'open/close' class, and style that selector in CSS, with display:none/initial/whatever your need is. Sent from mail, on phone... tor. 6. okt. 2022 12.59 skrev done7k ***@***.***>:

…

I see you are trying to use image set but I don't know why. Just hide the top image. But then I do not know how I can hide the bottom element image if the top one does not overlap the bottom one fully. For example open/close door below: [image: floorplan-test3] <https://user-images.githubusercontent.com/55544417/194296138-0f6a5322-4974-4915-8bf5-c7353e46b8e1.svg> — Reply to this email directly, view it on GitHub <#238 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA3CSBKJUVBPWAHDY6RXFV3WB2WKDANCNFSM6AAAAAAQNR7K4E> . You are receiving this because you commented.Message ID: <ExperienceLovelace/ha-floorplan/repo-discussions/238/comments/3813452@ github.com>

[done7k]

Maybe, but let me understand this clearly. In YAML you specify correspondence between entity and element or (as I see it in the example above) only HA entity assuming an element with the same ID exists in the SVG. Fine, then all class manipulation or direct styling will be applied to this element only. Is this correct? But "door-closed" and "door-open" are two different elements. I can not assign the same ID to both of them. How can I access/refer these two elements in a YAML rule description to manipulate with their styles?

[OzGav]

No. In my example (1) door closed is in the bottom layer. The door open image is hidden or shown depending upon the state of the actual door. You just make sure that the open image covers the part of the bottom layer that shows the door. In (2) you have two entities that you use to show and hide images of open and closed.

In my setup I exclusively use option (1). I don’t recommend (2) it is just making things complex when (1) works fine. (3) is awesome but I just don’t use it because it would be too small to really see in my floorplan.

[OzGav]

How did you go here. Is this question answered for you?

[done7k]

@OzGav , I have spent some evening to re-do my windows setup to use transform: rotate() to turn SVG elements (windows/doors) instead of picture replacing. Looks great. Thanks!

[exetico]

That's great work!

You could consider to share the solution as a new comment (in the upper level), so other people can use the same logics 😊👍. We can also mark that as the answer.