+7
Discuss

iFrame Tiles - working sites

Kevin1 4 years ago in Panels (dashboards) / Special Tiles updated by Derek Lindvall 3 years ago 36

Thought I would make a topic for known working sites for everyone to add to their ActionTile panels.  I'll start off with:

* fast.com - internet speed test

  -simple and works, just use fast.com

Image 5040


* windy.com - beautiful weather map with wind streams, radar etc

  -set the view you like, then use the top left menu at windy.com, select "embed widget in page".   When you paste into ActionTiles, delete the html tags so you end up with only the long URL between quotes following src=.  If you get this incorrect, ActioNTiles seems to embed ActionTiles site in the iframe tile instead.

Image 5041

Discuss

Thanks for sharing this, Kevin!

I'm excited to see what the community will come up with.


As Kevin mentioned, it's important to note that IFrame Tiles require Absolute URL. The URLs must begin with HTTP or HTTPS.

I have been using the fast.com as a URL shortcut for a while, which I have set to "Open shortcut in a dialog within the Panel", which I think I'll keep, as I don't think I want such a heavy iFrame loading automatically upon viewing a panel. The windy.com suggestion is awesome, though! 


I'll start testing other content that I currently display via a custom HTML wrapper (the LCARS one mentioned on the ST Community) around AT panels to see which ones work well within AT natively, which should give it a more consistent look & feel. Will post back here shortly.  

Alex, not getting any joy with the URL to the Simple Device Viewer Dashboard. It works fine as a URL Shortcut, but not as an iFrame. I get "graph-na04-useast2.api.smartthings.com refused to connect."


It is an absolute URL of the following form:  https://graph-na04-useast2.api.smartthings.com:443/api/token/{tokenid removed for privacy}/smartapps/installations/{smartappid removed for privacy}/dashboard/contact-sensors.

Let me know if you need the actual URL for testing and I can DM you.

Are you supplying the authentication token with your URL?

Why won't you add the actual contact sensor tiles to your dashboard?

Alex, yes, I just removed the token from the URL for posting to this public forum. It's one of those blind URLs with no security other than the secrecy of the URL itself. I know the URL is correct, because it is the same entry in My Shortcuts in AT:  it works when I add it as a URL Shortcut, but not as an iFrame. One clue is that it gets the same error if the URL Shortcut tile setting is "Open shortcut in a dialog within the Panel", but it does work if the setting is "Open shortcut in the same window".

Just included it here so you can examine it for what may be an issue in the newly introduced iFrame feature.

And yes, I have all of the sensors and other devices as tiles already in AT panels. I just like the dashboard view of all my ST-connected devices that the SmartApp enables. I have 130 devices and counting that ST knows about. Still getting to creating virtual devices for all the real devices that Alexa knows about but ST doesn't. The SmartApp-derived dashboard helps when I'm troubleshooting or considering the complete range of the devices I have--organized by device capability/type/class--so that I can more easily decide what to put into my AT panels. 

Greg, please send me the token privately. Let me confirm whether SmartThings is blocking requests for IFrames.

