Start a new topic

Image not show up immediately, but showing after move away and move back

Image not show up immediately, but showing after move away and move back


Hi Andreas,

Thanks for your prompt response. "the targrt image is not that good for tracking" could be the reason. Some targe images have higher chance to show the same animation image than other target images. I will do more test on different target images. Thanks for your time again!

 

Best Regards,

Wu

 

So the SDK Sample applications original code works but the one with your image and target doesn't?

My wild guess would be that the issue is either related to the monkey's augmentation asset loading-time or the targrt image is not that good for tracking.
Note that although the target was recognised "in the cloud", it still needs to be recognized client side, meaning that the onRecognized CloudTracker just tells you that the server recognition was successful. Only after onEnterFieldOfView was fired in your Trackeble2DObject, the image is recognized and tracked.

So please try using a different target image or use the same augmentations as in the SDK Sample app you referred to.
Fingers crossed.

Best regards,
Andreas

Hi Andreas,

I did more tested in past 2 days.

Test1: I used metadata of a targetImage also to store "jsonData"(image source, animation metadata) besides "monkeyId". And removed native code lines from js file. But the result is same, target image was successfully recognized, but images most of time doesn't appear in the camera. 

Test2: I also tested in CloudReco sample application with metadata of targetImage, but same result. See attached video.

 

Any other suggestions?

 

Thanks & Regards,

Wu

Hi Andreas,

The problem is that we have to do some extra process before creating Drawable. I did not find similiar code in the SDK sample. And I think wikitude SDK supports to add drawables dynamically after image recognized, doesn't it?

 

Thanks,

Wu

 

 

Hi again.
One cannot fake the tracker's internal recognition.
Please check for difference between your implementation and the one from (working) SDK samples.

Sorry for inconvenience

Hi Andreas,

It affect both Android and iOS. Is it possible to trigger onEnterFieldOfVision programmatically?

 

Thanks and regards,

Wu

 

 

That's strage.

Does the issue also occur in the CloudReco sample application? Does it affect Android and iOS?
Try loading the ImageResource during World.init and use it without destroying it, maybe the issue is related to resource loading.
Looking forward to finding the root cause with your help.

Best regards,
Andreas

 

Hi Andreas,

I have updated my App according to your suggestions. But the problem is still there, ImageDrawable has exactly same issue as AnimatedImagedrable. See attached video.

 

 

Kind Regards,

Wu

 

 

Please try

- Using latest version from the Wikitude SDK Download Page
- Using an ImageDrawable instead of the AnimatedImagedrawable and see if issue only occurs on AnimatedImageDrawables
- Put World.wikitudeResponse = response inside the "if (recognized)" clause
- Call document.location with a 500ms setTimeout
- Implement onError and onLoaded callbacks to add logs and error-handling

Best regards,
Andreas

Hi Andreas,

Because I have to do some other check/process before creating ARObject, so I have to call native code first, then call javascript to create AR.

I have added logger in javascript file. And according to the log, the drawable was not rendered after created, it's rendered after onExitFieldOfVision() and onEnterFieldOfVision() were triggered. Any idea about this issue? I made a short video about the issue, please find it in attachment.

    

Here is my code:

 

onRecognition: function onRecognitionFn(recognized, response) {

    

    World.wikitudeReponse = response;

        

    if (recognized) {

        //Debug

        AR.logger.debug("Image recognized, monkeyId = " + response.metadata.monkeyId );

 

        var monkeyId = response.metadata.monkeyId;

        

        //call iOS navtive code

        document.location = "architectsdk://recognizedMonkey?monkeyId=" + monkeyId;        

    } else {

    }

},

   

//Native code call this function to create AR from json data.

loadMonkeyFromJsonData: function loadMonkeyFromJsonDataFn(jsonData) {

    //Debug

    AR.logger.debug("loadMonkeyFromJsonData is triggered.");

        

    if (World.imgSource !== undefined) {

        World.imgSource.destroy();

    }

    

    World.imgSource = new AR.ImageResource(jsonData.animatedImage.replace("https://","http://"));

    

    //Debug

    AR.logger.debug("Image source url: " + jsonData.animatedImage.replace("https://","http://"));

        

    if (World.animatedMonkeyOverlay !== undefined) {

        World.animatedMonkeyOverlay.destroy();

    }

    

    World.animatedMonkeyOverlay = new AR.AnimatedImageDrawable(World.imgSource,

                                                               jsonData.animationMetadata.frameScale,

                                                               jsonData.animationMetadata.frameW,

                                                               jsonData.animationMetadata.frameH, {                                                                   offsetX: jsonData.animationMetadata.offsetX,

                                                                   offsetY: jsonData.animationMetadata.offsetY,

                                                                   rotation: jsonData.animationMetadata.rotation,

                                                                   zOrder: 0

                                                                   });

 

    World.animatedMonkeyOverlay.animate(jsonData.animationMetadata.animateKeyFrame, jsonData.animationMetadata.timeMS, jsonData.animationMetadata.loops);

 

    if (World.monkeyAugmentation !== undefined) {

        World.monkeyAugmentation.destroy();

    }

    

    World.monkeyAugmentation = new AR.Trackable2DObject(World.tracker, World.wikitudeReponse.targetInfo.name, {

                                                        drawables: {

                                                        cam: World.animatedMonkeyOverlay

                                                        }

                                                        });

    

    //Debug

    AR.logger.debug("World.monkeyAugmentation is visible:" + World.monkeyAugmentation.isVisible());

 

    World.monkeyAugmentation.onEnterFieldOfVision = function( )

    {

        //Debug

        AR.logger.debug("onEnterFieldOfVision triggered");

        AR.logger.debug("World.monkeyAugmentation is visible:" + World.monkeyAugmentation.isVisible());

    };

    

    World.monkeyAugmentation.onExitFieldOfVision = function( )

    {

        //Debug

        AR.logger.debug("onExitFieldOfVision triggered");

        AR.logger.debug("World.monkeyAugmentation is visible:" + World.monkeyAugmentation.isVisible());

    };

    

},

 

