Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pulls quotes from an API and displays it on a simple background
const QUOTES_API = 'https://quotes-api.netlify.app/.netlify/functions/get-quote';
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
// https://github.com/supermamon/scriptable-no-background
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)
Script.setWidget(widget)
Script.complete()
} 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 = `- ${dailyText.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) {
alert.addAction(item)
}
let resp = asSheet ?
await alert.presentSheet() :
await alert.presentAlert()
return resp
}
@deroverda

This comment has been minimized.

Copy link

@deroverda deroverda commented Jan 27, 2021

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.

@deroverda

This comment has been minimized.

Copy link

@deroverda deroverda commented Jan 27, 2021

@blacksector

This comment has been minimized.

Copy link
Owner Author

@blacksector blacksector commented Feb 1, 2021

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