Lovelace iframe using a sensor

[simonhq]

I have created a sensor that produces a google map url using a secrets and the device_tracker lat and long values, this sensor seems to work in as much as I have used the output to display the appropriate map in a iframe tester.

I then want to display this map in a iframe card in lovelace (https hassio & https iframe url) but it just brings up a iframe of the hassio lovelace frontend again (if you login you are looking at the same lovelace page inside the iframe).

is there a trick to this?

the code looks like the following

in secrets.yaml file (I have x’d out my google maps embed API key)

simon_map_key: https://www.google.com/maps/embed/v1/place?key=XXXXXXXX&q={{ states.device_tracker.sphone.attributes.latitude }},{{ states.device_tracker.sphone.attributes.longitude }}

in sensor.yaml file

- platform: template
  sensors:
    simon_map:
      value_template: !secret simon_map_key

in ui-lovelace.yaml file

- type: iframe
  url: sensor.simon_map
  aspect_ratio: 100%

Anyone know how to get this to display?

[petro]

I don’t think it can work. I think you’ll have to make a custom ui page that reads the url from the state of your entity. That url is expecting a url, not an entity and it doesn’t automatically resolve it.

[ciotlosm (Marius)]

Or just use map card

[gijbelsy]

I’m having the same issue.
Took a long shot by trying:

type: iframe
url: 'http://google.be/search?q={{ states("sensor.google_search_query") }}'
aspect_ratio: 50%
title: Google

Would love to see this implemented.

[toofewacres]

Anybody get this to work. I’m fairly new to HA but have seemed to get a lot of things working. But I’m not a coder by any means and the formatting/methods are quite foreign to me when it comes to jinga, etc.

I too am trying to get an Iframe card working with the url value pulled from a sensor attribute. I can used the template editor to figure out the correct way to pull the value from the sensor.

{{ state_attr(‘sensor.xxxxx’, ‘map_link’) }} and I get this value…

https://www.google.com/maps/search/?api=1&basemap=roadmap&layer=traffic&query=40.573318,-83.942628

But, I can’t seem to figure out how to use the template with the url: input for the iframe card. I’ve tried many variations and it just doesn’t pull in the value to the url: input… If I manually copy the value above, it display google maps just like I want.

[petro]

You’ll have to use the template card in combination with the iframe. Template card is a custom card.

iantrich/config-template-card

At the time of this post, template card didn’t exist. Now it does.

[toofewacres]

Thanks, I’ll take a look and see if I can get it working with this card.

[simonhq]

I got it working if anyone is trying to work it out, thanks for the pointer to the new card;

type: 'custom:config-template-card'
entities:
  - device_tracker.sphone
card:
  type: 'custom:hui-iframe-card'
  title: Simon
  url: >-
    ${'https://www.google.com/maps/embed/v1/place?key=XXXX='+states['device_tracker.sphone'].attributes.latitude+','+states['device_tracker.sphone'].attributes.longitude}
  aspect_ratio: 100%

[toofewacres]

Cool, I hadn’t got to it yet. I’ll try out your code when I get back home.

Thanks for posting.

[Dielee (Linus Dietz)]

Very nice! THANKS A TON!

[Alex_Eamonson]

Are there some other things we need to do to get this working?

I’m just getting a blank frame. I’ve installed hui-element which I assume is the right Lovelace interface for this card.

[Filipe_Goncalves (Filipe Gonçalves)]

Also can’t get this to work

type: custom:card-templater
card:
  type: iframe
  url_template: >-
    {{ states['input_text.url'].state }}
  aspect_ratio: 100%

it just shows the lovelace homepage inside that i-frame

that custom:hui-iframe-card doesn’t seem to be available anymore in hacs.

p.s. sorry for digging this up but thought it would be better than starting a new thread.

[Ildar_Gabdullin]

Try using config-template-card instead.

[justone]

Yepp this works like a dream
Wanted to see the music-map relations besides a media-player card to know when to manually interrupt in case the LMS does drift away from related artists with it’s dynamic created playlist.
If only I could think of a way to select one of the shown entries and force the LMS to rethink it’s strategy by playing a title of the selected artist. Have to think about that the next days if being possible.

thanks to the config-template-card and the card-mod only a few lines made this possible
and you need the media_player integration. the additional volume sliders are done using the mini-media-player. Didn’t use that for the primary one since I disliked the way it does the coverart thought.

a 5-liner in the configuration.yaml

template:
  - sensor:
      - name: "iframeurl"
        state: >
          {{state_attr('media_player.hifiberry', 'media_artist')|replace(" ","+",) }}

and a 12-liner for the lovelace card

type: custom:config-template-card
entities:
  - sensor.iframeurl
card:
  type: iframe
  style: |
    #root {
      height: calc(494px);
      padding-top: 0 !important;
      -webkit-filter: invert(89%);
    }
  url: ${'http://music-map.de/'+states['sensor.iframeurl'].state}

ok, granted it’s a quick hack for the css part …
the sensor turns the artist into the required string, replaces spaces by + and it’s used to catch the event when the next artist gets played so that the iframe gets updated
ok the page remainss blank in case music-map doesn’t know about an artist.
But since it took me a while grabbing ideas from multiple posts in here I wanted to share the result I ended up with today.

HA rocks