Br,

Wu Liang

Please add debuggin information to understand how often "onRecognition" and "loadMonkeyFromJsonData" are called.
Also try calling the loadMonkeyFromJsonData directtl within JS without the native call to check if it is a timing/WebView issue.

You may then use metadata of a targetImage also to store "jsonData" besides "monkeyId", e.g.
{"id" : "monkey1", "imgSource": "http://...." }

Also try calling "document.location = ..." within a setTimeout so you call the native environment asynchronously.

Best regards,
Andreas

 

Hi Eva,

1. On target image recognized, call native code to get monkey details including spritesheet URL.

 

onRecognition: function onRecognitionFn(recognized, response) {

    wikitudeReponse = response;

    

    if (recognized) {

        var monkeyId = response.metadata.monkeyId;

        

        //call iOS navtive code

        document.location = "architectsdk://recognizedMonkey?monkeyId=" + monkeyId;

 

    } else { ...    }

},

 

2. Once native code get monkey details, call this method to display the animated image. I'm 100% sure this API was called, because the animated image did present after move camera away and back. It seems a memory problem, that if target image is in current camera view, then SDK stop to render even the image is not showing, once the target is out of camera view, SDK start to find target image and render again, then the image is showing correctly.

loadMonkeyFromJsonData: function loadMonkeyFromJsonDataFn(jsonData) {

    

    if (World.imgSource !== undefined) {

        World.imgSource.destroy();

    }

    

    World.imgSource = new AR.ImageResource(jsonData.animatedImage.replace("https://","http://"));

    

    //test

//    World.imgSource = new AR.ImageResource("http://images.contentful.com/ralj2uuqyw2a/34Vjt1g28MQsuu4YO6mAwK/a9a78295bed212df270faa3e664858a2/M001_animatedimage.png");

    

    if (World.animatedMonkeyOverlay !== undefined) {

        World.animatedMonkeyOverlay.destroy();

    }

    

    World.animatedMonkeyOverlay = new AR.AnimatedImageDrawable(World.imgSource,

                                                               jsonData.animationMetadata.frameScale,

                                                               jsonData.animationMetadata.frameW,

                                                               jsonData.animationMetadata.frameH, {

                                                               offsetX: jsonData.animationMetadata.offsetX,

                                                               offsetY: jsonData.animationMetadata.offsetY,

                                                               rotation: jsonData.animationMetadata.rotation,

                                                               zOrder: 1

                                                               });

    

    World.animatedMonkeyOverlay.animate(jsonData.animationMetadata.animateKeyFrame, jsonData.animationMetadata.timeMS, jsonData.animationMetadata.loops);

 

    if (World.monkeyAugmentation !== undefined) {

        World.monkeyAugmentation.destroy();

    }

    

    World.monkeyAugmentation = new AR.Trackable2DObject(World.tracker, wikitudeReponse.targetInfo.name, {

                                                        drawables: {

                                                        cam:

                                                        }

                                                        });

    

    World.animatedMonkeyOverlay.onClick = function() {

        document.location = "architectsdk://catchMonkey?monkeyId=" + jsonData.monkeyId + "&smilePoints=" + jsonData.smilePoints + "&monkeyImageUrl=" + jsonData.collectedIcon;

    };

    

}

 

 

Thanks,

Wu Liang

 

 

Hi,

I tried to test your project but unfortunately that is not possible because in your code you integrate this project with another app. For example, because of this code line I cannot see the augmented object.

//call iOS navtive code

document.location = "architectsdk://recognizedMonkey?monkeyId=" + monkeyId;

 

What you could do is send over an AR experience that does not refer to other apps in the code, so that we could test this one and advise you on how to proceed. You could also refer to our sample and see where you differentiate with your code. The fact that you have uploaded the images on the server does not affect the performance of the app.

 

Thanks

Hi Eva,

Thanks for you answer. But the code I used is refered to the doc and sample from your link. The only different is that the image is from local folder, it's from a URL. Please see the small video I attached in the first post, the image can be present, but only after move away and back. Could you help to point out what is wrong?

 

Thanks,

Wu Liang

 

 

 

Hello,

We just tested your use case with our sample and we could see the image once the target was recognized. Could you please refer to the documentation and sample from here and follow the instructions there?

If your issue remains then you can always send us your feedback here.
Login or Signup to post a comment