Widget Examples

@simonbs one question is there any way to include in Device the possibility to get the battery save mode state?

Cheers

1 Like

How did you get the color in front of the calendar entries?

Sorry the first answer was not for you :cry:

You can get the color of calendar calling;
event.calendar.color

Look at this part of the code:

// If we're showing a color, and it's not shown on the right, add it to the left.
    if (showCalendarColor.length && !showCalendarColor.includes("right")) {
      let colorItemText = provideTextSymbol(colorShape) + " "
      let colorItem = provideText(colorItemText, titleStack, textFormat.eventTitle)
      colorItem.textColor = event.calendar.color
    }
    const title = provideText(event.title.trim(), titleStack, textFormat.eventTitle)
    titleStack.setPadding(i==0 ? padding : padding/2, padding, event.isAllDay ? padding/2 : padding/10, padding)
    //
    // If we're showing a color on the right, show it.
    if (showCalendarColor.length && showCalendarColor.includes("right")) {
      let colorItemText = " " + provideTextSymbol(colorShape)
      let colorItem = provideText(colorItemText, titleStack, textFormat.eventTitle)
      colorItem.textColor = event.calendar.color
    }

Cheers

Go for it! Are you using WidgetDate for the countdown? I’ve been meaning to play with that feature.

Hi let me coment the code and make a few changes and I will create a pull request. Not using WidgetDate for the countdown.
Cheers

Here’s some of my widgets:

COVID

COVID-19 Cases widget using ABC data and providing local case numbers in Australia. Changes colour based on weekly growth rate and tap to show more data in a table view. Edit the source to change the local/state area. Users elsewhere might get some ideas for how to draw a column graph.

Sticky

Sticky Note, a simple widget that includes tap to edit, dark mode support and file-based storage.

Calendar

Calendar widget in the style of Things’ today view. If events don’t fit, it prioritises all-day over future over past events (which are greyed out) and indicates how many extra events are scheduled.

7 Likes

Thank you for these. I’ll be checking out the Sticky Note one, and possibly adapting it for personal use.

1 Like

If I want Melbourne instead of Bendigo what do I change it to? I can’t see to get access the the API?

Also with the Calendar one is there a way to include only certain calendars?

By the way, has anyone discovered a way to use Apple’s New York (system serif) font in Scriptable?

Please for reminders

Other widgets have code you could use to hardcode your preferred calendars. You could select with Calendar.presentPicker() - I’ve set running the script in app to open the calendar so I’m not sure when you’d set the preference.

I worked out that ABC News are updating their data via a Google Sheet.

Look up your LGA here:

and edit line 71.

Thanks - all good. Made the change. Amazing they run it from Google Sheets!

1 Like

It is certainly easier than trying to extract the governments’ data. Among other things, ABC News use those data to dynamically generate this article:

I created a widget to show nutritional macronutrients, both with a progress bar and values.
I created a shortcut that adds these values to Data Jar and saves it as a dictionary. You will then access the file via the file bookmarks in settings of Scriptable. You can use whatever food logger you wish as the shortcut pulls from HealthKit.

Thanks to @egamez for creating the weather widget which allowed me to learn about drawContext() and how he set up some of the functions was extremely helpful.
Here is the code:


let fm = FileManager.iCloud()
//let dir = fm.bookmarkedPath("Macros")

//Set up a bookmarked path in settings
let dir = fm.bookmarkedPath("macros.json")
let item = JSON.parse(fm.readString(dir))




const backgroundColor = new Color("#1C1C1E", 1)


let drawContext = new DrawContext();

drawContext.size = new Size(600, 400)
drawContext.opaque = false
    
let w = new ListWidget()
w.backgroundColor = backgroundColor
w.setPadding(10, 10, 10, 10)

  
let row = w.addStack()
let fatsImg = SFSymbol.named("flame.fill")


let fatsTotal = item.fats
let proteinTotal = item.protein
let carbsTotal = item.carbs
let calTotal = item.calories
let waterTotal = item.water
let workoutType = item.workout_type
let activeEnergy = item.active_energy
console.log(item)

// convert to percentage

let fatsPerent = ((fatsTotal * 4)/calTotal) * 100
let proteinPerent = ((proteinTotal * 4)/calTotal) * 100
let carbsPerent = ((carbsTotal * 4)/calTotal) * 100


let fatsY = 100 + (400 * (fatsPerent/100))
let proteinY = 200 - (130 * (proteinPerent/100))
let carbY = 200 - (130 * (carbsPerent/100))





// bar length

let x = 200
let length = 200



let carbStr = "Carbohydrates"
let proteinStr = "Protein"
let fatStr = "Fats"
let calStr = "Calories"
let waterStr = "Water"


// protein progress bar
drawText(proteinStr, 18, strX(proteinStr), 96, Color.white())

