How can we help you today?

Start a new topic
Discussions Wikitude SDK (Android, iOS, UWP) Wikitude SDK Questions or Problems

Which method is called when image is recognized in WTArchitect in ios?

Which method is called when image is recognized in WTArchitect in ios?
17 CommentsSorted by Newest First

Question asked and answered here: http://devzone.wikitude.com/web/forum/home/-/message_boards/message/146906

Hello Sir, this is my code in .HTML file please say me where can i destroy trackable2Ds array/ object , so my application not be become crashes in iphone which runs fine in ipad. Please i am in problem from last 2days.

 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple IR World</title>

<style type="text/css">
    .info {
        color: #9F6000;
        background-color: #FEEFB3;
        margin: -8px 1%;
        padding: 10px;
        font-size: 14pt;
        border-radius: 0 0 10px 10px;
        text-align: center;
    }
</style>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>

<script src="../ade.js"></script>

<script>
    
//    <a href="didTap://button1"><img src="button1.jpg" /></a>

/* Global variables */
var logoTracker = null;
var overlay = null;
var trackable2DObject = null;
var trackable2DObjects = new Array();
var errorOccured = false;
var masterAnimationGroup  = null;
var trackerDataSetPath = null;

var targetIds = new Array();
    
//variable that keeps the jsonData received from the native app
var jsonObject;
     

function error() {
    errorOccured = true;
    document.getElementById("messageElement").innerHTML = "Unable to load image or tracker!";
}

function createTracker(){
    var image = new AR.ImageResource("target.png", {onError: error});
    overlay = new AR.ImageDrawable(image, 1.0, {zOrder: 0});
 
    
    // create tracker
    logoTracker = new AR.Tracker(trackerDataSetPath, { onLoaded : trackerLoaded, onError: error });
    

    // relative position from teh arrows
    arrowXOffset = 2.0;
    arrowYOffset = 0.1;

    var arrow1 = arrowWithDirectionality(-arrowXOffset, -arrowYOffset, -45);
    var arrow2 = arrowWithDirectionality(-arrowXOffset, arrowYOffset, 45);
    var arrow3 = arrowWithDirectionality(-arrowXOffset, -arrowYOffset, 135);
    var arrow4 = arrowWithDirectionality(-arrowXOffset, arrowYOffset, 225);

    for (var i = 0; i < targetIds.length; i++)
    {
       //alert (targetIds);
        
        var trackObj1=new AR.Trackable2DObject(logoTracker, targetIds, { drawables: { cam: },onEnterFieldOfVision: generate (targetIds), onExitFieldOfVision:generate (targetIds)
                                              });
        
        trackable2DObjects.push(trackObj1);
        
        //trackObj1.destroy();
        
    }
    
    
    

    // we need to pack the arrow animations into a parallel animation group to play them synchronisly
    masterAnimationGroup = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, );
}
 
    
function generate(id) { return function() {
    document.location = "architectsdk://TrackerDidDiscoveredImageTarget?id="+id;
}
};
    

    //function called from the native app fia callJavascript method
    //receives json-data as string and processes the contained information
function newData(jsonData){
                
        jsonObject = JSON.parse(jsonData);
   // alert(jsonObject.length);
        for(var i = 0; i < jsonObject.length; i++)
        {
            targetIds=jsonObject.imageTitle;    
        }
    trackerDataSetPath=jsonObject.imageProjectName;
    //alert (jsonData);
        //document.getElementById("statusElement").innerHTML='JSON objects loaded';    
    createTracker();
}
    
    

function trackerLoaded()
{
    if (errorOccured) return;

    document.getElementById("messageElement").style.display = "none";
    // start with the parameter -1 indicates, that the group will play the animation in an infinite loop
    masterAnimationGroup.start(-1);
}

