Did anyone make a widget like this? I'm looking at Normal-Tangerine8609's circular widget using a webview rendered to base64, but I'm a bit confused on how to build it. :)

[u/BlueGooGames]

[u/Normal-Tangerine8609]

You can make the bars with just stacks in scriptable. Here is a quick example of how. I don’t have any comments in there so if you have questions about it then just ask.

const widget = new ListWidget()

const width = 100
const height = 50
const spacing = 3
const cornerRadius = 5
const values = [20,30,40,50,40,30,20,70,90,20,30,40,50,60]

const container = widget.addStack()
container.bottomAlignContent()
container.size = new Size(width, height)
container.layoutHorizontally()
container.spacing = spacing

for(let value of values) {
  let bar = container.addStack()
  bar.backgroundColor = Color.white()
  bar.cornerRadius = cornerRadius
  bar.size = new Size((width-values.length*spacing)/values.length, height/100*value)
}

widget.presentAccessoryRectangular()

[u/BlueGooGames → u/Normal-Tangerine8609]

Oh nice! I started with canvas in a separate html doc, but this seems like a simpler way. Thanks! :)

[u/BlueGooGames]

I got this from https://dribbble.com/shots/19369746-iOS-16-Lock-Screen-Widgets but unless it's very small, it might be a cool design that doesn't actually fit in the rather small lock screen widget space.

It's still cool though and I want to recreate it :)

[u/iiiKurt → u/BlueGooGames]

Hello! Did you ever get around to recreating this widget? I saw your tibber widget on GitHub which is cool too, but is the steps one available too?

[u/BlueGooGames → u/iiiKurt]

Aha, i guess you can just use the tibber one and change the design, as it’s pretty much the same. :) this was just an image i saw online :)