# 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:** 1

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [September 24, 2020, 1:17pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/1 "2020-09-24T13:17:35Z")

</div>

I created a simple widget to display data from my Tempest using the [Scriptable](https://scriptable.app) app on iOS/iPadOS 14. If you’d like to try it out, [instructions and the code are available on GitHub](https://gist.github.com/wxkeith/da736d6a2193705d850e7808fd9b950a).

 ![IMG_585BC072D501-1](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/3/3414cb148bca9c1ba50888ab9476d47a376d9a63.jpeg)

---

<div class="post-metadata">

### Author: ![dzweier](https://avatars.discourse-cdn.com/v4/letter/d/46a35a/32.png) [@dzweier](https://community.tempest.earth/u/dzweier)
#### Post date: [September 24, 2020, 8:18pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/2 "2020-09-24T20:18:41Z")

</div>

Thanks for sharing the script and for the detailed instructions; added it to my home screen today and it looks great!

---

<div class="post-metadata">

### Author: ![radex13](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/radex13/32/3963_2.png) [@radex13](https://community.tempest.earth/u/radex13)
#### Post date: [September 25, 2020, 11:42am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/3 "2020-09-25T11:42:23Z")

</div>

Bonjour, merci beaucoup. Cependant avez vous un script pour version européenne avec les bonnes unités. Vent, températures, pression. Merci 😊

---

<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: [September 25, 2020, 12:55pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/4 "2020-09-25T12:55:26Z")

</div>

Very nice work, thank you very much!  
Although Tempest has not arrived yet, I have already installed the Widget …  
Thanks again for your work!  
Best Regards,  
Csaba Palmay  
from Hungary

---

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [September 25, 2020, 12:59pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/5 "2020-09-25T12:59:01Z")

</div>

I’m glad people are finding this useful!

I’m planning to add an option for swapping the units and displaying wind gusts this weekend. I’ll update the gist and make a note here when that’s done. I’m also happy to incorporate any changes from those more fluent in Javascript than I am. 🙂

---

<div class="post-metadata">

### Author: ![93ben](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/93ben/32/9381_2.png) [@93ben](https://community.tempest.earth/u/93ben)
#### Post date: [September 25, 2020, 1:00pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/6 "2020-09-25T13:00:00Z")

</div>

Yeah I figure I can modify this to match Australian measurements. I know JavaScript well.

---

<div class="post-metadata">

### Author: ![93ben](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/93ben/32/9381_2.png) [@93ben](https://community.tempest.earth/u/93ben)
#### Post date: [September 25, 2020, 1:47pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/7 "2020-09-25T13:47:10Z")

</div>

> [@wxkeith](#):
>
> option for swapping the units

Considering that you’re using REST, you can actually gather these units directly from `station_units` [Tempest API](https://weatherflow.github.io/SmartWeather/api/swagger/#!/observations/getStationObservation)

It means whatever the user has set in settings, it will show via the script with ease.

---

<div class="post-metadata">

### Author: ![93ben](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/93ben/32/9381_2.png) [@93ben](https://community.tempest.earth/u/93ben)
#### Post date: [September 25, 2020, 2:38pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/8 "2020-09-25T14:38:38Z")

</div>

I decided to fix this function up for you. I matched the fahrenheit measurements with the celsius ones so they display the same colours for the same temperatures.

```
function temperatureColor(temp_unit,temperature)
{
	if(temp_unit == "c")
	{
	if ( temperature >= 49 ) {
    color = "#af3190"
  } else if( temperature >= 46 && temperature < 49) {
    color = "#bd2f82"
  } else if( temperature >= 43 && temperature < 46) {
    color = "#cb2e73"
  } else if( temperature >= 41 && temperature < 43) {
    color = "#d82d6e"
  } else if( temperature >= 38 && temperature < 40) {
    color = "#e62c51"
  } else if( temperature >= 35 && temperature < 38) {
    color = "#ff2e1f"
  } else if( temperature >= 32 && temperature < 35) {
    color = "#ff6e35"
  } else if( temperature >= 30 && temperature < 32) {
    color = "#f3934e"
  } else if( temperature >= 27 && temperature < 30) {
    color = "#f3ad63"
  } else if( temperature >= 24 && temperature < 27) {
    color = "#eaca73"
  } else if( temperature >= 21 && temperature < 24) {
    color = "#f4e376" 
  } else if( temperature >= 18 && temperature < 21) {
    color = "#fcf574"
  } else if( temperature >= 16 && temperature < 18) {
    color = "#deec62"
  } else if( temperature >= 13 && temperature < 16) {
    color = "#b1ea3e"
  } else if( temperature >= 10 && temperature < 13) {
    color = "#20e93b"
  } else if( temperature >= 7 && temperature < 10) {
    color = "#18eca5"
  } else if( temperature >= 5 && temperature < 7) {
    color = "#11e1be"
  } else if( temperature >= 2 && temperature < 5) {
    color = "#06d8d8"
  } else if( temperature >= -1 && temperature < 2) {
    color = "#29cff0"
  } else if( temperature >= -4 && temperature < -1) {
    color = "#4fb2ef"
  } else if( temperature >= -7 && temperature < -4) {
    color = "#4e99ee" 
  } else if( temperature >= -9 && temperature < -7) {
    color = "#4b6bf9"
  } else if( temperature >= -12 && temperature < -9) {
    color = "#8e4cf9" 
  } else if( temperature >= -15 && temperature < -12) {
    color = "#a051e1"
  } else if( temperature >= -18 && temperature < -15) {
    color = "#ae4fd4" 
  } else if( temperature >= -21 && temperature < -18) {
    color = "#bd4dc7" 
  } else if( temperature >= -23 && temperature < -21) {
    color = "#ae61ba"
  } else if( temperature >= -26 && temperature < -23) {
    color = "#a07aad"
  } else if( temperature >= -29 && temperature < -26) {
    color = "#9286a0"
  } else if( temperature >= -32 && temperature < -29) {
    color = "#a19511"
  } else if( temperature >= -34 && temperature < -32) {
    color = "#afa4bc"
  } else if( temperature >= -37 && temperature < -34) {
    color = "#bdb2ca"
  } else if( temperature >= -40 && temperature < -37) {
    color = "#d2c3d1"
  } else if( temperature >= -43 && temperature < -40) {
    color = "#e3dbe2"
  } else if( temperature >= -46 && temperature < -43) {
    color = "#e4e4eb"
  } else if( temperature < -46 ) {
    color = "#eaeaea"
  }
  }
  else if(temp_unit == "f")
  {
    if ( temperature >= 120 ) {
    color = "#af3190"
  } else if( temperature >= 115 && temperature < 120) {
    color = "#bd2f82"
  } else if( temperature >= 110 && temperature < 115) {
    color = "#cb2e73"
  } else if( temperature >= 105 && temperature < 110) {
    color = "#d82d6e"
  } else if( temperature >= 100 && temperature < 105) {
    color = "#e62c51"
  } else if( temperature >= 95 && temperature < 100) {
    color = "#ff2e1f"
  } else if( temperature >= 90 && temperature < 95) {
    color = "#ff6e35"
  } else if( temperature >= 85 && temperature < 90) {
    color = "#f3934e"
  } else if( temperature >= 80 && temperature < 85) {
    color = "#f3ad63"
  } else if( temperature >= 75 && temperature < 80) {
    color = "#eaca73"
  } else if( temperature >= 70 && temperature < 75) {
    color = "#f4e376" 
  } else if( temperature >= 65 && temperature < 70) {
    color = "#fcf574"
  } else if( temperature >= 60 && temperature < 65) {
    color = "#deec62"
  } else if( temperature >= 55 && temperature < 60) {
    color = "#b1ea3e"
  } else if( temperature >= 50 && temperature < 55) {
    color = "#20e93b"
  } else if( temperature >= 45 && temperature < 50) {
    color = "#18eca5"
  } else if( temperature >= 40 && temperature < 45) {
    color = "#11e1be"
  } else if( temperature >= 35 && temperature < 40) {
    color = "#06d8d8"
  } else if( temperature >= 30 && temperature < 35) {
    color = "#29cff0"
  } else if( temperature >= 25 && temperature < 30) {
    color = "#4fb2ef"
  } else if( temperature >= 20 && temperature < 25) {
    color = "#4e99ee" 
  } else if( temperature >= 15 && temperature < 20) {
    color = "#4b6bf9"
  } else if( temperature >= 10 && temperature < 15) {
    color = "#8e4cf9" 
  } else if( temperature >= 5 && temperature < 10) {
    color = "#a051e1"
  } else if( temperature >= 0 && temperature < 5) {
    color = "#ae4fd4" 
  } else if( temperature >= -5 && temperature < 0) {
    color = "#bd4dc7" 
  } else if( temperature >= -10 && temperature < -5) {
    color = "#ae61ba"
  } else if( temperature >= -15 && temperature < -10) {
    color = "#a07aad"
  } else if( temperature >= -20 && temperature < -15) {
    color = "#9286a0"
  } else if( temperature >= -25 && temperature < -20) {
    color = "#a19511"
  } else if( temperature >= -30 && temperature < -25) {
    color = "#afa4bc"
  } else if( temperature >= -35 && temperature < -30) {
    color = "#bdb2ca"
  } else if( temperature >= -40 && temperature < -35) {
    color = "#d2c3d1"
  } else if( temperature >= -45 && temperature < -40) {
    color = "#e3dbe2"
  } else if( temperature >= -50 && temperature < -45) {
    color = "#e4e4eb"
  } else if( temperature < -50 ) {
    color = "#eaeaea"
  }
  }
        
  return color
}
```

---

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [September 26, 2020, 1:28pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/9 "2020-09-26T13:28:57Z")

</div>

Thanks for this @93ben! I’ve incorporated that color scale and I’m working on picking up and converting to the display units specified by the station owner. I’ll update the gist and post a note here when it’s ready.

---

<div class="post-metadata">

### Author: ![93ben](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/93ben/32/9381_2.png) [@93ben](https://community.tempest.earth/u/93ben)
#### Post date: [September 26, 2020, 2:19pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/10 "2020-09-26T14:19:56Z")

</div>

You’re welcome. I’m glad I could help 🙂

---

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [September 26, 2020, 7:18pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/11 "2020-09-26T19:18:35Z")

</div>

The [gist](https://gist.github.com/wxkeith/da736d6a2193705d850e7808fd9b950a) is updated with the latest incarnation of the script. All parameters should now respect the units you’ve specified in your Tempest settings.

---

<div class="post-metadata">

### Author: ![vtyler98](https://avatars.discourse-cdn.com/v4/letter/v/85e7bf/32.png) [@vtyler98](https://community.tempest.earth/u/vtyler98)
#### Post date: [September 28, 2020, 3:32am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/12 "2020-09-28T03:32:12Z")

</div>

Very cool, tried this out and really like it! Just a few questions since I’m not very knowledgeable with coding. Is there a way to replace the humidity with the dewpoint, rain rate, wind gust, etc or add those in? Also how often does it update and can it be set to update at more frequent intervals like every 1 min or so? Also the widget is a small square but is there a way to get it into the longer rectangle option with more data points added in?

---

<div class="post-metadata">

### Author: ![radex13](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/radex13/32/3963_2.png) [@radex13](https://community.tempest.earth/u/radex13)
#### Post date: [September 28, 2020, 12:47pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/13 "2020-09-28T12:47:11Z")

</div>

Merci beaucoup, très utile 🙂

---

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [September 28, 2020, 1:17pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/14 "2020-09-28T13:17:22Z")

</div>

> [@vtyler98](#):
>
> Very cool, tried this out and really like it! Just a few questions since I’m not very knowledgeable with coding. Is there a way to replace the humidity with the dewpoint, rain rate, wind gust, etc or add those in? Also how often does it update and can it be set to update at more frequent intervals like every 1 min or so? Also the widget is a small square but is there a way to get it into the longer rectangle option with more data points added in?

Changing the variables displayed is only possible by editing the code. The script is using the “latest station observation” API ([Tempest API](https://weatherflow.github.io/SmartWeather/api/swagger/#!/observations/getStationObservation)). I’ve tried to make the code as readable as possible, so it shouldn’t be too difficult to customize through trial and error.

I’m waiting to see how some changes the author of Scriptable is making turn out, then I’d like to make a more data-rich Widget option using the medium or large variants. iOS controls the update frequency of the widget (that’s why I added the timestamp).

---

<div class="post-metadata">

### Author: ![grantharrison](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/grantharrison/32/3830_2.png) [@grantharrison](https://community.tempest.earth/u/grantharrison)
#### Post date: [September 29, 2020, 6:57pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/15 "2020-09-29T18:57:39Z")

</div>

Love what you did! I added mine to my phone and I think it looks great.

I wondered if the API allows for the high/low in the history section? Would love to add that part to my widget.

(I attached some of the edits I made to your original set up. Thank you so much for adding this for us)

 ![IMG_9988](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/1/1b4e6e1ff277a92b017f3bb1cf837e97483c8971.jpeg)

---

<div class="post-metadata">

### Author: ![brian3](https://avatars.discourse-cdn.com/v4/letter/b/9e8a1a/32.png) [@brian3](https://community.tempest.earth/u/brian3)
#### Post date: [September 29, 2020, 11:31pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/16 "2020-09-29T23:31:33Z")

</div>

Can you post the source code for this “white on black” design? (I prefer monochrome look)

---

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [September 30, 2020, 12:25am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/17 "2020-09-30T00:25:29Z")

</div>

@grantharrison, your tweaks make it a lot more readable–I like it! This is where I’m at right now incorporating your layout and setting the color of the temperature text instead of the background (I may make this configurable).

 ![IMG_5143](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/a/a76a771918b1af46c96737c86948e08c40777ef2.jpeg)

Edit: Regarding the high and low. It’s definitely something I’d like to do, but need to research some more. The API doesn’t make this as straightforward to do as I was hoping.

---

<div class="post-metadata">

### Author: ![grantharrison](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/grantharrison/32/3830_2.png) [@grantharrison](https://community.tempest.earth/u/grantharrison)
#### Post date: [September 30, 2020, 12:42am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/18 "2020-09-30T00:42:50Z")

</div>

Oh I like that! Great idea on the color temp. I’m no coding expert, I can honesty just make simple changes to codes that people already write…which is you…so thanks! 🙂

---

<div class="post-metadata">

### Author: ![bwehner](https://avatars.discourse-cdn.com/v4/letter/b/96bed5/32.png) [@bwehner](https://community.tempest.earth/u/bwehner)
#### Post date: [September 30, 2020, 8:36pm UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/19 "2020-09-30T20:36:37Z")

</div>

This might be the coolest things I’ve seen since getting my Tempest. Thanks for sharing!

---

<div class="post-metadata">

### Author: ![wxkeith](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tempest.earth/wxkeith/32/7031_2.png) [@wxkeith](https://community.tempest.earth/u/wxkeith)
#### Post date: [October 3, 2020, 12:09am UTC](https://community.tempest.earth/t/weatherflow-widget-for-ios-ipados-14/9497/20 "2020-10-03T00:09:11Z")

</div>

The [gist](https://gist.github.com/wxkeith/da736d6a2193705d850e7808fd9b950a) is updated with the latest incarnation of the script.

![image](https://us1.discourse-cdn.com/flex020/uploads/sws/original/2X/6/6bd2b230e70e4faa70e0b78131efea707b2377b6.jpeg)

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