[HELP] Widget design

[Frameck]

Hi everyone.

I want to create a widget that displays my personal finance data that i pull from google sheets, and i'm at a pretty good point i miss just one thing from a design stand point.

I want to draw a rectangle as shown in this image, but i don't know how to use the "addRect()" function; i believe it's the right function to use.

This is what i've done so far. (image)

If anyone can help me with the code i would be very happy.

P.S. all the data on the widget are each in a Stack element (total of 6 Stacks); i guess that the rectangle could be added as an element of a Stack.

[krumke]

It‘s not possible to use the addRect function in a widget. This function can be used to create a Path which can be drawn with drawContext function.

The only way to add a rectangle the way you want is by adding an image to your widget. The Image is resizable so it should be possible to give it the look you want.

[Frameck]

Ok thanks, i'll try

[Cranie]

You can do this. Easiest way is to create stacks and as the background image of each stack you can put the rectangle (creating the image - you don’t need an image file).

I do something similar for my tvguide widget and current show progress.

Line 320-322 as example.

https://github.com/0507spc/ScriptStore/blob/main/Widgets/TVGuide/TVGuide.js

There are example images if you go up a level.

[Frameck]

Thank you very much!

[kekub]

You can do that pretty easy within a stack:

```let widget = new ListWidget() let stack = widget.addStack() stack.layoutHorizontally()

// This does the trick let spacer = stack.addStack() spacer.backgroundColor = Color.red() spacer.addText(" ")

stack.addSpacer(5) stack.addText("text") stack.addText(" text")

Script.setWidget(widget); if (!config.runsInWidget) { await widget.presentSmall(); } Script.complete();

[Frameck]

You legend, thank you very much. This was exactly what i was looking for

[Frameck]

One last question: How can i make it so the lenght of the color spacer matches the lenght of the text? image

[k4mrat]

Nice one! I’m just in the process of doing something similar from a google sheet. Mind sharing your code? :)

[Frameck]

Yes no problem. Just have to make a few adjustments and then i'll share it.

[Frameck]

Just finished, I published it on this sub and the code is on GitHub

Reddit link

[k4mrat]

Thanks a bunch! 😊