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! 
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
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. 
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
Here’s a Scriptable widget I made in the style of Pocket’s official widgets, but showing your recent favorite or unread articles (Pocket only offers “Discover” widgets):
4 Likes
Hi there,
as a regular blood donor I wanted to see, when might be the best time to support the (German) red cross (DRK) to fill their blood reserves. On their regional websites there are so called Blood Donation Barometers (Blutspende-Barometer), which can be displayed in a scriptable widget by fetching its JSON data directly from the DRK website(s).
I’ve created a first version of the widget, but I am not sure how to make it more “modern looking”; esp. having issues with multi-colored icons. Using the emoticons make it more ugly than nice, haha. Inviting you to support, dear experts.
I intend to functionally extend it to other regional red cross statics, so that a user can choose, which data to display, as well as light/dark mode support, reminder to next blood donation (+56 days from last donation) etc.
This is really nice. Now I’m wondering if I can adapt it for my area.
one change I might make is to always have the full number of droplets, and just make the “empty” ones lifht gray. I find that makes a better visual statement about empty vs full – but I’m no designer.
1 Like
Thank you. I wanted to do this, but it does work on MacOS, but not on iOS. So I’ve done it that way for now.
I have already prepared the selection from northeast, northwest and west. The other two seem to use decimal values, whereas northeast uses integers. It will be an easy task and I’ll add it soon. You’ll be able to provide a parameter to the widget in order to select your source of data.
If you want to add functionality, feel free to create a pull request. Would be happy to integrate. Anyway, watch the repo and you’ll get notified. 
1 Like
Hi @tf2, version 0.1.1 now supports 3 regional red cross entities:
no DRK-Blutspendedienst Nord-Ost (Berlin, Brandenburg, Hamburg, Sachsen, Schleswig-Holstein)
nstob DRK-Blutspendedienst NSTOB (Niedersachsen, Sachsen-Anhalt, Thüringen, Oldenburg, Bremen)
bwh DRK-Blutspendedienst Baden-Württemberg, Hessen
You need to choose one of the entities above; example: parameter: no
2 Likes
I adapted this widget as part of a project to use Apple WeatherKit data. Wrote about it here: Adding Apple WeatherKit data to my own weather widgets – Six Colors
It’s still a real mess but at some point I will try to post a non-messed version somewhere.
SFSymbols remain a struggle.
6 Likes
@jsnell Would be really interested in seeing a gist of your “ugly” Scriptable widget version whenever you’re ready to share. I’m sure I’m not the only one who wants a widget that combines WeatherKit forecasts, a local weather station (a Netatmo in my case) for current conditions, and displays the result as something similar to WeatherLine.
You mentioned on a podcast this week that you don’t think of these kinds of things as your “job” for Six Colors, that you do it because it’s fun. It’s fun for others, too, and it’s one of the reasons a Six Colors membership is worth paying for.
(You don’t hold these back to members only, I don’t think, but as I see it, memberships give you the flexibility to do more than just “the job” part of covering the Apple and Apple-adjacent technology world.)
Cheers!
Hi there, this widget now supports the so called Blood Donation Barometer [Blutspende-Barometer] for the 
German Red Cross [Deutsches Rotes Kreuz: DRK] AND the 
Swiss Red Cross [Schweizerisches Rotes Kreuz: SRK].
1 Like