Как обнаружить элементы управления вводом / движением joy-con в HTML5 JavaScript

Question

Я пытаюсь создать HTML5-игру JavaScript, которая использует Nintendo Switch Joy-Cons и средства управления движением. Проблема в том, что я не знаю, как обнаружить элементы управления движением от Joy-Cons, когда они подключены к моему ПК.

Мне удалось добиться кнопочного ввода с контроллеров Xbox, PS4 и Joy Con, используя Gamepad API, но возможно ли это сделать с помощью элементов управления движением Joy-Con?

Вот код для Gamepad API, если вы хотите его увидеть (опять же, я стремлюсь к элементам управления движением Joy-Con):

    var haveEvents = 'ongamepadconnected' in window;
    var controllers = {};
    
    function connecthandler(e) {
      addgamepad(e.gamepad);
    }
    
    function addgamepad(gamepad) {
      controllers[gamepad.index] = gamepad;
    
      var d = document.createElement("div");
      d.setAttribute("id", "controller" + gamepad.index);
    
      var t = document.createElement("h1");
      t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
      d.appendChild(t);
    
      var b = document.createElement("div");
      b.className = "buttons";
      for (var i = 0; i < gamepad.buttons.length; i++) {
        var e = document.createElement("span");
        e.className = "button";
        //e.id = "b" + i;
        e.innerHTML = i;
        b.appendChild(e);
      }
    
      d.appendChild(b);
    
      var a = document.createElement("div");
      a.className = "axes";
    
      for (var i = 0; i < gamepad.axes.length; i++) {
        var p = document.createElement("progress");
        p.className = "axis";
        //p.id = "a" + i;
        p.setAttribute("max", "2");
        p.setAttribute("value", "1");
        p.innerHTML = i;
        a.appendChild(p);
      }
    
      d.appendChild(a);
    
      var start = document.getElementById("start");
      if (start) {
        start.style.display = "none";
      }
    
      document.body.appendChild(d);
      requestAnimationFrame(updateStatus);
    }
    
    function disconnecthandler(e) {
      removegamepad(e.gamepad);
    }
    
    function removegamepad(gamepad) {
      var d = document.getElementById("controller" + gamepad.index);
      document.body.removeChild(d);
      delete controllers[gamepad.index];
    }
    
    function updateStatus() {
      if (!haveEvents) {
        scangamepads();
      }
    
      var i = 0;
      var j;
    
      for (j in controllers) {
        var controller = controllers[j];
        var d = document.getElementById("controller" + j);
        var buttons = d.getElementsByClassName("button");
    
        for (i = 0; i < controller.buttons.length; i++) {
          var b = buttons[i];
          var val = controller.buttons[i];
          var pressed = val == 1.0;
          if (typeof(val) == "object") {
            pressed = val.pressed;
            val = val.value;
          }
    
          var pct = Math.round(val * 100) + "%";
          b.style.backgroundSize = pct + " " + pct;
    
          if (pressed) {
            b.className = "button pressed";
            //Pressed down code here
          } else {
            b.className = "button";
            //Release button code here
          }
        }
    
        var axes = d.getElementsByClassName("axis");
        for (i = 0; i < controller.axes.length; i++) {
          var a = axes[i];
          a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
          a.setAttribute("value", controller.axes[i] + 1);
        }
      }
    
      requestAnimationFrame(updateStatus);
    }
    
    function scangamepads() {
      var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
      for (var i = 0; i < gamepads.length; i++) {
        if (gamepads[i]) {
          if (gamepads[i].index in controllers) {
            controllers[gamepads[i].index] = gamepads[i];
          } else {
            addgamepad(gamepads[i]);
          }
        }
      }
    }
    
    
    window.addEventListener("gamepadconnected", connecthandler);
    window.addEventListener("gamepaddisconnected", disconnecthandler);
    
    if (!haveEvents) {
      setInterval(scangamepads, 500);
    }

Используя эту ссылку для справки

Answer 1

Вэй Гао объяснил это на встрече https://reactknowledgeable.com/ прошлой неделе.

Вы можете узнать, как она это сделала, из ее презентации или слайдов.

Вы можете посетить страницу обсуждения для получения дополнительной информации.