iFrame Tiles (web page embedding)

I see the utility of this, but have concerns.

I think we may be able to test and consider ways to do embedded iframes, but there are some serious security considerations.

I too would like to see this.

Please allocate VOTES 👍🏽 to the Topic, please, instead of just agreement comments.

Everyone gets a budget ration of Votes, so it is the best way for us to rank Feature Requests. Thanks!!!

I dont understand the budget of votes. There is no way I'd be able to see all the possible vote topics before rationing off the votes.

We encourage you to spend time browsing the Feedback forum in order to see what the range and diversity of ideas - before allocating Votes. (But you can go back and remove votes from one Feature if you change your mind and decide to allocate them to a more important Feature).

We want votes to only be allocated to Topics that are the most valuable to each customer. Just like a monetary budget, that ensures customers don't spend all their votes on ice cream before getting to the produce section of the grocery store. If everybody got unlimited Votes, then everyone would want everything. You'd have your ice cream, salad, meat, potatoes, ... and then cake and more ice cream. Now you've made me hungry! 😋

Right but when you are getting ice cream you have all the flavors in front of you. You can even sample them before you pick. You don't have to go and see and search a side menu to see those flavors. I get you want users to go to the feedback forum but the organization if setup where you have several areas to find things. I was just curious on the reasoning.

Are there risks to actiontiles beyond the individual user? Could this just be a tile with disclaimer?

Not sure yet... that's why we're not touching this until we fully understand the impact.

The risk is if the site you are putting within the iframe contains malware.  For the typical uses for actiontiles that case should be nearly zero and since most malware is Windows based most tablets would not be bothered by this anyway.

You can see an alternate idea based on automatic, scheduled screenshots of webpages in this new thread here...

http://support.actiontiles.com/topics/779-a-safe-way-of-displaying-non-interactive-dynamic-external-web-content/

Would be very nice to have! Could see my Wattvision graph.

I agree an I Frame would be ideal. I would like to pull a local weather applet in and my front door access logs.

This shouldn't be too hard to implement.

If I want to show simple bits of information in a panel, I wouldn't like to create static images and use the media tiles. Creating HTML output is very simple compared to creating images.

Have you checked out the features I put together that allow some basic paging of news, weather, stocks and calendar?  It's not the iFrame you're looking for but it's a start.  If your front door access logs can be accessed as an RSS feed you could actually use the news functionality for that... http://jggdev.com/category/atiles/

At least I have checked John's tiles. They are a great start but IMHO the wrong start. Since the ActionTiles panels are HTML and the tiles themselves are HTML it feels so awkward to convert text and numbers into images in order to be able to use them in tiles.

I would hesitate to call something that works (quite effectively, may I add...) "awkward".

Encoding arbitrary html content so that it can be safely and consistently rendered into a Tile is not a trivial problem.

Encoding it as an image is a clever and flexible solution. It may not be the optimal solution —indeed, we're likely to come up with various workable implementations and figure out what fits the architecture best — but in the meantime, we're super happy and grateful that John has offered this to our customers!

I totally agree that from a user's perspective it works and is great.

I was talking from a developer's point of view. It would be much easier for me as a developer to create a HTML snippet than an image. I'm not talking about arbitrary HTML content but content specifically created for ActionTiles.  

Allowing users to just add any HTML as iframes would be a trivial implementation even if not optimal or perfect. If I want to have a 4x4 tile with an embedded Google front page in a panel, I could just try it out. If it didn't work, I wouldn't use it. Allowing iframes as tile content would perhaps feel like a dirty hack, but it would quickly and easily enable loads of useful content to be shown in ActionTiles.

The optimal solution would be a template that I could use to create "almost native" tiles, e.g.

<st-tile st-tile-width="1" st-tile-height="1" st-tile-type="Temperature Measurement" st-tile-device="MyCustomAPI" data-delay="1" data-height="105" data-width="105"><div class="st-tile-header"><h3>My metric</h3></div><div class="st-tile-body layout-fill layout-align-center-center layout-column"><div><span>My value</span></div></div><div class="st-tile-footer"><span>From My Custom API</span></div></st-tile>

For this solution, I understand that you'd want to design, document, test and tweak the API, which would take some time.

For iframe content, you could just do it, mark it as an experimental feature, see how developers use it and watch the ecosystem flourish. :-)

I appreciate your comment, Samuel; but we have a straightforward response:

At this time, ActionTiles must focus on the broad SmartThings consumer market; not "developers". The product is not, at this time, an "ecosystem".

Thanks Terry for the fast and straightforward response!

