Top pop a window to the top of the WebGL view

[sama-van]

How to draw a window to the top of the WebGL view ?

This post is related to this thread about the Input.Acceleration access from webGL :

• Can WebGL access mobile sensors?

To trigger the Device Sensor Permission dialog from the Javascript, it requires to be called in a handler triggered by a user gesture.
This can’t be faked / triggered by script or it will callback an error from Safari iOS.

Several users talking about it here :

• Make dialog to call DeviceMotionEvent.requestPermission in iOS 13+ · Issue #4287 · aframevr/aframe · GitHub

Someone is sharing nice code to get a modal view into the page and then trigger the request from the .onclick() button :

• https://codepen.io/dav1app/pen/MWWOKar

As you can see on the attached screenshot, I made the integration to my html page but it shows up behind the webGL view.

I also tried to edit the *.css adding the z-index: 999
as mentioned here :

• html - CSS Always On Top - Stack Overflow

But it doesn’t work and remind behind.

I was first testing adding a static button to the index.html, easier to work and get it triggered.
However for release I need it full Unity supported and I have to show that extra (pink) window to the top of the WebGL view.

Any idea?
Is that even possible?

Thank you!

[sama-van]

Found a solution…

You know that annoying warning message on Mobile which let you know webgl is not supported on this device?

Well, just hack it and use it :

Here the sweet code :

function ShowUnityWebglViewOverlayPrompt(msg, onValid, onCancel) {
    var warningBanner = document.querySelector("#unity-warning");
    div = document.createElement('div');
    warningBanner.appendChild(div);
    updateBannerVisibility();

    var html = '<div class="DeviceMotionRequestBanner">'
        + '<link rel="stylesheet" href="DeviceMotionRequestBanner.css">'
        + '<h3>This game requires to access your DeviceMotion.</h3>'
        + '<p>This app requires you to enable the DeviceMotion event on yout device.</p>'
        + '<button id="EnableBtn">Enable</button> <a id="CancelBtn" href="#">Cancel</a>'
        + '</div>';

    div.innerHTML = html;

    const btnEnable = document.querySelector("#EnableBtn");
    btnEnable.addEventListener("click", function () {
        onValid();
        hide();
    });

    const btnCancel = document.querySelector("#CancelBtn");
    btnCancel.addEventListener("click", function () {
        onCancel();
        hide();
    });

    function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
    }

    function hide() {
        warningBanner.removeChild(div);
        updateBannerVisibility();
    }
}

Cheers