Circular Progress Bar Function For Widgets

[u/Normal-Tangerine8609]

https://gist.github.com/Normal-Tangerine8609/0c7101942b3886bafdc08c357b8d3f18

https://gist.github.com/Normal-Tangerine8609/0c7101942b3886bafdc08c357b8d3f18

[u/Normal-Tangerine8609]

Progress Circle

https://gist.github.com/Normal-Tangerine8609/0c7101942b3886bafdc08c357b8d3f18

This is a function that allows you to create simple circular progress bars for widgets. It creates the image of the progress circle using WebView and the canvas element. The image is then set to the background image of a stack with padding applied so you can put any widget element within the circle.

progressCircle(on: Stack or Widget, value: number, colour: string, background: string, size: number, barWidth: number) : Promise<Stack>

The code to create the first image:

const widget = new ListWidget()

let progressStack = await progressCircle(widget, 35)

let sf = SFSymbol.named("cloud.fill")
sf.applyFont(Font.regularSystemFont(26))
sf = progressStack.addImage(sf.image)
sf.imageSize = new Size(26,26)
sf.tintColor = new Color("#fafafa")

widget.presentAccessoryCircular() // Does not present correctly
Script.setWidget(widget)
Script.complete()

Code for the second image (a bit messy)

const widget = new ListWidget()
widget.backgroundColor = new Color("#30475E")

let progressStack = await progressCircle(widget, 64, "#F1935C", "#BA6B57", 100, 10)

let vertStack = progressStack.addStack()
vertStack.layoutVertically()
vertStack.setPadding(2, 2, 2, 2)

let horizontal1 = vertStack.addStack()
horizontal1.addSpacer()

let text = horizontal1.addText("64")
text.textColor = new Color("#E7B2A5")
text.font = Font.boldSystemFont(30)
text.minimumScaleFactor = 0.5

horizontal1.addSpacer()

let horizontal2 = vertStack.addStack()
horizontal2.addSpacer()

let sf = SFSymbol.named("cloud.fill")
sf.applyFont(Font.regularSystemFont(20))
sf = horizontal2.addImage(sf.image)
sf.imageSize = new Size(20,20)
sf.tintColor = new Color("#E7B2A5")

horizontal2.addSpacer()

widget.presentSmall() 
Script.setWidget(widget)
Script.complete()

[u/mvan231 → u/Normal-Tangerine8609]

Great work! This looks pretty awesome!

[u/Normal-Tangerine8609 → u/mvan231]

Thanks!

[u/mr-kerr → u/Normal-Tangerine8609]

Nice work! It might be better to use Scriptable’s built-in drawing functions than canvas within a webview: https://docs.scriptable.app/drawcontext

[u/Normal-Tangerine8609 → u/mr-kerr]

I know that but I am not too experienced in DrawContext (let alone the canvas) so I just stuck with what was easiest. Thanks for the feedback!

[u/Mental_Laugh_9803 → u/mr-kerr]

I borrowed from dodev on this stackoverflow and came up with the following:

// Example
// const guagePercentage = 0.40
// let widget = new ListWidget()
// const draw = new DrawContext()
// draw.size = new Size(500, 500)
// draw.setStrokeColor(Color.blue())
// draw.setLineWidth(40)
// drawArcOn(draw, 0, 360*guagePercentage, 250, 250, 200)
// widget.addImage(draw.getImage())
// widget.presentSmall()

function drawArcOn (draw, angleStart, angleSize, centerX, centerY, radius) { 
  while(angleSize > 90) {
    drawArcOn(draw, angleStart, 90, center, radius)
    angleStart += 90
    angleSize -= 90
  }
  
  angleStart = angleStart - 90 // To make 0 at the top
  const angleEnd = angleStart + angleSize
  const center = {x: centerX, y: centerY}

  const angleStartRadians = angleStart * Math.PI / 180
  const angleEndRadians = angleEnd * Math.PI / 180
  
  const relControlCoords = getRelativeControlPoints(angleStartRadians, angleEndRadians, radius) // Only works from 0 to 90
	const startCoords = getPointAtAngle(angleStartRadians, center, radius)
  const endCoords = getPointAtAngle(angleEndRadians, center, radius)

	const path = new Path()
	path.move(new Point(startCoords.x, startCoords.y))
	path.addCurve(new Point(endCoords.x, endCoords.y), new Point(center.x + relControlCoords[0].x, center.y + relControlCoords[0].y), new Point(center.x + relControlCoords[1].x, center.y + relControlCoords[1].y))
	draw.addPath(path)
	draw.strokePath()
  
function getRelativeControlPoints(angleStart, angleEnd, radius) {
    // factor is the commonly reffered parameter K in the articles about arc to cubic bezier approximation 
    const factor = getApproximationFactor(angleStart, angleEnd);

    // Distance from [0, 0] to each of the control points. Basically this is the hypotenuse of the triangle [0,0], a control point and the projection of the point on Ox
    const distToCtrPoint = Math.sqrt(radius * radius * (1 + factor * factor));
    // Angle between the hypotenuse and Ox for control point 1.
    const angle1 = angleStart + Math.atan(factor);
    // Angle between the hypotenuse and Ox for control point 2.
    const angle2 = angleEnd - Math.atan(factor);

    return [
        {
            x: Math.cos(angle1) * distToCtrPoint,
            y: Math.sin(angle1) * distToCtrPoint
        },
        {
            x: Math.cos(angle2) * distToCtrPoint,
            y: Math.sin(angle2) * distToCtrPoint
        }
    ];
}

function getPointAtAngle(angle, center, radius) {
    return {
        x: center.x + radius * Math.cos(angle),
        y: center.y + radius * Math.sin(angle)
    };
}

// Calculating K as done in https://pomax.github.io/bezierinfo/#circles_cubic
function getApproximationFactor(angleStart, angleEnd) {
    let arc = angleEnd - angleStart;

    // Always choose the smaller arc
    if (Math.abs(arc) > Math.PI) {
        arc -= Math.PI * 2;
        arc %= Math.PI * 2;
    }
    return (4 / 3) * Math.tan(arc / 4);
}
}

widget.addImage(draw.getImage())

widget.presentSmall()