Switching between floors

[beniwohli]

Heya!

First of all, congrats on the new version of floorplan, amazing work!

Now, my house has 3 floors. Currently, I have arranged them next to each other on the SVG. However, especially on my phone, this makes the floors tiny and hard to interact with. I think I saw projects in the past that had some kind of a floor switcher. My plan was to add three elements to the SVG, with click handlers that show/hide the appropriate floor. Unfortunately, I haven't really kept up with Javascript since the days of jQuery, so I'm a bit stumped how and where I could add my JS code. I tried to embed it in the SVG itself, but there it doesn't seem to get executed. And adding it in the document root makes the SVG elements somewhat inaccessible behind a plethora of shadowRoots...

Any ideas how I could achieve this?

[exetico]

Hi

One take could be to just have three views, and just switch between them with a service-call to HA.

But I think @pkozul have talked about a way of handling multiple floors, but I need to check, if the first suggestion can't fit your needs :-)

[ahonxxx]

Needed Showing/Hiding Layers in Floorplan，How to write yaml and CSS，thank you 。

[vajonam]

Here is an example. This I use for an overview of the house.

type: vertical-stack
cards:
  - type: grid
    columns: 2
    cards:
      - type: 'custom:floorplan-card'
        full_height: false
        config: /local/floorplan/mainfloor.yaml
      - type: 'custom:floorplan-card'
        full_height: false
        config: /local/floorplan/secondfloor.yaml
      - type: 'custom:floorplan-card'
        full_height: false
        config: /local/floorplan/basement.yaml

[Alfiegerner]

Hi @exetico - very glad to see this get off the ground, awesome work.

In the old floorplan there was floorplan.class_toggle that I use to switch floors. It's currently missing from this implementation but it was a very easy way of hiding or showing SVG layers.

[Alfiegerner]

Hi @exetico - thanks for looking at this. The class_toggle from the original version would allow toggling of classes across multiple elements / layers, i.e. if the class was present, when clicked it would remove it, if not present, it would add it. This provided an easy way to switch between floors. Here's an example yaml config:

            - action:
                data:
                  classes:
                    - upper-layer-visible
                    - upper-layer-hidden
                  default_class: upper-layer-visible
                  elements:
                    - upper_entity_layer
                    - lower_entity_layer
                service: floorplan.class_toggle
              elements:
                - toggle_entity_icon
              name: toggle_levels

with .css:

#upper_entity_layer.upper-layer-hidden {
  opacity: 0;
  display: none;
}

#upper_entity_layer.upper-layer-visible {
  opacity: 1;
  display: inherit;
}

#lower_entity_layer.upper-layer-hidden {
  opacity: 1;
  display: inherit:
}

#lower_entity_layer.upper-layer-visible {
  opacity: 0;
  display: none;
}

I'm not sure how you'd achieve this using class_set - I think you'd need a class_remove as well but would be happy to hear any suggestions.

[exetico]

There's many ways of doing this, but maybe you should look at the style_set option?
#40 (reply in thread)

You can also create a custom function, and do something simular:
#48 (comment)

Else, I guess we should hear @pkozul about other suggestions. I can't really come up with other ways to do it, other than these two :-) It required a bit of code, but can be done quite easy.

[pkozul]

Hi @Alfiegerner

Good catch! Looks like we missed adding class_toggle as a service in the new, revamped version of Flooplan. We've added it back in now, and it's available in v1.0.19.

https://raw.githubusercontent.com/ExperienceLovelace/ha-floorplan/master/dist/floorplan.js

I will leave it up to @exetico to release this version and get into HACS.

Let us know how you go with it.

[exetico]

👍 😄

Release: 1.0.19 - class-toggle and easy datetime-formatting

[Alfiegerner]

That's awesome, thank you @pkozul and @exetico . Also really appreciate the custom_function bit - will be very useful for me.
Cheers!

[amkochaki]

Hello. I'm also trying to manipulate (hide or unhide) the layers in the svg file, but unfortunately I'm not getting through with this version. My svg file is organized with several layers. I have layers that contain floor, layer that contains rooms and before I visible or unvisible each one, if anyone has any idea how to do this in this version I would appreciate it very much.

[exetico]

