Start a new topic
Solved

zOrder on Android

I'm having issues with the zOrder of my drawables not working on Android (works fine on iOS).


I have a number of dynamically loaded VideoDrawables with an ImageDrawable that is supposed to sit over the video acting as a play button. This works fine on the iOS version of my app but on the Android version once the video loads it sits on top of the ImageDrawable. 


Is there something I'm missing with the zOrder?

   

var playButtonImg = new AR.ImageResource("assets/images/trekkar_thumb.png");
this.playButtonTrekkPlatform = new AR.ImageDrawable(playButtonImg, 0.5, {
    enabled: true,
    clicked: false,
    zOrder: 2,
    onClick: function playButtonClicked() {
        World.trackable.drawables.cam[0].play(1);
        World.trackable.drawables.cam[0].playing = true;
        World.trackable.drawables.cam[0].enabled = true;

        World.playButtonTrekkPlatform.enabled = false;
        World.playButtonTrekkPlatform.clicked = true;
    },
    offsetX: World.layout.normal.evergreenVideoOffsetX,
    offsetY: World.layout.normal.evergreenVideoOffsetY,
    rotate: {
        global: {
            x: World.layout.normal.tilt
        }
    }
});


this.trackable = new AR.ImageTrackable(this.tracker, "*", {
    drawables: {
        cam: []
    },
    snapToScreen: {
        snapContainer: document.getElementById('snapContainer')
    },
    onEnterFieldOfVision: function (targetName) {
        if (this.lastTargetName!==targetName) {
            this.lastTargetName=targetName;

            if (!World.snapped) {
                // re-enable all play Buttons
                World.enablePlayButtons();

                // destroy old augmentations
                for (var i=World.trackable.drawables.cam.length-1; i>=0; i--) {
                    World.trackable.drawables.cam[i].enabled = false;
                    World.trackable.drawables.cam[i].destroy();
                    World.trackable.drawables.removeCamDrawable(i);
                }

                if (targetName.includes("coupon_") != true) {
                    // create new augmentations
                    var augmentationsToCreate = World.targetName2Augmentations[targetName];
                    for (var i=0; i<augmentationsToCreate.length; i++) {
                        var drawableCreated;
                        var drawablesCreatedArray = [];
                        switch(augmentationsToCreate[i].type) {
                            case "video":
                                drawableCreated = new AR.VideoDrawable(augmentationsToCreate[i].uri, augmentationsToCreate[i].scale, 
                                {
                                    translate: {
                                        x: augmentationsToCreate[i].offsetX,
                                        y: augmentationsToCreate[i].offsetY
                                    },
                                    rotate: {
                                        global: {
                                            x: augmentationsToCreate[i].tilt
                                        }
                                    },
                                    zOrder: 0,
                                    enabled: true,
                                    onLoaded: function videoLoaded() {
                                        this.playing = false;
                                    },
                                    onClick: function videoClicked() {
                                        if (this.playing) {
                                            this.pause();
                                            this.playing = false;
                                        } else {
                                            this.resume();
                                            this.playing = true;
                                        }
                                    },
                                    onError: function videoError() {
                                        AR.logger.error('error: ' + targetName);
                                    }
                                });

                                if (augmentationsToCreate[i].autoplay === true) {
                                    drawableCreated.play(-1);
                                }

                                break;
                            default:
                                break;
                        }

                        if (drawableCreated) {
                            World.trackable.drawables.addCamDrawable(drawableCreated); 


                            AR.logger.debug('World.currentlyVisibleTracker: ' + World.currentlyVisibleTracker);
                        }
                    }
                }
            }
        } 
        else {
            for (var i=World.trackable.drawables.cam.length-1; i>=0; i--) {
                if (World.currentlyVisibleTracker == 13 || World.currentlyVisibleTracker == 14 || World.currentlyVisibleTracker == 15 || World.currentlyVisibleTracker == 16) {
                    if (World.trackableTransparent.drawables.cam[i].enabled != true) {
                        World.trackable.drawables.cam[i].enabled = true;
                    }
                    else {
                        World.trackable.drawables.cam[i].enabled = false;
                    }
                }
                else {
                    World.trackable.drawables.cam[i].enabled = true;
                }
                
                if (World.trackable.drawables.cam[0].playing == true) {
                    World.trackable.drawables.cam[i].resume();
                }
            }
        }
    },
    onExitFieldOfVision: function onExitFieldOfVisionFn() {
        if (!World.snapped) {
            for (var i=World.trackable.drawables.cam.length-1; i>=0; i--) {
                World.trackable.drawables.cam[i].enabled = false;
                if (World.trackable.drawables.cam[i].pause) {
                    World.trackable.drawables.cam[i].pause();
                }
            }
        }
    }
});

this.trekkVideoEvergreen = new AR.ImageTrackable(this.tracker, "trekkplatform_video_*", {
    drawables : {
        cam : [this.playButtonTrekkPlatform]
    },
    snapToScreen: {
        snapContainer: document.getElementById('snapContainer')
    }
});

    


I was able to achieve my desired results by setting the renderingOrder on the on the ImageTrackables. 

Hello Tim,



I tried to reproduce the issue you are having with the latest version of our SDK. I could, however, not achieve the effect. I can use the zOrder property to arrange the ImageDrawable and VideoDrawable any way I like.


I prepared a small sample world for you to try and report back to me with the results (it's just the sample video sample with minor modifications).


 

var World = {
    video: null,
    videoPlaying: false,
    videoAdded: false,

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

    createOverlays: function() {
        targetCollectionResource = new AR.TargetCollectionResource("assets/magazine.wtc");

        this.tracker = new AR.ImageTracker(targetCollectionResource, {
            onTargetsLoaded: this.worldLoaded
        });

        var imageResource = new AR.ImageResource("assets/surfer.png");
        var imageDrawable = new AR.ImageDrawable(imageResource, 1, {
            translate: {
                x: -0.4
            },
            zOrder: 1,
            onClick: function() {
                if (!World.videoPlaying) {
                    World.video.play(-1);
                    World.videoPlaying = true;
                } else {
                    World.video.stop();
                    World.videoPlaying = false;
                }
            }
        });

        var imageTrackable = new AR.ImageTrackable(this.tracker, "*", {
            drawables: {
                cam: [imageDrawable]
            },
            onEnterFieldOfVision: function onEnterFieldOfVisionFn() {
                if (!World.videoAdded) {
                    World.video = new AR.VideoDrawable("assets/video.mp4", 0.4, {
                        zOrder: 0
                    });

                    this.drawables.addCamDrawable(World.video);
                    World.videoAdded = true;
                }
            }
        });
    }
};

World.init();

 


Also, which version of our SDK are you using? Which version of the Android OS did you run this on? Which device does this error occur on? Could you isolate the problem in a minimalistic sample for me to have a look at? You may also send me your entire project as long as I can run it without making any modifications.



Kind regards

Daniel

Here are videos of the Android and iOS experiences. 

mp4
mov
(3.08 MB)
Hello Tim,

Since the zOrder is a CSS property then there should not be any discrimination between iOS and Anroid. That means that if it is working on iOS it should also work on Android. Could you please send us a video demonstrating your issue or your complete AR experience (.html, .css, .js files, assets, target images) so we can test internally?

Thanks
Eva

 

Login or Signup to post a comment