# WeatherFlow Widget for iOS/iPadOS 14

**URL:** <https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497>\
**Category:** Third-Party Integrations\
**Tags:** apple\
**Created:** [September 24, 2020, 1:17pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497 "2020-09-24T13:17:35Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [November 21, 2020, 11:34pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/21 "2020-11-21T23:34:26Z")

</div>

Very cool! I tweaked mine slightly to add wind gust and last lightning strike distance. Thanks!

---

<div class="post-metadata">

**Author:** ![csaba](https://avatars.discourse-cdn.com/v4/letter/c/3be4f8/32.png) [@csaba](https://community.tempest.earth/u/csaba)\
**Post date:** [November 24, 2020, 5:02pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/22 "2020-11-24T17:02:40Z")

</div>

Very good: maybe you could share the settings? Thanks in advance

---

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [November 24, 2020, 5:45pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/23 "2020-11-24T17:45:58Z")

</div>

You can find and change the following parts.  
To add Wind Gust:

> wind = convertWindSpeed(data.obs[0].wind\_avg, data.station\_units.units\_wind)  
> windgust = convertWindSpeed(data.obs[0].wind\_gust, data.station\_units.units\_wind)
> 
> if(wind == 0) {  
> displayWind = “Calm”  
> } else {  
> windDirection = convertWindDirection(data.obs[0].wind\_direction, data.station\_units.units\_direction)  
> displayWind = windDirection[“display”] + “” + windDirection[“unit”] + " " + wind[“display”] + ", " + windgust[“display”] + " " + wind[“unit”]  
> }

To add Last Lightning Distance (in miles):

> lightningDist = (Math.round(((data.obs[0].lightning\_strike\_last\_distance/1.61) + Number.EPSILON) \* 100) / 100)  
> let lightningLine = w.addText(“⚡” + data.obs[0].lightning\_strike\_count\_last\_3hr + ", " + lightningDist + “m”)

To add Last Lightning Distance (in kilometers):

> let lightningLine = w.addText(“⚡” + data.obs[0].lightning\_strike\_count\_last\_3hr + ", " + data.obs[0].lightning\_strike\_last\_distance + “km”)

Of course, this will be from the last time the widget updated, which could be a while (up to like 20 minutes), so not as useful as we would like.

I have mine in a stack of rectangular widgets, so at some point I will likely tweak it a bit more to increase the font size, make it 2 columns and add a couple more bits of data (precipitation chance and such). Though hopefully WeatherFlow will add their own widget before I get too involved in it.

---

<div class="post-metadata">

**Author:** ![christian](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/christian/32/10926_2.png) [@christian](https://community.tempest.earth/u/christian)\
**Post date:** [November 28, 2020, 12:21pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/24 "2020-11-28T12:21:52Z")

</div>

Hey hi,

would there be a possibility to add a custom background to the script?

Greetings Chris

---

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [November 28, 2020, 3:08pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/25 "2020-11-28T15:08:16Z")

</div>

If you only want to change the background color, just modify this line:

> w.backgroundColor = Color.black()

But, if you mean a background image, then it is more complex. You can save the image as a file, and add it to file bookmarks in the Scriptable app settings, name it background-image (or whatever) then find this line in the widget code:

> w.backgroundColor = Color.black()

and replace it with this:

> Let backImage = filemanager.icloud.bookmarkedpath(“background-image”)  
> w.background(  
> Image(“backImage”)  
> .resizable()  
> .scaledToFill()  
> )

I haven’t actually tried this, so no guarantees that it will work. The image will need to be like 164x164 pixels, I think. You will also need to make sure that CONFIG\_DYNAMIC\_BACKGROUND is set to FALSE near the top of the widget code.

---

<div class="post-metadata">

**Author:** ![christian](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/christian/32/10926_2.png) [@christian](https://community.tempest.earth/u/christian)\
**Post date:** [December 3, 2020, 8:54am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/26 "2020-12-03T08:54:11Z")

</div>

![IMG_0076](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/4/48eddcc871511eefd99c63abbd00f878ca7a80de.jpeg)

Finally made it 🙂

Custom background

[Code addition]

if(CONFIG\_DYNAMIC\_BACKGROUND) {  
let bgColor = new LinearGradient()  
bgColor.colors = [new Color("#000000"), new Color(temperature[“color”])]  
bgColor.locations = [0.0, 1.0]  
w.backgroundGradient = bgColor  
} else {

```
let fm = FileManager.iCloud()
let path = fm.documentsDirectory() + "/Pictures/image.jpg";
w.backgroundImage = fm.readImage(path);

```

}

[/Code addition]

Here the Scriptable solution for getting custom backgrounds

> <https://gist.github.com/mzeryck/3a97ccd1e059b3afa3c6666d27a496c9>

---

<div class="post-metadata">

**Author:** ![fpb](https://avatars.discourse-cdn.com/v4/letter/f/76d3ee/32.png) [@fpb](https://community.tempest.earth/u/fpb)\
**Post date:** [December 8, 2020, 3:21am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/27 "2020-12-08T03:21:18Z")

</div>

I’m trying to setup this on my iOS 14 and I’m getting the error below. I created a new Token and copied it but not sure why I’m getting syntax error. Any idea?

 ![IMG_0814](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/8/89814953ceffee1fcb8dbef7cae18d6340de2ca5.jpeg)

---

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [December 8, 2020, 4:17am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/28 "2020-12-08T04:17:42Z")

</div>

There should be quotes before and after your api key.  
const CONFIG\_API\_KEY = “xxxxx”

No quotes for the station ID.  
const CONFIG\_STATION\_ID = 12345

---

<div class="post-metadata">

**Author:** ![fpb](https://avatars.discourse-cdn.com/v4/letter/f/76d3ee/32.png) [@fpb](https://community.tempest.earth/u/fpb)\
**Post date:** [December 8, 2020, 4:42am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/29 "2020-12-08T04:42:57Z")

</div>

Thank baff, I had missing the “quotes”.

---

<div class="post-metadata">

**Author:** ![drdk](https://avatars.discourse-cdn.com/v4/letter/d/edb3f5/32.png) [@drdk](https://community.tempest.earth/u/drdk)\
**Post date:** [December 13, 2020, 12:33pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/30 "2020-12-13T12:33:04Z")

</div>

Just copied the script and followed your excellent instructions, this makes a very convenient way to check the Tempest data. Thank you for sharing your work.

---

<div class="post-metadata">

**Author:** ![stuartgoldman](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/stuartgoldman/32/8921_2.png) [@stuartgoldman](https://community.tempest.earth/u/stuartgoldman)\
**Post date:** [December 13, 2020, 10:25pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/31 "2020-12-13T22:25:25Z")

</div>

Just installed. Thanks. Very nice.

---

<div class="post-metadata">

**Author:** ![stuartgoldman](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/stuartgoldman/32/8921_2.png) [@stuartgoldman](https://community.tempest.earth/u/stuartgoldman)\
**Post date:** [December 13, 2020, 11:25pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/32 "2020-12-13T23:25:14Z")

</div>

Thanks for the revisions. I tweaked it a bit more to my liking (first time editing Javascript, too).

 ![IMG_0055](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/f/fd3f5c8493761306b9995b79207fbc4b7293802e.jpeg)

---

<div class="post-metadata">

**Author:** ![fpb](https://avatars.discourse-cdn.com/v4/letter/f/76d3ee/32.png) [@fpb](https://community.tempest.earth/u/fpb)\
**Post date:** [December 14, 2020, 1:04am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/33 "2020-12-14T01:04:31Z")

</div>

Nice work @stuartgoldman. I like the Gust report. I’ll try to add it to mine.

---

<div class="post-metadata">

**Author:** ![jeff.bathurst](https://avatars.discourse-cdn.com/v4/letter/j/2bfe46/32.png) [@jeff.bathurst](https://community.tempest.earth/u/jeff.bathurst)\
**Post date:** [December 15, 2020, 5:47pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/34 "2020-12-15T17:47:25Z")

</div>

What a great piece of code. It works great! Can we get the widget to launch the Weatherflow/Tempest app when you touch the widget?

Also, what’s the code segment to add wind gust?

Thanks,  
Jeff

---

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [December 16, 2020, 4:08pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/35 "2020-12-16T16:08:03Z")

</div>

To add wind gust, find the wind related code and change it to this:

> wind = convertWindSpeed(data.obs[0].wind\_avg, data.station\_units.units\_wind)  
> windgust = convertWindSpeed(data.obs[0].wind\_gust, data.station\_units.units\_wind)
> 
> if(wind == 0) {  
> displayWind = “Calm”  
> } else {  
> windDirection = convertWindDirection(data.obs[0].wind\_direction, data.station\_units.units\_direction)  
> displayWind = windDirection[“display”] + “” + windDirection[“unit”] + " " + wind[“display”] + " G " + windgust[“display”] + " " + wind[“unit”]  
> }

---

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [December 16, 2020, 5:44pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/36 "2020-12-16T17:44:39Z")

</div>

To launch the Tempest app on tap:

Tap and hold the widget, then select: Edit “Scriptable”  
Tap “When Interacting” and change to “Open URL”  
Tap URL and type in: smartweather://  
Tap Done  
Tap anywhere outside the window to close it.

The first time you tap the widget it will ask permission to open the Tempest app. After that it should just open. Though it does also open the Scriptable app at the same time, but it gets pushed to the background when Tempest opens.

---

<div class="post-metadata">

**Author:** ![SteveF](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@SteveF](https://community.tempest.earth/u/SteveF)\
**Post date:** [December 17, 2020, 1:02pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/37 "2020-12-17T13:02:54Z")

</div>

Perfect. Thanks for that tip.

---

<div class="post-metadata">

**Author:** ![swtkings](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@swtkings](https://community.tempest.earth/u/swtkings)\
**Post date:** [December 22, 2020, 2:13am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/38 "2020-12-22T02:13:07Z")

</div>

Can you paste the code for lightning distance?

---

<div class="post-metadata">

**Author:** ![baff](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/baff/32/10384_2.png) [@baff](https://community.tempest.earth/u/baff)\
**Post date:** [December 22, 2020, 3:09pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/39 "2020-12-22T15:09:18Z")

</div>

To add Last Lightning Distance (in miles):

> lightningDist = (Math.round(((data.obs[0].lightning\_strike\_last\_distance/1.61) + Number.EPSILON) \* 10) / 10)  
> let lightningLine = w.addText(“⚡” + data.obs[0].lightning\_strike\_count\_last\_3hr + ", " + lightningDist + “miles”)

To add Last Lightning Distance (in kilometers):

> let lightningLine = w.addText(“⚡” + data.obs[0].lightning\_strike\_count\_last\_3hr + ", " + data.obs[0].lightning\_strike\_last\_distance + “km”)

The widget only updates a max of like 4 times per hour (limit set by Apple), so this often isn’t a useful as it may sound.

---

<div class="post-metadata">

**Author:** ![marcolinger](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@marcolinger](https://community.tempest.earth/u/marcolinger)\
**Post date:** [December 23, 2020, 9:43am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/40 "2020-12-23T09:43:15Z")

</div>

I am impressed by your work and your talent to keep calm while people constantly are asking for modifications ! Great job !

[Previous page](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497.md?page=1)

[Next page](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497.md?page=3)
