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.
Meabh Media
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