[RELEASE] iFrameAdvanced

Yeah I remember the same limitation, the place I worked for wanted to use it in a HR-related BI solution looking at the distance employees needed to travel to work, but the number of calls became prohibitive...

Using Google Maps I was able to get the iframe code and get it to work with your driver e.g.

iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d202603.49476584696!2d-122.293292937734!3d37.491886421080004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1654022728130!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">

I then entered the URL into your driver and it worked great showing the same map as above in HE.
https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d202603.49476584696!2d-122.293292937734!3d37.491886421080004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1654022728130!5m2!1sen!2sus

However, if you add directions and traffic e,g.
iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d202603.49476584696!2d-122.29329293773402!3d37.491886421080004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x808fcbc3fab3c59b%3A0xbcfa443f6df67e3e!2sNorman%20Y.%20Mineta%20San%20Jose%20International%20Airport%20(SJC)%2C%201701%20Airport%20Blvd%2C%20San%20Jose%2C%20CA%2095110!3m2!1d37.3639472!2d-121.92893749999999!4m5!1s0x808f778c55555555%3A0xa4f25c571acded3f!2sSFO%2C%20San%20Francisco%2C%20CA!3m2!1d37.6213129!2d-122.3789554!5e0!3m2!1sen!2sus!4v1654022979443!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">

and try loading the URL into your driver e.g.
https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d202603.49476584696!2d-122.293292937734!3d37.491886421080004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e0!4m5!1s0x808fcbc3fab3c59b%3A0xbcfa443f6df67e3e!2sSJC%2C%20Airport%20Boulevard%2C%20San%20Jose%2C%20CA!3m2!1d37.3639472!2d-121.92893749999999!4m5!1s0x808f778c55555555%3A0xa4f25c571acded3f!2sSFO%2C%20San%20Francisco%2C%20CA!3m2!1d37.6213129!2d-122.3789554!5e0!3m2!1sen!2sus!4v1654021996658!5m2!1sen!2sus

If fails to save with HE returning Error 500

Is there some limit to how long the URL can be in your driver that is causing HE to error out when saving?

Yea 1024 characters is the limit on preferences accross the hub, you can break it down to two on the page and join them in the driver

1 Like

Or use something like bitly

2 Likes

Winner winner chicken dinner. Using Bitly worked perfectly. I now have a Dashboard that shows real-time traffic for my commute from home to work. Thanks so much for the help!

1 Like

So how did you get the traffic on when i was playing i could only chang layers

This sounds like a useful topic for a separate thread....

@mbarone
Is there any chance you would be willing to look into having the page auto-refresh when using the iFrameLauncher option?

Error 500 using the following URL. Any sggestions?

https://radar.weather.gov/?settings=v1_eyJhZ2VuZGEiOnsiaWQiOiJ3ZWF0aGVyIiwiY2VudGVyIjpbLTc0LjU2Niw0MC42MDJdLCJsb2NhdGlvbiI6Wy03NC41NjMsNDAuNjAyXSwiem9vbSI6N30sImFuaW1hdGluZyI6ZmFsc2UsImJhc2UiOiJzdGFuZGFyZCIsImFydGNjIjpmYWxzZSwiY291bnR5IjpmYWxzZSwiY3dhIjpmYWxzZSwicmZjIjpmYWxzZSwic3RhdGUiOmZhbHNlLCJtZW51IjpmYWxzZSwic2hvcnRGdXNlZE9ubHkiOmZhbHNlLCJvcGFjaXR5Ijp7ImFsZXJ0cyI6MC44LCJsb2NhbCI6MC42LCJsb2NhbFN0YXRpb25zIjowLjgsIm5hdGlvbmFsIjowLjZ9fQ%3D%3D

500 usually means an error on the server side, i.e. the side of weather.gov. But that is more likely in how you have constructed the URL. Probably worth checking that first....

Found similar issue earlier in the thread that was fixed with bitly.com. Using bitly link bit.ly/45TUm8b eliminated the 500, however two issues remain:

  1. The generated iframe shows the page instructions not the radar map. Is there any way to adjust the positioning of the IFrame attribute?
    image

  2. The page's animation control is missing when the Iframe version of the page is displayed with the Show button.

Are you referring to the position of the attribute on the Device page, or the content it displays, i.e. is there a way to remove the instructions so they don't display on the dashboard? If it is removing the instructions, that will be something to investigate on what options you may have on the web site. Some sites have options to generate a URL to use when embedding their content, including options to turn various options on and off, etc.

Similar to my comment above, this may be something you can configure in the URL as some kind of embedding option.

I mainly want to adjust the icon attribute, IFrame, to show the weather map, not the instructions, although it would be nice to remove the instructions on the main content page. I've not found any page controls that eliminate the instructions text.

I've found by tapping the Refresh button on the displayed IFrame page the page's animation control shows on the screen.

When testing from the Devices page, then tapping the Show button, the left side of the displayed page is truncated, but works as expected when displayed from an actual dashboard.

I've looked at the app source and will try some things when I get the opportunity.

There are individuals having a difficult time trying to figure this app out. Any chance that you can create a user guide to the driver? The driver can either have a link to direct someone to the github or to this page.

You can update your initial post with the following information to help others or add it into the driver:

  • The link must be within 1024 characters or else an error will occur. The work around is to use an URL Shortener (Eg. Bitly).
  • "REFUSED TO CONNECT" ERROR Due to security policies, some websites have an HTTP Header that do not allow iframes. If the URL does not work, try seeing if they have an "embed URL" OR "widget URL" instead.
  • If you receive a 500 error when adding new link in the driver, it is not related to the iframe. Instead, look to see if you have a valid link.

I'm not sure if there are other helpful tips, but these are the top ones I can think of.

2 Likes

added to the first post, thanks for pointing these out. since they were limitations with hubitat (1024 characters) or general embedding/iframe issues i didnt add that to the post, but may help users who have never used iframes or run into cors issues before.

2 Likes