Widget Examples

I just saw it! Thanks again I guess!

Awesome widgets over here!

I made a widget, that shows you a live webcam photo from foto-webcam.eu:
https://gist.github.com/andreasRedeker/da8fdee258326af14400187c521723df

Hi everybody,
fresh clean air is very important to stay healthy. So I’ve created a widget to check the current Air pollution of your city.


You can check it out here:

3 Likes

Looking for this too!
@Nathan_Dickin I don’t think it does https://developer.apple.com/forums/thread/650869

Widgets in iOS 14 can’t update real time. They’re completely unsuitable for this kind of use case.

Now also location based widget available to check the current Air Quality in your city:
Bildschirmfoto 2020-11-22 um 19.49.14

1 Like

And the Dilbert one:


Also support Peanuts and Garfield. It uses multiple widgets combined in a smart stack to display one pic per widget. So it’s readable even in a small widget.


I created a Coptic Calendar Widget that downloads the information for today’s readings and Coptic month and day. Also a broken clock :sweat_smile:

When trying to customize this script I receive the following error:

2020-12-02 11:43:29: Error on line 21:31: Expected value of type string but got value of type undefined.

I have basically recreated your base and script. Have you seen this message?

I want to share mine. It does show some economic indexes we use in Chile (unidad de fomento, unidad tributaria mensual, and USD/CLP rate). It’s fugly, with chunks taken from a COVID-19 Scriptable widget I’ve found, but it works.

Here is the code:

const url = 'https://mindicador.cl/api'
const request = new Request(url)
const res = await request.loadJSON()
const table = new UITable()

function createWidget(pretitle, title, subtitle, color) {
  let w = new ListWidget()
  w.backgroundColor = new Color(color)
  let preTxt = w.addText(pretitle)
  preTxt.textColor = Color.white()
  preTxt.textOpacity = 0.8
  preTxt.font = Font.systemFont(16)
  w.addSpacer(5)
  let titleTxt = w.addText(title)
  titleTxt.textColor = Color.white()
  titleTxt.font = Font.systemFont(22)
  w.addSpacer(5)
  let subTxt = w.addText(subtitle)
  subTxt.textColor = Color.white()
  subTxt.textOpacity = 0.8
  subTxt.font = Font.systemFont(18)
  return w
}

let widget = createWidget("Indicadores", `UF ${res.uf.valor}\nUTM ${res.utm.valor}\nDolar ${res.dolar.valor}`, ``, "#7b68ee")
Script.setWidget(widget)
Script.complete()
  

Hello,

finally I can scape data from Essen website.
I dont understand how you scrape the data to json in your git.
Can you explain it?

BR
gentlel

can you share the shortcut too please.

I get a 404 error on that GitHub page, do you need to make the gist publicly-accessible?

Sorry I’ve moved my Git, please try again.

1 Like

Hi everybody,
Thanks for your shares :slight_smile:

@theguy69
Your widget is very nice, is it possible to share your script please ?

Thanks in advance

Hereby my Widget for Your Personal BioRithme Calculation, running in small and large rectangular widget

Enjoy your daily Fysical, Emotional and Intelligent state of body

Code:

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// Variables used by Scriptable.

// Widget Params, default values for debugging
const widgetParams = JSON.parse((args.widgetParameter != null) ? args.widgetParameter : ‘{“UserName” : “For Kurt” , “BirthDay” : “03/11/1972”}’)

const widgetHeight = 400
const widgetWidth = 400
const widgetColor=“243D52”

// TitleName
let TitleName =“BioRithme Curves”
const titleFontSize = 20
const titleFont = Font.systemFont(titleFontSize)
const titlePos = new Point(25, 20)

//Get UserName and BritDays from the Widget Parameter
let UserName = widgetParams.UserName
let BirthDay = widgetParams.BirthDay
const UserColor = new Color("#33cc33", 1)

// Used Fonts and WidgetLocation
const UserNameFontSize = 18
const UserNameFont = Font.semiboldSystemFont(UserNameFontSize)
let UserNameCoords = new Point(25, 45)

const YFontSize = 8
const YFont = Font.systemFont(YFontSize)
const YColor = Color.white()
let YCoords = new Point(ScaleH*s-25, 230)

