Widget Examples

Scriptable
379

@annooor Here you go.
I did this to grab the ‘Corona-Ampel’ from Berlin’s official webpage as I couldn’t figure out how the heck they do the math for their ‘4-day R-value’ with the given data from the RKI’s json.
No stacks, no fancy looks, just a simple ‘display-some-website-content’ example:

IMG_3BC5709E150E-1
IMG_3BC5709E150E-1563×558 113 KB

//Corona-Ampel Berlin | www.berlin.de

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

const spc = 3
let hourNow = new Date().getHours()

//Define nighttime (19h - 7h) for styling changes
var nightTime = (hourNow >= 19 || hourNow < 7)

//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)

//Subtitle text
let ptFnt = Font.systemFont(8)
let ptCol

//Backgrund- & text colors
if (nightTime) {
  titleTxt.textColor = Color.lightGray()
  ptCol = Color.gray()
  const gradient = new LinearGradient()
  gradient.locations = [0, 1]
  gradient.colors = [
    new Color("192331"),
    new Color("222222")
  ]
  widget.backgroundGradient = gradient
}
else {
  titleTxt.textColor = Color.darkGray()
  ptCol = Color.darkGray()
}

await loadSite()

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

async function loadSite() {
  let url='https://www.berlin.de/corona/lagebericht/desktop/corona.html'
  let wbv = new WebView()
  await wbv.loadURL(url)
  //javasript to grab data from the website
  let jsc = `
  var arr = new Array()
  
  var rwt = document
    .getElementById("r-wert")
    .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("r-wert")
    .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)
  `
  //Run the javascript
  let jsn = await wbv.evaluateJavaScript(jsc)
  //Parse the grabbed values into a variable
  let val = JSON.parse(jsn)
  //Assign the parts to single variables
  let rwt = val[0]
  let inf = val[1]
  let its = val[2]
  let co1 = val[3]
  let co2 = val[4]
  let co3 = val[5]
  
  //Turn the html's grabbed RGB color values into HEX values
  let cc1 = toHEX(co1)
  let cc2 = toHEX(co2)
  let cc3 = toHEX(co3)
  
  //Function to do the RGB to HEX stuff
  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
  }
  
  //R-Value text
  if (rwt != null) {
    let tx2 = widget.addText(rwt)
      tx2.leftAlignText()
      tx2.font = vlFnt
      tx2.textColor = new Color(cc1)
  }
  //R-Value subtiltle
  let tx1 = widget.addText("4-Tage R-Wert")
  tx1.textColor = ptCol
  tx1.font= ptFnt
  tx1.leftAlignText()
  widget.addSpacer(spc)
  
  //Incidence text
  if (inf != null) {
    let tx4 = widget.addText(inf)
      tx4.leftAlignText()
      tx4.font = vlFnt
      tx4.textColor = new Color(cc2)
  }
  //Incidence subtiltle
  let tx3 = widget.addText("7-Tage Inzidenz")
  tx3.textColor = ptCol
  tx3.font= ptFnt
  tx3.leftAlignText()
  widget.addSpacer(spc)
  
  //Intensive-care-beds text
  if (its != null) {
    let tx6 = widget.addText(its)
      tx6.leftAlignText()
      tx6.font = vlFnt
      tx6.textColor = new Color(cc3)
  }
  //Intensive-care-beds subtitle
  let tx5 = widget.addText("ITS-Belegung")
  tx5.textColor = ptCol
  tx5.font= ptFnt
  tx5.leftAlignText()
}
1 Like