Widget Examples

Users have no real control over that as far as I can tell.

I think my Scriptable widgets are a little faster to reload if I go into Scriptable to edit them, but I’m not convinced it’s terribly predictable.

1 Like

FYI - PurpleAir does not measure ozone. I was wondering why my widget was showing an AQI of 21 - it’s based on particulates only - while SCAQMD is showing an AQI of 90, including ozone in its calculations. Near Pasadena, CA.

Hello again, i have organized my phone as follows:
1 screen with icons only for running purposes
1 screen with icons only for groceries

1 screen with company icons
So each screen is a Topic screen.
Now I want to create for each screen a Transparent Widget as header - kind of banner -, only… I wonder if it is possible to create a widget of 1 by 4 icons, in stead of 2 by 4 icons?
As example i use currently Widgetsmith, with a photo, but i could easily create a scriptable with text header as input.

1 Like

Here’s the July '21 update, replacing the deprecated ‘4-day-R-value’.

//#####################################
// ©eqsOne 07/2021
//
// Corona-Ampel Berlin
//
// https://data.lageso.de/lageso/corona/corona.html
//
//#####################################


let widget = new ListWidget()
widget.setPadding(16, 16, 16, 16)

const spc = 3

// Tag/Nacht für Berlin
var LAT = 52.50
var LON = 13.37
const date = new Date()
const sunData = await new Request("https://api.sunrise-sunset.org/json?lat=" + LAT + "&lng=" + LON + "&formatted=0&date=" + date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()).loadJSON();
let now = date.getTime()
let sunrise = new Date(sunData.results.sunrise).getTime()
let sunset = new Date(sunData.results.sunset).getTime()
let night = (now < sunrise) || (now > sunset)

//Title Text
let titleTxt = widget.addText("Covid Berlin")
titleTxt.font= Font.boldSystemFont(17)
titleTxt.leftAlignText()
widget.addSpacer(spc)

//Value Text
let vlFnt = Font.semiboldSystemFont(20)

//Untertitel Textstyle
let ptFnt = Font.systemFont(8)
let ptCol

//Hintergrund
if (night) {
  titleTxt.textColor = Color.lightGray()
  ptCol = Color.gray()
  const gradient = new LinearGradient()
  gradient.locations = [0, 1]
  gradient.colors = [
    new Color("19191b"),
    new Color("1f1f1b")
  ]
  widget.backgroundGradient = gradient
}
else {
  titleTxt.textColor = Color.darkGray()
  ptCol = Color.darkGray()
}

await loadCnt()

if (!config.runsInWidget) widget.presentSmall()
Script.setWidget(widget)
Script.complete()

async function loadCnt() {
  let url='https://data.lageso.de/lageso/corona/corona.html'
  let wbv = new WebView()
  await wbv.loadURL(url)
  let jsc = `
  var arr = new Array()
  var rwt = document
    .getElementById("rel_7TI")
    .getElementsByTagName("p")[0]
    .innerText
  arr.push(rwt)
  var nin = document
    .getElementById("neuinfektionen")
    .getElementsByTagName("p")[0]
    .innerText
  arr.push(nin)
  var bet = document
    .getElementById("its")
    .getElementsByTagName("p")[0]
    .innerText
  arr.push(bet)
  var gc1 = document
    .getElementById("rel_7TI")
    .style
    .backgroundColor
  arr.push(gc1)
  var gc2 = document
    .getElementById("neuinfektionen")
    .style
    .backgroundColor
  arr.push(gc2)
  var gc3 = document
    .getElementById("its")
    .style
    .backgroundColor
  arr.push(gc3)
  JSON.stringify(arr)
  `
  let jsn = await wbv.evaluateJavaScript(jsc)
  let val = JSON.parse(jsn)
  let rwt = val[0]
  let inf = val[1]
  let its = val[2]
  let co1 = val[3]
  let co2 = val[4]
  let co3 = val[5]
  
  let cc1 = toHEX(co1)
  let cc2 = toHEX(co2)
  let cc3 = toHEX(co3)
  
  function toHEX(col) {
    var a = col.split("(")[1].split(")")[0].replaceAll(" ", "")
    a = a.split(",")
    var b = a.map(function(x) {
    x = parseInt(x).toString(16)
    return (x.length==1) ? "0"+x : x
    })
    b = "0x"+b.join("")
    b = b.substring(2)
    return b
  }
  
//**************************
  
  //Wochentrend Text
  if (rwt != null) {
    let tx2 = widget.addText(rwt)
      tx2.leftAlignText()
      tx2.font = vlFnt
      tx2.textColor = new Color(cc1)
  }
  //Wochentrend Untertitel
  let tx1 = widget.addText("Wochentrend 7-Tage-Inz.")
  tx1.textColor = ptCol
  tx1.font= ptFnt
  tx1.leftAlignText()
  widget.addSpacer(spc)
  
  //Inzidenz Text
  if (inf != null) {
    let tx4 = widget.addText(inf)
      tx4.leftAlignText()
      tx4.font = vlFnt
      tx4.textColor = new Color(cc2)
  }
  //Inzidenz Untertitel
  let tx3 = widget.addText("7-Tage Inzidenz")
  tx3.textColor = ptCol
  tx3.font= ptFnt
  tx3.leftAlignText()
  widget.addSpacer(spc)
  
  //Intensivbetten Text
  if (its != null) {
    let tx6 = widget.addText(its)
      tx6.leftAlignText()
      tx6.font = vlFnt
      tx6.textColor = new Color(cc3)
  }
  //Intensivbetten Untertitel
  let tx5 = widget.addText("ITS-Belegung")
  tx5.textColor = ptCol
  tx5.font= ptFnt
  tx5.leftAlignText()
}

