Widget Examples

The two different weather widgets are showing different data’s each. The original one says it’ll be cloudy with a little sunshine, and the other says it’ll rain. Lol. But thanks for the help!

Is it possible to make a widget which opens an app through its URL scheme, covered by an clickable button image? If I were to use shortcuts, covering it with an image wouldn’t be possible… I REALLY wish I knew how to code at this point.

That is possible in version 1.5.1, which is currently in beta through TestFlight but should be out within a week or so.

I have posted an example of a launcher widget on the link below. It requires version 1.5.1.

Is there any way to have the SF Symbols bigger? They look so small that it is difficult to see if there is rain or just clouds

Yes. Just set the size on the WidgetImage.

let sym = SFSymbol.named("tortoise")
sym.applyFont(Font.systemFont(64))
let w = new ListWidget()
let wimg = w.addImage(sym.image)
wimg.imageSize = new Size(100, 100)
w.presentSmall()

For the weather widget, I’m getting this error after pasting and running the script. Any help to fix this would be appreciated. Thanks.

Error on line 105:29: TypeError: undefined is not an object (evaluating ‘weatherData.current.weather’)
[/quote]

1 Like

Could you please provide the parameters for it?

All I really want to do is make a widget for AdGuard. I’m surprised how hard it is.

what kind of widget ?

Wow :exploding_head:, clever use of SFSymbols!, I was aware that custom icons are possible, but editing the cache files, making “icon packs”, but this is better I think, maybe I will merge this if you don’t mind.
I was waiting for the SFSymbols update to include some offline mode indicator icon, but never though of this use.
Anwering @TECKBAT, the colors of the icons are setted by OpenWeather, that’s why I choose orange as the default accent color :sweat_smile:, If you want to change the icons, just edit the files in the cache folder, add “.png” to set the extension and you could edit them as normal png images, you can see the list of the icons here: https://openweathermap.org/weather-conditions.
To move the weather description label edit weatherDescriptionCoords (line 61), where the second parameter of Point is the Y coordinate (52 by default), just increase it to lower the text.

Sorry for being absent, I had a busy week, I’m aware of some bugs tho that I need to fix first.
I never thought I would receive so many contributions, having in consideration all of them!
Thanks!

3 Likes

If I use the SFSymbol as a background image for a widget it looks black, is there a way to specify the color? I tried to specify the font color and the tint color.

Is it possible to change the display of a widget based on if dark mode is enabled?

I’ve tested with this:

Copy to clipboard

  if (Device.isUsingDarkAppearance()) {
    w.backgroundColor = Color.black()
  } else {
    w.backgroundColor = Color.white()
  }

It displays correctly when testing with .presentSmall() (or medium or large) but does not change on the homescreen widget. It will show just the dark condition even when creating a new widget when dark mode is disabled.

1 Like

That error likely means the API_KEY is missing, or if it’s a new key, it takes a couple hours to start working.

And yes @egamez go for it! :slight_smile:

Just came up with a simple, easy to customise countdown widget.

3 Likes

There’s already a widget for it, but that’s the old type of widget, and I use it quite a lot to turn the ‘Safari ad blocking’ on and off, and to also turn the DNS protection on and off too. But the problem is that, since it’s an old widget, it has too stay all the way below of the iOS 14 widgets (I’m on an iPad).

So, I want to create a widget that I could just tap on and it would take me to the app. And I am not using a shortcut for this, because in Shortcuts, you can’t add an image for a widget.

Updated the weather widget on the Gist.

Added:

  • Setting to display the time in 24 hour format.

Fixed:

  • Bug where if a cached resource existed but wasn’t downloaded, the script throws an error. (Thanks @theguy69 )
  • The script stored the last updated weather data on the same file for all locations, that means, if you had multiple widgets with different locations, all would show the same data of that last location saved when offline.
4 Likes

Hi @egamez, noob here trying to add a background image to your widget for transparency.
It doesn’t seem to work due to drawContext- i either get a background with no weather or vice versa… any idea how to add this?

Thanks

use this to add background to the drawContext before drawing anything on it.

const bgImage = /*image data*/

var rect = new Rect(0,0,(config.widgetFamily == "small") ? contextSize : mediumWidgetWidth, contextSize)

drawContext.drawImageInRect(bgImage,rect)
1 Like

Great, thanks @supermamon, makes sense now and works great!

Here is an example I set the sfsymbol colour to be grey.

4 Likes