Start a new topic

problem with image recognition -phonegap

problem with image recognition -phonegap

hi all,

I am absolutely new to this technology.

I use PhoneGap plugin for my test. there is an event to detect when the marker is detected?

this is my simple code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<meta name="viewport" content="target-densitydpi=device-dpi, width = 540, user-scalable = 0" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple IR World</title>

<style type="text/css">
    .info {
        color: #9F6000;
        background-color: #FEEFB3;
        margin: -8px 1%;
        padding: 10px;
        font-size: 14pt;
        border-radius: 0 0 10px 10px;
        text-align: center;

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>

<script src="../ade.js"></script>


/* Global variables */
var logoTracker = null;
var overlay = null;
var trackable2DObject = null;
var errorOccured = false;
var masterAnimationGroup  = null;

function error() {
    errorOccured = true;
    document.getElementById("messageElement").innerHTML = "Unable to load image or tracker!";

function createTracker(){
    var image = new AR.ImageResource("overlay.png", {onError: error});
    overlay = new AR.ImageDrawable(image, 1.0, {zOrder: 0});

    // create tracker
    trackerDataSetPath = "";
    logoTracker = new AR.Tracker(trackerDataSetPath, { onLoaded : trackerLoaded, onError: error });

    // relative position from teh arrows
    arrowXOffset = 2.0;
    arrowYOffset = 0.1;

    var arrow1 = arrowWithDirectionality(-arrowXOffset, -arrowYOffset, -45);
    var arrow2 = arrowWithDirectionality(-arrowXOffset, arrowYOffset, 45);
    var arrow3 = arrowWithDirectionality(-arrowXOffset, -arrowYOffset, 135);
    var arrow4 = arrowWithDirectionality(-arrowXOffset, arrowYOffset, 225);

    trackable2DObject = new AR.Trackable2DObject(logoTracker, "WikitudeLogo", { drawables: { cam: }});
    // we need to pack the arrow animations into a parallel animation group to play them synchronisly
    masterAnimationGroup = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, );


function trackerLoaded()
    if (errorOccured) return;

    document.getElementById("messageElement").style.display = "none";

    // start with the parameter -1 indicates, that the group will play the animation in an infinite loop

function arrowWithDirectionality(offsetX, offsetY, roll)
    alert('traker NON CAPISCO');

    var animationOffset = 0.9; // distance in sdu's
    var animationTime = 700; // ms

    // load the arrow image
    var arrowImage = new AR.ImageResource("DirectionArrow.png");

    // attach the image resource to a drawable, so that its visible on the screen
    var arrowImageDrawable = new AR.ImageDrawable(arrowImage, 0.6, {offsetX: offsetX, offsetY: offsetY, zOrder: 1, roll: roll} );

    // we want to animte the arrow, to lets add two animation
    var arrowSpinAnimation = new AR.PropertyAnimation(arrowImageDrawable, "tilt", 0, 360, animationTime, {type: AR.CONST.EASING_CURVE_TYPE.LINEAR});

    // the first one moves the arrow to the trackableObject
    var arrowAnimationMoveDown = new AR.PropertyAnimation(arrowImageDrawable, "offsetX", offsetX, offsetX+animationOffset, animationTime, {type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_CUBIC});

    // the second one moves it back to the original position
    var arrowAnimationMoveUp = new AR.PropertyAnimation(arrowImageDrawable, "offsetX", offsetX+animationOffset, offsetX, animationTime, {type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_CUBIC});

    // because these two animations should be played one after another, we gonna pack them into a sequential animation group.
    var animationGroup = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.SEQUENTIAL, );

    var arrow = new Array(arrowImageDrawable, animationGroup);

    return arrow;

function clickedClose() {
    document.location = 'architectsdk://actionButton?action=close';

function clickedHide() {
    document.location = 'architectsdk://hideButton?status=hide';

    $(document).ready(function () {
    }); // Fine document  ready


<button title="close" onclick="clickedClose()">CLOSE AR VIEW</button>
<!-- NOT recommended
<button title="hide" onclick="clickedHide()">(hide)</button>
<div class="info" id="messageElement">Loading ...</div>

<div id="test" style="display:none; background:url(../../www/css/images/ui-bg_diagonals-thick_20_666666_40x40.png); height:200px; width:200px">aaaaaa </div>





Hi Roberto,

Your pasted code looks almost same as the one used in the SimpleImageRecognition sample but it seems as if you unintentionally deleted the lines that provide the feature you're looking for.



trackable2DObject = new AR.Trackable2DObject(logoTracker, "...TARGET_NAME..", {

drawables: { cam: },

//start the model animation when the trackable comes into the field of vision

onEnterFieldOfVision : function(){
// alert("recognized target")

//disable the model when the Trac

onExitFieldOfVision : function(){
// alert("lost target")



Please have a look at the API Documentation for detailed description.

Kind regards,



i got an image with 3 star rating and converted it to .wtc format and added it to my project.

Note that i did not change any other thing in the sample provided by wikitude except the new tracker but the camera is not recognising the image.

i changed the tracker name in the image recognition .js file.

dont knw what i did wrong... 



I replied to the stated issue in your other thread:



Login or Signup to post a comment