I'll keep checking (both as a user and a developer) if things change. ActionTiles is a cool product already as it is.

The thing is, it would be SO easy to implement and SO useful, that I can't figure out why there is any resistance to doing this.

Add your Votes, Mike ... Add your Votes. 😉

(And nothing is as easy to implement as you might think..., and 100 "easy's" still add up.)

iframes would allow other developers to create content for ActionTiles which could help your product be more useful and potentially drive more sales.

Yup: We never actually envisioned ActionTiles as being a "portal" for widgets of arbitrary data sources; but seeing the real-world Customers' clever uses of Image Tiles (such as the popularity of Weather, Traffic and other ideas) is inspirational.

Our primary focus is SmartThings Things ... though will hit an inflection point soon in non-SmartThings related Feature Requests.

Hi to everyone,

I'm new to actiontiles and I am just getting started. I would have an alternative idea to this kind of integration: often a smart home system already has a NAS in the house for backups, camera and other stuff (I use it to integrate xiaomi stuff and chromecast devices into ST). 

Is there a product (like a docker container) that calls up a desired webpage and periodically transforms it to a picture/gif that gets than viewed inside actiontiles?
So there would be no risk of html code to run inside actiontiles, because it would be just an image or gif, which you already support. This would be than made publicly accessible via the public dyndns that synology, qnap,... provide for free even with HTTPS connections.

I'm trying my best to find something, but for now i just found an MIT project that calls a docker via a manual call and makes a screenshot out of that https://github.com/mafintosh/docker-browser-screenshot

Some day I want to experiment with ImageMagick on my pi to convert text (from some useful script) to an image...

http://www.imagemagick.org/Usage/text/

