Skip to content

Instantly share code, notes, and snippets.

Last active October 24, 2022 13:57
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Pulls quotes from an API and displays it on a simple background
const QUOTES_API = '';
const BG_COLOR = "#000000";
const BG_IMAGE = true;
let randomQuote = await loadQuote()
let img = null;
// no-background.js is needed from here if BG_IMAGE is set to true
if (BG_IMAGE) {
const nobg = importModule("no-background.js");
// Bug: for some reason nobg isn't available in the createWidget function
// need to define another variable like this in order for it to work:
img = await nobg.getSliceForWidget("random-quotes");
if (config.runsInWidget) {
let widget = createWidget(randomQuote)
} else {
const options = ['Small', 'Medium', 'Large', 'Cancel']
let resp = await presentAlert('Preview Widget', options)
if (resp == options.length - 1) return
let size = options[resp]
let widget = createWidget(randomQuote)
await widget[`present${size}`]()
function createWidget(dailyText) {
let quote = dailyText.text || "";
let author = `- ${ || "Unknown"}`;
let titleFont = Font.semiboldSystemFont(13)
let txtFont = Font.systemFont(12)
let w = new ListWidget();
if (BG_IMAGE) {
w.backgroundImage = img;
} else {
w.backgroundColor = new Color(BG_COLOR);
let quoteTxt = w.addText(quote)
quoteTxt.font = titleFont
quoteTxt.textSize = 13
quoteTxt.textColor = Color.white()
let authorTxt = w.addText(author)
authorTxt.font = txtFont
authorTxt.textColor = Color.white()
authorTxt.textOpacity = 0.8
authorTxt.textSize = 12
return w
async function loadQuote() {
let url = QUOTES_API;
let req = new Request(url)
let json = await req.loadJSON()
return json;
async function presentAlert(prompt, items, asSheet) {
let alert = new Alert()
alert.message = prompt
for (const item of items) {
let resp = asSheet ?
await alert.presentSheet() :
await alert.presentAlert()
return resp
Copy link

This is great and exactly what we need to lighten up these dark times. I suspect that this is meant to be used for medium widgets since a lot of the quotes are too long to be viewed in its entirety on small widgets. As you can see in the image it doesn’t fit in a small widget. Is there any possibly to make the text more efficiently spaced within the “box”(use the whole area) ? In that way, combined with changing the text size value to smaller I think we’d be able to fit most of the quotes in a small widget.

Copy link

Copy link

You're right the quotes don't all fit into the box, I actually did notice it, I just got lazy and never got around to fixing that issue. I personally use it in a small widget as well. As for the text, you could make it smaller or you could make API calls that specifically check the number of characters in the quote and if it is greater than an X number of characters and is the small widget, then get another random quote, etc! I am honestly too lazy to go implement that, but if you would like, go right ahead!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment