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,

Can you help me on this issue? See attached video, the SDK recognized the target image, but animated image not showing immediately, if I move away camera and move back, then the image show up. This issue happens mostly when first scan after the app started. This issue also happens in GeoAR.

 

SDK Version: WikitudeSDK_iOS_5-1-4_2016-03-14_14-34-11

iPhone 6 (iOS 9.3)

 

Thanks,

Sjacco

Hello,

Can you please send over your complete AR experience (.html, .css, .js files, assets, target images) so we can test internally?

Thanks

Hi Eva,

Please find the AR experience in attachment.

 

Thanks,

Wu Liang

Can you also send over the .fbx file so that we can go through all the necessary files?

Thanks

Hi Eva,

The app doesn't use fbx file, it just renders a spritesheet. But the image is not showing directly after target recognized, but showing after move away and move back. 

I saw another post also has simple problem. 

https://support.wikitude.com/support/search/topics?term=Points+of+interest+image+not+showing

 

Here you can find the spritesheet.

http://images.contentful.com/ralj2uuqyw2a/34Vjt1g28MQsuu4YO6mAwK/a9a78295bed212df270faa3e664858a2/M001_animatedimage.png

 

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.

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

 

 

 

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,

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

 

 

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 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 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,

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

 

 

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

 
Login or Signup to post a comment