Update for the new Lovelace UI about homeassistant-iframe-card

[covrig]

Let it go and enjoy your day. 👍
I will take a look in a day or two and fix it. It is tricky to solve it using my phone.

[covrig]

I am away for a longer holiday. It is a bit hard to update/debug it on my phone.
Having a fast look, it seems you are not far from having it right. It looks like something small. Did you clear the browser cache? What kind of errors do you get in the console?

[arsaboo]

I get
2018-06-20 14:02:28 ERROR (MainThread) [frontend.js.latest.201806190] https://bla.duckdns.org/local/custom_ui/state-card-iframe-exp.html:80:19 Uncaught SyntaxError: Unexpected token : but I copied that from other card.

[covrig]

Try converting all functions from e.g. _computeStateObj: function(config, hass) to _computeStateObj(config, hass). Also double check the brackets and parenthesizes throughout the code.

[arsaboo]

No errors, but it still does not work

Pushed the latest update to Git.

[covrig]

Are you sure you defined the sensor/cleared the cache again? Maybe you forgot to add the -exp somewhere?
e.g.

  customize:
    sensor.iframe:
      custom_ui_state_card: state-card-iframe-exp

[covrig]

Or maybe change the name of the function in one of the files. They might clash since you want to use 2 custom files with the same function name.
So... update everywhere Iframehass to e.g.Iframehass-exp.

[arsaboo]

Ok...there were some unexpected , errors that I got rid of and updated Iframehass to IframehassExp (updated the file on Github). Now, I am getting:

2018-06-20 14:31:01 ERROR (MainThread) [frontend.js.latest.201806190] https://bla.duckdns.org/local/custom_ui/state-card-iframe-exp.html:84:21 Uncaught TypeError: Cannot read property 'attributes' of undefined

[arsaboo]

Here's line 84 https://github.com/arsaboo/homeassistant-config/blob/master/www/custom_ui/state-card-iframe-exp.html#L84

[covrig]

I see some new lines that were added between line 66 and 86 and a second function _computeStateObj. Are you sure you need to do that? If yes, try:

• For both functions delete the brackets (e.g computed: 'computeConfig(hass, stateObj)', changes to computed: 'computeConfig').

• I am also not sure about the content of the brackets. Maybe (config, hass) should be (config) and (hass, stateObj) only (stateObj).

I also see that somebody else is working on the polymer git.

[covrig]

I really don't think you need the _computeStateObj function.

[arsaboo]

2018-06-20 15:20:13 ERROR (MainThread) [frontend.js.latest.201806190] https://bla.duckdns.org/frontend_latest/app-962f5a440f2d8fbce28b5fc705ad2e27.js:2:98504 Uncaught Error: Malformed computed expression 'computeConfig'

with

class IframehassExp extends Polymer.Element {
  static get is() { return 'state-card-iframe-exp'; }
  static get properties() {
    return {
      hass: Object,
      stateObj: Object,
      config: {
        type: Object,
        computed: 'computeConfig (stateObj)',
      },
    };
  }

  computeConfig(stateObj) {
    return stateObj.attributes.config;
  }

[arsaboo]

Changing to computed: 'computeConfig', does not help either. I get

2018-06-20 15:22:12 ERROR (MainThread) [frontend.js.latest.201806190] https://bla.duckdns.org/frontend_latest/app-962f5a440f2d8fbce28b5fc705ad2e27.js:2:98504 Uncaught Error: Malformed computed expression 'computeConfig (stateObj)'

[covrig]

Clear your cache. It looks like a cache issue.
computed: 'computeConfig', should be sufficient.

[covrig]

Or keep it as in the original file:
computed: 'computeConfig(stateObj)',
and then

  computeConfig(stateObj) {     
    return stateObj.attributes.config;
  }

You had a space before in your expression.

[arsaboo]

No error, but the card won't show up. May be we need to embed the new card logic here

[arsaboo]

Using the may be.

[arsaboo]

So, I updated it to this. The card shows, but it is empty

[covrig]

Hmm.. The other one shows up or no?
Maybe the javascript version is interfering.
Try this format of URL:
http://localhost:8123/states?es5
or
http://localhost:8123/states?latest

https://www.home-assistant.io/components/frontend/

[arsaboo]

The regular one is working fine. I did not touch that.

[covrig]

I suspect the javascript version is the problem now.
Try this:

  extra_html_url:
    - /local/custom_ui/state-card-tiles.html
    - /local/custom_ui/custom-weather-card.html
    - /local/custom_ui/custom-weather-animated.html
    - /local/custom_ui/state-card-iframe.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-tiles_es5.html
    - /local/custom_ui/state-card-iframe-exp.html

BTW. Are you running on the latest version of HASS (developer)?

[arsaboo]

Still blank. I suspect, it is how the <ha-card>....</ha-card> is defined. But, I am not able to figure it out.

[covrig]

I checked a bit this lovelace thing (on my phone) and it seems the iframe card should work as it is. No changes should be needed.
This example might help:
https://gist.github.com/balloob/d86afbecab97b34f9eaeb33b0c0be424

[arsaboo]

I tried (with the existing card), but it does not work. Here's my card:

      - type: 'custom:state-card-iframe'
        entity: sensor.iframe_windy_exp

Sensor:

  - platform: template
    sensors:
      iframe_windy_exp:
        value_template: iframe

Customize.yaml

     sensor.iframe_windy_exp:
       custom_ui_state_card: state-card-iframe
       config:
         height: 350
         width: 108
         scale: 1
         url: https://embed.windy.com/embed2.html?gust,32.487,-84.023,6

When I see the card in the regular UI, I see the windy image. However, in the lovelace UI, the card is not rendered. I see a blank space there (above the Ring group). I think there is some minor modification required for the card to be visible.

[covrig]

I will take a look tomorrow. I've seen 0.72 is online.

[covrig]

I have something for you. However, it depends on your needs and it isn't that easy to implement. Old custom UI stuff don't play well with lovelace.

Question: Do you need only an iframe or an iframe+some sensors on the same card? Let me know what do you think and what would you want more.

For now I have a have a simple iframe card with an optional title and height. Some work might be needed for the scaling part on some websites (will work a bit more once I have more time).

Take this example as a reference:
https://gist.github.com/balloob/d86afbecab97b34f9eaeb33b0c0be424

this is the card type (title is optional, height is recommended):

  - type: "custom:lovelace-iframe"
    height: 550
    title: Test
    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=-1

The custom card you will find it in the git (iframe-lovelace.html) + a few more descriptions.

[arsaboo]

For now, I will be happy with a simple windy.com card.

[arsaboo]

Excellent...

      - type: "custom:lovelace-iframe"
        height: 350
        url: https://embed.windy.com/embed2.html?gust,32.487,-84.023,5

Totally works...thanks a ton. You should submit the iframe-lovelace.html as an official card.

[covrig]

If you find any bug or have any suggestion let me know. I will try to submit it as an official card... if they agree with this iframe stuff.

[arsaboo]

Can we have a default height so that we can make it an optional field? Most cards in lovelace do not require such configuration.

I mentioned this briefly to Paulus and he indicated that it could be a separate card. You can ping him

[covrig]

The Iframe has a default height but most of the time it doesn't fit with the needs of the user (in other words, it is a bit tricky since Iframes need some adjusting to fit the content).
I would say it is a nice option to have since each iframe is different and there is no standard size (I added a few more settings on the title).
If needed I can work on automatically calculating the needed iframe height, but let's see first how the Lovelace things develops.