Widget Examples

The position doesn’t feel very good.

I understand nothing of js, but it returns me an error

Can we have a look at line 245?

Actually the mod should look like this, couldn’t figure out how to have a line break within code text block:

Edit (with proper line breaks):

let sfs = SFSymbol.named(symbols[conditionDigit]()) 
return sfs.image

If you include the code block in three `(backquotes) like so

this is the first line
this is the second line
And they are both separated by a line break, as is the third one

line breaks are conserved as is indentation

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)
return sfs.image

1 Like

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

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

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
  var nin = document
  var bet = document
  var gc1 = document
  var gc2 = document
  var gc3 = document
  //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.font = vlFnt
      tx2.textColor = new Color(cc1)
  //R-Value subtiltle
  let tx1 = widget.addText("4-Tage R-Wert")
  tx1.textColor = ptCol
  tx1.font= ptFnt
  //Incidence text
  if (inf != null) {
    let tx4 = widget.addText(inf)
      tx4.font = vlFnt
      tx4.textColor = new Color(cc2)
  //Incidence subtiltle
  let tx3 = widget.addText("7-Tage Inzidenz")
  tx3.textColor = ptCol
  tx3.font= ptFnt
  //Intensive-care-beds text
  if (its != null) {
    let tx6 = widget.addText(its)
      tx6.font = vlFnt
      tx6.textColor = new Color(cc3)
  //Intensive-care-beds subtitle
  let tx5 = widget.addText("ITS-Belegung")
  tx5.textColor = ptCol
  tx5.font= ptFnt
1 Like

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

let sfs = SFSymbol.named(symbols[conditionDigit]())
return sfs.image
1 Like

@chrillek Thanks a lot, got it :wink:

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

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.

1 Like

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

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

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:

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

1 Like

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

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.

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!

1 Like

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

Ok, now (the sunrise/day after :sweat_smile: ) 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!)

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:

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

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.