TDesjardins / gwt-ol

GWT wrapper for OpenLayers 3+ using JSInterop
Apache License 2.0
70 stars 33 forks source link

how to smoothly transition from an image to another in a vector layer #173

Closed Magallo closed 3 years ago

Magallo commented 3 years ago

Hi all. Reconnecting to #163, I still have flickering problems when changing image on a vector layer in a movie loop.

I added this comment to the already closed issue #163. I write also here the problem. I noticed the new load() method on Icon and the image setter on Style (thank you for your continuous support!), however I still have problems I don't fully understand. I tried pre-loading all the images (using the load() method) and assigning them in the style (in the sylefunction). In this case the usual 'flicker' effect seems to be mitigated, but I noticed severe performace issues and in some cases I noticed no images shown at all apparently in a random way. There is not a specific and understandable reason why. In any case the solution seems not to be 'stable'. I also noticed that the flickering effect is emphasized or reduced depending on the amount of images being part of the 'movie loop'. In a short or very short movie loop the flicker effect is almost zero while in a long movie loop (more images) the effect is more and more present. Il looks like when the number of images is low, th browser is capable of caching them efficently, and after some flickering frames, the loop becomes stable and the image transition starts to be smooth (the images are shown immediatly without flicker effect); on the other side, when the number of images is high, the browser is not capable of caching them efficently, and the flickering effect is constantly present. My question is: is there a more efficient way to smoothly execute image transitions on vector layers (an alternative of using the Icon/Style method) or the technique is correct but must be implemented in a different way? Last question: I see there is the load() method on Icon class, but is it sync or async? Is there a way to use a 'loaded' callback to be notified when the image is effectively loaded? Thanks.

Magallo commented 3 years ago

Hi all! Thanks to a colleague of mine, I discovered a class named IconImageCache on the native javascript library.

See here: https://openlayers.org/en/latest/apidoc/module-ol_style_IconImageCache-IconImageCache.html#setSize

I think this could be the right solution or at least I would like to try it if possible. My question is: I am not able to find this classe in the gwt-ol wrapper. Is it possible to implement a port of this class? I also was not able to find how to use it. Could you possibly port this class and explain its usage? Thanks.

TDesjardins commented 3 years ago

Hello @Magallo ,

yes, should be possible to support this. IconImageCache has a singleton instance (shared) that can be used to increase cache size of 32.

TDesjardins commented 3 years ago

Hello @Magallo

master contains now the icon image cache extension. You can check the icon image test to see how to get the cache and set the max size. Let me know if this works for you.

Magallo commented 3 years ago

Thanks a lot! I will try it!

TDesjardins commented 3 years ago

Here is the link to the test: https://github.com/TDesjardins/gwt-ol/blob/master/gwt-ol3-client/src/test/java/ol/style/IconImageCacheTest.java#L32