Script runs without error, but widget does not appear

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()

// 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)
  // Add spacing between the image and the next element
  // 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)
  // Add 6 units of spacing between the progress bar and the next element
  // 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
  // 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)
  // 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)
  // Add a label underneath the percentage text above
  const usedLabel = w.addText("Used")
  usedLabel.font = Font.semiboldSystemFont(10)
  // Add one last text label to indicate the phone's storage
  const label = w.addText("My iPhone's storage")
  label.font = Font.semiboldSystemFont(10)
  // 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
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.setFillColor(new Color(fillColor))
  const fill = new Path()
  fill.addRoundedRect(new Rect(0, 0, width * used/total, height), 16, 24)
  return context.getImage()

Have you set the bookmarked path?

Yes, I have set the bookmark path.

I’ve set-up a file with the following content:

1.2 2.1

I just made up two floating point numbers.

I’ve copied the code above, and put it in a Scriptable script, and set-up a new small widget pointing at it.

The result was this.

1 Like

Thank you @sylumer

I am new to JavaScript, learning phase. Can you guide me where did you exactly add the floating point numbers ?

Just in the bookmarked file as per the instructions in the script.

1 Like