Wikitude
How can we help you today?
How to display Animated GIF?
Hello!
I am trying to display animated GIF and so far not successful with it. I am trying to use AnimatedImageDrawable it does not help. May I ask for advice or code example on how you display animated gif files in your architect worlds?
Here is a URL to GIF file I am trying to work with: http://forums.accuweather.com/uploads/post-13204-1336091269.gif
var the_image = new AR.ImageResource("http://forums.accuweather.com/uploads/post-13204-1336091269.gif");
var overlayOne = new AR.AnimatedImageDrawable(the_image, 5, 40, 50, {
enabled : false,
offsetX:1,
offsetY:0.5
});
...
// Later in my code I add overlayOne to camera view:
imageTrackable.drawables.addCamDrawable(overlayOne);
Thank you.
Hi Sergey,
The .gif you're using does not work with our SDK. We do support loading of .gif files but do not 'play' them. You can try to create a HTMLDrawable and set it's content to only the .gif. That should work.
Best regards
Andreas
Hello Andreas,
As u suggested to use Html Drawable for .gif images. I was trying the below code but it did not work and gives error. and also i want to user the html drawable on poi .
my code is:
World.markerDrawable_idle = new AR.HtmlDrawable({html:"<img src=assets/sticker_1.gif></img>"}, 1, {
translate : { x: 1 },
onClick : function() {
alert("hello");
},
horizontalAnchor : AR.CONST.HORIZONTAL_ANCHOR.LEFT,
opacity : 0.9
});
and it gives the error: file not found at url "assets/sticker_1.gif" but file is already there.
Wikitude Support
You need to put the absolute path of your url in brackets ''.
Thanks
Eva
Hello Eva,
I am Giving the absolute path but it is not showing the gif..
can you post some sample code.
Thanx
Swapnil
Wikitude Support
I apologize but when you posted the code I saw the error with the brackets and failed to see that you are actually trying to use a .gif as an ImageDrawable. We do not support gifs and this is why you still do not see anything. If you want to have an animated image then you can also have a look at our sample here where we use sprite sheet for animated images.
Thanks
Eva
GIF is not working with the latest version of Chrome (>= 66.0) in Android. I am using HtmlDrawable to render it.
Wikitude Support
Hi Prafulla,
Since you are using HTMLDrawables, which se strongly recommend not to as they might behave differently on different devices and there is no guarantee that the augmentation is looking or behaving the same on different devices, do you think it would be possible that you switch and use AnimatedImageDrawables?
If not then, could you please send over a minimum version of your project so that we can further investigate the issue?
Thanks
Eva
Thanks, Eve for replying me. Well, this time I can't change the code. So, it's hard to use AnimatedImageDrawable. A project is working with Android OS 6.0 with any Chrome updates. But from OS 7.0, WebView is directly connected with Chrome version as per Android developer documentation i.e whenever Chrome updates, WebView's features also updates. So, for any version of Chrome below 66, WebView is rendering gif's animation.
Wikitude Support
Hi,
Could you then please send over a minimum version of your project so that we can further investigate the issue?
Thanks
Hi Eve,
PFA JS file where we wrote the animation code. We are using HTMLDrawable for running gif.
You can check the following snippet
else if ((arCharacter['local_path']).indexOf(".gif") !== -1) {
var gifWidth = arCharacter['width']
var gifHeight = arCharacter['height']
console.log("width ##" + gifWidth)
console.log("height ##" + gifHeight)
console.log("gif loaded ##" + arCharacter['local_path'])
var imgSourceHtml = "<head><meta name=\"viewport\" content=\"target-densitydpi=device-dpi, width = " + gifWidth + ", user-scalable = 0\"> </head><body><span style=\"display: block !important; width: " + gifWidth + "px;\"><img src=" + arCharacter['local_path'] + " width=" + gifWidth + "/></span></body>"
//let imgSourceHtml = "<p style=text-align:center;> <img src=" + arCharacter['local_path'] + " height= "+ arCharacter['height'] +" width="+ arCharacter['width'] ></img></p>"
console.log("imgSourceHtml##" + imgSourceHtml)
this.arModelObjects[i] = new AR.HtmlDrawable({ html: imgSourceHtml }, 0.7, {
backgroundColor: "#00000000",
viewportWidth: gifWidth,
viewportHeight: gifHeight,
translate: {
x: arCharacter['XCordinate'],
y: arCharacter['YCordinate']
// z: arCharacter['ZCordinate']
},
scale: arCharacter['ScaleFactor'],
clickThroughEnabled: false,
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.CENTER,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.MIDDLE,
allowDocumentLocationChanges: false
})
}
What I observed that Webview method is supporting the Chrome's updated version to render gif perfectly. But HTMLDrawable is not supporting the Chrome's updated version. Please check AR.HtmlDrawable.
Wikitude Support
Hi,
As mentioned already and as the HTMLDrawables are very platform and browser dependent and with this type of augmentation the rendering might change with changes of e.g. the Browser version.
Can you please provide you complete AR experience (all assets, js, html, css files) so we can use it to reproduce the exact issue you're facing and check if there is something we can do about it?
Thx and greetings
Nicola
Sergey.kargopolov
1 person has this problem