drawProgerss(x, 110, x + length, 110, 25, Color.red(),backgroundColor, (x -10) +(length)*(proteinPerent/100) )

drawText(`${proteinPerent.toFixed(2)} %`, 18, x + length + 20, 96, Color.white())

// carbs progress bar
drawText("Carbohydrates", 18, 50, 132, Color.white())
drawProgerss(x, 145, x + length, 145, 25, Color.blue(), backgroundColor,(x - 10) +(length)*(carbsPerent/100) )

drawText(`${carbsPerent.toFixed(2)} %`, 18, x + length + 20, 135, Color.white())

// fats progress bar

drawText("Fats", 18, 140, 170, Color.white())

drawProgerss(x, 180, x + length, 180, 25, Color.orange(), backgroundColor,(x - 10) +(length)*(fatsPerent/100) )

drawText(`${fatsPerent.toFixed(2)} %`, 18, x + length + 20, 170, Color.white())


// calories / burned text

drawText("Calories", 14, 40, 225, Color.white())


drawText(`${calTotal.toFixed(2)} kCal`, 14, 40, 245, Color.white())

drawText("Calories Burned", 14, 40, 275, Color.white())

drawText(`${activeEnergy}`, 14, 40, 295, Color.white())


// water / fats text

drawText("Water", 14, 240, 225, Color.white())


drawText(`${waterTotal.toFixed(2)} oz`, 14,240, 245, Color.white())

drawText("Fats", 14, 240, 275, Color.white())


drawText(`${fatsTotal.toFixed(2)} grams`, 14,240, 295, Color.white())


// carb / protein text

drawText("Carbohydrates", 14, 440, 225, Color.white())


drawText(`${carbsTotal.toFixed(2)} grams`, 14,440, 245, Color.white())

drawText("Protein", 14, 440, 275, Color.white())


drawText(`${proteinTotal.toFixed(2)} grams`, 14,440, 295, Color.white())



// line seperator 
drawLine(10, 210, 590, 210, 2, Color.orange())


w.backgroundImage = drawContext.getImage()
w.backgroundImage.size = new Size(600, 200)


w.presentMedium()

// w.presentLarge()


// functions

function drawText(text, fontSize, x, y, color = Color.black()){
  drawContext.setFont(Font.boldSystemFont(fontSize))
  drawContext.setTextColor(color)
  drawContext.drawText(new String(text).toString(), new Point(x, y))
}

function drawLine(x1, y1, x2, y2, width, color){
  const path = new Path()
  path.move(new Point(x1, y1))
  path.addLine(new Point(x2, y2))
  drawContext.addPath(path)
  drawContext.setStrokeColor(color)
  drawContext.setLineWidth(width)
  drawContext.strokePath()
}

function drawProgerss(x1,y1,x2,y2, width, color, indicatorColor, iX){
  
  const path = new Path()
  path.move(new Point(x1, y1))
  path.addLine(new Point(x2, y2))
  drawContext.addPath(path)
  drawContext.setStrokeColor(color)
  drawContext.setLineWidth(width)
  drawContext.strokePath()
  
  // left end of line
  drawContext.setFillColor(color)
drawContext.fillEllipse(new Rect(x1 - 10, y1 - 12 , width - 1, width - 1))
// right end line
drawContext.fillEllipse(new Rect(x2 - 10, y1 - 12, width - 1, width - 1))
  
  
// progress

  drawContext.setFillColor(indicatorColor)
drawContext.fillEllipse(new Rect(iX, y1 - 11, width - 3, width - 3))
      
}


function strX(string){
  
  console.log(x - (carbStr.length*10.77) - 10)
  
  let stringX = x - (string.length * 10.77) - 10
  
  return stringX
  
}

7 Likes

Inspired by the weather widgets in this thread I’ve modified it to show COVID-19 cases in the UK.
It gathers data from the official API and displays using a draw context. I’ve tested it in a iPhone 11, and I don’t know how it will display in other devices.

3 Likes

Bought a new MTB that needs to be serviced after riding it for 50 hours.

Since I use Strava to track my rides I thought I could use their API to track this in a widget:

1 Like

I’ve set the widget up according to the instructions in the code, but I’m getting this error. Any thoughts?

You’ll need to get a free OpenWeather API key here, and paste it into the apiKey variable (so apiKey = "abcdefg"). Even after you do that, sometimes it takes a few hours to activate.

I think some folks here might get a kick out of this. I made an ASCII widget generator. Code is here, the main setup instructions are here (“Before you start”). Make columns with pipes and a line of dashes for a new row. It’ll obey the alignment of each element to the left, right, or center. And you can optionally specify the column width with a number at the top.


IDK why I did this. But I sure had fun. Cheers.

19 Likes