Invisible Widget Generator

mzeryck · September 26, 2020, 7:34pm

Hi folks, I wrote a script that generates “invisible” widgets – aka, widgets that blend in with your iOS home screen background. Before you start, enter wiggle mode on your home screen and scroll to the empty page on the right, then take a screenshot. That’s the input for the script. (Edit: Note that if you have Perspective Zoom on, where your background moves slightly as you move your phone, the effect won’t work as well.)

When you run the script from the Scriptable app, it leads you through the steps to create the widget background. You can then add any existing widget code to the the script to display things on top of your background!

You can use this to make “floating” widget content, or even use it as part of a themed home screen — you can see two examples in my screenshot. (Note: I’ve only tested this on two different iPhones, so please let me know if there are pixel errors on your device.)

gist.github.com

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

mz_invisible_widget.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-purple; icon-glyph: image;

// This widget was created by Max Zeryck @mzeryck

// Widgets are unique based on the name of the script.
const filename = Script.name() + ".jpg"
const files = FileManager.local()
const path = files.joinPath(files.documentsDirectory(), filename)

This file has been truncated. show original

ThinhDinh · September 26, 2020, 11:52pm

This is art! Gonna try this approach for my new widgets, thanks for sharing!

simonbs · September 27, 2020, 5:59am

That is extremely cool! I just made my first invisible widget using this

I tweaked the script a bit to make it export either to the Files app or Photos. I shared the updated script in a comment to your Gist.

gist.github.com

https://gist.github.com/mzeryck/3a97ccd1e059b3afa3c6666d27a496c9#gistcomment-3468585

mz_invisible_widget.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-purple; icon-glyph: image;

// This widget was created by Max Zeryck @mzeryck

// Widgets are unique based on the name of the script.
const filename = Script.name() + ".jpg"
const files = FileManager.local()
const path = files.joinPath(files.documentsDirectory(), filename)

This file has been truncated. show original

rob · September 27, 2020, 7:43am

@simonbs Would it be possible to add copySmall(), copyMedium() , and copyLarge() functions to widgets?

(If those would copy the widget as an image to the pasteboard, instead of presenting it on screen, that would make sharing a preview of a widget -in this thread?- easier)

mzeryck · September 27, 2020, 3:20pm

Ahh yay I’m glad you like it! And yeah, the hard coded path is just a trick to allow the script to be used as a widget itself – but I also like the addition of the document picker which I didn’t know about either!

Amanda · September 30, 2020, 12:50am

This is awesome, thank you! What code did you add for the first screenshot to show your calendar?

mzeryck · September 30, 2020, 1:12am

There’s been a fun thread on Reddit where I’ve worked a bit more on this script. This new version allows you to change all kinds of settings at the top of the script. (It’s been so inspiring and fun to see how many different directions people have gone with the calendar code!)

dgold · October 6, 2020, 8:00am

I’m having issues with the Calendar access. When I run with Test Mode set to tru it works fine. When I do it with Test Mode set to false it just opens the calendar app. I have checked my Privacy=>Calendar=>Scriptable settings and permission is granted. Am I doing something wrong?

mzeryck · October 6, 2020, 1:18pm

The reason it opens the calendar app is so if you choose “Run Script” from the widget settings menu, it will go directly to the calendar.