Is there a way to overlay an iframe i.e. with other cards?
To explain what I’m asking for:
Assumed the blue Home Assitant in the background a displayed iframe.
The red ribbon should be displayed above the web site conditionally.
Use Case: I want to have a dashboard displaying a slide show and sometimes some sensor information shoud be overlayed.
You can do it by picture elements card (add an iframe card as an element).
But the initial goal can be probably achieved by a different way, like a conditional background made with a card-mod-theme.
Hhm. Background should be the iframe with i.e. www.google.de
Tried with picture element card, but failed.
type: picture-elements
image: /local/images/HA-Kachel.png
elements:
- type: iframe
url: https:/www.google.de
I assume, I missunderstood your idea?!
Only custom cards may be placed inside picture-elements.
Stock cards should be wrapped into custom:hui-element card.
And of course “style” (at least top, left) must be defined.
Try this:
type: picture-elements
image: /local/images/HA-Kachel.png
elements:
- type: custom:hui-element
card_type: iframe
url: ...
style:
top: ...
left: ...
Thanks! That’s what I was looking for.
Here is the code (for the website part):
type: picture-elements
image: /local/images/HA-Kachel.png
aspect_ratio: 105%
elements:
- type: custom:hui-element
card_type: iframe
url: http://url:8180
aspect_ratio: 105%
style:
top: 50%
left: 50%
width: 100%
- type: conditional
conditions:
- entity: sensor.hacs
state_not: "0"
elements:
- type: image
image: /local/images/HA-upgrade.png
style:
left: 25%
top: 24%
width: 50%
