Активируйте указатель блокировки в блокноте Jupyter

Question

В настоящее время я пытаюсь использовать API-интерфейс Pointer Lock в блокноте Jupyter. По сути, я хочу записать несколько движений трекпада, не ограничиваясь размерами экрана, а затем передать его Python, чтобы выполнить некоторые вычисления на нем. Далее я просто расскажу о получении блокировки указателя.

Вот мой подход: я создаю новый <div> поверх текущей записной книжки, чтобы я мог использовать ее для блокировки указателя, давайте назовем ее canvasи позвоните canvas.requestPointerLock();, Довольно простые вещи.

Меня беспокоит то, что тот же код (ниже) будет хорошо работать в тестере Javascript, но не в ячейке Jupyter в %%javascript Режим.

var canvas = document.getElementById('canvasPA');
if (canvas !== null && typeof(canvas) != 'undefined') {
    canvas.parentNode.removeChild(canvas);
}

/*
 *  Checking whether the web page can accommodate pointerLock
 */
var havePointerLock = 'pointerLockElement' in document
        || 'mozPointerLockElement' in document
        || 'webkitPointerLockElement' in document;
if (havePointerLock) {
    console.log("Document has pointer lock capabilities."); // >> True
}

/*
 *  Defining the canvasPA div
 */
if (canvas === null || typeof(canvas) == 'undefined') {
    console.log("New canvas.");
    canvas = document.createElement('div');
    canvas.id = 'canvasPA';
    canvas.style = 'position: absolute; top: 250px; left: 550px; '
            + 'width: 1000px; height: 400px; '
            + 'background-color: #00BB5511; z-index: 1000;';
    document.getElementsByTagName('body')[0].appendChild(canvas);
}

/*
 *  Defining the changePointerLock behavior. 
 *  When the lock is released, all listeners are removed, then canvasPA is 
 *  removed from the webpage.
 */
function changeCallback() {

    var pointerLockElement = document.pointerLockElement 
            || document.mozPointerLockElement 
            || document.webkitPointerLockElement;
    console.log( "pointerLockElement: " + pointerLockElement );

    if(pointerLockElement === canvas) {

        console.log('The pointer lock status is now locked onto canvas');

    } else {
        console.log('The pointer lock status is now unlocked');  

        // Removing all pointerLock-related listeners
        document.removeEventListener('pointerlockchange', changeCallback, false);
        document.removeEventListener('mozpointerlockchange', changeCallback, false);
        document.removeEventListener('webkitpointerlockchange', changeCallback, false);
        document.removeEventListener('pointerlockerror', errorCallback, false);
        document.removeEventListener('mozpointerlockerror', errorCallback, false);
        document.removeEventListener('webkitpointerlockerror', errorCallback, false);

        // Remove canvas from the notebook
        canvas = document.getElementById("canvasPA");
        if (canvas !== null 
                && typeof(canvas) != 'undefined' 
                && canvas.parentNode !== null) {
            canvas.parentNode.removeChild(canvas);
        }
    }
}

function errorCallback() {
    console.log("Error when attempting to lock cursor...");
}

document.addEventListener('pointerlockchange', changeCallback, false);
document.addEventListener('mozpointerlockchange', changeCallback, false);
document.addEventListener('webkitpointerlockchange', changeCallback, false);
document.addEventListener('pointerlockerror', errorCallback, false);
document.addEventListener('mozpointerlockerror', errorCallback, false);
document.addEventListener('webkitpointerlockerror', errorCallback, false);

// Ask the browser to lock the pointer.
canvas.requestPointerLock = canvas.requestPointerLock 
        || canvas.mozRequestPointerLock 
        || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

С помощью тестера Javascript моя консоль печатает:

Document has pointer lock capabilities. New canvas. pointerLockElement: [object HTMLDivElement] The pointer lock status is now locked onto canvas

Затем курсор блокируется и исчезает. Затем я нажимаю Escape, и консоль записывает в журнал:

pointerLockElement: undefined The pointer lock status is now unlocked

Однако, когда я пытаюсь точно такой же код в ячейке Jupyter, я получаю:

Document has pointer lock capabilities. New canvas. Error when attempting to lock cursor...

И курсор никогда не блокируется.

Может показаться, что что-то в записной книжке Jupyter мешает мне получить блокировку, но я не могу знать наверняка, так как pointerlockerror приходит без объяснения причин. Какие-нибудь мысли?

Я использую Chrome (64.0.3282.140), Mac OS X 10.11.6.

Большое спасибо!

- Матиев

Answer 1

Итак, мне удалось заставить его работать, используя этот предыдущий ответ на немного другой вопрос:

/questions/1547791/kazhetsya-chto-to-ne-tak-pri-popyitke-ustanovit-requestpointerlock/1547802#1547802

Проблема в том, что requestPointerLock не может быть вызван автоматически, он должен быть вызван из обратного вызова пользователя

У меня сработало, сейчас звоню requestPointerLock() из mouseclick Перезвоните.

Рад, что нашел решение, однако думаю, что главный вопрос остается: как получилось, что он работал в "нормальном" javascript (см. Оригинальный вопрос), а не из клетки Jupyter? Полагаю, сейчас это менее важно...