25:["$","title",null,{"children":"Scriptable Widget HTML renderer | Jed Fox | Observable"}] 49:T487,// https://gist.github.com/rudotriton/9d11ce1101ff1269f56844871b3fd536 async function xkcdWidget(Script) { const url = "https://xkcd.com/info.0.json"; const req = new Request(url); const { img: imgUrl } = await req.loadJSON(); const imgReq = await new Request(imgUrl); const img = await imgReq.loadImage(); if (config.runsInWidget) { // create and show widget let widget = createWidget(img); Script.setWidget(widget); Script.complete(); } else { Safari.open(imgUrl); } function createWidget(img) { let widget = new ListWidget(); widget.backgroundColor = new Color("#ffffff"); widget.centerAlignContent(); widget.url = imgUrl; let image = widget.addImage(img); image.centerAlignImage(); const [width, height] = getDimensions(); image.imageSize = new Size(width, height); return widget; } function getDimensions() { const size = args.widgetParameter || 1; switch (Number(size)) { case 1: return [150, 150]; case 2: return [300, 150]; case 4: return [300, 300]; default: return [150, 150]; break; } } }4a:Tbde,// https://gist.github.com/supermamon/c1d5a3a2a5c58af25f731f42eb8e5af2 async function otherXKCDWidget(Script) { // 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() { return Device.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; */ } }4b:T71f,// https://talk.automators.fm/t/widget-examples/7994/2 async function macStoriesWidget(Script) { 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.font = Font.headline(); titleTxt.textColor = Color.white(); let authorsTxt = w.addText("by " + authors); authorsTxt.font = Font.body(); authorsTxt.textColor = Color.white(); authorsTxt.textOpacity = 0.8; let dateTxt = w.addText(strDate); dateTxt.font = Font.body(); 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 = / /;
let html = item[

= 2) { return matches[1]; } else { return null; } } function decode(str) { let regex = /&#(\d+);/g; return str.replace(regex, (match, dec) => { return String.fromCharCode(dec); }); } }4c:T7c3,// https://gist.github.com/planecore/e7b4c1e5db2dd28b1a023860e831355e async function covidWidget(Script) { const country = "Israel"; const url = `https://coronavirus-19-api.herokuapp.com/countries/${country}`; const req = new Request(url); const res = await req.loadJSON(); if (config.runsInWidget) { // create and show widget let widget = createWidget( "Coronavirus", `${res.todayCases} Today`, `${res.cases} Total`, "#53d769" ); Script.setWidget(widget); Script.complete(); } else { // make table let table = new UITable(); // add header let row = new UITableRow(); row.isHeader = true; row.addText(`Coronavirus Stats in ${country}`); table.addRow(row); // fill data table.addRow(createRow("Cases", res.cases)); table.addRow(createRow("Today", res.todayCases)); table.addRow(createRow("Deaths", res.deaths)); table.addRow(createRow("Recovered", res.recovered)); table.addRow(createRow("Critical", res.critical)); if (config.runsWithSiri) Speech.speak( `There are ${res.cases} cases in ${country}, and ${res.todayCases} cases today.` ); // present table table.present(); } function createRow(title, number) { let row = new UITableRow(); row.addText(title); row.addText(number.toString()).rightAligned(); return row; } function createWidget(pretitle, title, subtitle, color) { let w = new ListWidget(); w.backgroundColor = new Color(color); let preTxt = w.addText(pretitle); preTxt.textColor = Color.white(); preTxt.textOpacity = 0.8; preTxt.font = Font.systemFont(16); w.addSpacer(5); let titleTxt = w.addText(title); titleTxt.textColor = Color.white(); titleTxt.font = Font.systemFont(22); w.addSpacer(5); let subTxt = w.addText(subtitle); subTxt.textColor = Color.white(); subTxt.textOpacity = 0.8; subTxt.font = Font.systemFont(18); return w; } }4d:T2565,// https://github.com/jasonsnell/PurpleAir-AQI-Scriptable-Widget/blob/be51067a4d3612bb54c74f9e8a264dfe8fd4b332/purpleair-aqi.js async function aqiWidget(Script) { /** * This code is from * By Jason Snell based on code by Matt Silverlock, Rob Silverii, Adam Lickel, Alexander Ogilvie */ const API_URL = "https://www.purpleair.com/json?show="; /** * Find a nearby PurpleAir sensor ID via https://fire.airnow.gov/ * Click a sensor near your location: the ID is the trailing integers * https://www.purpleair.com/json has all sensors by location & ID. * @type {string} */ const SENSOR_ID = args.widgetParameter || "69223"; /** * Widget attributes: AQI level threshold, text label, gradient start and end colors, text color * * @typedef {object} LevelAttribute * @property {number} threshold * @property {string} label * @property {string} startColor * @property {string} endColor * @property {string} textColor * @property {string} darkStartColor * @property {string} darkEndColor * @property {string} darkTextColor */ /** * @typedef {object} SensorData * @property {string} val * @property {string} adj1 * @property {string} adj2 * @property {number} ts * @property {string} hum * @property {string} loc * @property {string} lat * @property {string} lon */ /** * Fetch content from PurpleAir * * @param {string} url * @param {string} id * @returns {Promise} */ async function getSensorData(url, id) { const req = new Request(`${url}${id}`); const json = await req.loadJSON(); return { val: json.results[0].Stats, adj1: json.results[0].pm2_5_cf_1, adj2: json.results[1].pm2_5_cf_1, ts: json.results[0].LastSeen, hum: json.results[0].humidity, loc: json.results[0].Label, lat: json.results[0].Lat, lon: json.results[0].Lon }; } /** @type {Array} sorted by threshold desc. */ const LEVEL_ATTRIBUTES = [ { threshold: 300, label: "Hazardous", startColor: "9e2043", endColor: "7e0023", textColor: "ffffff", darkStartColor: "9e2043", darkEndColor: "7e0023", darkTextColor: "bbbbbb" }, { threshold: 200, label: "Very Unhealthy", startColor: "edc4ff", endColor: "edc4ff", textColor: "8f3f97", darkStartColor: "8f3f97", darkEndColor: "6f1f77", darkTextColor: "ffffff" }, { threshold: 150, label: "Unhealthy", startColor: "FF3D3D", endColor: "D60000", textColor: "000000", darkStartColor: "820a00", darkEndColor: "530500", darkTextColor: "999999" }, { threshold: 100, label: "Unhealthy for Sensitive Groups", startColor: "facc00", endColor: "faa003", textColor: "000000", darkStartColor: "333333", darkEndColor: "000000", darkTextColor: "ff7600" }, { threshold: 50, label: "Moderate", startColor: "ffff00", endColor: "dddd00", textColor: "000000", darkStartColor: "333333", darkEndColor: "000000", darkTextColor: "ffff00" }, { threshold: -20, label: "Good", startColor: "00ff00", endColor: "00bb00", textColor: "000000", darkStartColor: "005500", darkEndColor: "003300", darkTextColor: "ffffff" } ]; /** * Get the EPA adjusted PPM * * @param {SensorData} sensorData * @returns {number} EPA draft adjustment for wood smoke and PurpleAir from https://cfpub.epa.gov/si/si_public_record_report.cfm?dirEntryId=349513&Lab=CEMM&simplesearch=0&showcriteria=2&sortby=pubDate&timstype=&datebeginpublishedpresented=08/25/2018 */ function computePM(sensorData) { const adj1 = Number.parseInt(sensorData.adj1, 10); const adj2 = Number.parseInt(sensorData.adj2, 10); const hum = Number.parseInt(sensorData.hum, 10); const dataAverage = (adj1 + adj2) / 2; return 0.52 * dataAverage - 0.085 * hum + 5.71; } /** * Get AQI number from PPM reading * * @param {number} pm * @returns {number|'-'} */ function aqiFromPM(pm) { if (pm > 350.5) return calculateAQI(pm, 500.0, 401.0, 500.0, 350.5); if (pm > 250.5) return calculateAQI(pm, 400.0, 301.0, 350.4, 250.5); if (pm > 150.5) return calculateAQI(pm, 300.0, 201.0, 250.4, 150.5); if (pm > 55.5) return calculateAQI(pm, 200.0, 151.0, 150.4, 55.5); if (pm > 35.5) return calculateAQI(pm, 150.0, 101.0, 55.4, 35.5); if (pm > 12.1) return calculateAQI(pm, 100.0, 51.0, 35.4, 12.1); if (pm >= 0.0) return calculateAQI(pm, 50.0, 0.0, 12.0, 0.0); return "-"; } /** * Calculate the AQI number * * @param {number} Cp * @param {number} Ih * @param {number} Il * @param {number} BPh * @param {number} BPl * @returns {number} */ function calculateAQI(Cp, Ih, Il, BPh, BPl) { const a = Ih - Il; const b = BPh - BPl; const c = Cp - BPl; return Math.round((a / b) * c + Il); } /** * Calculates the AQI level * based on https://cfpub.epa.gov/airnow/index.cfm?action=aqibasics.aqi#unh * * @param {number|'-'} aqi * @returns {LevelAttribute & { level: number }} */ function calculateLevel(aqi) { const level = Number(aqi) || 0; const { label = "Weird", startColor = "white", endColor = "white", textColor = "black", darkStartColor = "009900", darkEndColor = "007700", darkTextColor = "000000", threshold = -Infinity } = LEVEL_ATTRIBUTES.find(({ threshold }) => level > threshold) || {}; return { label, startColor, endColor, textColor, darkStartColor, darkEndColor, darkTextColor, threshold, level }; } /** * Get the AQI trend * * @param {{ v1: number; v3: number; }} stats * @returns {string} */ function getAQITrend({ v1: partLive, v3: partTime }) { const partDelta = partTime - partLive; if (partDelta > 5) return "arrow.down"; if (partDelta < -5) return "arrow.up"; return "arrow.left.and.right"; } async function run() { const listWidget = new ListWidget(); listWidget.setPadding(10, 15, 10, 10); try { console.log(`Using sensor ID: ${SENSOR_ID}`); const data = await getSensorData(API_URL, SENSOR_ID); const stats = JSON.parse(data.val); console.log(stats); const aqiTrend = getAQITrend(stats); console.log(aqiTrend); const epaPM = computePM(data); console.log(`EPA PM is ${epaPM}`); const aqi = aqiFromPM(epaPM); const level = calculateLevel(aqi); const aqiText = aqi.toString(); console.log(`AQI is ${aqi}`); const isDarkMode = Device.isUsingDarkAppearance(); const startColor = new Color( isDarkMode ? level.darkStartColor : level.startColor ); const endColor = new Color( isDarkMode ? level.darkEndColor : level.endColor ); const textColor = new Color( isDarkMode ? level.darkTextColor : level.textColor ); const gradient = new LinearGradient(); console.log(`${isDarkMode ? "dark" : "light"} mode`); gradient.colors = [startColor, endColor]; gradient.locations = [0.0, 1]; console.log(gradient); listWidget.backgroundGradient = gradient; const header = listWidget.addText(`Air Quality`); header.textColor = textColor; header.font = Font.regularSystemFont(14); listWidget.addSpacer(5); const scoreStack = listWidget.addStack(); const content = scoreStack.addText(aqiText); content.textColor = textColor; content.font = Font.mediumSystemFont(30); const trendSymbol = createSymbol(aqiTrend); const trendImg = scoreStack.addImage(trendSymbol.image); trendImg.resizable = false; trendImg.tintColor = textColor; trendImg.imageSize = new Size(30, 38); const wordLevel = listWidget.addText(level.label); wordLevel.textColor = textColor; wordLevel.font = Font.semiboldSystemFont(24); wordLevel.minimumScaleFactor = 0.3; listWidget.addSpacer(10); const location = listWidget.addText(data.loc); location.textColor = textColor; location.font = Font.regularSystemFont(13); location.minimumScaleFactor = 0.5; const updatedAt = new Date(data.ts * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); const widgetText = listWidget.addText(`Updated ${updatedAt}`); widgetText.textColor = textColor; widgetText.font = Font.regularSystemFont(10); widgetText.minimumScaleFactor = 0.5; const purpleMapUrl = `https://www.purpleair.com/map?opt=1/i/mAQI/a10/cC5&select=${SENSOR_ID}#14/${data.lat}/${data.lon}`; listWidget.url = purpleMapUrl; } catch (error) { console.log(error); const errorWidgetText = listWidget.addText(`${error}`); errorWidgetText.textColor = Color.red(); errorWidgetText.textOpacity = 30; errorWidgetText.font = Font.regularSystemFont(10); } if (config.runsInApp) { listWidget.presentSmall(); } Script.setWidget(listWidget); Script.complete(); } await run(); function createSymbol(name) { const font = Font.systemFont(20); const sym = SFSymbol.named(name); sym.applyFont(font); return sym; } }4e:T615,// https://talk.automators.fm/t/widget-examples/7994/11 async function redditWidget(Script) { 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.font = Font.headline(); 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; } }4f:T9cc,// https://talk.automators.fm/t/widget-examples/7994/69 async function nowPlayingWidget(Script) { const url = "https://www.npo3fm.nl/api/tracks"; const placeholder = "https://www.npo3fm.nl/templates/npo3fm/images/placeholder-1by1.png"; const logoURL = "http://franklyfilms.com/3fmlogo.png"; async function createWidget(nowPlaying) { let widget = new ListWidget(); const threefmLogo = await loadImage(logoURL); const logo = widget.addImage(threefmLogo); logo.imageSize = new Size(38, 18); logo.rightAlignImage(); // load image const coverArt = await loadImage(nowPlaying.image_url_400x400); widget.backgroundImage = coverArt; widget.addSpacer(); // set gradient background let startColor = new Color("#1c1c1c19"); let endColor = new Color("#1c1c1cb4"); let gradient = new LinearGradient(); gradient.colors = [startColor, endColor]; gradient.locations = [0.0, 1]; widget.backgroundGradient = gradient; widget.backgroundColor = new Color("1c1c1c"); // add title and artist let title = nowPlaying.title.toLowerCase(); // capitalize every first character title = title.replace(/\b\w/g, function(c) { return c.toUpperCase(); }); let titleTxt = widget.addText(title); titleTxt.font = Font.boldSystemFont(12); titleTxt.textColor = Color.white(); titleTxt.leftAlignText(); widget.addSpacer(2); let artist = nowPlaying.artist.toLowerCase(); // capitalize every first character artist = artist.replace(/\b\w/g, function(c) { return c.toUpperCase(); }); let artistTxt = widget.addText(artist); artistTxt.font = Font.systemFont(10); artistTxt.textColor = Color.yellow(); artistTxt.textOpacity = 1; artistTxt.leftAlignText(); widget.setPadding(8, 15, 10, 5); widget.url = "npo3fm://"; return widget; } // helper function to load and parse a restful json api async function loadNowPlaying(coverArt) { const req = new Request(url); const json = await req.loadJSON(); return json.data[0]; } // helper function to download an image from a given url async function loadImage(imgUrl) { const url = imgUrl !== null ? imgUrl : placeholder; const req = new Request(url); const image = await req.loadImage(); return image; } const nowPlaying = await loadNowPlaying(); const widget = await createWidget(nowPlaying); Script.setWidget(widget); Script.complete(); widget.presentSmall(); }50:T15d8,// https://gist.github.com/mzeryck/4f9255224fe707ee74d86dc6465feea2 async function calendarWidget(Script) { // This widget was created by Max Zeryck @mzeryck // Note: before using this script in a widget, change const TEST_MODE to true and run it in the Scriptable app. // The app will prompt you to give calendar access, and then show a preview of the widget. // Make sure to change it back to const TEST_MODE = false prior to adding it to a widget. Happy coding! const IMAGE_SOURCE = "Unsplash"; const TERMS = "nature,water"; const FORCE_IMAGE_UPDATE = false; const TEST_MODE = false; // Store current datetime const date = new Date(); // If we're running the script normally, go to the Calendar. if (!config.runsInWidget && !TEST_MODE) { const appleDate = new Date('2001/01/01'); const timestamp = (date.getTime() - appleDate.getTime()) / 1000; const callback = new CallbackURL("calshow:" + timestamp); callback.open(); Script.complete(); // Otherwise, create the widget. } else { let widget = new ListWidget(); // Format the date info let df = new DateFormatter(); df.dateFormat = "EEEE"; let dayOfWeek = widget.addText(df.string(date).toUpperCase()); let dateNumber = widget.addText(date.getDate().toString()); dayOfWeek.font = Font.semiboldSystemFont(13); dateNumber.font = Font.lightSystemFont(34); // Find future events that aren't all day and aren't canceled const events = await CalendarEvent.today([]); let futureEvents = []; for (const event of events) { if ( event.startDate.getTime() > date.getTime() && !event.isAllDay && !event.title.startsWith("Canceled:") ) { futureEvents.push(event); } } // If there is at least one future event today if (futureEvents.length != 0) { dayOfWeek.textColor = Color.red(); widget.addSpacer(); let titleOne = widget.addText(futureEvents[0].title); titleOne.font = Font.mediumSystemFont(14); widget.addSpacer(7); let timeOne = widget.addText(formatTime(futureEvents[0].startDate)); timeOne.font = Font.regularSystemFont(14); timeOne.textColor = Color.gray(); // If we have multiple future events, show the following one if (futureEvents.length > 1) { // We only have room for single-line event names titleOne.lineLimit = 1; widget.addSpacer(12); let titleTwo = widget.addText(futureEvents[1].title); titleTwo.font = Font.mediumSystemFont(14); titleTwo.lineLimit = 1; widget.addSpacer(7); let timeTwo = widget.addText(formatTime(futureEvents[1].startDate)); timeTwo.font = Font.regularSystemFont(14); timeTwo.textColor = Color.gray(); } // If there are no future events today } else { dayOfWeek.textColor = Color.white(); dateNumber.textColor = Color.white(); let files = FileManager.local(); const path = files.joinPath( files.documentsDirectory(), "mz_calendar_widget.jpg" ); const modificationDate = files.modificationDate(path); // Download image if it doesn't exist, wasn't created today, or update is forced if ( !modificationDate || !sameDay(modificationDate, date) || FORCE_IMAGE_UPDATE ) { try { let img = await provideImage(IMAGE_SOURCE, TERMS); files.writeImage(path, img); widget.backgroundImage = img; } catch { widget.backgroundImage = files.readImage(path); } } else { widget.backgroundImage = files.readImage(path); } // Add overlay to image let gradient = new LinearGradient(); gradient.colors = [new Color("#000000", 0.5), new Color("#000000", 0)]; gradient.locations = [0, 0.5]; widget.backgroundGradient = gradient; widget.addSpacer(); } // Finalize widget settings widget.setPadding(16, 16, 16, 0); widget.spacing = -3; Script.setWidget(widget); widget.presentSmall(); Script.complete(); } // Helper function to interpret sources and terms async function provideImage(source, terms) { if (source == "Bing") { const url = "http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=en-US"; const req = new Request(url); const json = await req.loadJSON(); const imgURL = "http://bing.com" + json.images[0].url; const img = await downloadImage(imgURL); const rect = new Rect(-78, 0, 356, 200); return cropImage(img, rect); } else if (source == "Unsplash") { const img = await downloadImage( "https://source.unsplash.com/featured/500x500/?" + terms ); return img; } } // Helper function to download images async function downloadImage(url) { const req = new Request(url); return await req.loadImage(); } // Crop an image into a rect function cropImage(img, rect) { let draw = new DrawContext(); draw.respectScreenScale = true; draw.drawImageInRect(img, rect); return draw.getImage(); } // Formats the times under each event function formatTime(date) { let df = new DateFormatter(); df.useNoDateStyle(); df.useShortTimeStyle(); return df.string(date); } // Determines if two dates occur on the same day function sameDay(d1, d2) { return ( d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate() ); } }51:T29c1,// https://gist.github.com/ImGamez/a8f9d77bf660d7703cc96fee87cdc4b0 async function weatherWidget(Script, Image) { let previousDelta; // Widget Params // Don't edit this, those are default values for debugging (location for Cupertino). // You need to give your locations parameters through the widget params, more info below. const widgetParams = JSON.parse( args.widgetParameter != null ? args.widgetParameter : '{ "LAT" : "37.32" , "LON" : "-122.03" , "LOC_NAME" : "Cupertino, US" }' ); // WEATHER API PARAMETERS !important // API KEY, you need an Open Weather API Key // You can get one for free at: https://home.openweathermap.org/api_keys (account needed). const API_KEY = openWeatherAPIKey; // Latitude and Longitude of the location where you get the weather of. // You can get those from the Open Weather website while searching for a city, etc. // This values are getted from the widget parameters, the widget parameters is a JSON string that looks like this: // { "LAT" : "" , "LON" : "" , "LOC_NAME" : "" } // This to allow multiple instances of the widget with different locations, if you will only use one instance (1 widget), you can "hardcode" the values here. // Note: To debug the widget you need to place the values here, because when playing the script in-app the widget parameters are null (= crash). const LAT = widgetParams.LAT; const LON = widgetParams.LON; const LOCATION_NAME = widgetParams.LOC_NAME; // Looking settings // This are settings to customize the looking of the widgets, because this was made an iPhone SE (2016) screen, I can't test for bigger screens. // So feel free to modify this to your taste. // units : string > Defines the unit used to measure the temps, for temperatures in Fahrenheit use "imperial", "metric" for Celcius and "standard" for Kelvin (Default: "metric"). const units = "metric"; // twelveHours : true|false > Defines if the hours are displayed in a 12h format, use false for 24h format. (Default: true) const twelveHours = true; // roundedGraph : true|false > true (Use rounded values to draw the graph) | false (Draws the graph using decimal values, this can be used to draw an smoother line). const roundedGraph = true; // roundedTemp : true|false > true (Displays the temps rounding the values (29.8 = 30 | 29.3 = 29). const roundedTemp = true; // hoursToShow : number > Number of predicted hours to show, Eg: 3 = a total of 4 hours in the widget (Default: 3 for the small widget and 11 for the medium one). const hoursToShow = config.widgetFamily == "small" ? 3 : 11; // spaceBetweenDays : number > Size of the space between the temps in the graph in pixels. (Default: 60 for the small widget and 44 for the medium one). const spaceBetweenDays = config.widgetFamily == "small" ? 60 : 44; // Widget Size !important. // Since the widget works "making" an image and displaying it as the widget background, you need to specify the exact size of the widget to // get an 1:1 display ratio, if you specify an smaller size than the widget itself it will be displayed blurry. // You can get the size simply taking an screenshot of your widgets on the home screen and measuring them in an image-proccessing software. // contextSize : number > Height of the widget in screen pixels, this depends on you screen size (for an 4 inch display the small widget is 282 * 282 pixels on the home screen) const contextSize = 159; // mediumWidgetWidth : number > Width of the medium widget in pixels, this depends on you screen size (for an 4 inch display the medium widget is 584 pixels long on the home screen) const mediumWidgetWidth = 348; // accentColor : Color > Accent color of some elements (Graph lines and the location label). const accentColor = new Color("#EB6E4E", 1); // backgroundColor : Color > Background color of the widgets. const backgroundColor = new Color("#1C1C1E", 1); // Position and size of the elements on the widget. // All coordinates make reference to the top-left of the element. // locationNameCoords : Point > Define the position in pixels of the location label. const locationNameCoords = new Point(30, 30); // locationNameFontSize : number > Size in pixels of the font of the location label. const locationNameFontSize = 24; // weatherDescriptionCoords : Point > Position of the weather description label in pixels. const weatherDescriptionCoords = new Point(30, 52); // weatherDescriptionFontSize : number > Font size of the weather description label. const weatherDescriptionFontSize = 18; //footerFontSize : number > Font size of the footer labels (feels like... and last update time). const footerFontSize = 20; //feelsLikeCoords : Point > Coordinates of the "feels like" label. const feelsLikeCoords = new Point(30, 230); //lastUpdateTimePosAndSize : Rect > Defines the coordinates and size of the last updated time label. const lastUpdateTimePosAndSize = new Rect( config.widgetFamily == "small" ? 150 : 450, 230, 100, footerFontSize + 1 ); //From here proceed with caution. let fm = FileManager.iCloud(); let cachePath = fm.joinPath(fm.documentsDirectory(), "weatherCache"); if (!fm.fileExists(cachePath)) { fm.createDirectory(cachePath); } let weatherData; let usingCachedData = false; let drawContext = new DrawContext(); drawContext.size = new Size( config.widgetFamily == "small" ? contextSize : mediumWidgetWidth, contextSize ); drawContext.opaque = false; drawContext.setTextAlignedCenter(); try { weatherData = await new Request( "https://api.openweathermap.org/data/2.5/onecall?lat=" + LAT + "&lon=" + LON + "&exclude=daily,minutely,alerts&units=" + units + "&lang=en&appid=" + API_KEY ).loadJSON(); fm.writeString( fm.joinPath(cachePath, "lastread" + "_" + LAT + "_" + LON), JSON.stringify(weatherData) ); } catch (e) { console.log("Offline mode"); try { await fm.downloadFileFromiCloud( fm.joinPath(cachePath, "lastread" + "_" + LAT + "_" + LON) ); let raw = fm.readString( fm.joinPath(cachePath, "lastread" + "_" + LAT + "_" + LON) ); weatherData = JSON.parse(raw); usingCachedData = true; } catch (e2) { console.log("Error: No offline data cached"); } } let widget = new ListWidget(); widget.setPadding(0, 0, 0, 0); widget.backgroundColor = backgroundColor; drawText( LOCATION_NAME, locationNameFontSize, locationNameCoords.x, locationNameCoords.y, accentColor ); drawText( weatherData.current.weather[0].description, weatherDescriptionFontSize, weatherDescriptionCoords.x, weatherDescriptionCoords.y, Color.white() ); let min, max, diff; for (let i = 0; i <= hoursToShow; i++) { let temp = shouldRound(roundedGraph, weatherData.hourly[i].temp); min = temp < min || min == undefined ? temp : min; max = temp > max || max == undefined ? temp : max; } diff = max - min; for (let i = 0; i <= hoursToShow; i++) { let hourData = weatherData.hourly[i]; let nextHourTemp = shouldRound( roundedGraph, weatherData.hourly[i + 1].temp ); let hour = epochToDate(hourData.dt).getHours(); if (twelveHours) hour = hour > 12 ? hour - 12 : hour == 0 ? "12a" : hour == 12 ? "12p" : hour; let temp = i == 0 ? weatherData.current.temp : hourData.temp; let delta = diff > 0 ? (shouldRound(roundedGraph, temp) - min) / diff : 0.5; let nextDelta = diff > 0 ? (nextHourTemp - min) / diff : 0.5; if (i < hoursToShow) drawLine( spaceBetweenDays * i + 50, 175 - 50 * delta, spaceBetweenDays * (i + 1) + 50, 175 - 50 * nextDelta, 4, hourData.dt > weatherData.current.sunset ? Color.gray() : accentColor ); drawTextC( shouldRound(roundedTemp, temp) + "°", 20, spaceBetweenDays * i + 30, 135 - 50 * delta, 50, 21, Color.white() ); await drawImage( await loadImage( i == 0 ? weatherData.current.weather[0].icon : hourData.weather[0].icon ), spaceBetweenDays * i + 25, 150 - 50 * delta ); drawTextC( i == 0 ? "Now" : hour, 18, spaceBetweenDays * i + 25, 200, 50, 21, Color.gray() ); previousDelta = delta; } drawText( "feels like " + Math.round(weatherData.current.feels_like) + "°", footerFontSize, feelsLikeCoords.x, feelsLikeCoords.y, Color.gray() ); drawContext.setTextAlignedRight(); drawTextC( epochToDate(weatherData.current.dt).toLocaleTimeString(), footerFontSize, lastUpdateTimePosAndSize.x, lastUpdateTimePosAndSize.y, lastUpdateTimePosAndSize.width, lastUpdateTimePosAndSize.height, Color.gray() ); widget.backgroundImage = drawContext.getImage(); widget.presentMedium(); async function loadImage(imgName) { if (fm.fileExists(fm.joinPath(cachePath, imgName))) { await fm.downloadFileFromiCloud(fm.joinPath(cachePath, imgName)); return Image.fromData(Data.fromFile(fm.joinPath(cachePath, imgName))); } else { let imgdata = await new Request( "https://openweathermap.org/img/wn/" + imgName + ".png" ).load(); let img = Image.fromData(imgdata); fm.write(fm.joinPath(cachePath, imgName), imgdata); return img; } } function epochToDate(epoch) { return new Date(epoch * 1000); } function drawText(text, fontSize, x, y, color = Color.black()) { drawContext.setFont(Font.boldSystemFont(fontSize)); drawContext.setTextColor(color); drawContext.drawText(new String(text).toString(), new Point(x, y)); } async function drawImage(image, x, y) { await drawContext.drawImageAtPoint(image, new Point(x, y)); } function drawTextC(text, fontSize, x, y, w, h, color = Color.black()) { drawContext.setFont(Font.boldSystemFont(fontSize)); drawContext.setTextColor(color); drawContext.drawTextInRect( new String(text).toString(), new Rect(x, y, w, h) ); } function drawLine(x1, y1, x2, y2, width, color) { const path = new Path(); path.move(new Point(x1, y1)); path.addLine(new Point(x2, y2)); drawContext.addPath(path); drawContext.setStrokeColor(color); drawContext.setLineWidth(width); drawContext.strokePath(); } function shouldRound(should, value) { return should ? Math.round(value) : value; } Script.setWidget(widget); Script.complete(); }52:T42b,class WidgetImage { constructor(image) { this.image = image; this._align = 'flex-start'; this._mode = 'contain'; } leftAlignImage() { this._align = 'flex-start'; } centerAlignImage() { this._align = 'center'; } rightAlignImage() { this._align = 'flex-end'; } applyFittingContentMode() { this._mode = 'contain'; } applyFillingContentMode() { this._mode = 'cover'; } _getImage() { if (this.image instanceof SFSymbol) { return html`${this.image._str}`; } const image = html`

`; image.style.maxWidth = '100%'; image.style.maxHeight = '100%'; image.style.objectFit = this._mode; return image; } _render() { // TODO: resizable, imageSize, imageOpacity, cornerRadius, borderWidth, borderColor, containerRelativeShape, tintColor, url return html`

${this._getImage()}`; } }53:T686,class WidgetStack { constructor() { this._axis = 'row'; this._align = 'flex-start'; this._children = []; this.backgroundColor = null; this.backgroundGradient = null; this.backgroudImage = null; this.padding = [10, 10, 10, 10]; } centerAlignContent() { this._align = 'center'; } layoutHorizontally() { this._axis = 'row'; } layoutVertically() { this._axis = 'column'; } setPadding(...args) { this.padding = args; } addImage(image) { const node = new WidgetImage(image); this._children.push(node); return node; } addText(text) { const node = new WidgetText(text); this._children.push(node); return node; } addSpacer(length) { const node = new WidgetSpacer(length); this._children.push(node); return node; } addStack() { const node = new WidgetStack(); this._children.push(node); return node; } _render() { const div = html`

${this._children.map(c => c._render(this._axis))}`; Object.assign(div.style, { display: 'flex', flexDirection: this._axis, alignItems: this._align, justifyContent: 'center', boxSizing: 'border-box', paddingTop: this.padding[0] + 'px', paddingLeft: this.padding[1] + 'px', paddingBottom: this.padding[2] + 'px', paddingRight: this.padding[3] + 'px', background: [ this.backgroundGradient, this.backgroundImage && `url("${this.backgroundImage}")`, this.backgroundColor ] .filter(Boolean) .join(', ') || 'transparent', backgroundSize: 'cover' }); return div; } }54:T7ee,class DateFormatter { constructor() { this._options = {}; this._formatter = null; this.locale = undefined; } _getFormatter() { if (this._formatter) return this._formatter; this._formatter = new Intl.DateTimeFormat(this.locale, this._options); return this._formatter; } string(date) { return this._getFormatter().format(date); } useNoDateStyle() { delete this._formatter; delete this._options.era; delete this._options.year; delete this._options.month; delete this._options.day; delete this._options.weekday; } useShortDateStyle() { this.useNoDateStyle(); this._options.year = '2-digit'; this._options.month = '2-digit'; this._options.day = '2-digit'; } useMediumDateStyle() { this.useNoDateStyle(); this._options.year = 'numeric'; this._options.month = 'short'; this._options.day = 'numeric'; } useLongDateStyle() { this.useNoDateStyle(); this._options.year = 'numeric'; this._options.month = 'long'; this._options.day = 'numeric'; } useFullDateStyle() { this.useNoDateStyle(); this._options.era = 'long'; this._options.year = 'numeric'; this._options.month = 'long'; this._options.day = 'numeric'; this._options.weekday = 'long'; } useNoTimeStyle() { delete this._formatter; delete this._options.hour; delete this._options.minute; delete this._options.second; delete this._options.timeZoneName; } useShortTimeStyle() { this.useNoTimeStyle(); this._options.hour = 'numeric'; this._options.minute = '2-digit'; } useLongTimeStyle() { this.useNoTimeStyle(); this._options.hour = 'numeric'; this._options.minute = '2-digit'; this._options.second = '2-digit'; this._options.timeZoneName = 'short'; } useFullTimeStyle() { this.useNoTimeStyle(); this._options.hour = 'numeric'; this._options.minute = '2-digit'; this._options.second = '2-digit'; this._options.timeZoneName = 'long'; } }55:T6e6,class DrawContext { constructor() { this._commands = []; this._ctx = null; this._curPath = null; // deviates from standard this.respectScreenScale = true; } _getCtx() { if (!this._ctx) this._ctx = DOM.context2d( this.size.width, this.size.height, this.respectScreenScale ? null : 1 ); return this._ctx; } getImage() { const dataURL = this._getCtx().canvas.toDataURL('image/png'); const [prefix, data] = dataURL.split(','); const blob = b64toBlob(data, 'image/png'); return URL.createObjectURL(blob); } setFillColor(color) { this._getCtx().fillStyle = color.toString(); } setStrokeColor(color) { this._getCtx().strokeStyle = color.toString(); } setLineWidth(width) { this._getCtx().lineWidth = width; } addPath(path) { this._curPath = path._path; } strokePath() { this._getCtx().stroke(this._curPath); } fillPath() { this._getCtx().fill(this._curPath); } drawText(text, pos) { this._getCtx().fillText(text, pos.x, pos.y); } drawTextInRect(text, rect) { this._getCtx().fillText(text, rect.x, rect.y, rect.width); } setTextAlignedLeft() { this._getCtx().textAlign = 'left'; } setTextAlignedCenter() { this._getCtx().textAlign = 'center'; } setTextAlignedRight() { this._getCtx().textAlign = 'right'; } setFont(font) { this._getCtx().font = font._css; } setTextColor(color) { this.setFillColor(color); } // todo: make sync drawImageAtPoint(image, { x, y }) { const data = new Image(); data.src = image; return new Promise(resolve => { data.onload = () => { this._getCtx().drawImage(data, x, y); resolve(); }; }); } }56:[{"id":"378ffea39f676592fb26d084696b5065e642393cc50c4aaa55f3dc09952baa4e924cf6a74ccb3d6f74296ff3d21eca60e7f3787e01cb6ffbddd6b70c80c0f27c","href":"https://static.observableusercontent.com/files/378ffea39f676592fb26d084696b5065e642393cc50c4aaa55f3dc09952baa4e924cf6a74ccb3d6f74296ff3d21eca60e7f3787e01cb6ffbddd6b70c80c0f27c","name":"sf-symbols.json","type":"application/json","lastModified":1602307019522.276,"size":108941}] 29:{"id":"1812d1d95464159c","slug":null,"title":"Scriptable Widget HTML renderer","thumbnail":"7ee9ab03c710d841971416c0082de9010edb9da8ff67b6d879449c77fcdffd67","access_level":"unlisted","create_time":"$D2020-10-10T03:46:48.720Z","update_time":"$D2020-10-11T03:23:28.904Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":824,"publish_version":824,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scriptable Widget HTML renderer","cells":[{"id":0,"value":"md`\n# Scriptable Widget HTML renderer\n\nSee the discussion on [the Automators Discourse](https://talk.automators.fm/t/scriptable-widget-playground/9043?u=j-f1).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"viewof size = radio({\n title: \"Widget size\",\n options: Object.keys(sizes),\n value: 'small'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"viewof widgetName = radio({\n title: \"Widget name\",\n options: Object.keys(widgets),\n value: 'calendarWidget'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"widget._render(sizes[size])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"viewof sfSymbolFont = {\n let url = null;\n const form = html`

Select SFSymbolsFallback.ttf from SF Symbols Beta.app/Contents/Resources/ to enable SF Symbols: ${Object.assign(\n html``,\n { accept: \".ttf\" }\n )}\n`;\n form.querySelector('input').onchange = () => {\n if (url !== null) URL.revokeObjectURL(url);\n url = URL.createObjectURL(form.file.files[0]);\n form.value = url;\n form.dispatchEvent(new CustomEvent('input'));\n };\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"widget = runWidget(widgets[widgetName])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"async function myWidget(Script) {\n /* write your widget here */\n Script.setWidget(new ListWidget());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md`## Example Widgets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`## Support Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"widgets = ({\n xkcdWidget,\n otherXKCDWidget,\n macStoriesWidget,\n covidWidget,\n aqiWidget,\n redditWidget,\n calendarWidget,\n weatherWidget\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"async function runWidget(widgetFunc) {\n let widget;\n const Script = {\n setWidget(w) {\n widget = w;\n },\n complete() {}\n };\n await widgetFunc(Script, _Image);\n return widget;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"// iPhone 11 metrics\nsizes = ({\n small: [159, 159],\n medium: [348, 159],\n large: [348, 357]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`### Partially- or fully-implemented APIs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"class Color {\n constructor(hex, alpha = 1) {\n this.hex = hex;\n this.alpha = alpha;\n }\n\n static white() {\n return new Color('ffffff', 1);\n }\n static black() {\n return new Color('000000', 1);\n }\n\n // from http://clrs.cc\n static red() {\n return new Color('FF4136', 1);\n }\n static yellow() {\n return new Color('FFDC00', 1);\n }\n static gray() {\n return new Color('AAAAAA', 1);\n }\n\n toString() {\n if (this.hex[0] === '#') this.hex = this.hex.slice(1);\n return d3\n .color('#' + this.hex)\n .copy({ opacity: this.alpha })\n .toString();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"class Point {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"class Size {\n constructor(width, height) {\n this.width = width;\n this.height = height;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"class Rect {\n constructor(x, y, width, height) {\n this.x = x;\n this.y = y;\n this.width = width;\n this.height = height;\n }\n get origin() {\n return new Point(this.x, this.y);\n }\n get size() {\n return new Size(this.width, this.height);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"class WidgetText {\n constructor(text) {\n this.text = text;\n this.font = Font.body();\n this.color = Color.black();\n this.textOpacity = 1;\n this._align = 'left';\n }\n\n leftAlignText() {\n this._align = 'left';\n }\n centerAlignText() {\n this._align = 'center';\n }\n rightAlignText() {\n this._align = 'right';\n }\n\n _render(axis) {\n return html`

0\n ? `\n white-space: nowrap; \n overflow: hidden;\n text-overflow: ellipsis;\n `\n : ''\n }\n \">${DOM.text(this.text)}`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"class WidgetSpacer {\n constructor(length) {\n this.length = length;\n }\n _render(orientation) {\n if (this.length == null) {\n return html`

`;\n } else if (orientation == 'column') {\n return html`

`;\n } else if (orientation == 'row') {\n return html`

`;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"class ListWidget extends WidgetStack {\n constructor() {\n super();\n this.layoutVertically();\n }\n\n presentSmall() {}\n presentMedium() {}\n presentLarge() {}\n\n _render([width, height]) {\n const stack = super._render();\n stack.style.flex = 1;\n\n const node = html`

${stack}`;\n node.style.width = width + 'px';\n node.style.height = height + 'px';\n node.style.border = '1px solid #ccc';\n node.style.borderRadius = '20px';\n node.style.overflow = 'hidden';\n node.style.display = 'flex';\n node.style.flexDirection = 'column';\n node.style.justifyContent = 'center';\n node.style.boxShadow = '0 3px 20px rgba(0, 0, 0, 0.2)';\n return node;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"class Font {\n constructor(font, size, weight = 400) {\n if (font._token) {\n this._css = `font: ${font._token}`;\n } else {\n this._css = `font-family: ${font}; font-weight: ${weight}; font-size: ${size}px`;\n }\n }\n\n static headline() {\n return new Font({ _token: '-apple-system-headline' });\n }\n static body() {\n return new Font({ _token: '-apple-system-body' });\n }\n static systemFont(size) {\n return Font.regularSystemFont(size);\n }\n static lightSystemFont(size) {\n return new Font('system-ui', size, 300);\n }\n static regularSystemFont(size) {\n return new Font('system-ui', size);\n }\n static mediumSystemFont(size) {\n return new Font('system-ui', size, 500);\n }\n static semiboldSystemFont(size) {\n return new Font('system-ui', size, 600);\n }\n static boldSystemFont(size) {\n return new Font('system-ui', size, 700);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"class Request {\n constructor(url) {\n this.url = url;\n this.method = \"GET\";\n this.headers = {};\n }\n async _fetch() {\n const res = await fetch('https://cors-anywhere.herokuapp.com/' + this.url, {\n method: this.method,\n headers: this.headers\n });\n // this.response = res;\n return res;\n }\n loadJSON() {\n return this._fetch().then(res => res.json());\n }\n async loadImage() {\n return this.url;\n }\n async load() {\n return this._fetch().then(res => res.blob());\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"class LinearGradient {\n toString(direction = 'to bottom') {\n return `linear-gradient(\n ${direction},\n ${this.colors\n .map((color, i) => `${color} ${this.locations[i] * 100}%`)\n .join(', ')})`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"config = ({\n runsInApp: false,\n runsInActionExtension: false,\n runsWithSiri: false,\n runsInWidget: true,\n runsInNotification: false,\n runsFromHomeScreen: false,\n widgetFamily: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"Device = ({ isUsingDarkAppearance: () => false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"class SFSymbol {\n constructor(char) {\n this._str = String.fromCodePoint(char);\n }\n applyFont(font) {\n this._font = font;\n }\n get image() {\n return this;\n }\n static named(name) {\n const sym = symbolData.find(d => d.name == name);\n if (sym) return new SFSymbol(sym.code);\n else return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"CalendarEvent = ({\n today: () => [\n { title: 'My Event', startDate: dateFns.add(new Date(), { hours: 1 }) },\n { title: 'My Event', startDate: dateFns.add(new Date(), { hours: 3.5 }) }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"FileManager = {\n const files = new Map();\n const fs = {\n joinPath: (...args) => args.join('/'),\n documentsDirectory: () => 'documents',\n modificationDate: path => (files.get(path) || {}).date,\n fileExists: path => files.has(path),\n createDirectory: () => {},\n readImage: path => files.get(path).image,\n writeImage: (path, image) => files.set(path, { date: new Date(), image }),\n writeString: (path, string) =>\n files.set(path, { date: new Date(), string }),\n read: (path) => files.get(path).data,\n write: (path, data) => files.set(path, { date: new Date(), data }),\n downloadFileFromiCloud: async () => {}\n };\n return {\n _files: files,\n local: () => fs,\n iCloud: () => fs\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"class Path {\n constructor() {\n this._path = new Path2D();\n }\n move(p) {\n this._path.moveTo(p.x, p.y);\n }\n addLine(p) {\n this._path.lineTo(p.x, p.y);\n }\n addRect(r) {\n this._path.rect(r.x, r.y, r.width, r.height);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"_Image = ({\n fromData: blob => URL.createObjectURL(blob)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md`### Stubs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"Data = ({ fromFile: path => FileManager.local().read(path) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"CallbackURL = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Safari = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"args = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"Speech = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"UITable = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"UITableRow = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"// from https://github.com/auramagi/SFSymbolsMetadata/issues/4#issuecomment-660782251,\n// relevant columns extracted\nsymbolData = FileAttachment(\"sf-symbols.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"d3 = require('d3-color@2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"dateFns = import('https://unpkg.com/date-fns@2.16.1/esm/index.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"// https://stackoverflow.com/a/16245768/5244995\nb64toBlob = (b64Data, contentType = '', sliceSize = 512) => {\n const byteCharacters = atob(b64Data);\n const byteArrays = [];\n\n for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {\n const slice = byteCharacters.slice(offset, offset + sliceSize);\n\n const byteNumbers = new Array(slice.length);\n for (let i = 0; i < slice.length; i++) {\n byteNumbers[i] = slice.charCodeAt(i);\n }\n\n const byteArray = new Uint8Array(byteNumbers);\n byteArrays.push(byteArray);\n }\n\n const blob = new Blob(byteArrays, { type: contentType });\n return blob;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"viewof openWeatherAPIKey = secret('openWeatherAPIKey', {\n submit: \"Set Open Weather API key\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"html`