Skip to content

Instantly share code, notes, and snippets.

@supermamon

supermamon/xkcdWidget.js

Last active November 9, 2020 14:30
Show Gist options
  • Save supermamon/c1d5a3a2a5c58af25f731f42eb8e5af2 to your computer and use it in GitHub Desktop.
Save supermamon/c1d5a3a2a5c58af25f731f42eb8e5af2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. supermamon revised this gist Nov 9, 2020. 1 changed file with 2 additions and 114 deletions.
    116 changes: 2 additions & 114 deletions xkcdWidget.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,114 +1,2 @@
    // Variables used by Scriptable.
    // These must be at the very top of the file. Do not edit.
    // icon-color: gray; icon-glyph: angle-right;

    // script : xkcdWidget.js
    // version : 1.0.0
    // description: xkcd widget for Scriptable.app
    // author : @supermamon
    // date : 2020-09-17


    const BACKGROUND_DARK_MODE = "system"
    // options: "yes", "no", "system"

    let RANDOM = false
    // default is current comic
    // set the Parameter value to "random" in the
    // Edit Widget screen to use a random comic
    if (args.widgetParameter == 'random') {
    RANDOM = true
    }

    // show the alt text at the bottom of the image.
    let SHOW_ALT = true

    // load data and create widget
    let data = await loadData()
    let widget = await createWidget(data)

    if (!config.runsInWidget) {
    await widget.presentLarge()
    }

    // Tell the system to show the widget.
    Script.setWidget(widget)
    Script.complete()

    async function createWidget(data) {
    const w = new ListWidget();

    let isDarkMode =
    BACKGROUND_DARK_MODE=="system" ?
    await isUsingDarkAppearance() :
    BACKGROUND_DARK_MODE=="yes"

    if (isDarkMode) {
    w.backgroundGradient = newLinearGradient('#010c1ee6','#001e38b3')
    } else {
    w.backgroundGradient = newLinearGradient('#b00a0fe6','#b00a0fb3')
    }

    let titleTxt = w.addText(data.safe_title)
    titleTxt.font = Font.boldSystemFont(14)
    titleTxt.centerAlignText()
    titleTxt.textColor = Color.white()

    w.addSpacer(2)

    let img = await downloadImage(data.img);
    let pic = w.addImage(img)
    pic.centerAlignImage()

    w.addSpacer()

    if (SHOW_ALT) {
    let subTxt = w.addText(`${data.num}: ${data.alt}`)
    subTxt.font = Font.mediumSystemFont(10)
    subTxt.textColor = Color.white()
    subTxt.textOpacity = 0.9
    subTxt.centerAlignText()
    }

    return w
    }
    async function loadData() {
    return (await xkcd(RANDOM))
    }
    function newLinearGradient(from, to) {
    let gradient = new LinearGradient()
    gradient.locations = [0, 1]
    gradient.colors = [
    new Color(from),
    new Color(to)
    ]
    return gradient
    }
    async function downloadImage(imgurl) {
    let imgReq = new Request(imgurl)
    let img = await imgReq.loadImage()
    return img
    }
    async function xkcd(random) {
    let url = "https://xkcd.com/info.0.json"
    let req = new Request(url)
    let json = await req.loadJSON()

    if (random) {
    let rnd = Math.floor(Math.random() * (json.num - 1 + 1) ) + 1
    url = `https://xkcd.com/${rnd}/info.0.json`
    req = new Request(url)
    json = await req.loadJSON()
    }

    return json
    }

    async function isUsingDarkAppearance() {
    // yes there's a Device.isUsingDarkAppearance() method
    // but I find it unreliable
    const wv = new WebView()
    let js ="(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)"
    let r = await wv.evaluateJavaScript(js)
    return r
    }
    // get it here instead
    // https://github.com/supermamon/scriptable-scripts/tree/master/xkcd-widget
  2. supermamon created this gist Sep 17, 2020.
    114 changes: 114 additions & 0 deletions xkcdWidget.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,114 @@
    // Variables used by Scriptable.
    // These must be at the very top of the file. Do not edit.
    // icon-color: gray; icon-glyph: angle-right;

    // script : xkcdWidget.js
    // version : 1.0.0
    // description: xkcd widget for Scriptable.app
    // author : @supermamon
    // date : 2020-09-17


    const BACKGROUND_DARK_MODE = "system"
    // options: "yes", "no", "system"

    let RANDOM = false
    // default is current comic
    // set the Parameter value to "random" in the
    // Edit Widget screen to use a random comic
    if (args.widgetParameter == 'random') {
    RANDOM = true
    }

    // show the alt text at the bottom of the image.
    let SHOW_ALT = true

    // load data and create widget
    let data = await loadData()
    let widget = await createWidget(data)

    if (!config.runsInWidget) {
    await widget.presentLarge()
    }

    // Tell the system to show the widget.
    Script.setWidget(widget)
    Script.complete()

    async function createWidget(data) {
    const w = new ListWidget();

    let isDarkMode =
    BACKGROUND_DARK_MODE=="system" ?
    await isUsingDarkAppearance() :
    BACKGROUND_DARK_MODE=="yes"

    if (isDarkMode) {
    w.backgroundGradient = newLinearGradient('#010c1ee6','#001e38b3')
    } else {
    w.backgroundGradient = newLinearGradient('#b00a0fe6','#b00a0fb3')
    }

    let titleTxt = w.addText(data.safe_title)
    titleTxt.font = Font.boldSystemFont(14)
    titleTxt.centerAlignText()
    titleTxt.textColor = Color.white()

    w.addSpacer(2)

    let img = await downloadImage(data.img);
    let pic = w.addImage(img)
    pic.centerAlignImage()

    w.addSpacer()

    if (SHOW_ALT) {
    let subTxt = w.addText(`${data.num}: ${data.alt}`)
    subTxt.font = Font.mediumSystemFont(10)
    subTxt.textColor = Color.white()
    subTxt.textOpacity = 0.9
    subTxt.centerAlignText()
    }

    return w
    }
    async function loadData() {
    return (await xkcd(RANDOM))
    }
    function newLinearGradient(from, to) {
    let gradient = new LinearGradient()
    gradient.locations = [0, 1]
    gradient.colors = [
    new Color(from),
    new Color(to)
    ]
    return gradient
    }
    async function downloadImage(imgurl) {
    let imgReq = new Request(imgurl)
    let img = await imgReq.loadImage()
    return img
    }
    async function xkcd(random) {
    let url = "https://xkcd.com/info.0.json"
    let req = new Request(url)
    let json = await req.loadJSON()

    if (random) {
    let rnd = Math.floor(Math.random() * (json.num - 1 + 1) ) + 1
    url = `https://xkcd.com/${rnd}/info.0.json`
    req = new Request(url)
    json = await req.loadJSON()
    }

    return json
    }

    async function isUsingDarkAppearance() {
    // yes there's a Device.isUsingDarkAppearance() method
    // but I find it unreliable
    const wv = new WebView()
    let js ="(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)"
    let r = await wv.evaluateJavaScript(js)
    return r
    }