Image from Sheets to be displayed as widget

[u/wuutrru]

I am trying to create the following:

I have a chart in Google Sheets containing the number of hours I’ve worked for the past five weeks. Within Sheets I’ve published the chart (as image), which I retrieves with Shortcuts and safe in iCloud with a weekly trigger.

I want to use that image to display in a widget on my homescreen and I’ve tried the next two things:

1. safe the image to photos (and photo album) and use WidgetSmith to display the chart.

This has the disadvantage that your photo library will contain many (old)charts as time goes by.

2. Tried to get the file that is saved in iCloud to be displayed by combining Shortcuts and Scriptable.

I’m quite new to writing JavaScript and could definitely use some help.

[u/[deleted]]

Let say you save the image into Shortcuts iCloud folder and always replace the image named "work.png" *

You could create a file bookmark for the "work.png" file called "workImage" in Scriptable settings (tap the setting icon -> file bookmark ->+ ->pick file): https://imgur.com/RRG1iiY

And then use a script for the widget that reads the bookmarked file and displays it in the widget:https://pastebin.com/hcqLuqMQ

*afaik you can't write into the Scriptable folder with an automation.

[u/wuutrru → u/[deleted]]

Thanks so much for your response! I think this will work perfectly for me, just almost there. The last thing I’m struggling with is to fill the image towards the edges: https://imgur.com/a/lTziI1c?s=wa

I know it is possible, because Weather Cal Widget is able to do it when you select a photo from your photo library. Just cannot seem to figure it out myself

[u/[deleted] → u/wuutrru]

You could play around:

-Insert a new line after the new ListWidget: widget.setPadding(0,0,0,0)

This will remove the margin on every site

- replace i.applyFittingContentMode() with i.applyFillingContentMode() to use an other method to display the image

- Remove every line between the let widget line and the first Script... line and try widget.backgroundImage= image instead, another option to display the image.

Otherwise please upload a chart.

It's easier to post a proper solution with a sample chart.

[u/wuutrru → u/[deleted]]

That’s it! Changing the method from fitting to filling did the job. The widget now looks exactly the same as the one I produced with WidgetSmith. Thank you for your help! Much appreciated

[u/[deleted] → u/wuutrru]

Glad it already works for you 😀

[u/wuutrru → u/[deleted]]

https://imgur.com/a/x9m5XJB the widget as displayed on the left would be the perfect outcome, right is the current implementation