function arrowWithDirectionality(offsetX, offsetY, roll)
{

    var animationOffset = 0.9; // distance in sdu's
    var animationTime = 700; // ms

    // load the arrow image
    var arrowImage = new AR.ImageResource("DirectionArrow.png");

    // attach the image resource to a drawable, so that its visible on the screen
    var arrowImageDrawable = new AR.ImageDrawable(arrowImage, 0.6, {offsetX: offsetX, offsetY: offsetY, zOrder: 1, roll: roll} );


    // we want to animte the arrow, to lets add two animation
    var arrowSpinAnimation = new AR.PropertyAnimation(arrowImageDrawable, "tilt", 0, 360, animationTime, {type: AR.CONST.EASING_CURVE_TYPE.LINEAR});

    // the first one moves the arrow to the trackableObject
    var arrowAnimationMoveDown = new AR.PropertyAnimation(arrowImageDrawable, "offsetX", offsetX, offsetX+animationOffset, animationTime, {type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_CUBIC});

    // the second one moves it back to the original position
    var arrowAnimationMoveUp = new AR.PropertyAnimation(arrowImageDrawable, "offsetX", offsetX+animationOffset, offsetX, animationTime, {type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_CUBIC});

    // because these two animations should be played one after another, we gonna pack them into a sequential animation group.
    var animationGroup = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.SEQUENTIAL, );

    var arrow = new Array(arrowImageDrawable, animationGroup);

    return arrow;
}
    
</script>
</head>

<body>
    
<div class="info" id="messageElement">Loading ...</div>

<script>
//createTracker();
</script>
    
</body>
</html>
 

I using this code, , so no image tracking is done ? and its right also because we destroy this object? so where i call this function? please suggest me?    

  var trackObj1=new AR.Trackable2DObject(logoTracker, targetIds, { drawables: { cam: },onEnterFieldOfVision: generate (targetIds), onExitFieldOfVision:generate (targetIds)
                                              });
        
        trackable2DObjects.push(trackObj1);
        
        trackObj1.destroy();

 

I also used this code

var trackObj1=;
        
        trackable2DObjects.push(new AR.Trackable2DObject(logoTracker, targetIds, { drawables: { cam: },onEnterFieldOfVision: generate (targetIds), onExitFieldOfVision:generate (targetIds)
                                              }));
        
        trackable2DObjects.destroy();

 

Recognization is not perform ? so where i call this method?
 

Hi,

please have a look at this link: http://devzone.wikitude.com/web/forum/home/-/message_boards/message/146313?p_p_auth=p4YuVvMH.

You can call destroy whenever you're done using a specific tracker.

Best regards

Andreas

IR mode, which uses more computing power (and battery power),  is started whenever you create a Tracker. Thus make sure to call destroy() on the Tracker if you don?t require the IR instance anymore. If all Trackers are destroyed, IR mode is exited automatically.

 

So where to apply this destroy methos and how:?
 

Thanks Andreas sir

Now i have another problem that my application beomes crashes agter 3-4 successful recognization of images, i think its because of not releasing object array of trackable2d Object's array and Architect object, i am not releasing Architect object because i am using ARC concept ,

 

So tell me how to release trackable2dObjects array which is in my .html file? and is it necessary to release ARchitect object, so my application will not be crashes?

 help me.
 


 

Hi,

1)

I'm not aware if this is possible, please check with qualcomm if you can create a dataset which contains multiple image targets with a qualcomm api.

 

2)

Since an architectworld is just like a regular html page, use javascript to access your webservice that will give you the names and image target urls that you need for creating the trackable2dobjects in javascript.

 

3)

Have a look at xmlhttprequest to connect to a webservice. Additionally libraries like jquery simplifies this.  

 

Best regards

Andreas

 

Thanks Andreas  Sir,

Yes its works, i tested this.

Sir, Now i want to make an array of trackable2DObject and keep images reference in that array in it, so how to create trackable2DObject's Array and i want to reterieve images name and project name from webserver, because i want to track multiple images which is in my webserver.

1) I want to send multiple images in  traceproject which would be ready for tracing from qualcom,Flow which i want is --> my all webserver images is 1st go to qualCom at a time and then ready to trace, then I download that traceble project.So, How to send all images at a time to qualcom and my all images become ready for tracing? please suggest me this first Sir?

2) Then if this  happens successfully,i want to keep this traceble project in my database, and then reterieve images and project name from databse and send it to trackable2DObject's Array which is in my HTML file, this is the flow i want , How to achieve this Suggest me Sir.

