Embed ha-floorplan inside of picture-elements

[sstarcher]

I would like the benefit of having picture element buttons on top of the SVG for ha-floorplan. Has anyone set up ha-floorplan inside of a picture-elements card? If so do you have an example as I'm having issues with sizing and positioning?

[OzGav]

Sorry I can't help but if you get it working please share it. Closest I have seen is people putting others cards around floorplan such as this https://community.home-assistant.io/t/share-your-floorplan/21315/707

[OzGav]

Should still work though. I have a view with a ha-floorplan and then two history-graph cards under it in a horizontal-stack

[sstarcher]

Yes, stacking is no problem. I'm not trying to stack things. I wanted things from picture element to overlap with the SVG. This is why I want ha-floorplan inside of a picture element card.

[OzGav]

As far as I know this is not possible. If you do get it to work though using some other extension please let us know.

[Herant]

Have you figured it out? I would also like to have things like graphs and other elements implemented in ha-floorplan, but it seems that it is not possible as things are now. I have looked through this series and he says that he has integrated ha-floorplan inside picture element but never says how he did it..

[OzGav]

I just had a quick look at his example github and it is a pure ha-floorplan custom card. Can't say for sure about his final layout you could try and contact him.

Graphs I don't really have a solution for but if you provide details about the "other elements" you are thinking about then maybe we can come up with a solution. For graphs I would look at maybe side bar view? https://www.home-assistant.io/dashboards/sidebar/

[DavidGtb]

is this what you want?

type: picture-elements
image: /local/floorplan/images/transparent.png
elements:
  - type: custom:floorplan-card
    style:
      top: 50%
      left: 50%
      width: 100%
    full_height: true
    console_log_level: info
    log_level: info
    config:
      image: /local/floorplan/home2.svg
      stylesheet: /local/floorplan/home.css
      defaults:
        hover_action: hover-info
        tap_action: more-info
      rules:
        - name: Rooms
          entities:
            - entity: switch.showerroom_light
              element: area.washroom
          tap_action: switch.toggle
          state_action:
            service: floorplan.class_set
            service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'
        - name: Temperature
          entities:
            - sensor.zm1_b0f8931d8ef7_temperature
            - sensor.livingroom
            - sensor.udestue
          state_action:
            - service: floorplan.text_set
              service_data: >-
                ${(entity.state !== undefined) ? Math.round(entity.state * 10) /
                10 + "°" : "unknown"}
            - service: floorplan.class_set
              service_data:
                class: static-temp
  - type: state-icon
    entity: light.zm1_brightness
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    style:
      top: 50%
      left: 50%

`

[OzGav]

Thanks. Can you just highlight your code and press the <> button to make it easier for others to read?