Widget Examples

giuliomagnifico · October 17, 2020, 10:32am

With this line looks like the variable is missing:

Error on line 245:49: ReferenceError: Can’t find variable: symbolsconditionDigit

I tried to use symbolForCondition variable but doesn’t work

Line 244/245


// Get the symbol.
  let sfs = SFSymbol.named(symbolsConditionDigit)
sfs.applyFont(Font.systemFont(25))
return sfs.image

eqsOne · October 17, 2020, 11:15am

@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:

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

eqsOne · October 17, 2020, 11:20am

@giuliomagnifico Sorry, I figured out now how to post with line breaks, it has to look like this:

let sfs = SFSymbol.named(symbols[conditionDigit]())
sfs.applyFont(Font.systemFont(25)) 
return sfs.image

eqsOne · October 17, 2020, 11:28am

@chrillek Thanks a lot, got it

chrillek · October 17, 2020, 11:37am

They don’t offer an API for that? Crazy (but then, Berlin’s IT does not have the best reputation Cool widget, though, and definitely a lot of work to scrape the HTML from their site.

eqsOne · October 17, 2020, 12:03pm

You’re right, it takes about five seconds to load, which is… well, slow.

They offer JSON data here but I have absolute no idea how they do the math behind their R-value parameters. At least it’s not just the quotient from the last 4 days new infections and these from 4-8 days before.

Figuring out the schemes they change their colors to would be another hassle to deal with.

giuliomagnifico · October 17, 2020, 12:36pm

Perfect, thanks, now works very well! Thanks again. This icons looks more “precise” than the default ones (I mean that with the older ones, when it was scattered clouds the icons show only a cloud, now is correct!)

PS: I don’t understand what is/was your trouble with the red/grey line after the sunset, looks correct to me

eqsOne · October 17, 2020, 1:39pm

@giuliomagnifico You’re welcome, sorry for the line-break confusion.

After sunset when it starts with a grey line, the red line doesn’t appear at sunrise time again when it comes into sight. Can you confirm this or have I just messed up something?

yehudab · October 17, 2020, 7:00pm

Created a widget that shows the number of visitors to my blog (sorry: content is in Hebrew).
Data is fetched from Ackee tracker, using GraphQL API.
Code is here:

github.com

yehudab/scriptable/blob/master/Ackee.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: teal; icon-glyph: chart-bar;

// On first run only, uncomment line bellow and replace '888...' with the token returned after login
// Keychain.get("ACKEE_KEY", '88888888-8888-8888-8888-888888888888')

// Ackee configuration
const ACKEE_KEY = Keychain.get("ACKEE_KEY")
const AckeeAPI = 'https://ackee.yehudab.com/api'
const domainName = 'yehudab.com'

// Chart configuration 
const chartHeight = 150
const chartWidth = 200
const leftPad = 20
const barColorHex = '#6e7373'
const lastBarColorHex = '#73fac8'

const query = `query fetchViews($interval: Interval!, $type: ViewType!) {

This file has been truncated. show original

The bar chart code can be easily extracted and used for other purposes.

AMB · October 18, 2020, 12:06am

EDIT: I figured out a solution after taking a break.

This is a lovely widget! I’ve been unsuccessfully experimenting with a copy of the script in an effort to put the time/duration inline to the left of the event but have been unsuccessful. (i.e. 9:00 AM - 1 hr - Having too much fun). If you would give me a hint as to how I might accomplish that, I’d appreciate it very much. Thanks.

nvat · October 18, 2020, 3:09am

Thanks for the smoothing code! I’ve noticed a bit of an issue where humps are created when the values change rapidly.

Here’s the data I’m feeding it: [6,24,35,45,41,33,43,100,100,100,100,100]
The jump from 43 to 100 seems to be the problem.

(Note that I’m also forcing it to shrink the path down vertically so it doesn’t fill the entire context, but the hump is still present even if I don’t; it’s just more dramatic when the path isn’t constrained by the edge of the context.)

I haven’t quite wrapped my head around how control points work yet so I wanted to see if you had any quick suggestions. Thanks very much!

Jamarcus_Bourne · October 18, 2020, 4:36am

Hey @mzeryck is it possible to add reminders to this widget?

giuliomagnifico · October 18, 2020, 7:18am

Ok, now (the sunrise/day after ) I understood the trouble, I can confirm that with the original code the color of the line doesn’t change to red when there’s the sunrise. I haven’t tried yor last part of code, I’ll do it to help you (but I don’t know javascript unfortunately, I’ll try to help you!)

eqsOne · October 18, 2020, 9:27am

Some detail about the accent-color-line issue. This is not SFSymbol-mod related, the original code behaves the same.

That’s what it looks like between sunset and midnight, no red line from 8h as supposed to, icons from 8h showing night-icons:

eqsOne · October 18, 2020, 9:28am

That’s after midnight, the whole line turns red, day-icons from 8h as expected:

eqsOne · October 18, 2020, 9:29am

That’s after midnight with the if(i < hoursToShow).. statement mod, the red line appears from 8h as supposed to. Yet, this only works after midnight, when a json for this day is used:

So while between sunset and midnight, the next day’s sunrise state still displays wrong as shown in the first picture. A possible fix should be somewhere around the used timestamp values but I got stuck with it for now.

giuliomagnifico · October 18, 2020, 10:05am

Hmm okay thanks, I haven’t noticed the red line all red after midnight, for me is gray all the day (becomes red after the sunrise) but I’m not sure of this. I have to check again after midnight!

Can I ask if you can share your mod to have the update time without seconds and the % of humidity?

Thanks!

Edit: for the time without seconds but with 24h I solved it by change this line (about 153 but depends on your code/comment)

drawTextC(epochToDate(weatherData.current.dt).toLocaleTimeString(), footerFontSize, lastUpdateTimePosAndSize.x, lastUpdateTimePosAndSize.y, lastUpdateTimePosAndSize.width, lastUpdateTimePosAndSize.height, Color.gray())

with this

drawTextC(epochToDate(weatherData.current.dt).toLocaleTimeString('fr-FR', {hour: '2-digit', minute: '2-digit'} ), footerFontSize, lastUpdateTimePosAndSize.x, lastUpdateTimePosAndSize.y, lastUpdateTimePosAndSize.width, lastUpdateTimePosAndSize.height, Color.gray())

jsifalda · October 18, 2020, 10:32am

hello @Marto, sorry for my late response… The app is called Brainkeeper, you can find it on AppStore https://apple.co/3lvjzhQ or download link on the website https://brainkeeperapp.com/. Anyway, DM me for next steps how to run this in widget via api

My best,
George

eqsOne · October 18, 2020, 1:53pm

To show the humidity I changed this line:

drawText("feels like " + Math.round(weatherData.current.feels_like) + "°", footerFontSize, feelsLikeCoords.x, feelsLikeCoords.y, Color.gray())

into this:

drawText(feelsstring + " " + Math.round(weatherData.current.feels_like) + "° | " + relHumidity + " " + weatherData.current.humidity + "%", footerFontSize, feelsLikeCoords.x, feelsLikeCoords.y, Color.gray())

along with these two variables:

const feelsstring = "Gefühlt" // any local term for "feels like"
const relHumidity = "RF" // any local term for "humidity"

This line shows the updatetime:

drawTextC(epochToDate(weatherData.current.dt).toLocaleTimeString(), footerFontSize, lastUpdateTimePosAndSize.x, lastUpdateTimePosAndSize.y, lastUpdateTimePosAndSize.width, lastUpdateTimePosAndSize.height, Color.gray())

To show it without seconds, I just turned this part:

.toLocaleTimeString()

into this:

.toLocaleTimeString().slice(0, -3)

By the way, to make it talk Italian, in this line:

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();

change this part:

"&lang=en&appid="

into this:

"&lang=it&appid="

Instead, you might also declare variables like this:

const locale = "it" // "en"
const nowstring = "Ora" // any local term for "now"

and change the weatherData variable to:

weatherData = await new Request("https://api.openweathermap.org/data/2.5/onecall?lat=" + LAT + "&lon=" + LON + "&exclude=daily,minutely,alerts&units=" + units + "&lang=" + locale + "&appid=" + API_KEY).loadJSON();

and then this:

drawTextC((i==0?"Now":hour), 18, spaceBetweenDays*i+25, 200,50, 21, Color.gray())

into:

drawTextC((i==0?nowstring:hour), 18, spaceBetweenDays*i+25, 200,50, 21, Color.gray())

giuliomagnifico · October 18, 2020, 7:25pm

Great, thank you!

I added also the pressure that is an important parameter

Maybe it would be nice to have also the wind speed + direction but I can’t figure out what is the correct query to the API

Like this