Overlay and position a card on top of a picture-elements

Configuration Frontend
1

I’m in the process of creating a floorplan but got stuck when trying to display a thermometer and a energy consumption meter…

Is there any way I can place a custom card on top of the picture-elements?

Would like to have something like this:

cards:
- type: picture-elements
  image: /local/background.jpg
  elements:
  - type: image
    entity: light.blaha
    style:
      left: 40%
      top: 20%
  - type: custom:flex-horseshoe-card
    style:
      left: 20%
      top: 20%
    entities:
      - sensor.blaha
2

Yes, with custom elements

3

If flex-horseshoe-card accepts the entities field, the configuration you posted should work out of the box.

4

lol

I started of with a built in card (weather) to get the positions right… and I couldn’t get that one to work at all.

Was a lot easier with a custom card. :smile:

5

built in cards need some extra voodoo to get working. Last I checked you needed custom:card-loader and you have to specify the built in card as the under the hood name. e.g. custom:hui-entities-card for entities card type

This info could be out of date because it’s been 6 months since I altered my interface.

6

Getting there…

Screenshot 2020-11-20 162612

1 Like
8

More info about how you did it please?

9

Something like this:

title: Tablet Floorplan
views:
  - path: floorplan
    title: Floorplan
    panel: true
    cards:
      - type: picture-elements
        image: /local/tablet/background.png

        elements:
        - type: conditional
          conditions:
            - entity: input_boolean.theme_tablet_overlay
              state_not: 'dummy'

          elements:
          - type: 'custom:flex-horseshoe-card'
            style: |
              :host {
                left: 75%;
                top: 25%;
              }
            entities:
              - entity: sensor.blaha
                decimals: 1
            show:
              horseshoe_style: lineargradient