Wikitude

Titanium / Javascript click handling of images

Below is my code.  I'm trying to determine what target was clicked on.  Basically we have many targets named based on what is found in our content management system.  However I am able to successfully display the overlay which is a play button but can not determine what target was clicked on.  Is it possible to pass the target name to the image overlay so when the user clicks on it we can get the actual target name the user clicked on?

 

var World = {

  loaded: false,

 

  init: function initFn() {

    AR.logger.activateDebugMode();

    this.createOverlays();

  },

 

  createOverlays: function createOverlaysFn(arObj) {

    var wtcFile = 'http://files.totallytourist.net.s3.amazonaws.com/ha_ost.wtc';

    //var wtcFile = "assets/ha_ost.wtc";

    // Initialize ClientTracker

    this.tracker = new AR.ClientTracker(wtcFile, {

      onLoaded: this.worldLoaded,

      onDisabled: function() {

        //tracker has been disabled by the system

        AR.logger.debug('onDisabled');

 

      },

      onError: function(e) {

        AR.logger.debug('error on Error', e);

      }

    });

 

    /* Create overlay for page one */

    var imgOne = new AR.ImageResource("assets/play.png");

    var overlayOne = new AR.ImageDrawable(imgOne, 1, {

      offsetX: -0.15,

      offsetY: 0,

      onClick: function() {

        // 'this' represents the ImageDrawable

        this.rotation += 10;

      }

    });

 

    function generate(id) {

      return function() {

       

      //  document.location = "architectsdk://TrackerDidDiscoveredImageTarget?id=" + id;

 

      }

    }

var arr = ;

 

    arr.push({

      id: 1,

      name: 'treylor_park',

      url: 'http://res.cloudinary.com/totallytourist/video/upload/v1451941771/s47r1er9psv4gytwmcq4.mp4'

    });

    arr.push({

      id: 2,

      name: 'riverhouse_seafood',

      url: 'http://res.cloudinary.com/totallytourist/video/upload/v1451941472/qhsnoplri7puoglavgho.mp4'

    });

    arr.push({

      id: 3,

      name: 'savannah_coffee_roasters',

      url: 'http://res.cloudinary.com/totallytourist/video/upload/v1450138589/ebvuqedesemevqsbjuhc.mp4'

    });

    var trackable2DObjects = ;

    for (var i = 0; i < arr.length; i++) {

      AR.logger.debug(i + ' Creating each item: ' + arr.name);

 

      //  var tmp = newArr;

      trackable2DObjects.push(

new AR.Trackable2DObject(this.tracker, arr.name, {

        drawables: {

          cam:

        },

        onEnterFieldOfVision: generate(arr.name)

      }

));

 

    }

 

 

  },

 

  worldLoaded: function worldLoadedFn() {

    // console.log('world loaded');

    // var cssDivInstructions = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";

    // var cssDivSurfer = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";

    // var cssDivBiker = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px;'";

    // document.getElementById('loadingMessage').innerHTML =

    // "<div" + cssDivInstructions + ">Scan Target &#35;1 (surfer) or &#35;2 (biker):</div>" +

    // "<div" + cssDivSurfer + "><img src='assets/surfer.png'></img></div>" +

    // "<div" + cssDivBiker + "><img src='assets/bike.png'></img></div>";

 

    // Remove Scan target message after 10 sec.

    AR.logger.debug('worldLoaded');

    // setTimeout(function() {

    var e = document.getElementById('loadingMessage');

    e.parentElement.removeChild(e);

    // }, 10000);

  }

};

 

World.init();

 

please have a look at JS closures, this should solve your issue.

best regards