Widget to show html information from windy.com

Hi, I’m not sure if this is possible, but I was wanting to add a widget to a weather station dashboard showing forecast etc from windy.com
Here is the example they give to copy the html for it to display.
Windy: Wind map & weather forecast
Is this possible to bring into Tago? I’m assuming a custom widget would be required, but not sure where to from there? Any assistance would be greatly appreciated! Thanks.

Hi @sevils , it is possible
1 - enter the link Windy: Wind map & weather forecast

2- Configure the options and copy the code
Screenshot from 2021-01-08 09-36-30

3 - Replace the copied code in the code that I will put below, and save it as index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://admin.tago.io/dist/custom-widget.min.js"></script>
    <link rel="stylesheet" href="https://admin.tago.io/dist/custom-widget.min.css">
  </head>
  <body>
    <div class="root">
      <!-- paste your code below -->
      <iframe width="693" height="453" src="https://embed.windy.com/embed2.html?lat=-26.266&lon=-48.999&detailLat=-26.266&detailLon=-48.999&width=693&height=453&zoom=5&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
    </div>

    <script>
      window.TagoIO.ready();
    </script>
  </body>
</html>

4 - upload the file to Tago Files and copy the URL

5 - create a new custom widget and paste the link you copied
Screenshot from 2021-01-08 09-47-11

6 - save and your widget is ready

I hope this helps :slight_smile:

3 Likes

Fantastic! Works nicely, thanks for such a comprehensive reply, really helpful…

1 Like

Two more questions regarding this widget.

  1. Would there be some way to replace the lat & lng, to reference the client location? Perhaps the creation of a device with a location in the clients name to replace the default lat/lng in the html?

  2. I notice that although it works on the computer, it doesn’t on my iphone. I just get a “no data available”. This is both for TagoRun and TagoIo on the phone…

Hello, @sevils

1 - yes, it is possible, you have to create the Iframe dynamically and use the data that comes in the window.TagoIO.onRealtime

2 - This looks like a bug in the custom widget, we will solve it soon, for a temporary solution send some data to the variable selected in the Custom widget