Wikitude

Hi, 

I'm using javascript iOS SDK for create an augmented reality app that show some model based on different images.

Using the examples I'm able to show one model, my problem is that I'm not able to show 2 different models based on 2 different image.

Using my code I can see only the model of FIRST tracked image, if I try to track the other image nothing appear, only the first work.

If I track the second image I see the second image but I'm not able to see the first model. This is my code:

    init : function() {

        try {
            // create resource to load tracker from
            var targetCollectionResource = new AR.TargetCollectionResource(this.WTC_PATH);

            // create pipes model.
            trainer = new AR.Model(this.WT3_PATH, {
                scale: {
                    x: 0.1,
                    y: 0.1,
                    z: 0.1
                },
                onDragBegan: function(x, y) {
                    World.requestedModel = 1;
                    oneFingerGestureAllowed = true;
                },
                onDragChanged: function(relativeX, relativeY, intersectionX, intersectionY) {
                   
                    if (oneFingerGestureAllowed)
                        this.translate = {x:intersectionX, y:intersectionY};
                
                },
                onDragEnded: function(x, y) {
                // react to the drag gesture ending
                },
                onRotationBegan: function(angleInDegrees) {
                    // react to the rotation gesture beginning
                    oneFingerGestureAllowed = false;
                },
                onRotationChanged: function(angleInDegrees) {
                    this.rotate.z = rotationValues[0] - angleInDegrees;
                },
                onRotationEnded: function(angleInDegrees) {
                    rotationValues[0] = this.rotate.z;
                    oneFingerGestureAllowed = true;
                },
                onScaleBegan: function(scale) {
                    // react to the scale gesture beginning
                },
                onScaleChanged: function(scale) {
                    //var scaleValue = scaleValues[0] * scale;
                    //this.scale = {x: scaleValue, y: scaleValue, z: scaleValue};
                },
                onScaleEnded: function(scale) {
                    //scaleValues[0] = this.scale.x;
                    //oneFingerGestureAllowed = true;
                }
            });

            rotationValues.push(defaultRotationValue);
            scaleValues.push(defaultScaleValue);

            World.requestedModel = 1;
            World.camDrawables.push(trainer);
			lastAddedModel = trainer;




            // create pipes model.
            earth = new AR.Model(this.WT3_PATH_2, {
                scale: {
                    x: 0.1,
                    y: 0.1,
                    z: 0.1
                },
                onDragBegan: function(x, y) {
                    World.requestedModel = 2;
                    oneFingerGestureAllowed = true;
                },
                onDragChanged: function(relativeX, relativeY, intersectionX, intersectionY) {
                   
                    if (oneFingerGestureAllowed)
                        this.translate = {x:intersectionX, y:intersectionY};
                
                },
                onDragEnded: function(x, y) {
                // react to the drag gesture ending
                },
                onRotationBegan: function(angleInDegrees) {
                    // react to the rotation gesture beginning
                    oneFingerGestureAllowed = false;
                },
                onRotationChanged: function(angleInDegrees) {
                    this.rotate.z = rotationValues[1] - angleInDegrees;
                },
                onRotationEnded: function(angleInDegrees) {
                    rotationValues[1] = this.rotate.z;
                    oneFingerGestureAllowed = true;
                },
                onScaleBegan: function(scale) {
                    // react to the scale gesture beginning
                },
                onScaleChanged: function(scale) {
                    //var scaleValue = scaleValues[0] * scale;
                    //this.scale = {x: scaleValue, y: scaleValue, z: scaleValue};
                },
                onScaleEnded: function(scale) {
                    //scaleValues[0] = this.scale.x;
                    //oneFingerGestureAllowed = true;
                }
            });

            rotationValues.push(defaultRotationValue);
            scaleValues.push(defaultScaleValue);

            World.requestedModel = 2;
            World.camDrawables_2.push(earth);
			lastAddedModel = earth;



			console.log(camDrawables);
			console.log(camDrawables_2);


            // define tracker object
            var tracker = new AR.ImageTracker(targetCollectionResource, {
				onError: function () {

				},
				onDisabled: function () {

				},
                onTargetsLoaded: function() {
                    
                    try {
                        // add AR.ImageTrackable once tracker is active. Using wild-card as targetname to augment every target in the wtc file the same way
                        var first = new AR.ImageTrackable(tracker, "trImage", {
                            enableExtendedTracking: true, // activates extended tracking
                            drawables: {
                                cam: World.camDrawables // initially no camDrawables exist, they are added and updated once sensor values arrive
                            },

                            // callback function indicating quality of SLAM tracking.
                            onExtendedTrackingQualityChanged: function (targetName, oldTrackingQuality, newTrackingQuality) {

                            	console.log("trImage: " + oldTrackingQuality + " -> " + newTrackingQuality);

                            },

                            // one of the targets is visible
                            onImageRecognized: function onEnterFieldOfVisionFn(targetName) {

								console.log(targetName);

                                this.isVisible = true;
                            },

                            // when losing the target -> snapToScreen is enabled and the close button appears, so user can dismiss rendering of the video
                            onImageLost: function (targetName) {
                                //this.isVisible = false;

                                console.log("onImageLost: " + targetName);
                            },
                            onDragBegan: function onDragBeganFn(xPos, yPos) {

                                oneFingerGestureAllowed = true;
                                World.updatePlaneDrag(xPos, yPos);
                            },
                            onDragChanged: function onDragChangedFn(xPos, yPos) {
                                World.updatePlaneDrag(xPos, yPos);
                            },
                            onDragEnded: function onDragEndedFn(xPos, yPos) {

                                World.updatePlaneDrag(xPos, yPos);
                                World.initialDrag = false;
                            }
                        });



                        var second = new AR.ImageTrackable(tracker, "target_iot", {
                            enableExtendedTracking: true, // activates extended tracking
                            drawables: {
                                cam: World.camDrawables_2 // initially no camDrawables exist, they are added and updated once sensor values arrive
                            },

                            // callback function indicating quality of SLAM tracking.
                            onExtendedTrackingQualityChanged: function (targetName, oldTrackingQuality, newTrackingQuality) {

                            	console.log("target_iot: " + oldTrackingQuality + " -> " + newTrackingQuality);


                            },

                            // one of the targets is visible
                            onImageRecognized: function onEnterFieldOfVisionFn(targetName) {
                                this.isVisible = true;
                            },

                            // when losing the target -> snapToScreen is enabled and the close button appears, so user can dismiss rendering of the video
                            onImageLost: function (targetName) {
                                //this.isVisible = false;

                                console.log("onImageLost: " + targetName);
                            },
                            onDragBegan: function onDragBeganFn(xPos, yPos) {

                                oneFingerGestureAllowed = true;
                                World.updatePlaneDrag(xPos, yPos);
                            },
                            onDragChanged: function onDragChangedFn(xPos, yPos) {
                                World.updatePlaneDrag(xPos, yPos);
                            },
                            onDragEnded: function onDragEndedFn(xPos, yPos) {

                                World.updatePlaneDrag(xPos, yPos);
                                World.initialDrag = false;
                            }
                        });





                    } 
                    catch (err) {
                        World.onError(err);
                    }
                }
            });
        } catch (err) {
            World.onError(err);
        }
    },

where is the error?

Dear Eva, 

thank you so much for this quickly answer...so if I want show different model with different image I need to stopExtendedTracking when an image is lost (we call this image image A) then, after stop it I need to re-create ImageTrackable A (in case the user want to rescan image A)?

thank you

francesco