is it possible to pass name of images and projectname in which this images lies to our .html file, how can i acheieve this please guide me or if you have any demo code so please provide
 

Hi,

try this (untested)

   trackable2DObject = new AR.Trackable2DObject(logoTracker, "Hut", { drawables: { cam: },

onEnterFieldOfVision: function(){

      "architectsdk://TrackerDidDiscoveredImageTarget?id=Hut";

},

onExitFieldOfVision: function(){

   "architectsdk://TrackerDidDiscoveredImageTarget?id=Hut";

}

});

 

andreas

Hello Sir,

Your 1st reply help me alot, now can you please suggest me how to pass this argument in onEnterFieldOfVisionTrigger of the Trackable2DObject.

you say me this priviously but how t oset this

'document.location = architectsdk://TrackerDidDiscoveredImageTarget?id=<aImageTargetID>' in your onEnterFieldOfVisionTrigger of the Trackable2DObject.

 

i tried this but its not working:-

   trackable2DObject = new AR.Trackable2DObject(logoTracker, "Hut", { drawables: { cam: },onEnterFieldOfVision: "architectsdk://TrackerDidDiscoveredImageTarget?id=Hut", onExitFieldOfVision:"architectsdk://TrackerDidDiscoveredImageTarget?id=Hut"});

Tell me where i am wrong?


 

This is my code which is working   :-

trackable2DObject = new AR.Trackable2DObject(logoTracker, "Bunglow", { drawables: { cam: },onEnterFieldOfVision: generate, onExitFieldOfVision:generate });

function generate()
{  
    document.location = "architectsdk://TrackerDidDiscoveredImageTarget?id="+1;
}
 

But I want this

trackable2DObject = new AR.Trackable2DObject(logoTracker, "Bunglow", { drawables: { cam: },onEnterFieldOfVision: generate (Bunglow), onExitFieldOfVision:generate (Bunglow) });

function generate(id)
{  
    document.location = "architectsdk://TrackerDidDiscoveredImageTarget?id="+id;
}

 

I just want to reterieve the target name of recognized image,i.e which image from multiple images is recognized?

Please suggest me , give some sample code if possible that how to reterieve targetname from Trackable2DObject.
 

 

Hello Sir,

My last one problem ,  How to set a unique id of recognized image , i have set two images in traceble and its properly recognized, but i want to set unique id to each image, please say me how can i do this because on basis of this id i want to open different pages in objective c?

My code is :-

   trackable2DObject = new AR.Trackable2DObject(logoTracker, "Bunglow", { drawables: { cam: },onEnterFieldOfVision: generate, onExitFieldOfVision:generate });
    
        trackable2DObject = new AR.Trackable2DObject(logoTracker, "House", { drawables: { cam: },onEnterFieldOfVision: generate, onExitFieldOfVision:generate});
 

Tell me what to edit in this to set id or how to set id=<aImageTargetID> in document.location = "architectsdk://TrackerDidDiscoveredImageTarget?id=<aImageTargetID>;... , so how to know aImageTargetID ?

Thanks a lot Sir Andreas ,

My problem is solved , because you help me.

I used onEnterFieldOfVision this for calling method after image is recognized.

Thanks.
 

Hi,

the overlay is an AR.ImageDrawable. According to the specification, you can add a onClick trigger function which is called each time you tap on the overlay.

As you can see in the SimpleIRWorld, there is the variable overaly:

var overlay = new AR.ImageDrawable(image, 1.0, {zOrder: 0});

You can define a onClick trigger like that:

overlay.onClick = function(){

    alert('click on drawable');

    // you can call any other JS function here

};

Best regards

Andreas

Thanks Sir,

I have another problem that as in IR ImageRecognization, when image is recognized so an overlay of architect image is show and four arrows is shown, So can i call a javascript method on click of that overlay image when image is recognized.

Is this is possible then please tell me how to set architect overlay's click event and its calling a javascript method on its click..
Login or Signup to post a comment
More topics in Wikitude SDK Questions or Problems
See all 3837 topics
© 2021 Wikitude, a Qualcomm company