Here’s the 09/2021 ‘update’:

/*************************
 * eqsOne 09/2021
 * Corona-Ampel Berlin
 *
 * https://data.lageso.de
/*************************/

let widget = new ListWidget()
widget.setPadding(16, 16, 16, 16)

const spc = 3

// Tag/Nacht für Berlin
var LAT = 52.50
var LON = 13.37
const date = new Date()
const sunData = await new Request("https://api.sunrise-sunset.org/json?lat=" + LAT + "&lng=" + LON + "&formatted=0&date=" + date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()).loadJSON();
let now = date.getTime()
let sunrise = new Date(sunData.results.sunrise).getTime()
let sunset = new Date(sunData.results.sunset).getTime()
let night = (now < sunrise) || (now > sunset)

//Title Text
let titleTxt = widget.addText("Covid Berlin")
titleTxt.font= Font.boldSystemFont(17)
titleTxt.leftAlignText()
widget.addSpacer(spc)

//Value Text
let vlFnt = Font.semiboldSystemFont(20)

//Untertitel Textstyle
let ptFnt = Font.systemFont(8)
let ptCol

//Hintergrund
if (night) {
  titleTxt.textColor = Color.lightGray()
  ptCol = Color.gray()
  const gradient = new LinearGradient()
  gradient.locations = [0, 1]
  gradient.colors = [
    new Color("19191b"),
    new Color("1f1f1b")
  ]
  widget.backgroundGradient = gradient
}
else {
  titleTxt.textColor = Color.darkGray()
  ptCol = Color.darkGray()
}

await loadCnt()

if (!config.runsInWidget) widget.presentSmall()
Script.setWidget(widget)
Script.complete()

async function loadCnt() {
  let url='https://data.lageso.de/lageso/corona/corona.html'
  let wbv = new WebView()
  await wbv.loadURL(url)
  let jsc = `
  var arr = new Array()
  var nin = document
    .getElementById("neuinfektionen")
    .getElementsByTagName("p")[0]
    .innerText
  arr.push(nin)
  var hos = document
    .getElementById("hosp_7TI")
    .getElementsByTagName("p")[0]
    .innerText
  arr.push(hos)
  var bet = document
    .getElementById("its")
    .getElementsByTagName("p")[0]
    .innerText
  arr.push(bet)
  var gc1 = document
    .getElementById("neuinfektionen")
    .style
    .backgroundColor
  arr.push(gc1)
  var gc2 = document
    .getElementById("hosp_7TI")
    .style
    .backgroundColor
  arr.push(gc2)
  var gc3 = document
    .getElementById("its")
    .style
    .backgroundColor
  arr.push(gc3)
  JSON.stringify(arr)
  `
  let jsn = await wbv.evaluateJavaScript(jsc)
  let val = JSON.parse(jsn)
  
  let inf = val[0]
  let hos = val[1]
  let its = val[2]
  let co1 = val[3]
  let co2 = val[4]
  let co3 = val[5]
  
  let cc1 = toHEX(co1)
  let cc2 = toHEX(co2)
  let cc3 = toHEX(co3)
  
  function toHEX(col) {
    var a = col.split("(")[1].split(")")[0].replaceAll(" ", "")
    a = a.split(",")
    var b = a.map(function(x) {
    x = parseInt(x).toString(16)
    return (x.length==1) ? "0"+x : x
    })
    b = "0x"+b.join("")
    b = b.substring(2)
    return b
  }
  
//**************************
  
  //Inzidenz Text
  if (inf != null) {
    let tx2 = widget.addText(inf)
      tx2.leftAlignText()
      tx2.font = vlFnt
      tx2.textColor = new Color(cc1)
  }
  //Inzidenz Untertitel
  let tx1 = widget.addText("7-Tage Inzidenz")
  tx1.textColor = ptCol
  tx1.font= ptFnt
  tx1.leftAlignText()
  widget.addSpacer(spc)
  
  //Hospitalisierung Text
  if (hos != null) {
    let tx4 = widget.addText(hos)
      tx4.leftAlignText()
      tx4.font = vlFnt
      tx4.textColor = new Color(cc2)
  }
  //Hospitalisierung Untertitel
  let tx3 = widget.addText("Hospitalisierungs 7-T. Inz.")
  tx3.textColor = ptCol
  tx3.font= ptFnt
  tx3.leftAlignText()
  widget.addSpacer(spc)
  
  //Intensivbetten Text
  if (its != null) {
    let tx6 = widget.addText(its)
      tx6.leftAlignText()
      tx6.font = vlFnt
      tx6.textColor = new Color(cc3)
  }
  //Intensivbetten Untertitel
  let tx5 = widget.addText("ITS-Belegung")
  tx5.textColor = ptCol
  tx5.font= ptFnt
  tx5.leftAlignText()
}