The MTG (https://support.actiontiles.com/communities/12/topics/2992-fixed-see-answer-for-details-what-happened-to-jggdevcom-weather-news-for-media-tiles) tiles are generated using imagemagick.  It works well and isn't overly difficult once you grasp the basics.

I started creating media tiles using SVG. An example of a tile can be found (at the moment) at https://sahko.seuranta.org/bars.php

Source code attached:

bars.php

No, it doesn't show me nearby restaurants but local energy prices in a simple bar chart.

The cool thing is that you can have a large image and only show a slice of it in a tile. I'm using the bars.php example as an 1x1 tile in my panel, which leaves room to at most 7 bars. When I click on the image I can see rest of the bars if they are available.

Unfortunately, links don't work. I have a working SVG link in the image, but it cannot be clicked when the (whole) image is shown by ActionTiles.

Interesting work, Samuel; thanks for sharing.

A generated image from a web page will certainly be extra justification for this Feature Request to allow Media Tiles to be Shortcuts to some particular website; i.e., such as the full site you are using as the source for the generated image.  https://support.actiontiles.com/communities/12/topics/3872-allow-information-media-tiles-to-act-as-shortcut-tiles

This is a copy of a comment I posted on the SmartThings Users Group in a thread about IFRAMEs.

"Currently the absence of named window targets for URL shortcuts, and XSS restrictions severely limiting what tricks can be played using 'javascript:' URLs, makes working with frames a bit messy in ActionTiles. I have to load panels inside individual frames in a frameset and have ActionTiles refresh the whole document via 'javascript:' URLs to do what I want it to do (which is basically to replace a tileset with bus arrivals information temporarily - it's only of interest some of the time).

"I'd really like to be able to use an iframe within ActionTiles to allow me to have an area of screen I can target URL shortcuts at. Much of the time I might want it to display a tileset or a panel, but I'd like, for example, to be able to click on a URL shortcut tile and have it display bus arrivals information. Ideally I'd like to be able to add URL shortcuts as actions to existing information only tiles as then I could click on a presence tile and show a location map of where someone actually is, or click on a motion detector and see a live video, or click on a temperature and get a weather forecast, or click on a clock and get a calendar. I don't need this information on my panel all the time, but if I do want to see it I want it to appear as an integral part of my panel rather than having to mess around with popup windows or completely separate browser windows."

Now to see how I've allocated my votes ...

I have to load panels inside individual frames in a frameset and have ActionTiles refresh the whole document via 'javascript:' URLs to do what I want it to do (which is basically to replace a tileset with bus arrivals information temporarily - it's only of interest some of the time).

Having said all that, things have moved on. I still use a frameset document, but only to load a single panel in full size frame, and only so I can set the viewport width and scale so I can design panels for a single tablet screen.

Everything else is now done using ActionTiles with the assistance of a short helper JavaScript. Basically a simple implementation of iframes and URL Shortcut targets with the most gentle of tweaking of the DOM in a way that shouldn't have any affect on the ActionTiles code. 

Just thought I'd mention another usage case that I've found particularly handy when playing with my iframes. That is to hide tiles that I couldn't give a monkey's about most of the time while still being able to view them with a flick of my finger without any delays for refreshing. 

In my case I have six switch tiles displayed in a panel in a 3x2 iframe. The panel also includes the associated power usage tiles which are rarely of interest. So when I do want to see them I just scroll the iframe to bring them into view.

Obviously this could be implemented natively without iframes but I'd imagine it is something of an edge case.

PLEASE do this. It would be wonderful to embed my ToDoist list and other interfaces into ActionTiles and finally use one interface to access the things I use to manage my life and household. 

was iframe support ever added?  I wanted to try to add a really cool weather radar but it uses an iframe to work. thanks

When a Feature is added or Bug is fixed, the Status of the Topic will indicate it. There's no need to ask for an update.

However, we welcome a comment of the full URL of the weather radar for us to help consider as an example use case.

Thanks,

...Terry.

iframe src="https://maps.weerslag.nl/GratisRadar/1143/1000/verwacht?zoom=8" scrolling=no width=500 height=500 frameborder=no>

I would love to embed this url, but no luck so far.. 

No luck with following link

https://maps.weerslag.nl/GratisRadar/1143/1000/verwacht?zoom=8

David, I had no problems creating an IFrame Tile using this URL. Please open a ticket with support if you are not able to get it working.

Hi, got this to work. I was under the assumption it would display as media, not a link tile. Without a autorefrshing view directly into the panel, but as a link you have to open first, it's pretty much useless to me. 😕

When you add your iframe to a panel, you have to add it with the IFrame option under the Add Other Tiles.  When I created the IFrame shortcuts, I named them "AIFRAME: XYZ" so they would be at top of list and so I would remember that it was intended to be added as IFrame.

I found that if you haven't already created the shortcut for the iframe and instead use 'add shortcut' you end up with a shortcut tile instead of an iframe tile.

Fix staged.

Hi Alex ,

Not sure what I'm missing .

I added an iframe object , then create a link the asme as above link .

This gave me an icon of link and not embedded the link on tile like in your picture .
What am I missing ?

See my response to @David, you have to add it as IFrame

Thanks 

Strange . Now that I add the tile the same way as I did before (add  Iframe )
it show me the website as expected .
Maybe I should have created the link before and then add it as an Iframe .
Anyway I tried another site which should give me the live map of waze and 
it give me this error on the tile itself:
www.waze.com refused to connect 

I think I got it .

I used the embedded link 

https://embed.waze.com/iframe?zoom=16&lat=32.277644&lon=34.919297&ct=livemap

I will play a little with the zoom and tune it 

Thanks 

Zvika, there was a bug when IFrame was created from shortcut on the fly. Fix will be deployed shortly.

Excellent. I look forward to possibly being able to retire the script I've been using for the last sixteen months or so, and also to being able to use bigger IFRAMES.

I do notice that you only offer a choice from URL Shortcuts. In my experience a really useful thing to be able to do is to load a panel in an iframe and scroll it up and down to reveal less interesting bits. In my case I show virtual room status tiles which tell me if anything is switched on. I can then scroll to access the actual switches. I haven't tested but I suspect I may end up with a double gutter around the panel.

The other thing I do with IFRAMES is click on a tile to change the source on the fly. So for example I may be displaying weather information most of the time but want to flip to my bus arrivals temporarily. I shall have to see if I can still make that happen.

UPDATE 24th May: The iframe tiles don't seem to work on shared panels. The iframe doesn't have a 'src'.

The IFrame bug for shared panels was fixed the same day.

Hi Alex, thank you for implementing the iFrame feature ! I have tested with an "embed URL" whicj, if I open it in any browser works fine but in AT it only shows a "Link tile" and not the conten ts of the iframe. The URL I used is :

http://192.168.1.245/picture/9/current/?_username=admin&_signature=f6a13dcff0dbb7e4f01ecbd85d2cf8076ba537ea

and is an embed URL from a live camera. Also in AT when adding an iFrame you cannot specify the size or should that be done in the URL ? Thx for your feedback ! Tony

@Alex ... Any comments on this issue ?

That sounds like the bug which occurred when creating the shortcut for the iframe on the fly rather than using an existing shortcut, resulting in a shortcut tile rather than an iframe tile.

The bug has been fixed and I assume has now been deployed.

The size of the iframe is in the tile settings once you successfully create one.

Unfortunately not. I added an iFrame with URL : http://192.168.1.245:8082 which when opened in a brower gives the correct result (streaming URL) but in AT it only gives this :

Does it work in an iframe outside of AT?

Yes it does on an Apache 2 server for example ...

Hi Tony,

What does the URL serve? Some content may not be embaddable into an IFrame and some sites or servers block such requests.

It's an iFrame that contains a stream from a camera. The URL works fine in any browser and I also tested it on an Apache web server. The iFrame does nicely give the actual stream of the camera. See below : 

I had this same problem trying to use some grafana panels from a local server. I'm wondering if it has something to do with the fact that the content is on your LAN as opposed to the internet

Totally makes sense ! So I added an URL to an iFrame that points to a port forwarded internal URL. It works in any browser on any device .. EXCEPT for in AT ... Gives me a black tile.

Hello Tony,

i had the same idea.

I am searching for an solution for my ESP32 with my local IP:  http://192.168.178.36/ 

Which port do you forwarded to the internal URL?

i didn´t understand why i cannot use an internal IP-Adress. ... This cannot be an securityproblem?

Thank you, Stephan

Port forwarding options depend on your local ISP (what ports are open/closed) ... You cannot use an internal IP address because AT is Internet based and does not have access to your local network.

Hello Tony,

in germany i have an FritBox from manufacturer AVM.de and I can give the ports free myself.

First i thought that the problem is the internal IP, but why can I show my Webcam over the internal IP:  http://192.168.178.100:81/mjpg/ESP32-Cam-135/video.mjpg ?

I wonder if it's a "mixed content" kind of issue. Perhaps mixing HTTPS and HTTP content.

This must be it. I did not know you couldn't do that. My Grafana server is configured for http. I will give that a try.

This was my issue. Fixed it and now it works beautifully and loads very quickly to boot. Thank you for doing this. It opens up a huge number of possibilities and extends the capability of Actiontiles greatly! 

This was my issue.

So, you updated the server to serve over HTTPS? Was this the only difference?

Yes. All I did was switch from HTTP to HTTPS and it works now. I did not know you could not do that. Thanks to you and Orange Bucket for the help!

I'm wondering if it has something to do with the fact that the content is on your LAN as opposed to the internet

Traffic from local server or cameras is not routed outside your local network.

code.txt

I checked the code i loaded on the ESP32 and there was a link to fontawesome with https.

I commented it out but it doesn´t work anyway.

Maybe you could look at the code (how can i show code her in the text?)

Thank you, Stephan

Tony, there was a bug about creating an IFrame while creating a shortcut on the fly. It's been fixed and deployed.

Apparently still does not work for me Alex ... See message above. Also, when creating an iFrame it shows me a list of shortcuts, not iframes (different logo </>) This list seems to show shortcuts and not iframes ??? Thx for your support !

@Alex - was this intended to go to beta site/forum?

No, this is a soft lunch. I just wanted to let it be out in the wild, since this is a super low impact feature.

Do we need to use the full <iframe src="https://www.cnn.com"> syntax or just a URL? Somehow, using cnn.com as an example, I got the My Panels list (see attached).

Never mind. I got it working with just the URL.

Yes, you need the absolute URL, otherwise it's interpreted a sub URL from the root of the app.

@Alex ... I undesrtood the issue may be the display of mixed content http/https. In the (old) Intrenet Explorer you can choose to enable mixed content. When I do this then I get this effect. The iFrame does not display the content but seems to "download" the content ?

Hello,

i made an Arduino-Projekt here local: https://randomnerdtutorials.com/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide/

This Project is local reachable with this URL:  http://192.168.178.36/

I testet this URL with MyShortcut and implemented it in my actiontiles-Panel as URL and as iFrame.

Both did not work.

Any ideas?

Thank you, Stephan

You cannot point to an internal IP address. You will need to set up port forwarding ...

As i wrote as reply to your other post i didn´understand that:

>>First i thought that the problem is the internal IP, but why can I show my Webcam over the internal IP: http://192.168.178.100:81/mjpg/ESP32-Cam-135/video.mjpg ?

I've seen a number of comments about pages not displaying in an IFRAME in AT, but being OK elsewhere. Might I politely suggest that it may be being overlooked that modern browsers do not permit mixed content. If the page is served securely (https) then the browsers will not load content that is insecure (http), and that includes in an IFRAME.

That's a very interesting point !!! Will try to make the iFrame also HTTPS ... Thanks !!!

I just had this idea as well. I will make some experiments.

I had this idea, too

But its not easy to install an SSL-certificate for my local network ...