Writing/Customizing/Automating a Custom Widget in Apple’s iOS 14

14 in gradient colors - ios 14 logo

(NOTE: These are the life and times of a geek – we do this kind of thing for ourselves or our loved ones. It’s part of what I do to make a living, sometimes. Or just to impress neighbors or even help them sometimes. But that’s why this is in the Geek-as-a-Trade series.)

So I had this problem statement. I live in a neighborhood where the actual outside temperature is different from the majority of my zip code (I’m on the very south part of my zip code). During the hot summer months in my area (which persist even now in the middle of October), I want to know the local outside temperature to get an idea of whether to open up my house and let the air cool us, or close it up and ride the heat hoping our insulation will help us. (It turns out that opening the house to airflow is almost always the right idea, but geeky ideas needs must!)

Anyway, I wanted to make an iOS 14 widget that would use publicly available weather and temperature data and use it to populate a widget on the phone’s home pages, so I always have a good idea of what the outside temperature is like near my house.

I did manage it.

Read on for a write-up of my adventures, false starts, and ultimate solution. I think it ultimately cost me something like $5, though I did pay $16 for a general developer tool that I recommend in any case, that I won’t use in this case, but will use as I go. There’s still plenty of adventures left in iOS and iPhones and so on.

My first investigations centered on looking for a more programmable replacement for IFTTT, which doesn’t, as far as I know, have the deep widget customizations available that I ultimately figured out I wanted, but it is a third party server that keeps an eye on stuff and sends notifications when that stuff changes. Which I figured I might use to trigger some other displays in my phone or something, through the IFTTT app or some other app. For that, I evaluated a bunch of IFTTT replacements, since that service is going very hard at making us pay for premium services.

I didn’t end up using those, though I may look at them later. I think I like Node-Red (NodeJS-based) for its flexibility, but other ones I looked at were Huginn (Ruby), Beehive (Golang), and Trigger Happy (Python). Someone else I was talking to suggested StackStorm (Python – built for Ops/Devops purposes). If I need this kind of thing, I’ll probably start with Node-Red, but it’s hard to say. More research needed here.

After a bit more noodling and investigations, I moved on to wanting to show the updated temperature in an iOS 14 home page widget, labeled properly, shown in the right units (F), and maybe on a widget whose background I could update with an evocative color. (My partner suggested I might use the color instead to look at AQI or something – a good idea for a future version.)

For reference, let’s start with a semi-random PurpleAir sensor that represents the one a few blocks from where I live (this one actually lives in Salina, Kansas). If you want, like I do, to look at its current state, you want the URL for the JSON data from the sensor.

But anyhow, for a dynamically updating widget, I first tried Scriptable. Which allows you to write Javascript that you can use to create and update values in Widgets, as well as do whatever the Javascript libraries in Scriptable allow you to do. (Official Forum, Additional examples post).

Now I am a big fan of shareable repositories and source control and so on, so with Scriptable, I used GitHub. Here’s the GitHub repository for that work. In order to get that code easily into the GitHub repository, I kept a copy of it in the iOS app, Working Copy, and I paid $15.99 to unlock the pro version so I could sync it up to the GitHub remote repository (whereas Working Copy keeps the local repository on the phone, but Scriptable isn’t integrated to Working Copy, so unfortunately it’s a copy/paste from Scriptable’s editor to Working Copy’s editor).

This script in Scriptable updates a widget it’s tied to, which is cool and awesome, but for some reason the widget updating code kept erroring out on the JSON URL for reasons I couldn’t figure out. Debugging code worked flawlessly, but tying it to a widget would randomly error out. So eventually, regretfully, I gave up on Scriptable for it (though I think it may have to do with me using deprecated functions? I plan to try redoing it at some point to see if I can get it to work more reliably for my purposes).

(I also checked out Pythonista, which runs Python in iOS and allows messing around with the iOS internals but it turns out it does not work with iOS 14’s widgets, so that was a no-go.)

And the other thing I didn’t take on was automation and scheduling. Because you write a thing that creates widgets and updates widgets but what makes that thing run periodically to check if it needs updating? That’s generally not built in. But it is, it turns out, with iOS Shortcuts.

First, some good news, with Shortcuts it’s possible to use a different kind of source control repository. It’s a free service called RoutineHub.co. It uses iCloud shortcuts to share and version shortcuts with other folks.

So for my first version of the Widget I finally settled on, you can find it here on RoutineHub. (This is either before or a separate Shortcut from the one where I get it to display both Temperature and AQI.) Here it is in action. Exciting!

Green background widget in iOS 14 - reading "PurpleAir Temp 65F"
From my homepage! The Temperature!

But the writing of it was a speed course in figuring out relatively complex Shortcuts, figuring out a good Widget control package (WidgetPack – this link goes to the app store – $4.99). And for the automation/scheduling, I had to figure out that a Shortcut package called Autocuts written for iOS 13 was the wrong call, since you can do that with Shortcut Automation now in iOS 14.

So to get the results I wanted, the final configuration required was:

  • iOS 14’s support for Shortcuts and the Shortcuts app (free).
  • The WidgetPack app that helps create and customize widgets with Shortcuts ($4.99)
  • A 31-action Shortcut for creating the Widget and changing the background color according to the temperature (blue – green – yellow – orange – red from 64F to 80F) and overlaying the text and temperature in white on top of it.
  • A “Personal” automation (that runs only on my phone, not in my home) that runs the Shortcut every time I open or close any one of 22 different apps that I use frequently.
  • A free account on RoutineHub.co to help me share the 31-action Shortcut with other people who are interested in seeing it.

There is no repository for Automations, unfortunately, so I can’t share that with you easily, but it’s pretty easy to set up. Let me know if you’re getting stuck.


One response to “Writing/Customizing/Automating a Custom Widget in Apple’s iOS 14”