Low quality png in widget

Scriptable
1

I made a widget that downloads an image based on date and crops into the appropriate part, the image is small - 217 KB

https://root.breslan.co.uk/scratch/LP/210118.png

When I run the script in the app I get a lovely sharp image in my QuickLook.
http://root.breslan.co.uk/scratch/E0ADD14B-F0F0-4C95-B01B-13A26479493E.png

However in the widget it is very blurry…

Screenshot 2021-01-18 at 22.14.31
Screenshot 2021-01-18 at 22.14.31887×1400 130 KB

Any idea how to improve the quality in the widget?

full code is below:

var d = getPreviousMonday()
var df = new DateFormatter()
df.dateFormat = "yyMMdd"
dateString = df.string(d)

let url = "https://root.breslan.co.uk/scratch/LP/" + dateString + ".png"
let req = new Request(url)
let originalImage = await req.loadImage()

var td = new Date()
td = td.getDay()

positionRow = [1,1,1,2,2,2,2]
positionColumn = [1,2,3,1,1,2,2]

let w = originalImage.size.width/3
let h = originalImage.size.height/2

yp = -(positionRow[td-1]-1)*h
xp = -(positionColumn[td-1]-1)*w

console.log("x:" + xp + " and y:" + yp)

dc = new DrawContext()
dc.opaque = true
dc.size = new Size(w,h)

dc.drawImageAtPoint(originalImage, new Point(xp,yp))

image = dc.getImage()


if (config.runsInWidget) {
  // create and show widget
  let widget = new ListWidget()
  widget.backgroundImage = image
  widget.setPadding(0, 0, 0, 0)
  widget.url = url
  Script.setWidget(widget)
  Script.complete()
} else {  
  QuickLook.present(image)
}
  

function getPreviousMonday()
{
    var date = new Date();
    var day = date.getDay();
    var prevMonday = new Date();
    if(date.getDay() == 0){
        prevMonday.setDate(date.getDate() - 7);
    }
    else{
        prevMonday.setDate(date.getDate() - (day-1));
    }

    return prevMonday;
}
2

I think you need to set the respectScreenScale of your DrawContext to true. See https://docs.scriptable.app/drawcontext/#respectscreenscale

3

Thanks for the advise, but that did not work :frowning:

4

I’ve now tried it myself and after some debugging found the issue: Scriptable seems to scale the original image down to 500 px in the widget probably because of memory limits. Since these limits don’t exist in the app, the image is loaded in full size.

Thinking about it, it doesn’t make much sense since to scale the image down, it needs to load the full image first. But maybe the image is loaded in a different thread that has more memory available than the widget and to use it in the widget it needs to be scaled down. I don’t know the reason, only @simonbs knows it since he made Scriptable.

To solve the issue you could instead of download an image for the whole week and crop it in Scriptable, do that step beforehand when creating the image and then download an image for each day.
If this is not possible for you, you could download the image on monday with a different script (or the same script, but only when it is running in the app), crop it there for each day and save them to your iCloud Drive/local file storage of Scriptable and use these files then in the widget.

5

Thanks for the response. I might make a small php utility on my that does the cropping on the server side.