Start a new topic

conditional statements and dynamic content?

Hi,

Another question from me..

I am still struggling to understand the architecture and functions available to me on Wikitude, so please forgive the silly beginners questions. I wondering if it is possible to create conditional statements that can make my app more dynamic. This may already be possible.. 


This is what my app aims to do: imagine it's a rating system for beer. The user scans  one a 1000 beer cans, then can see what score others have rated it (1 - 5 stars), they can then rate it themselves, again 1-5 stars. Ignoring the backend interface, how do I scan a target, then use AR to show an animation of either 1,2,3,4 or 5 stars?


In another language I would use a conditional statement and do something like this:


(hypothetical code method..)


var theTargetName = Result of the Scan, eg HeinekenExport5%


var starRatingOfTheTargetName = Open database and retrieve star rating for theTargetName (output will be a number 1 - 5)


if starRatingOfTheTargetName == 1)

 show starAnimation1star

}


if (starRatingOfTheTargetName == 2)

 show starAnimation1star

}


etc. etc


This is what I have and obviously doesn't work as it doesn't have a way to do the conditionals statement.



 var World = {

 loaded: false,


 init: function initFn() {

  this.createOverlays();

 },


 createOverlays: function createOverlaysFn() {



  this.targetCollectionResource = new AR.TargetCollectionResource("assets/trackerProducts.wtc", {

  });


  this.tracker = new AR.ImageTracker(this.targetCollectionResource, {

   onTargetsLoaded: this.worldLoaded,

            onError: function(errorMessage) {

             alert(errorMessage);

            }  

           });




  //1 Star * 

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

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

   translate: {

    x: -0.15

   }

  });

  

  

  //2 Star **  

  var imgTwo = new AR.ImageResource("assets/starRating2Star.png"); 

   var overlayTwo = new AR.ImageDrawable(imgTwo, 1, {     

   translate: {

    x: -0.15

   }

  });


  //3 Star ***  

  var imgThree = new AR.ImageResource("assets/starRating3Star.png"); 

   var overlayThree = new AR.ImageDrawable(imgThree, 1, {     

   translate: {

    x: -0.15

   }

  });


  //4 Star ****  

  var imgFour = new AR.ImageResource("assets/starRating4Star.png"); 

   var overlayFour = new AR.ImageDrawable(imgFour, 1, {     

   translate: {

    x: -0.15

   }

  });

  

  //5 Star *****  

  var imgFive = new AR.ImageResource("assets/starRating5Star.png"); 

   var overlayFive = new AR.ImageDrawable(imgFive, 1, {     

   translate: {

    x: -0.15

   }

   

  

  });

  


  


      var pageOne = new AR.ImageTrackable(this.tracker, "*", {

            

                 

            drawables: {

    cam: [overlayOne] // this is where I would normally have a condition, they all have overlayOne, so how do i check for a condition and serve an overly of 1, 2, 3, 4 or 5?

   },


            

            // if the target is recognised

            onImageRecognized: function (target) 

            {

   //do stuff here    

            },

            

            onError: function (errorMessage) {

                alert(errorMessage);

            },

            

            

            

            // if the target is lost

            onImageLost: function (target) 

            {


   // do stuff here            

            

        });

  


 },




 worldLoaded: function worldLoadedFn() 

 {

  // do stuff here  

 }

};




World.init();




Again, ignoring the code validity, in my head I want to do this but I don't think this is the right way..



var pageOne = new AR.ImageTrackable(this.tracker, "*", {

 

                 if (target.name == "heineken")

{

                heinekenStarRating = opendatabase and retrieve a value 1-5 of heineken

            drawables: {

cam: [overlay+heinekenStarRating] // this would be a variable eventually show Overlay 1, 2, 3, 4, or 5, eg overlayFive

},

 

                 if (target.name == "amstel")

{

               

             amstelStarRating = opendatabase and retrieve a value 1-5 of heineken

            drawables: {

cam: [ overlay+heinekenStarRating] // this would be a variable eventually show Overlay 1, 2, 3, 4, or 5 eg overlayFour

},


So. Thoughts?

I guess the first step is, how do I create dynamic drawables: cam.


Any direction I should be looking in?

Thanks

Login or Signup to post a comment