Hi everyone,
I’m trying to gather a few examples of scripts that work with the new widgets in iOS 14, so people have a place to find inspiration for their own widgets. I would love if you would share your scripts that work with widgets in this thread 
If you would like to try creating your own widgets with Scriptable, you can join the TestFlight beta here: https://testflight.apple.com/join/uN1vTqxk
Note that the TestFlight beta requires that you run the iOS 14 beta.
Here’s a script that shows the latest news from MacStories in a widget.
let items = await loadItems()
if (config.runsInWidget) {
let widget = createWidget(items)
Script.setWidget(widget)
Script.complete()
} else {
let item = items[0]
Safari.open(item.url)
}
function createWidget(items) {
let item = items[0]
let authors = item.authors.map(a => {
return a.name
}).join(", ")
let rawDate = item["date_published"]
let date = new Date(Date.parse(rawDate))
let df = new DateFormatter()
df.useFullDateStyle()
df.useShortTimeStyle()
let strDate = df.string(date)
let w = new ListWidget()
w.backgroundColor = new Color("#b00a0f")
w.centerAlignContent()
let titleTxt = w.addText(item.title)
titleTxt.applyHeadlineTextStyling()
titleTxt.textColor = Color.white()
let authorsTxt = w.addText("by " + authors)
authorsTxt.applyBodyTextStyling()
authorsTxt.textColor = Color.white()
authorsTxt.textOpacity = 0.8
let dateTxt = w.addText(strDate)
dateTxt.applyBodyTextStyling()
dateTxt.textColor = Color.white()
dateTxt.textOpacity = 0.8
return w
}
async function loadItems() {
let url = "https://macstories.net/feed/json"
let req = new Request(url)
let json = await req.loadJSON()
return json.items
}
function extractImageURL(item) {
let regex = /<img src="(.*)" alt="/
let html = item["content_html"]
let matches = html.match(regex)
if (matches && matches.length >= 2) {
return matches[1]
} else {
return null
}
}
function decode(str) {
let regex = /&#(\d+);/g
return str.replace(regex, (match, dec) => {
return String.fromCharCode(dec)
})
}
This script shows the Corona related numbers: https://gist.github.com/planecore/e7b4c1e5db2dd28b1a023860e831355e
The script was developed by @planecore.
This script shows a daily text snippet: https://gist.github.com/mattapperson/114e5267d5bc736fbe616b6205f3df92
Developed by @mattapperson.
This script shows a random image: https://gist.github.com/jacopocolo/0e28c4af2e28c9de058480da0c5d4582
Developed by @jacopocolo.
This script shows the XKCD comic of the day: https://gist.github.com/rudotriton/9d11ce1101ff1269f56844871b3fd536
Developed by @raigojerva.
This script shows a graph from Charty: https://gist.github.com/0507spc/85ac637e6f46c466c47332a55a6411f4
It depends on this shortcut: https://www.icloud.com/shortcuts/9a2c3dc4c8934db0a770a46eb18ff807
Developed by @cranies.
This script shows the menu in a company’s cantina: https://gist.github.com/Casperbart/d8850fcdb1d7549502ce68f65854f997
Developed by @cassebart.
@simonbs I’m trying to display this 800x800 image (exported by Charty):
I want it to fill the entire widget, but unfortunately this is what I get instead…
It does not seem to matter whether I set an imageSize (nor which width/height I use) or not.
What can be wrong here?
(I’m essentially using Steven Crane’s code, but with a different sized image - so my experiments are all on line 26 in his code)
Hi, it’s Steve here, it may be due to the widget export profile I have with Charty:
Try that and see if that helps (you may need to alter values to suit).
Here is my Reddit code, it is not the cleanest, I copied / pasted / trial and error hacked until I got what I wanted. I have set the click to run script which then opens Reddit on that subreddit.
// Shows latest news from MacStories in a table.
// The table shows an image from the article, if available, and the title of the article.
let rReddit = "Scriptable"
let url = "https://www.reddit.com/r/" + rReddit + "/new.json?limit=6"
let req = new Request(url)
let json = await req.loadJSON()
let items = json.data.children
let appURL = "reddit:///r/" + rReddit
if (config.runsInWidget) {
let widget = createWidget(items)
Script.setWidget(widget)
Script.complete()
} else {
//QuickLook.present(createWidget(items));
Safari.open(appURL)
}
function createWidget(items) {
// let item = items[0]
let w = new ListWidget()
w.backgroundColor = new Color("#47761E")
w.centerAlignContent()
let header = w.addText("r/" + rReddit)
header.textColor = Color.black()
header.centerAlignText()
for (item of items) {
var myDate = new Date(item.data.created_utc * 1000)
var myFormDate = addZero(myDate.getHours()) + ":" + addZero(myDate.getMinutes())
let titleTxt = w.addText("• " + myFormDate + " - " + item.data.title)
titleTxt.applyHeadlineTextStyling()
titleTxt.textColor = Color.white()
titleTxt.textSize = 14
}
var nowDate = new Date()
var nowFormDate = addZero(nowDate.getHours()) + ":" + addZero(nowDate.getMinutes())
let footer = w.addText("Last Updated: " + nowFormDate)
footer.textColor = Color.black()
footer.rightAlignText()
return w
}
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
You’re so tempting me to try the iOS 14 beta… 
Thanks for posting that!
Will give that a try later today or this weekend (and probably start with the same widget size you use instead of a square one).
Using exactly your dimensions seems to work better!
Note: I intentionally made the background of the widget white to see what’s happening
@cranie Can you explain the dimensions? You use 1600x800 in Charty, but 300x1400 in Scriptable?
So excited for this!
I built a widget for informing about a storm nearby. It using some Polish SOAP service (http://burze.dzis.net), but should work for most of Europe (just replace coords). And… you need API key.
async function fetchData(position) {
const DDtoDM = (coord) => {
const coordInt = Math.floor(coord)
return coordInt + (coord - coordInt) * 0.6;
}
const KEY = 'KEY_KEY_KEY';
const RADIUS = '12'; //km
const stormURL = 'https://burze.dzis.net/soap.php';
const requestXML = `
<soapenv:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/' xmlns:soap='https://burze.dzis.net/soap.php'>
<soapenv:Header/>
<soapenv:Body>
<soap:szukaj_burzy soapenv:encodingStyle='http://schemas.xmlsoap.org/soap/encoding/'>
<y xsi:type='xsd:string'>${DDtoDM(position.longitude).toFixed(2)}</y>
<x xsi:type='xsd:string'>${DDtoDM(position.latitude).toFixed(2)}</x>
<promien xsi:type='xsd:int'>${RADIUS}</promien>
<klucz xsi:type='xsd:string'>${KEY}</klucz>
</soap:szukaj_burzy>
</soapenv:Body>
</soapenv:Envelope>
`;
console.warn(requestXML);
const req = new Request(stormURL);
req.method = 'POST';
req.headers = {
'Content-Type': 'text/xml',
'SOAPAction': '\'https://burze.dzis.net/soap.php\''
};
req.body = requestXML;
const response = await req.loadString();
console.warn(response);
const parser = new XMLParser(response);
var processedItem = '';
var returned = {
liczba: -1,
odleglosc: -1,
kierunek: 'n/a',
okres: '0',
}
parser.didStartElement = (name) => {
processedItem = name;
}
parser.foundCharacters = (value) => {
switch (processedItem) {
case 'liczba':
returned.liczba = parseInt(value, 10);
break;
case 'odleglosc':
returned.odleglosc = parseInt(value, 10);
break;
case 'kierunek':
returned.kierunek = value;
break;
case 'okres':
returned.okres = parseInt(value, 10);
break;
}
}
parser.didEndElement = (name) => {
processedItem = '';
}
parser.parse();
console.warn(returned);
return returned;
}
function createWidget(position, data) {
let addressString = position.name;
let headlineString = "No storms";
let detailsString = "—";
if (data.odleglosc > 0) {
headlineString = "Storm nearby!";
detailsString = `${data.liczba} strikes from ${data.kierunek} in last ${data.okres} min. Closest in ${data.odleglosc} km.`;
}
const w = new ListWidget();
w.backgroundColor = new Color("#20504F");
w.centerAlignContent();
const headline = w.addText(headlineString);
headline.applyHeadlineTextStyling();
headline.textColor = new Color("#fff");
const details = w.addText(detailsString);
details.applyBodyTextStyling();
details.textColor = new Color("#fff");
const address = w.addText(addressString);
address.applyBodyTextStyling();
address.textColor = new Color("#fff");
w.presentSmall();
return w;
}
const run = async (getPosition, getData, onFinish) => {
const position = await getPosition();
const data = await getData(position);
onFinish(position, data);
};
const getStaticPosition = () => {
return {
longitude: 51.00,
latitude: 18.00,
name: 'Home',
}
};
await run(
getStaticPosition,
fetchData,
(position, data) => Script.setWidget(createWidget(position, data)),
);
I have created super simple scriptable widget which queries api for Brainkeeper app (personal assistant for foreign vocabulary) to get random word from my list of words I collected. Super cool to have always foreign words in my sight to remember words better.
Thanks for this Scriptable!
what if i wanted to make a widget like the coronavirus one but with a gradient background? Sorry, I’m new to coding
Several of the other widgets in this thread have a gradient background. Try taking a look at those to see how they do it. You’ll want to keep an eye out for mentions of LinearGradient and widget.backgroundGradient.