//=======================================
// DateConstructions
const date1 = new Date(BirthDay)
var day = date1.getDate()
var month = date1.getMonth() + 1
var year = date1.getFullYear()
var BirthDate = day + “-” + month + “-” + year

var days = [“Sun”,“Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”]
var weekday = days[date1.getDay()]

const cd = new Date() //cd=CurrentDate
if (cd.getMonth()+1==13){Month=1}else{Month=cd.getMonth()+1}
let Day = cd.getDate()
let Str_Today= Month+"/"+Day+"/"+cd.getFullYear()
let SubT_Today= Day+"/"+Month+"/"+cd.getFullYear()
const date2 = new Date(Str_Today)
let DaysDiff= getDifferenceInDays(date1, date2)

//=======================================
//Drawing Line
DrawContext.prototype.drawLine = function (p_x1, p_y1, p_x2, p_y2, p_colourLine, p_intWidth)
{
let pthLine = new Path();
pthLine.move(new Point(p_x1, p_y1));
pthLine.addLine(new Point(p_x2, p_y2));
this.addPath(pthLine);
this.setStrokeColor(p_colourLine);
this.setLineWidth(p_intWidth);
this.strokePath();
}

//=======================================
// Set-up a small widget and drawing region
let wgtMain = new ListWidget();
wgtMain.setPadding(0, 0, 0, 0);
wgtMain.backgroundColor = new Color(widgetColor)

let dcRegion = new DrawContext();
dcRegion.size = new Size(widgetWidth, widgetHeight)
dcRegion.opaque = false

// Widget Title
drawTextP(TitleName , titlePos, Color.white(), titleFont)

// User Name
dcRegion.setTextAlignedLeft()
UserName=UserName + " " + DaysDiff + " Days Old "
drawTextP(capitalize(UserName), UserNameCoords, UserColor, UserNameFont)

UserNameCoords = new Point(25, 65)
let SubTitle=“Status from " + SubT_Today + " till end Cycle.”
drawTextP(SubTitle, UserNameCoords, Color.white(), UserNameFont)
//=======================================
// BirtDay Info
InfoCoords = new Point(25, 310)
drawTextP("BirthDate: "+ weekday + " " +BirthDate, InfoCoords, Color.white(), UserNameFont)

