Windy.com integration

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).

:tada: 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.

https://imgur.com/a/vElF2jU

5 Likes

That is an attractive website for sure with tons of information.

3 Likes

This looks super cool, but I can’t figure out how to embed that into my weather.com media tile?

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:

  1. Open Windy.com
  2. Open the left navigation and select the Embed Widget on Page option
  3. Adjust the position and options for the map to your liking
  4. 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>
    
  5. Copy only the value for the src attribute:
    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
    
    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 the src attribute.

    :warning: Important: Copy only the value for the src attribute. 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 the src attribute.

  6. 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