Using loop for multiple targets in wikitude

Question

I am currently having 20 targets and they all have different URL. Following the sample, all of them have to be declared one by one like:

// Create overlay for page one
var imgOne = new AR.ImageResource("assets/imageOne.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
  offsetX: -0.15,
  offsetY: 0
});
var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", {
  drawables: {
  cam: overlayOne
}
});

and again we declare

// Create overlay for page two
var imgTwo = new AR.ImageResource("assets/imageTwo.png");
var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, {
  offsetX: 0.12,
  offsetY: -0.01
});
var pageTwo = new AR.Trackable2DObject(this.tracker, "pageTwo", {
  drawables: {
   cam: overlayTwo
}
});

I want to put them in a loop instead. I found another thread having similar problem, and the solution is:

loop(condition){
  new AR.Trackable2DObject(this.tracker, "targetName", {
   drawables: {
   cam: new AR.ImageDrawable(new AR.ImageResource("assets/targetImage.png"), 1, {
   offsetX: -0.15,
   offsetY: 0
  })
 }
 });
}

But my overlay is html with URL, so when i tried


for(i=0;i<targetList.length;i++){
            new AR.Trackable2DObject(this.tracker, targetList[i], {
            drawables: {
               cam: [clickMeOverlay, sparkles,
               new AR.HtmlDrawable({
                  uri: htmlAssetFolder+targetList[i]+".html"
                  }, 1, {
                     offsetX: 1,
                     offsetY: 0,
                     horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
                     verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
                     clickThroughEnabled: true,
                     onClick: function() {
                        document.location = "architectsdk://"+targetList[i];
                        return true;
                        }
                  })
               ]
            }
         });

all target in the list can be recognized with the correct overlay. but when i click the overlay, all of them leads to the same URL, which is the last item in the list. I have been trying for few hours T^T for your kind help please. many thanks!!!!

score 0 · Answer 1 · edited May 23 '17 at 12:02

You need to learn a little bit about JavaScript Closures.

The problem is that each of your onClick functions uses the same variable i which is declared in an outer scope. Closure rules mean that when onClick() is called, the value of i will be the last value assigned to it.

One way to solve it is to resolve the URL outside of onClick() - you could try just storing the resolved value in the object itself:

for(var i=0;i<targetList.length;i++){
            new AR.Trackable2DObject(this.tracker, targetList[i], {
            drawables: {
               cam: [clickMeOverlay, sparkles,
               new AR.HtmlDrawable({
                  uri: htmlAssetFolder+targetList[i]+".html"
                  }, 1, {
                     offsetX: 1,
                     offsetY: 0,
                     horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
                     verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
                     clickThroughEnabled: true,
                     url: "architectsdk://"+targetList[i],
                     onClick: function() {
                        // assumes 'this' context points to the current object
                        document.location = this.url;
                        return true;
                        }
                  })
               ]
            }
         });

Thank you for the prompt response! unfortunately it still doesn't work... :'( — Alvida, Aug 08 '15 at 14:24
@hacker2007, did not managed to solve it. codes all overlays separately — Alvida, Jun 16 '16 at 09:54
I abused the zOrder property of Drawable2D objects to store the current array index in the object. The array stores dictionaries mapping "url": "architectsdk://...". In the onClick function I identify the proper url like this: var url = myArray[this.zOrder]["url"]; — RTasche, Jun 16 '16 at 11:51

Using loop for multiple targets in wikitude

1 Answers1