Deprecated: Iframe state card for Home Assistant

covrig · January 27, 2018, 5:19pm

I needed to display some iframes inside HASS for a small project. Maybe some of you are interested to use the code.
Please note that more work is needed (e.g. CSS is a mess, alignment, sizing etc.). Additionally, not all websites allow iframe embedding so don’t blame me for that.

joshluster · January 31, 2018, 2:57am

I feel like this could be really useful to create other components that would otherwise not be dynamic… Going to have to play with this some.

jrtaaffe · June 16, 2018, 11:59am

This is EXACTLY what I’ve been looking for! Thank you!

However, It doesn’t work for me when viewed on a mobile device. Is there something that I can do to resolve that?

covrig · June 16, 2018, 1:23pm

Does it work on your PC? If yes, you need to clear your mobile’s browser cache.

RobDYI · June 16, 2018, 1:35pm

Do you think this would work for putting a google map on the front end that I could interact with like change to satellite view?

I read the docs but it appear to work on only certain sites like youtube.

  customize:
    sensor.iframe:
      custom_ui_state_card: state-card-iframe
      config:
        height: 490    > in pixels, height of the iframe (more work needed)
        width: 108     > in %, width of the iframe (more work needed)
        scale: 1       > scales up or down the content of the iframe (it affects both the height and the width)
        url: https://www.youtube.com/embed/tgbNymZ7vqY    > url of the resource (**please note that some websites won't allow iframe embeding**)
    sensor.iframe2:

covrig · June 16, 2018, 1:50pm

Yes, no problem. You can embed anything you want (if the website allows iframe embedding). Google Maps has no problem with that.

RobDYI · June 16, 2018, 2:00pm

Do you know if / how I can get that link for a webpage I created? I used HA device tracker information to put pins in a google maps from past locations. “bread crumbs” I made a webpage from below that I point my browser to which is an internal webpage. It doesn’t offer that google map menu that you showed.

http://192.168.2.150/index.html

https://developers.google.com/maps/documentation/javascript/examples/marker-simple

arsaboo · June 16, 2018, 2:17pm

Love it…this is exactly what I have been looking for.

covrig · June 16, 2018, 2:46pm

You might have a problem with a thing called CORS (basically you can’t embed local files). However, it might work.
Depending on your application this might help you:

 map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        gestureHandling: 'greedy',
        disableDefaultUI: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
             style: google.maps.MapTypeControlStyle.DEFAULT,
             position: google.maps.ControlPosition.TOP_LEFT
        },
        center: {
            lat: 0,
            lng: 0
        }, 
    });

Play with the mapTypeControl options.

I also have a small git that does the device tracking thing.

jrtaaffe · June 17, 2018, 12:51am

It does work on a PC. However I have cleared the website cache on my mobile device with no luck. I’m also experiencing the same behavior on my mobile device through the Home Assistant native app.

To clarify, the i-frame is collapsed. It seems to ignore the height attribute perhaps?

covrig · June 17, 2018, 5:09pm

Paste here your customize/config part. Maybe you mixed something. Try to use the default values.
This happens only on your mobile?

jrtaaffe · June 20, 2018, 12:49pm

Correct. The problem is only on my mobile phone: an iPhone

After further checking, it appears that the problem is related to Safari. Nevertheless, here is my config and customize:

configuartion.yaml

##################

#sensor:

platform: template
sensors:
iframe:
value_template: iframe

#####################

customize.yaml
#####################

sensor.iframe:
custom_ui_state_card: state-card-iframe
config:
height: 400 #> in pixels, height of the iframe (more work needed)
width: 115 #> in %, width of the iframe (more work needed)
scale: 1 #> scales up or down the content of the iframe (it affects both the height and the width)
url: /local/weather/HASS_Weather.html #> url of the resource (please note that some websites won’t allow iframe embeding)

##############################

covrig · June 20, 2018, 5:15pm

Without a console log it is a bit hard to help.
Try to remove the comments after the values (e.g.in pixels, height of the iframe (more work needed)).

arsaboo · June 20, 2018, 5:45pm

@covrig Raised a new issue https://github.com/covrig/homeassistant-iframe-card/issues/1

tob · August 28, 2018, 10:18am

In lovelace-ui I’m getting this error in a red box:

i.setConfig is not a function

here my configuration.yaml:

frontend:

  extra_html_url:
  - /local/custom_ui/lovelace-iframe.html

and ui-lovelace.yaml

### TESTING ########################
  - name: TESTING
    title: TESTING
    cards: 
      - type: "custom:lovelace-iframe"
        url: https://embed.windy.com/embed2.html?lat=48.234&lon=8.598&zoom=5&level=surface&overlay=radar&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=48.234&detailLon=8.598&metricWind=default&metricTemp=default&radarRange=-12
        height: 700

any ideas?

tob · September 30, 2018, 5:38pm

still having no clue… ??

caffeinatedmike · October 11, 2018, 6:52pm

I’m having trouble getting this to work. After following the readme instructions the iframe doesn’t load. I just get a small blank group where the iframe should be

2018-10-11%2014_41_44-Home%20Assistant

When clicking on it I just seem the json of the settings

2018-10-11%2014_42_06-Home%20Assistant

What am I doing wrong? No errors are shown in the log.

I’ve done the following as per the readme

Copied state-card-iframe.html to /www/custom_ui/

Added path to frontend: in configuration.yaml

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-iframe.html

Added example customize entry to customize.yaml, only thing I changed was height/weight

sensor.iframe:
  custom_ui_state_card: state-card-iframe
  config:
    height: 240
    width: 352
    scale: 1
    url: https://www.youtube.com/embed/tgbNymZ7vqY

Added example group entry to groups.yaml, only thing I changed was I added text to the name field

group:
  group_iframe:
    name: 'US 1 at Old Lincoln Hwy'
    entities:
      - sensor.iframe

Added example sensor entry to configuration.yaml

sensor:
  - platform: template
    sensors:
      iframe:
        value_template: iframe

silvrr · October 11, 2018, 6:55pm

Why use a custom component with lovelace when it is built in.

covrig · October 11, 2018, 7:09pm

It could be the javascript version option (I suspect you need to change to ?latest). Also it could be the cache of your browser. Try clearing it. Also try another link to embed.
More info here or below.

javascript_version
(string)(Optional)Version of the JavaScript to serve to clients. Options: es5 - transpiled so old browsers understand it. latest - not transpiled, so will work on recent browsers only. auto - select a version according to the browser user-agent. The value in the config can be overiden by putting es5 or latest in the URL. For example http://localhost:8123/states?es5

caffeinatedmike · October 11, 2018, 7:43pm

No dice. Tried clearing cache and tried both ?es5 and ?latest

Any other ideas?