Hi
I’ve been playing around with windy.com and really like the display. Is there a way to have this in a tile somehow?
If I create a media tile and paste the url in I just get a broken image.
The site would have to provide a compatible image format to use with the Media Tile. From what I can tell, Windy.com only provides the live webpage (no images).
Edit: You can now embed other websites using the Custom Tiles feature. There’s even a nice Refreshable URL Embed custom tile that can be used.
One option would be to use the weather image from a different source in a Media Tile with the action set to ‘Hyperlink’ to open Windy in a modal. One quirk here is that you’ll have to use the URL from Windy.com’s embed feature - they block embedding the base windy.com domain directly.
5 Likes
That is an attractive website for sure with tons of information.
3 Likes
Which part are you having difficulty with? Can you explain what you’ve tried so far and where you are getting stuck?
If you already have a media tile added to your dashboard, you can edit that tile and set the action to ‘Hyperlink’ with the ‘Open in Modal’ option.
As noted above, Windy appears to block embedding their main domain into other pages, so you’ll have to use the URL from their embed tool.
At the time of writing this post, you can do this by:
- Open Windy.com
- Open the left navigation and select the Embed Widget on Page option
- Adjust the position and options for the map to your liking
- In the Embed this HTML code to your page section, you’ll see something like the following
<iframe width="650" height="450" src="https://embed.windy.com/embed2.html?lat=31.166&lon=-97.866&zoom=5&level=surface&overlay=wind&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=34.480&detailLon=-108.187&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe> - Copy only the value for the
srcattribute:
Note: You may find it easiest to copy all of the text from the “Embed this HTML” section into an app like Notepad so it’s easier to make sure you’re copying out just the value from thehttps://embed.windy.com/embed2.html?lat=31.166&lon=-97.866&zoom=5&level=surface&overlay=wind&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=34.480&detailLon=-108.187&metricWind=default&metricTemp=default&radarRange=-1srcattribute.
Important: Copy only the value for the srcattribute. Using the whole string of text from step 4 starting with<iframe...directly in the Hyperlink will not work. We need just the URL from thesrcattribute. - Use the copied URL as the hyperlink in your Media Tile or Hyperlink Tile
For some reason it takes me to a screen asking for my login information. This is what I have inputted:
But when I click on it on my Fire or laptop I get this:
Doesn’t matter that Im already logged in, or if I log in again.
Edit: Figured it out, had to remove the iframe part from the URL and just insert the HTTP (guess I should have read the full thread above!)
Did this exact procedure and it doesn’t show up. Tile is blank. If I copy the same URL and put in chrome browser it works. So the URL is correct
Can you please share a screenshot of the tile configuration showing the URL?
As mentioned in the post above, windy.com blocks embedding their main site, so you must use their embed feature and put in just the embed URL into SharpTools (not the iframe tag, just the part that starts with https://embed.windy.com).
Thanks for the details. It won’t work directly as the content of a Media Tile as it is a webpage and the Media Tile supports images like JPG, PNG, GIF.
The instructions above show how to use the Windy embed as pop-up from a Hyperlink action within either the Hyperlink Tile or in the Media Tile configured with a hyperlink action (and displaying something else like local weather)
1 Like
OK thanks, I thought it would work like an I-frame. I tried the hyperlink and it does work but its a pop up as you mentioned . I want it in the tile. Will look elsewhere other than windy.com
Following up on more use of Windy. I a using their embedding through Custom Tiles and it is working nicely. One thing that I want to do is have the tile auto-play the animation. Checking the Windy forum it is clear that this is not an option in the URL. However did post that they did this:
document.evaluate(
'//*[@*[starts-with(name(), "data-ref")]="play"]',
document,
null,
XPathResult.ANY_TYPE,
null
).iterateNext().click()
In my limited html experience it appears that they are essentially simulating the click of the play button. Is this something I could implement in Sharptools? Thanks.
I don’t see how that would work with their standard iframe version of the Windy embed as browsers treat separate domains as their own secure contexts.
I see that Windy also has a JavaScript API, so perhaps it could work with that. I was under the impression that the JavaScript API required licensing or only provided a limited subset of the data on the trial tier.
Hard to tell without the context of the rest of the thread you were reading as to how they were applying that script though.
Unfortunately there were no more details and the OP never followed up when people asked for details. But here it is in case it helps. It makes nice weather tiles and the auto play would also be nice.
Hi @simon ,
I’ve been messing with an iframe in a Custom Tile using Windy.com’s embed src URL … but I’m finding I can’t seem to adjust height using % (width does work as hoped). Using px seems to work, but I have a few different devices I was hoping to have accessing the same dashboard and so was hoping to achieve something slightly more dynamically filling.
Was wondering if you experience this all? For me, % means it will only ever be 1x high, which looks kind of weird in a 4 x 6 tile. 
[Update] Actually, I can approximate this by using per-tile size math for px count, close enough.
Damned shame about the inability to auto-play.