Widget Examples

Are the buttons available now in the appstore version?

@mherger - that’s fine :slight_smile: we can work out what we need from the code.

Hi @Kendo & @Tristb45 - I’m wondering whether I simply don’t understand how this forum is supposed to work… but could you please be a bit more clear about what you’re interested in from what I posted? Are you using a SmartFox?

@mherger, take a look at who those individuals are replying to in the threads. It is shown in the top right of their post. I do not think that they are replying to you … but it is difficult to follow the threads of conversation in this topic.

Rather than posting about new widgets to this thread, a better approach is to post to its own thread. It makes the conversation a lot easier to follow. Some time back, @RosemaryOrchard split out a number of widget entries that were generating a lot of discussion, but as you can see, trying to follow the divergent conversation on a single forum topic isn’t easy, and at over 500 posts, it is difficult for people to find an entry of interest and its latest iteration without having to read the thread end-to-end.

Can’t believe I missed this functionality of scriptable. Perfect for building dashboards. But how often is it run? And any way to control it?

See the answers on this thread about the topic.

1 Like

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