Alex, here's another one for you. I've created a small webpage that runs a live traffic view using the Google Maps API. (You can't do this without a small amount of script.) This requires a developer token, which is a billable resource, so I'll post the code snippet here with the token removed. (If you need to use mine for testing/debugging, let me know and I can send it to you privately.)

Again, the webpage loads fine as a URL Shortcut, but not as an iFrame in AT. The weird part is, it doesn't work on Chrome, Firefox, or Edge on my Windows laptop, or Fully on by FireHD tablet. But just as I was giving up on it, I saw it running just fine in Fully on my cheap Chinese tablet running Android KitKat 4.4.2. Very strange!

The HTML code is attached.


traffic2.html

Greg, some sites specifically prevent calls from IFrames. Many Google services in particular don't allow to be embedded.

+1

https://www.clocktab.com


Works really well for a nice time and date widget type tile in the iFrame

I like the clocktab.com 

Thanks for the share!

Use this! It is amazing with AT

https://www.windy.com/-Embed-widget-on-page/widgets?32.828,-111.789,9

Is there a way to pull in the server (dashboard) charts from Plex?

I like it!  Thanks for sharing

This isn't working for me.  Did you just create a new "Media" media GIF?

Windy's radar stopped working for me altogether last week. Anyone else have this issue? The module still works, but there is simply nothing on the radar any more....FWIW, I'm in Denver (USA)

I am in CO too and seems to be still working for me

how about if you switch it from wind to radar?

Radar, clouds, temp, pressure...all work.  I even went and checked on other devices - Chrome on PC, Android and iPad.  My primary viewer is Fully Kiosk Browser.  All works fine.  Maybe go back to Windy.com, ensure it works there and re apply the steps to get it into Action Tiles.

The "radar" works for me on the website, but not through the iFrame. I also have an issue that the iFrame does not seem to be updating, I need to Reload the panel for it to update. Any advice on that?

Please post which URL you used and what "media" you used like GIF?

what URL did you use?  and did you use media GIF?

I'm having this issue also, did you resolve this? I tried using just the HTTPS portion but still getting error. 

Are you using media GIF? for this?

Add the absolute URL in My Shortcuts (see above for guidance on getting it from Windy).  Then on your Panel, pick it from iFrame.

so you are making a shortcut?  It doesn't display it as a tile with everything else?

It shows up as an iframe. Try it and you'll understand...



Hi there apologies to bring up a new fram I am attempting to integrate an Octopus Energy agile tile into my action tiles but just get a white screen with this one ?

can anybody help this is link i want to bring in 

http://hampton.org.uk/octopus/current/?region=F

+1

did you ever have any luck with this?  It just shows up as a grey page when I try this.

I am also interested if you ever managed this, thank you

Anyone had any luck with IFrame for www.AirNow.gov?

Here is the link to use. https://gispub.epa.gov/airnow/index.html.

Very cool site, and helpful, especially right now with the fires.

Customize you map.  https://www.airnow.gov/custom-airnow-maps/defining-your-map-area/

Add widgets.  https://www.airnow.gov/aqi-widgets/

I'm still trying to figure it out, but google calendar looks good when embedded in iframe. I create a link with settings, integrate calendar. I take the link (not iframe), and add some stuff I get from customization for iframe and come up with this effect. It refreshes when I switch between panels, but not live.  (EDIT: I noticed that not on all devices it shows the task in calendar... not sure why, but it may be a bug at google, or me not understanding I need to be logged into my calendar, even if it is shared).

Also in Poland we have a very nice weather forecast (meteo.pl, available in English as well, but only for central Europe) in form of a graph of different aspects of weather (temp, percip, clouds, winds, etc). I use the link for graphics to get something like this (https://www.meteo.pl/um/metco/mgram_pict.php?ntype=0u&row=459&col=220&lang=pl)

Apologies ahead of time for the basic question, but I don't have much of a coding background and am new to iframes.

I have embeded a web page that has daily meditation readings. I created a Shortcut and added it to an iframe tile. It all works fine with just the web page url, but is there a way to add tweaks like 'width' to the url shortcut so it displays without having to scroll?

John, you can increase the size of your tile to desired dimensions. Go to Panel Builder, select your Tile, select Tile Settings and update properties.

I really appreciate everyone's submissions and suggestions:  I am able to get my sites displaying in IFrames, but there is no refresh option and I have to manually "reload" the parent actiontiles page (or right-click on the individual iframes, and choose reload).  Does anyone have any suggestions for injecting javascript or any other way to keep the iframes up to date?  I have the windy widget (along with others), but it never updates.  Thank you!

There's no option to reload the iFrames on demand, however, you may want to use to Auto Reload option to refresh the page periodically. The option is available under App Settings.

Please give details on how you got this to work.