Image flicker when updating the picture source binding

GoJS
1

I am using pictures which are SVG images in my diagram. I have a binding on the source which allows for the individual pictures to be changes when the state is updated (e.g. open/closed).

When I update the picture source I get a delay between the pictures changing which shows as a flicker (or blink). How can I overcome this?

Thanks in advance!

2

Is the new picture a different size than the old one? Have you set the Picture.desiredSize or both Picture.width and Picture.height?

Does the whole diagram redraw, or is the flicker just in the modified Picture?

How do you update the picture’s data source property?

3

Hi, Thanks for your reply.

See the response to your questions below, but I also have some new information that might help.

The images are basically the same image, but one has a different colour. The size is the same. I was using width and height, and I have now added desired size.

The flicker occurs just on the picture being updated, not the whole diagram.

The source is being updated from a server side model using:

gojs(go.Picture,
{ desiredSize: new go.Size(32, 32) },
new go.Binding(‘source’, ‘image’),
new go.Binding(‘width’, ‘width’),
new go.Binding(‘height’, ‘height’)
),

New Info:

I have now found that if I alternate between picture A and picture B every second, it only flickers approximately once every 10 seconds and would only flicker when changing to picture B. I noticed that picture A is being used in a different place on the diagram (but not being updated) so to test I added picture B to the diagram (and didn’t update it) now the flickering has gone away.

Does this relate to caching? Is there a way to load all the images into cache?

4

That’s interesting. What version of GoJS are you using? If its 2.0.12 or before, definitely upgrade and try again.

5

I have just updated today to 2.0.17

6

Ok, we’ll investigate and get back to you.

1 Like
7

I can’t seem to reproduce a flicker. Here’s what I did:

https://codepen.io/simonsarris/pen/jONjWaa?editors=1011

(click the “Start” button below the Diagram)

How does your app differ?

8

I can’t see any obvious differences that could be causing the problem.

My code is wrapped in a knockout custom binding, but the update to the go diagram model is effectively the same as your example. I was using model.setDataProperty instead of model.set I have updated it but it doesn’t make a difference.

If I look at the Google debug tools network tab. When the image flickers it is retrieving the image and the initiator is go-debug.js:1353. Does that help?

Like I said previously, if I add both images into the diagram (and don’t update), I don’t have the problem.

Any other ideas?

9

Could you send me your images, and perhaps more of your code? If you wish to do this privately you can send email: gojs at nwoods.com

10

Just sent you an email.