How do you update an override with a new image?

perrysmotors

I want to replace or set an image override with a new image from a URL.

The API indicates that override.value can be changed and expects ImageData

https://developer.sketchapp.com/reference/api/#symbol-override

I've tried this but the symbol does not update:

let imageurl = "https://www.sketchapp.com/images/app-icon@2x.png";
let imageurl_nsurl = NSURL.alloc().initWithString(imageurl);
let nsimage = NSImage.alloc().initByReferencingURL(imageurl_nsurl);
override.value = nsimage;

What am I missing?

Ariel

it expects MSImageData (MS class from Sketch)...

perrysmotors

Ariel Tried this but it doesn't work either:

let imageurl = "https://www.sketchapp.com/images/app-icon@2x.png";
let imageurl_nsurl = NSURL.alloc().initWithString(imageurl);
let nsimage = NSImage.alloc().initByReferencingURL(imageurl_nsurl);
let imageData = MSImageData.alloc().initWithImage(nsimage)
override.value = imageData;

Ariel

perrysmotors maybe is because the image is from a url? try with a resource image, just to make sure that is not the case. I know that initByReferencingURL doesn't really download the image until it is draw, not sure what happens there, as when the image is downloaded in this case

perrysmotors

Ariel I tried with a file URL if that's what you mean but it didn't work either:

let path = "/Users/giles/Desktop/icon.png";
let imageurl_nsurl = NSURL.fileURLWithPath(path);
let nsimage = NSImage.alloc().initWithContentsOfURL(imageurl_nsurl);
let imageData = MSImageData.alloc().initWithImage(nsimage)
override.value = imageData;

Ariel

perrysmotors

var sel = context.selection[0];

sel.overridePoints().forEach((o1) => {
    if(o1.name().indexOf('_image')>-1) {
       let path = "/tmp/test.png";
       let imageurl_nsurl = NSURL.fileURLWithPath(path);
       let nsimage = NSImage.alloc().initWithContentsOfURL(imageurl_nsurl);
       let imageData = MSImageData.alloc().initWithImage(nsimage)
       sel.setValue_forOverridePoint_(imageData, o1);
    }
});

this works...

Ariel

you will need to refresh the inspector panel, but that will set the override image and refresh the instance to show that image

perrysmotors

Tried a different approach but still no luck:

The documentation indicates I can create a new image like this:
let image = new Image({image: '/Users/giles/Desktop/icon.png'})

and images have an image property containing ImageData:
log(image.image.type); // ImageData

The override value is also ImageData:
log(override.value.type); // ImageData

But this doesn't work?
override.value = image.image;

Ariel

I think that you are setting the value, but then you need to refresh the instance to show the new value

perrysmotors

Ariel I added
context.document.reloadInspector();

But I get an error:

"-[__NSFrozenDictionaryM image]: unrecognized selector sent to instance 0x600000439880"

Not sure what that means...

And the inspector panel has broken for the selected symbol!

Ariel

are you setting the value with image, where image is the result of "new Image()"? you need to set the value with image.image in that new case...

perrysmotors

Ariel That's what I did:

override.value = image.image;

Ariel

did you saw the code I posted? if you use method setValue_forOverridePoint_ that will set the value and refresh the instance

perrysmotors

Ariel I missed the earlier post somehow.

The code works for me too!

I've been using the new API layer.overrides and I've picked out a particular override based on some criteria.

https://developer.sketchapp.com/reference/api/#symbol-override

So now I need to get the overridePoint from the symbol-override

perrysmotors

Ariel Thanks so much. We got there in the end!

perrysmotors

This works!

let overridePoint = override.sketchObject.overridePoint();
layer.sketchObject.setValue_forOverridePoint_(imageData, overridePoint);

mathieudutour

you should be able to do override.value = "/Users/giles/Desktop/icon.png" directly.

Turns out there is a bug which prevents it from working. I had a test for it tho, not sure why it's not failing 🤔

But please, as soon as it's fixed, switch back to using the API instead of using the internals which are going to change on every sketch releases 🙂

perrysmotors

mathieudutour Will this work too? override.value = "https://www.sketchapp.com/images/app-icon.png"

mathieudutour

Hum no, it's using NSImage.alloc().initByReferencingFile() when it's a string right now. But it shouldn't be too hard to add I think

PR welcomed 🙂 https://github.com/BohemianCoding/SketchAPI/blob/develop/Source/dom/components/ImageData.js#L20-L57

kevgski

Still have to try and get my version of Sketch pointing to my local instance of the Sketch API but this might do this trick:

https://github.com/BohemianCoding/SketchAPI/compare/develop...KevinGutowski:kevin/add_url_to_imageData?expand=1