Lovelace iframe using a sensor

Configuration Frontend
1

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?

2

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.

3

Or just use map card

4

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.

5

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.

6

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

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

7

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

8

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%
3 Likes
9

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

Thanks for posting.

10

Very nice! THANKS A TON!

11

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.

12

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.

13

Try using config-template-card instead.

1 Like
14

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.

Screenshot 2023-01-02 221057

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

2 Likes