While this worked fine until iOS14.8, there’s an issue with this widget on iOS15. It keeps loading forever without throwing any errors or timeouts. Haven’t had time to look further into this, yet.

Edit: Might be related to an ‘webView evaluateJavaScript’ issue with iOS15.

Edit #2: Fixed with the latest Scriptable update. Thanks guys, enjoy your latte! :wink:

With iOS 15 the icons in the weather portion of the widget has no color. Do you know of any way to change this?

Probaply related to this topic and about multicolor-SFSymbols in iOS15. There’s a workaround shown but I’d still appreciate this to be fixed within Scriptable itself.

Here’s a link that shows some of the differences under the section ‘How to render multicolor SF Symbols’ for SwiftUI and UIKit.

Uh. This is above my understanding to implement.

I‘m sorry, I wasn’t clear. I think the Scriptable developers have to take care of this under the hood :wink:

1 Like

@eqsOne is correct. A change to the app needs to be made to fix this issue. A similar thing happened in iOS 14 for a number of different apps that used SF Symbols (info found on stack exchange or other similar site)

I have written to the developer and it is on his todo list to look at.

1 Like

And the latest update has fixed the issue. :slight_smile:

1 Like

Congratulations, Amazing script ! I like it very much it became my home screen !

just a quick question how to use the custom text ?

jean-louis

Here’s a Scriptable widget I made in the style of Pocket’s official widgets, but showing your recent favorite or unread articles (Pocket only offers “Discover” widgets):

4 Likes

Hi there,

as a regular blood donor I wanted to see, when might be the best time to support the (German) red cross (DRK) to fill their blood reserves. On their regional websites there are so called Blood Donation Barometers (Blutspende-Barometer), which can be displayed in a scriptable widget by fetching its JSON data directly from the DRK website(s).

I’ve created a first version of the widget, but I am not sure how to make it more “modern looking”; esp. having issues with multi-colored icons. Using the emoticons make it more ugly than nice, haha. Inviting you to support, dear experts.

I intend to functionally extend it to other regional red cross statics, so that a user can choose, which data to display, as well as light/dark mode support, reminder to next blood donation (+56 days from last donation) etc.

1 Like

This is really nice. Now I’m wondering if I can adapt it for my area.

one change I might make is to always have the full number of droplets, and just make the “empty” ones lifht gray. I find that makes a better visual statement about empty vs full – but I’m no designer.

1 Like

Thank you. I wanted to do this, but it does work on MacOS, but not on iOS. So I’ve done it that way for now.

I have already prepared the selection from northeast, northwest and west. The other two seem to use decimal values, whereas northeast uses integers. It will be an easy task and I’ll add it soon. You’ll be able to provide a parameter to the widget in order to select your source of data.

If you want to add functionality, feel free to create a pull request. Would be happy to integrate. Anyway, watch the repo and you’ll get notified. :v:t2:

1 Like

Hi @tf2, version 0.1.1 now supports 3 regional red cross entities:

no     DRK-Blutspendedienst Nord-Ost (Berlin, Brandenburg, Hamburg, Sachsen, Schleswig-Holstein)
nstob  DRK-Blutspendedienst NSTOB (Niedersachsen, Sachsen-Anhalt, Thüringen, Oldenburg, Bremen) 
bwh    DRK-Blutspendedienst Baden-Württemberg, Hessen

You need to choose one of the entities above; example: parameter: no

2 Likes

I adapted this widget as part of a project to use Apple WeatherKit data. Wrote about it here: Adding Apple WeatherKit data to my own weather widgets – Six Colors

It’s still a real mess but at some point I will try to post a non-messed version somewhere.

SFSymbols remain a struggle.

6 Likes