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]())
sfs.applyFont(Font.systemFont(25))
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)
sfs.applyFont(Font.systemFont(25))
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)
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
@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
1 Like
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.
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 
@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. 
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
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!)
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 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.