//=======================================
// BioFigures
let f=DaysDiff/23-Math.floor(DaysDiff/23)
InfoCoords = new Point(25, 330)
drawTextP(“Fys - 23D: (”+ f.toFixed(4)+ ") "+ await BioInfo(f), InfoCoords, Color.red(), UserNameFont)

let e=DaysDiff/28-Math.floor(DaysDiff/28)
InfoCoords = new Point(25, 350)
drawTextP(“Emo - 28D: (”+ e.toFixed(4)+ “)”+ await BioInfo(e), InfoCoords, Color.green(), UserNameFont)

let i=DaysDiff/33-Math.floor(DaysDiff/33)
InfoCoords = new Point(25, 370)
drawTextP(“Int - 33D: (”+ i.toFixed(4)+ “)”+ await BioInfo(i) , InfoCoords, Color.yellow(), UserNameFont)
//=======================================

//Draw X/Y Axes
dcRegion.drawLine(20, widgetWidth/2, 390, widgetWidth/2, Color.gray(), 2) //Hor

// dcRegion.drawLine(widgetWidth/2, 100, widgetWidth/2, 300, Color.gray(), 2) //Ver

var ScaleH=380 //widgetWidth
var ScaleV=widgetHeight/4 //100
var BseL=widgetHeight/2 //200 BaseLine (X-Axe) the half of the CanvasHeight
var x0,x1,y1,x2,y2,s

//=======================================
for (x0=1;x0<(ScaleH+1);x0++){

//=======================================
//Fys (23 Days)
//Calculate Rest of a Cycle
f=DaysDiff/23-Math.floor(DaysDiff/23)
//Set x1 & x2
await Set_x1x2()
await CalculateCoordinates(f,23)
await BioBase(23)

//Draw Sinus Wave
dcRegion.drawLine(x1+20, y1, x2+20, y2,Color.red(), 5)

//Draw Vertical each Quarter
//if (x1==ScaleH*s/4){
//dcRegion.drawLine(x1,BseL,x1,y1,Color.red(), 3)

//=======================================
//Emo (28 Days)
e=DaysDiff/28-Math.floor(DaysDiff/28)
await Set_x1x2()
await CalculateCoordinates(e,28)
await BioBase(28)

//Draw Sinus Wave
dcRegion.drawLine(x1+20, y1, x2+20, y2,Color.green(), 5)

//=======================================
//Intel (33 Days)
i=DaysDiff/33-Math.floor(DaysDiff/33)
await Set_x1x2()
await CalculateCoordinates(i,33)
await BioBase(33)

//Draw Sinus Wave
dcRegion.drawLine(x1+20, y1, x2+20, y2,Color.yellow(), 5)

}

//=======================================
//Adding Calendar Grid
//Today
UserNameCoords = new Point(21, 205)
drawTextP(Day , UserNameCoords, Color.cyan(), YFont)

for (x0=0;x0<(ScaleH/10);x0++){
x1=x010
y1=100
x2=x0
10
y2=300

let nextDate = new Date()
nextDate.setDate(cd.getDate() + x0)
Day=nextDate.getDate()
let CalColor=Color.white()
//Mark the Beginning of the Month
if (Day<3){CalColor=Color.cyan()}

//Shift Grid : For Small or Big Presenetantion
dcRegion.drawLine(x1+20,y1,x2+20,y2,CalColor, 1)

if ((x0/2-Math.floor(x0/2))==0){
YCoords = new Point(x1+21, 205)
drawTextP(Day , YCoords, CalColor, YFont)
}

}

//=======================================
// Render the widget with the lines on it
//
wgtMain.backgroundImage = dcRegion.getImage()

if (!config.runsInWidget) await wgtMain.presentLarge()//.presentSmall();
Script.setWidget(wgtMain);
Script.complete();

//=======================================

// Returns the number of days between now and the provided date.
function getDifferenceInDays(date1, date2) {
const diffInMs = Math.abs(date2 - date1);
return Math.floor(diffInMs / (1000 * 60 * 60 * 24))
}

function drawTextP(text, point, color, font) {
dcRegion.setFont(font)
dcRegion.setTextColor(color)
dcRegion.drawText(new String(text).toString(), point)
}

function drawTextR(text, rect, color, font) {
dcRegion.setFont(font)
dcRegion.setTextColor(color)
dcRegion.drawTextInRect(new String(text).toString(), rect)
}

function capitalize(string) {
//UpperCase function
return string.replace(/\b\w/g, l=>l.toUpperCase())
}

function Set_x1x2() {
//Sets the X-Point
x1=x0-1
x2=x0
}

function BioBase(Bse) {
//Calculates the Horizontal scale based upon 400Points=35Days
s=Bse/35 //23,28,33 Days
x1=x1s
x2=x2
s
}

function CalculateCoordinates(r,d){
//Calculation of the X/Y Coordinates
//Reverse the coordinate (-x), because the 0,0 coordinate is not Left-Under,but Left-Up
x1=x2-1
y1=Math.sin(-(x1/ScaleH+r)2Math.PI)*ScaleV + BseL
y2=Math.sin(-(x2/ScaleH+r)2Math.PI)*ScaleV + BseL
}

function BioInfo(y){
//Calculates the Progress for the next Days
const BioStat=Math.sin(y2Math.PI).toFixed(3)
let Info=“Going Up :)”
if (y>=0.25&&y<=0.75){Info=“Going Down :(”}
Info = BioStat + " " + Info
return Info
}

2 Likes

Looks great but I get this error:

2020-12-29 12:55:25: Error on line 6: SyntaxError: Invalid character ‘\u2018’

I know nothing about scripting. :grinning:

@DomDR has posted the code without wrapping it in triple back ticks so the forum software (Discourse) has converted all the quotes to smart quotes. Wrapping in triple back ticks is Markdown notation for marking a block of text as a block of code and so will leave the characters as is.

Either @DomDR needs to amend his posting, or you’ll need to manually amend all of the smart/curly quotes to dumb/straight quotes.

2 Likes

Welcome @Mrkth! (It says this is your first post.)

@sylumer did a great job, I see, of answering your question.

I’ll just observe that the “u” in “\u2018” stands for “Unicode”. Which is entirely in line with Stephen’s answer.

1 Like

Cool. Thanks. I’ll do it manually. Might learn something.