Wikitude

Issue with zOrders

Hello,

I'm supposed to have a VideoDrawable overlaping an HTMLDrawable (to have the video displayed on top of a picture in the html content) so I tried to set the zOrder for the video with a higher value than the html but the html is still being displayed on top of the video.

I tried also to timeout the video and add it the list of drawables after the html, but that didn't helped.

Here is the code I use:

VideoContent.createVideoDrawable:

        var self = this;

        this.createVideoBackground();
        this.createVideoSpinner();

        this.videoDrawable = new AR.VideoDrawable(this.source, Number(this.scale), {
            offsetX: this.posX,
            offsetY: this.posY,
            rotation: this.rotZ,
            zOrder: 2,

            onLoaded: function () {
                Debug.info("VideoContent::video " + self.source + " loaded");
                self.trackableObject.drawables.addCamDrawable(self.videoDrawable);
                self.play();
                self.boundingRectangle = self.videoDrawable.getBoundingRectangle();
            },
            onError: function (msg) {
                Debug.error("VideoContent::video " + self.source + " failed loading " + msg);
            }
        });

HTMLContent.createHTMLDrawable:

        var self = this;
        // get HTML
        $.get(this.url, function (html_content) {
            self.htmlDrawable = new AR.HtmlDrawable(
                { html: html_content },
                self.scale,
                {
                    viewportWidth: self.neededWidth,
                    viewportHeight: self.neededHeight,
                    onLoaded: function () {
                        Debug.error("TrackableHTML::html drawable " + self.url + " loaded");
                        self.trackableObject.drawables.addCamDrawable(self.htmlDrawable);
                    },
                    onError: function () {
                        Debug.error("TrackableHTML::html drawable " + self.url + " failed loading");
                    },
                    clickThroughEnabled: self.clickThroughEnabled,
                    scale: self.scale,
                    allowDocumentLocationChanges: self.allowDocumentLocationChanges,
                    onDocumentLocationChanged: function (uri) {
                        AR.context.openInBrowser(uri, true);
                    },
                    zOrder: 0
                }
            );
        });

 

How can I make the HTMLDrawable being displayed behind the video ? Normally if I understand the documentation correctly, the zOrder is supposed to be for that but it seems to be not working.

For information I'm using wikitude sdk 5.2 and I have the issue on iOS (didn't tryed with android yet)

Best regards,

B. STEFANI

Hi Bastien,
You discovered an implementation detail of our iOS SDK ;) On this platform html drawables are not rendered in OpenGL ES, that's why they will always be on top of all other drawables, making the zOrder not work. It will work on Android as html drawables are rendered in OpenGL ES.

Sorry, there is currently no way to work around this.

Best regards,

Andreas

Hello,

Thanks for the info, then I will move my html content supposedly behind the video in an imagedrawable et put it in background, visually it shouldn't make any difference.

Best regards,

B. STEFANI