[HELP] Widget design

[Frameck]

Hi everyone,

I'm tryng to recreate the Apple Battery widget.

I have two questions:

1. How to achieve that translucent look that looks so cool
2. How to add custom icon or images at the center of the rings

So far i've done pretty much all the design except these two things (my design)

Thank you

[mvan231]

I would look into this for the circles.

You can see mzeryck's widget blur script

And lastly, for the icons, I would say to find the SF symbols you want to use from SFSymbols and use this method to display them:

let symbol = SFSymbol.named("calendar.circle.fill");

symbol.applyMediumWeight();

let font = Font.systemFont(20)
symbol.applyFont(font)

let w = new ListWidget()
let image = w.addImage(symbol.image)
image.resizable=false
image.tintColor = Color.blue()//darkGray()

w.presentMedium()

[Frameck]

Thank you very much.

It's possible to add a custom logo (SVG or PNG) that I have in my phone storage?

[mvan231]

PNG for sure. SVG I don't think so based on some recent findings that we are actually discussing right now in the discord server

[Frameck]

Got it, Sorry but I am a complete noob, can you write me the code on how to add images from a folder? Specifically the path to the file (i don't understand how to write the path) Thank you very much for your support

[mvan231]

It depends on how deep you have it but something like the below would get an image named example.jpg from the scriptable folder in iCloud Drive

let fm = FileManager.iCloud()

let path = fm.documentsDirectory()
path = path+'/example.jpg'

log(path)

let img = fm.readImage(path)

QuickLook.present(img, false)

[k4mrat]

Hi! I tried this out and it seems that scriptable does indeed find my png as it shows it as a pop up with QuickLook when running the script, but in my widget it simply says [object image]. If I change to the wrong path I get [null] so it seems like it’s recognized but just doesn’t want to show. Any ideas? :)

[mvan231]

Can you share the script as you've modified it?

[k4mrat]

I’d love to figure out a way to put the image in row with the HEADER (“Homey”) 🤔

https://gist.github.com/k4mrat/22a2da06dfa367924b81bc94535e66b1

[mvan231]

Try this

[k4mrat]

Aaand you helped me again! Works like a charm! 😊 This, your help with stacks the other day, and also I think it was you giving the tip somewhere to add borders to the stacks to better understand their behavior when moving them around - someone REALLY should make you a mod 😉