My script does not produce errors, however, the widget also does not appear. I am trying to replicate the code written by @michaelsoolee (link). Script is as follows:
// Various variables used throughout the code
const width = 120
const height = 32
const bg = "#3d3b30"
const baseColor = "#242305"
const fillColor = "#e7e247"
// Only runs if it is in the context of a widget
if (config.runsInWidget) {
const widget = createWidget()
Script.setWidget(widget)
Script.complete()
}
// Function to get data from iCloud
function getData () {
const fm = FileManager.iCloud()
const file = fm.bookmarkedPath("PhoneStorageData")
// Using the file manager's `readString` function, I grab data from
// the file and split it by the space character. This is because the
// data is saved in the file as a single string made up of two
// floating point numbers separated by a single space.
// The resulting array is returned by the function.
return fm.readString(file).split(" ")
}
// Function to create the widget
function createWidget() {
// Create a new `ListWidget`
const w = new ListWidget()
// Call the `getData` function and assign it to variable `storageData`
const storageData = getData()
// Take the first value stored in the array which is the number for
// the storage amount used on the phone.
const used = Number(storageData[0])
// Take the second value stored in the array which is the total number
// of stoage on the phone.
const total = Math.round(Number(storageData[1]))
// Grab the memorychip symbol in Apple's SF Symbol
const playSymbol = SFSymbol.named("memorychip")
// Turn that into an image to be used in the widget
const playImage = w.addImage(playSymbol.image)
// Give the image a tint, size and alignment
playImage.tintColor = Color.white()
playImage.imageSize = new Size(12, 12)
playImage.rightAlignImage()
// Add spacing between the image and the next element
w.addSpacer()
// Create a progress bar using the total and used storage space data
const progressBar = w.addImage(createProgress(total, used))
// Set the width and height based on the variables at the top of
// the script
progressBar.imageSize = new Size(width, height)
progressBar.centerAlignImage()
// Add 6 units of spacing between the progress bar and the next element
w.addSpacer(6)
// Add a stack to the widget
const s = w.addStack()
// Add a text to indicate the storage amount used in GB to the stack
const usedGB = s.addText(used + " GB")
usedGB.font = Font.semiboldSystemFont(10)
// Add equal amounts of spacing between the two elements in the stack
s.addSpacer()
// Add a text to indicate the total storage amount available in GB
// to the stack
const totalGB = s.addText(total + " GB")
totalGB.font = Font.semiboldSystemFont(10)
w.addSpacer()
// Calculate the percentage used and add a text to the widget
const percentage = (used/total * 100).toFixed(2)
const percentageText = w.addText(percentage + "%")
percentageText.font = Font.boldSystemFont(20)
percentageText.centerAlignText()
// Add a label underneath the percentage text above
const usedLabel = w.addText("Used")
usedLabel.centerAlignText()
usedLabel.font = Font.semiboldSystemFont(10)
w.addSpacer()
// Add one last text label to indicate the phone's storage
const label = w.addText("My iPhone's storage")
label.font = Font.semiboldSystemFont(10)
label.centerAlignText()
// Set the background color of the widget
w.backgroundColor = new Color(bg)
return w
}
// Function was borrowed from the Time Progress script available in
// the Scriptable Gallery https://scriptable.app/gallery/time-progress
function createProgress(total, used){
const context = new DrawContext()
context.size = new Size(width, height)
context.opaque = false
context.respectScreenScale = true
context.setFillColor(new Color(baseColor))
const base = new Path()
base.addRoundedRect(new Rect(0, 0, width, height), 16, 24)
context.addPath(base)
context.fillPath()
context.setFillColor(new Color(fillColor))
const fill = new Path()
fill.addRoundedRect(new Rect(0, 0, width * used/total, height), 16, 24)
context.addPath(fill)
context.fillPath()
return context.getImage()
}
