Wikitude

Image recognition

Hello Eva

When i try to use the smart glass to scan the image, there isn't any loading message. it just shows please scan imageOne with the glasses. The imageOne is the original image before augmentation. I tried to overlay the image with the japwaves with can be found in the target collection. When i tried to scan the image from the glasses it just shows a black screen and it does not seem to recognise the image from the target collection. Does the quality of the image matters?

Regards 

Jaric

Hello Jaric,

In order for me to better understand your issue and since the js file you provided seems to be fine, could you please tell me if you see a loading message (or what it is that you see) when you try to scan the image?

Thanks

Hello Eva

i have edited the code based on the different variable based on the augmentation but my image is still not recognized by the moverio smart glasses

The following is the updated codes for the image recognition

 

var World = {
loaded: false,

init: function initFn() {
this.createOverlays();
},

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.
*/
this.tracker = new AR.ClientTracker("assets/tracker.wtc", {
onLoaded: this.worldLoaded
});

/*
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.
*/

/* Create overlay for page one */
var imgOne = new AR.ImageResource("assets/japwaves.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
offsetX: -0.15,
offsetY: 0
});

/*
The last line combines everything by creating an AR.Trackable2DObject with the previously created tracker, the name of the image target and the drawable that should augment the recognized image.
Please note that in this case the target name is a wildcard. Wildcards can be used to respond to any target defined in the target collection. If you want to respond to a certain target only for a particular AR.Trackable2DObject simply provide the target name as specified in the target collection.
*/
var pageOne = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {
cam: overlayOne
}
});
},

worldLoaded: function worldLoadedFn() {
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('loadingMessage').innerHTML =
"<div" + cssDivLeft + ">Scan Target &#35;1 (imageOne):</div>" +
"<div" + cssDivRight + "><img src='assets/imageOne.png'></img></div>";

// Remove Scan target message after 10 sec.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 10000);
}
};

World.init();

 

I still have no idea what is the problem though

Hello Jaric,

In the code below you are supposed to define the type of augmentation you wish to have. For example when you say

/* Create overlay for page one */
var imgOne = new AR.ImageResource("assets/japwaves.png");
var overlayOne = new AR.ImageDrawable(imgone, 1, {
offsetX: -0.15,
offsetY: 0
});

 

then every time you scan the image japwaves of the target tracker.wtc then the image japwaves.png will appear. When you scan the image do you get a Loading... message in the beginning? In addition, there is an error in the code above since you define a variable named imgOne but in the next line you write imgone instead of imgOne.

Thanks

Hello 

I want to make use of the  sample codes to recognize my own image that i have uploaded to the wikitude target image collection.

I have tried the surfer and bike image and it works fine. I have edited the names in the jason files from the assets folder but it does not recognise the image

I am suppose to use the codes to recognise the image for the epson moverio smart glasses. What am i even doing wrong??

 

The following are the codes i have edited for the js file

var World = {
loaded: false,

init: function initFn() {
this.createOverlays();
},

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.
*/
this.tracker = new AR.ClientTracker("assets/tracker.wtc", {
onLoaded: this.worldLoaded
});

/*
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.
*/

/* Create overlay for page one */
var imgOne = new AR.ImageResource("assets/japwaves.png");
var overlayOne = new AR.ImageDrawable(imgone, 1, {
offsetX: -0.15,
offsetY: 0
});

/*
The last line combines everything by creating an AR.Trackable2DObject with the previously created tracker, the name of the image target and the drawable that should augment the recognized image.
Please note that in this case the target name is a wildcard. Wildcards can be used to respond to any target defined in the target collection. If you want to respond to a certain target only for a particular AR.Trackable2DObject simply provide the target name as specified in the target collection.
*/
var pageOne = new AR.Trackable2DObject(this.tracker, "japwaves", {
drawables: {
cam: overlayOne
}
});
},

worldLoaded: function worldLoadedFn() {
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('loadingMessage').innerHTML =
"<div" + cssDivLeft + ">Scan Target &#35;1 (Waves):</div>" +
"<div" + cssDivRight + "><img src='assets/Waves.png'></img></div>";

// Remove Scan target message after 10 sec.
setTimeout(function() {
var e = document.getElementById('loadingMessage');
e.parentElement.removeChild(e);
}, 10000);
}
};

World.init();