Wikitude
How can we help you today?
Multiple IR not working
5 CommentsSorted by Oldest First
Hello;
I am trying to edit the 99_Demo_1_IR and Geo to allow for a radar and multiple IR but I cannot get the second IR to work.
I have based my code on the multiple IR example, but am not sure why I can not get this working.
CODE
/*
The Wikitude SDK allows you to combine geobased AR with image recognition to create a seamless experience for users.
*/
IrAndGeo = {};
IrAndGeo.markerNames = ;
IrAndGeo.stores = ;
IrAndGeo.markerAnimations = ;
IrAndGeo.error = false;
IrAndGeo.receivedLocation = false;
IrAndGeo.res = {};
IrAndGeo.setupScene = function(lat, lon, alt) {
// create 8 random markers with different marker names
for (var i = 0; i < 8; i++) {
var objLat = lat + ((Math.random() - 0.5) / 1000);
var objLon = lon + ((Math.random() - 0.5) / 1000);
IrAndGeo.createMarker(objLat, objLon, IrAndGeo.markerNames);
}
// create appearing animation
IrAndGeo.showMarkersAnimation = new AR.AnimationGroup('parallel', IrAndGeo.markerAnimations);
};
IrAndGeo.createMarker = function(lat, lon, name) {
// create an AR.GeoLocation from the latitude/longitude function parameters
var loc = new AR.GeoLocation(lat, lon);
// show radar & set click-listener
PoiRadar.show();
$('#radarContainer').unbind('click');
$("#radarContainer").click(PoiRadar.clickedRadar);
// create an AR.ImageDrawable for the marker
var imageDrawable = new AR.ImageDrawable(IrAndGeo.res.marker, 2, {
scale: 0.5,
onClick: function() {
alert("clicked");
}
});
// create marker animations and store it in the markerAnimations-array
IrAndGeo.markerAnimations.push(new AR.PropertyAnimation(imageDrawable, 'scale', 0.0, 1.0, 1000, {
type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_BOUNCE
}));
// create a AR.GeoObject with the marker, disable it by setting the enabled-flag to 'false' and store it in the stores-array
IrAndGeo.stores.push(new AR.GeoObject(loc, {
drawables: {
cam: imageDrawable
},
enabled: false
}));
};
IrAndGeo.showStores = function() {
// display all GeoObjects by setting the enabled-flag to 'true'
IrAndGeo.stores.forEach(function(x, idx) {
x.enabled = true;
});
// nicely animate appearing of markers
IrAndGeo.showMarkersAnimation.start();
// set the info-text for the HTML message element and show it
document.getElementById("messageElement").innerHTML = "Look around for stores nearby!";
document.getElementById("messageElement").style.display = "block";
};
IrAndGeo.hidePOIs = function() {
// disable all GeoObjects and reset to 0 size
IrAndGeo.stores.forEach(function(obj, idx) {
obj.enabled = false;
obj.drawables.cam.scale = 0.0;
});
// hide the HTML message element
document.getElementById("messageElement").style.display = "none";
};
IrAndGeo.showdetail = function() {
IrAndGeo.hidePOIs();
IrAndGeo.menuDrawables.forEach(function(obj, idx) {
obj.enabled = false;
});
IrAndGeo.detailDrawable.enabled = true;
};
IrAndGeo.showdetail2 = function() {
IrAndGeo.hidePOIs();
IrAndGeo.menu2Drawables.forEach(function(obj, idx) {
obj.enabled = false;
});
IrAndGeo.detail2Drawable.enabled = true;
};
IrAndGeo.hidedetail = function() {
IrAndGeo.detailDrawable.enabled = false;
IrAndGeo.menuDrawables.forEach(function(obj, idx) {
obj.enabled = true;
});
};
IrAndGeo.hidedetail2 = function() {
IrAndGeo.detail2Drawable.enabled = false;
IrAndGeo.menu2Drawables.forEach(function(obj, idx) {
obj.enabled = true;
});
};
IrAndGeo.showWeb = function() {
IrAndGeo.hidePOIs();
AR.context.openInBrowser("http://www.wikitude.com");
};
IrAndGeo.loadingStepDone = function() {
if (!IrAndGeo.error && IrAndGeo.res.buttonStores.isLoaded() && IrAndGeo.res.buttonWeb.isLoaded() && IrAndGeo.res.indicator.isLoaded() && IrAndGeo.res.marker.isLoaded() && IrAndGeo.receivedLocation && IrAndGeo.tracker && IrAndGeo.tracker.isLoaded()) {
//everything is loaded
var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";
document.getElementById('messageElement').innerHTML =
"<div" + cssDivLeft + ">Synapse Online</div>";
// Remove Scan target message after 5 sec.
setTimeout(function() {
document.getElementById("messageElement").style.display = "none";
}, 5000);
}
};
// function for displaying a loading error in the HTML message element
IrAndGeo.errorLoading = function() {
document.getElementById("messageElement").innerHTML = "Unable to Synapse";
IrAndGeo.error = true;
};
IrAndGeo.initIr = function() {
// Create the tracker to recognize the shop ad
var trackerDataSetPath = "assets/test2.wtc";
IrAndGeo.tracker = new AR.Tracker(trackerDataSetPath, {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
// Create drawables to display on the recognized image
var indicator = new AR.ImageDrawable(IrAndGeo.res.indicator, 0.50, {
onClick: IrAndGeo.showdetail,
offsetX: 0.1,
offsetY: 0.4
});
var buttonWeb = new AR.ImageDrawable(IrAndGeo.res.buttonWeb, 0.15, {
onClick: IrAndGeo.showWeb,
offsetX: 0.175,
offsetY: -0.525
});
var buttonStores = new AR.ImageDrawable(IrAndGeo.res.buttonStores, 0.15, {
onClick: IrAndGeo.showStores,
offsetX: -0.1,
offsetY: -0.275
});
var indicator2 = new AR.ImageDrawable(IrAndGeo.res.indicator2, 0.50, {
onClick: IrAndGeo.showdetail2,
offsetX: 0.1,
offsetY: 0.4
});
IrAndGeo.menuDrawables = ;
IrAndGeo.detailDrawable = new AR.ImageDrawable(IrAndGeo.res.detail, 0.60, {
enabled: false,
onClick: IrAndGeo.hidedetail
});
IrAndGeo.menu2Drawables = ;
IrAndGeo.detail2Drawable = new AR.ImageDrawable(IrAndGeo.res.detail2, 0.60, {
enabled: false,
onClick: IrAndGeo.hidedetail2
});
// Create the object by defining the tracker, target name and its drawables
var trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "IR", {
drawables: {
cam:
}
});
var imageTwo = new AR.Trackable2DObject(IRAndGeo.tracker, "IR2", {
drawables: {
cam:
}
});
};
// this function is called as soon as we receive GPS data
AR.context.onLocationChanged = function(latitude, longitude, altitude, accuracy) {
// in order not to receive any further location updates the onLocationChanged trigger is set to null
AR.context.onLocationChanged = null;
// flag to store that a location was received
IrAndGeo.receivedLocation = true;
// initialize the scene
IrAndGeo.setupScene(latitude, longitude, altitude);
IrAndGeo.loadingStepDone();
};
// Create the image resources that are used for the marker and the buttons
IrAndGeo.res.marker = new AR.ImageResource("assets/POI_Marker.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.res.buttonWeb = new AR.ImageResource("assets/YourShop_OpenWebsite.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.res.buttonStores = new AR.ImageResource("assets/YourShop_FindShops.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.res.indicator = new AR.ImageResource("assets/indicator1.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.res.indicator2 = new AR.ImageResource("assets/indicator2.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.res.detail = new AR.ImageResource("assets/detail.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.res.detail2 = new AR.ImageResource("assets/detail2.png", {
onLoaded: IrAndGeo.loadingStepDone,
onError: IrAndGeo.errorLoading
});
IrAndGeo.initIr();
IrAndGeo.loadingStepDone();
I cannot get any of the AR objects to show against "IR2" (imageTwo), trackable2DObject works fine.
Any help welcome, thanks in advance;
Andy
Hi Andy,
What wtc file are you using? The wtc file needs to contain all targets that you want to track. Maybe the second target is not in the wtc file, or the ID you are using to reference the target is wrong.
Best,
Martin
Thanks for the reply - I am pretty sure my wrt file is correct with both images in the target build.
I have tested my code above using the multi-image example from the SDK (magazine.wrt / pageone and pageTwo images) and get the same result: The first image is recognised and AR elements displayed, the second image does nothing which leads me to think its my code within the .js file that is at fault.
I seem to have 2 problems I think:
If I set my code as below then I get no AR on either image (IR or IR2)
var trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "IR", {
drawables: {
// cam:
cam:
}
});
which leads me to think I have a problem with the indicator2 and detail2Drawable.
If I set IR2 to show the cam elements from IR then I get nothing - so I dont think IR2 is being recognised either.
Im pretty confused when you combine this with the SDK example .wrt - pageTwo image wasnt working correctly.
Any help welcome
Like so many of these things... the devil is in the detail - I had put the wrong name for the tracker against image 2
// Create the object by defining the tracker, target name and its drawables
var trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "IR", {
drawables: {
cam:
}
});
var imageTwo = new AR.Trackable2DObject(IRAndGeo.tracker, "IR2", {
drawables: {
cam:
}
});
Once I renamed the tracker to IrAndGeo everything worked.
Hi Andy,
Good to hear you got it working!
Best,
Martin
© 2023 Wikitude, a Qualcomm company
Andy Hawkes