Have you checke the first answer including the suggestions? Else, It's very hard to help you out without details about that you've tried on basis of the other answer. Also, share both YAML, SVG and CSS will be helpful, too.

Images of how it's currently doing would also be a good idea to attach.

And oh: Remember to format it correctly, in the reply. Thanks 😊

[amkochaki]

Thanks for your quick reply.

I'll try to explain it better with a very simple file: I have an svg file with two layers called page1 and page0. On page1 I have a rectangle with id: toggle_button and on page page0 I have any rectangle. I want to click on the rectangle with id: toggle_button and make the layer page0 visible or hidden. I tried this in this version but nothing happens, the page0 layer is not visible. There is also no error log.

here is yaml file:

show_side_bar: false
show_app_header: false
image: /local/floorplan/examples/home-multi/layers.svg?v=1.0.23
stylesheet: /local/floorplan/examples/home-multi/layer.css?v=1.0.23
log_level: info
console_log_level: info 
defaults:
    hover_action: hover-info
    tap_action: more-info
rules:
        - name: buttons
          elements:
            - toggle_button
          state_action:
            action: call-service
            service: floorplan.style_set
            data:
              elements:
                - page1
              classes:
                - layer-visible
                - layer-hidden
              default_class: layer-visible

Here the ccs file:

.layer-visible {
  display: initial !important;
 fill-opacity: 1 !important;
}
                    
.layer-hidden {
  display: none !important;
 fill-opacity: 0 !important;
}

And here is xml of file layers.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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="svg4524"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   sodipodi:docname="layer1.bak.svg">
  <defs
     id="defs4518" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-391.42857"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="page1"
     showgrid="false"
     inkscape:window-width="1680"
     inkscape:window-height="987"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:document-rotation="0" />
  <metadata
     id="metadata4521">
    <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 />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="page0"
     inkscape:groupmode="layer"
     id="page0">
    <rect
       style="display:inline;opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.0480341;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.866667"
       id="toggle_button"
       width="87.742432"
       height="86.986488"
       x="22.249584"
       y="11.222687"
       inkscape:label="toggle_button"
       mask="none" />
  </g>
  <g
     inkscape:groupmode="layer"
     id="page1"
     inkscape:label="page1"
     style="display:inline">
    <rect
       style="display:inline;opacity:1;fill:#800000;fill-opacity:1;fill-rule:nonzero;stroke:#808080;stroke-width:0.0451852;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.866667"
       id="toggle_button2"
       width="75.672508"
       height="89.251846"
       x="113.74599"
       y="10.46798"
       inkscape:label="toggle_button2" />
  </g>
</svg>

[OzGav]

Yes you do need to make sure that there is nothing in that top layer that is overlaping the ones below. If you have the buttons off to the side it should be fine. Make sure the buttons are only as big as they need to be (ie don't have a huge rectangle with a small icon in it)

[OzGav]

You can select your elements in Inkscape and set the stroke to a visible colour so you can see where it is and how big it is. Having one set of buttons in the top layer is fine.

[OzGav]

Your yaml looks ok but here.is a slightly simplified version to save a couple of lines. If you can name the element the same as the entity you can save that line. Call service is the default action so you don’t need that line.

            - entity: light.abbys_lamp
              state_action:
                service: floorplan.image_set
                service_data: /local/floorplan/examples/home/lamp_${entity.state}.svg
              tap_action: toggle

[aparker21]

I figured it out! A friend pointed me to jigsaw.w3.org to validate my CSS code and it found that I was missing the 'd' in 'display' somehow in two lines. So I added the necessary 'd' and voila!!! Fixed!!!

I don't know how those two letter d's were missing ecaue the code I copied has them. . . they just didn't paste in correctly. . . strange. . . . goes to show that even when you copy and paste you still have ot double check everything!

[aparker21]

Thank you soooo much for the advice on the .yaml cleanup. . . that will save a lot of lines over time. . . I will be implementing that for sure! Your help is very much appreciated!!!

[vajonam]

also make sure you can toggle the floor using a class on the chrome dev tools. then look to hook it up in HA.

[aparker21]

I don't even know how to use chrome dev tools. I have the ability, just not the experience and I'm sure that is more involved than a simple reply here. I'll check on youtube for some tutorials.