Wikitude

RE: How to not load an htmldrawable immediately

You can use the AR.Trackable2dObject's onEnterFieldOfVision and onExitFieldOfVision triggers to start and pause the animation whenever a target is recognized (onEnter..) or is lost (onExit...).

See the JS API Reference that comes with the SDK for details on the API. Examples that make use of the enter/ExitFieldOfVision triggers is e.g. the Video Example 6-2.

 

var weatherWidget = new AR.HtmlDrawable({
uri: "splash/Spritesheet.html" }, 1, {
//viewportWidth: 800,
viewportHeight: 1024,
backgroundColor: "",
offsetX: 0.0004,
offsetY: -1,
scale: 0.8,
//onClick: overlayOne,
// horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
// verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
clickThroughEnabled: true,
allowDocumentLocationChanges: false,
onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) { AR.context.openInBrowser(uri); } });

I have this code for the htmldrawable. So what I have to do is onEnterFieldOfVision = weatherWidget; Like that?

You have either attached the drawable "weatherWidget" to a AR.GeoObject or AR.Trackable2DObject depending on if you are using Geo based AR or image recognition.

Both of these objects have an onEnterFieldOfVision trigger property that you can assign a function to. This function will be executed when the object becomes visible in the field of view.

Here is a quick example for doing what you asked assuming you are using image recognition.

var trackable2DObject = new AR.Trackable2DObject(tracker, "car", {
drawables : {
cam : weatherWidget
},
onEnterFieldOfVision: function() {
// called if the target is recognized
weatherWidget.evalJavaScript("startAnimation()");
}
});

 

For this to work your splash/Spritesheet.html should have a global javascript function called startAnimation that actually starts the animation.