showing/hiding layers

[amkochaki]

Hello I am trying to hide or redisplay a layer but it is not working. Follow me code:

• title: layertest
  log_level: info
  badges:
  cards:
  - type: 'custom:floorplan-card'
  full_height: true
  config:
  image: /local/floorplan/examples/home-multi/layer1.bak.svg?v=1.1.14
  stylesheet: /local/floorplan/examples/home-multi/master.css?v=1.1.14
  defaults:
  hover_action: hover-info
  tap_action: more-info
  rules:
  - elements:
  - toggle_button
  name: toggles
  action:
  service: floorplan.class_toggle
  data:
  classes:
  - layer-hidden
  - layer-visible
  default_class: layer-hidden
  elements:
  - page1

on css file is:

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

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

I don´t know what is happen. May I fogot something?

[OzGav]

Hi,

Firstly could you edit your post and highlight all your code and press the button that looks like <> so we can properly see your formatting?

But just looking at what I see under data: that doesn't look correct at all. Have a look at the example here https://experiencelovelace.github.io/ha-floorplan/docs/example-home/
Also my description of how I use floorplan for showing and hiding objects is here https://community.home-assistant.io/t/floorplan-now-available-as-a-lovelace-card/115489/416?u=ozgav

[amkochaki]

Thank you for your quick return. The home example I made it work perfectly. What I need to do now is to switch between layers. I took some examples but none worked for me. My code below has a 2-layer svg file. One of them is page0 where the button is, the other is page1 which must be hidden or re-displayed after pressing the button "toggle_button". But I can not make it work.

show_side_bar: false
show_app_header: false
image: /local/floorplan/examples/home-multi/layer1.bak.svg?v=1.1.14
stylesheet: /local/floorplan/examples/home-multi/master.css?v=1.1.14
log_level: info
console_log_level: info 
defaults:
    hover_action: hover-info
    tap_action: more-info
rules:
    - name: Hidden button
      elements:
          - toggle_button
      action:
        domain: class
        service: toggle
        data:
          elements:
            - page1
          classes:
            - layer-visible
            - layer-hidden
          default_class: layer-visible

I call the file above in my ui-lovelce as shown below:

- title: todo
    icon: 'mdi:floor-plan'
    panel: true
    cards:
      - type: 'custom:floorplan-card'
        full_height: true
        config: !include lovelace/home1.yaml 

[OzGav]

Thanks. Firstly I am not sure where you are getting this code from. It doesn't look like anything which is used by this version of floorplan (I think you may have obtained this from the HA forum for a previous version?). Do you get a bunch of errors in the log at the bottom?

      action:
        domain: class
        service: toggle
        data:
          elements:
            - page1
          classes:
            - layer-visible
            - layer-hidden
          default_class: layer-visible

I can see that you could do what you are trying to do with the previous versions of floorplan but I am not sure about this one. @pkozul will be the one to know.

Regardless it might be helpful to share your SVG. Is each layer just a single image or does it consist of a bunch of objects?

If having a separate lovelace tab for each of your layers is a possible solution then you can certainly navigate between tabs by following this: https://community.home-assistant.io/t/floorplan-now-available-as-a-lovelace-card/115489/279

[amkochaki]

Hello, yes this code and other similar ones that I tested are from previous versions caught in the forums, but there is no error in the log when I apply in the current version of há-flooplan. The svg file is very simple, there are two rectangles in two layers. A layer with the name of page0 and another with the name of page1. In the page0 layer I have a rectangle with id toggle_button and the page1 layer is hidden in it is the other rectangle. The button's function would be to display the layer page1 with the other rectangle appearing. There is no error just does not work. I would like to see if for this version we would have a solution for that. If we have no solution, I will use the separate guide as you suggested.

[OzGav]

OK from what you have written above it doesn't sound like you need to show and hide a whole layer but just a single rectangle object in that layer. So first thing is you cannot have a random id of toggle_button it has to be a HA entity. You will need to create input_boolean.toggle_button. See here https://www.home-assistant.io/integrations/input_boolean/ I think also to track the state of the appearing and disappearing rectangle you will need another boolean so make one called rectangle_visibility

