Lovelace iFrame card: dynamic url

Configuration Frontend
1

I want to change the URL, which is shown on lovelace iframe card, dynamically.
I have a sensor that reads a value, this value needs to be entered in the URL field of the iFrame card.

1 Like
2

Same here! Any ideas to do this ?

3

You’d have to combine the iFrame card with a custom templating card. There’s 2 out there. 1 that uses Jinja and one that uses JS. Personally, I use the one that uses JS because the front end handles all the dynamic behavior. If you use the jinja one, it makes calls to the back end to handle the dynamic behavior.

4

Have found it, works very nice.

Look Here

5

For future people finding this topic from Google — Following petro’s suggestion, here’s an example of how I got this working:

Pre-requisite is to install the custom card JS component (I installed via HACS)

and here’s a lovelace card that defines two states as variables which can be passed into the string for the iframe URL src:

The defined entities are the sensors which are monitored for changes (if one of these change, the card refreshes)

type: custom:config-template-card
variables:
  LAT: states['sensor.gps_latitude_clean'].state
  LON: states['sensor.gps_longitude_clean'].state
entities:
  - sensor.gps_latitude_clean
  - sensor.gps_longitude_clean
card:
  type: iframe
  url: >-
    ${"https://embed.windy.com/embed2.html?lat="+LAT+"&lon="+LON+"&detailLat="+LAT+"&detailLon="+LON+"&width=650&height=450&zoom=10&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=default&radarRange=-1"}
  aspect_ratio: 120%
1 Like
6

Thank you so much. That worked great for me!