[RELEASE] iFrameAdvanced

I'm new to this so hoping someone can provide a more detailed set of instructions how to use this driver. Specifically, are only certain formats for the "iFrame URL *" field. My utimiate goal is to get this page WunderMap® | Interactive Weather Map and Radar | Weather Underground to show-up on my Dashboard

If I enter that URL into my Virtual Driver nothing loads

All I can say at this stage is that you are not alone, I saw the same behaviour when I attempted to create an iFrame device using the same URL, whereas I was able to access it through a browser normally. I'm not sure if the HTTPS would cause any issues... I'd like to think not... Perhaps there is something in the site setup that prevents it from being embedded in an iFrame....

This…

Generally a meta tag with one of:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

Edit: Looks like your site is using crossorigin checks in the JS to prevent loading.

2 Likes

Tried to put some google stuff in a frame, came up with the same issue

Thanks it does appear HTTPS is part of the problem as I took a local news site page and pasted URL and it didnt work. Removed the "s" and the iframe loaded so now I know at least the driver can work. My utimate goal is to get a google map to appear on my dashboard that shows traffic going from my house to work

1 Like

I would expect with Google they may provide you with a spot on the site where you can get the code to do the embedding in an iframe.

1 Like

You certainly get options to embed a map from the maps page (trust me, there is an option to embed, it just didn't get picked up in the screenshot)

I just don't know how to include live traffic.... Looks like there's some cool options on there.... Might even be worth a separate thread to this iFrame one...

When I was playing in that arena 10-12 years ago, the “cool” stuff required a developer key to get to the APIs, and you were limited to a few hundred accesses per day unless you went to the paid tiers.

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.