Once you have that done you will need to relook at your SVG. For the "button" this might need to be in the top layer of your SVG as you can't touch it if it is below other objects. Once you have the button in the top layer or off to the side then you assign that the ID of input_boolean.toggle_button and assign the rectangle that is going to appear and disappear input_boolean.rectangle_visibility

Now for the rules. I personally don't use the element tag (which you might have seen in the examples) so I am going to show how to do this with an automation. Someone else might be able to show how to simplify this just using rules.

    rules:
      - entity: input_boolean.toggle_button
        tap_action:
          service: homeassistant.toggle

      - entity: input_boolean.rectangle_visibility
        state_action:
          service: floorplan.class_set
          service_data: 
            class: '${(entity.state === "on") ? "object_visible" : "object_invisible"}'

Add an automation of:

automation:
  - alias: Floorplan Rectangle Toggle With Button
    id: floorplan_rectangle_toggle_with_button
    mode: restart
    trigger:
      - platform: state
        entity_id: input_boolean.toggle_button
    action:
      entity_id: input_boolean.rectangle_visibility
      service_template: "input_boolean.turn_{{trigger.to_state.state}}"

CSS would be:

.object_invisible {
  visibility: hidden !important; 
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.object_visible {
  visibility: visible !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

In summary of what will happen above. You will be able to see the button rectangle and when you tap it it will toggle the state of input_boolean.toggle_button. When that state changes the automation will fire to make the state of input_boolean.rectangle_visibility the same value as input_boolean.toggle_button. When the state of input_boolean.rectangle_visibility changes the appropriate CSS class will be set to either show or hide it.

[amkochaki]

Thank you very much for your return. Yes, this works well in the case of a few figures. But I will have several figures and rectangles to control, and a way to organize all this would be to make each set of figures and a certain layer.

[OzGav]

It might help if you describe in more detail what you are trying to do. Typically Floorplan is used to provide a graphical way to interact with entities in HA. Having said that I will add two more ideas that may help you.
Firstly, what you can do in Inkscape is GROUP a number of objects together and then assign the HA entity to the group. Then all of those grouped objects will appear and disappear together.
Secondly, you don’t need to replicate the automation and the rules for each object. So don’t think the automations and rules will end up huge. You can just put a list of the entities in the one “rule” and multiple actions under the one automation. However, you would need multiple input_booleans , one to control each object. I keep all of this (input_boolean definitions and automations) in one “package” file which keeps it manageable for me. I might have close to 100 entities in my most complex floorplan, just build it up slowly!

I will try and contact @pkozul or @exetico and see if they have any other guidance for you.

[amkochaki]

I will explain what I would like to do, use a tab with a floorplan on it to have some access buttons to the rooms of my house. My house is like this

• First floor - common area
• second floor - rooms and balconies
  In this everything has several circuits of lamps and a lot of equipment that are controlled by automation.
  I would like to make a menu with buttons where by clicking on one of these buttons the floor or the room appears so that I can interact with the automation. There are a lot of items to control if I put everything on a screen it will get a little messy, so I would like to share.

[OzGav]

I think there are options but I think there will be one limitation that you need to consider. In the SVG if you have an object that can be clicked/touched then i am pretty sure it must be on the top of all other objects regardless of whether this is visible or not. I have invisible touch points and visible touch points and they both work the same way.
What you can definitely do is have images appear and disappear. Then those images might have data in them that are updated regularly (eg. A clock). These two things are relatively straightforward.
However, as far as I know, if you have your two floors appear in exactly the same part of the screen then any objects in the top layer will obscure the objects in the bottom layer and you won’t be able to click/touch the objects in the bottom layer.
I am pretty sure this is true regardless of whether the object is visible or not. I am not home for a few days so I can’t test this for objects marked as hidden. Certainly I have objects that can’t be seen (rectangles) but that is because I have specified no stroke or fill and they can be touched but I am not 100% sure what would happen if I made it hidden (my guess is it would make no difference).
You could try putting two rectangles on top of each other with different HA entity IDs and see if you can access the bottom one if the top one is marked as hidden.
If one object obscures another even if it is hidden then I think your only option is to use different floorplan views and jump between them. You can get a good effect by making the menu the same on the different screens so it will look like different layers are appearing and disappearing. The only give away will be the cursor under the menu bar at the top.
I hope some of this helps and I will be able to try some more things when I get home on Friday, if you need.