Wikitude
How can we help you today?
Make app example run
3 CommentsSorted by Oldest First
Hello everyone. I just have started with wikitude but I can't get run any example, it's frustrating because I have days and I don't know what to do, the documentation insn't helping me. Here is what I'm doing, I would want to know what I'm doing wrong or what I have to change, it's difficult at the begining I know.
* I have imported de wikitude plugin like this (of course I have set the trial licence key):
<script src="js/WikitudePlugin.js"></script>
* Next I have added example code (I have imported the assets and files)
var World = {
loaded: false,
init: function initFn() {
this.createOverlays();
alert("ddfsfds");
},
createOverlays: function createOverlaysFn() {
/*
First an AR.ClientTracker needs to be created in order to start the recognition engine. It is initialized with a URL specific to the target collection. Optional parameters are passed as object in the last argument. In this case a callback function for the onLoaded trigger is set. Once the tracker is fully loaded the function worldLoaded() is called.
Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
Use a specific target name to respond only to a certain target or use a wildcard to respond to any or a certain group of targets.
Adding multiple targets to a target collection is straightforward. Simply follow our Target Management Tool documentation. Each target in the target collection is identified by its target name. By using this target name, it is possible to create an AR.Trackable2DObject for every target in the target collection.
*/
this.tracker = new AR.ClientTracker("assets/magazine.wtc", {
onLoaded: this.worldLoaded
});
/*
The button is created similar to the overlay feature. An AR.ImageResource defines the look of the button and is reused for both buttons.
*/
this.imgButton = new AR.ImageResource("assets/wwwButton.jpg");
/*
The next step is to create the augmentation. In this example an image resource is created and passed to the AR.ImageDrawable. A drawable is a visual component that can be connected to an IR target (AR.Trackable2DObject) or a geolocated object (AR.GeoObject). The AR.ImageDrawable is initialized by the image and its size. Optional parameters allow for position it relative to the recognized target.
*/
var imgOne = new AR.ImageResource("assets/imageOne.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
offsetX: -0.15,
offsetY: 0
});
/*
For each target an AR.ImageDrawable for the button is created by utilizing the helper function createWwwButton(url, options). The returned drawable is then added to the drawables.cam array on creation of the AR.Trackable2DObject.
*/
var pageOneButton = this.createWwwButton("http://n1sco.com/specifications/", 0.1, {
offsetX: -0.25,
offsetY: -0.25,
zOrder: 1
});
/*
This combines everything by creating an AR.Trackable2DObject with the previously created tracker, the name of the image target as defined in the target collection and the drawable that should augment the recognized image.
Note that this time a specific target name is used to create a specific augmentation for that exact target.
*/
var pageOne = new AR.Trackable2DObject(this.tracker, "pageOne", {
drawables: {
cam:
}
});
/*
Similar to the first part, the image resource and the AR.ImageDrawable for the second overlay are created.
*/
var imgTwo = new AR.ImageResource("assets/imageTwo.png");
var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, {
offsetX: 0.12,
offsetY: -0.01
});
var pageTwoButton = this.createWwwButton("http://goo.gl/qxck1", 0.15, {
offsetX: 0,
offsetY: -0.25,
zOrder: 1
});
/*
The AR.Trackable2DObject for the second page uses the same tracker but with a different target name and the second overlay.
*/
var pageTwo = new AR.Trackable2DObject(this.tracker, "pageTwo", {
drawables: {
cam:
}
});
},
createWwwButton: function createWwwButtonFn(url, size, options) {
/*
As the button should be clickable the onClick trigger is defined in the options passed to the AR.ImageDrawable. In general each drawable can be made clickable by defining its onClick trigger. The function assigned to the click trigger calls AR.context.openInBrowser with the specified URL, which opens the URL in the browser.
*/
options.onClick = function() {
AR.context.openInBrowser(url);
};
return new AR.ImageDrawable(this.imgButton, size, options);
},
worldLoaded: function worldLoadedFn() {
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 #1 (surfer) or #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.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 10000);
}
};
World.init();
So,what I need to do? If there is anyone who can help me it would be great. Thanks!
Hi Pepe,
you are trying to run our Cordova sample app? If so, which plugin version are you using and which Cordova version are you using? How did you setup the sample app? On which platform are you, Android or iOS?
Thank you and best regards,
Simon
Hi! I'm using cordova in its version 5.1.1 and I'm working with android and compiling for version 16 Jelly Bean(That is my cellphone android version).
I tried with intel xdk but I couldn't get the tutorial work. Now I'm trying to get the sample app in intel xdk but with the steps for cordova, do you think is that possible? Or I definitely work with only cordova and command line?
© 2023 Wikitude, a Qualcomm company
pepe qwerty