Fix gamepad axis mapping

[z3db0y]

This issue has been bothering me for a long time and I have decided to open a PR to fix it:
The mapping on our team's controllers in the dashboard was off - left stick axes were mapped correctly but right_stick_x was mapped to the controller's right_stick_y and right_stick_y wasn't being mapped at all. Taking a look at the code, it was simply 2 typos.

[rbrott]

Thanks for the patch. I'm not sure those two indices are actually typos, and it's impossible for me to test. I don't want to change the general case if possible, but I'm happy to add a new case for you. Can you give me the full name of the gamepad as reported by this site as well as your browser and OS? For context, I'm hoping to fill out this info for all gamepad changes going forward.

[z3db0y]

Sorry, for the late reply, but here is the test:

Controller Used: official Xbox One Controller:

[Windwoes]

One possible way to fix this would be to use WebHID to manually interpret the data reports for the FTC legal gamepad types.

[NoahBres]

:(

[rbrott]

To be clear: Chrome-only support for gamepads is reasonable. Doubly so if the implementation actually works without constant fiddling.

[qwertychouskie]

Chrome-only would be a big bummer for our team. Ideally there would at least be the old code path as a fallback, preferably with a config option in the dashboard to allow users to change their axis mappings.

[NoahBres]

@qwertychouskie Do the other browsers still work with gamepads as of now?

[Glaferg]

Well... I don't know. A quick search at-Comp yielded this Firefox library. for controller support, and Safari's apparently works, as detailed here. Incredibly eager to see one of the most helpful libs in FTC grow!!

[qwertychouskie]

I will also mention I am able to use https://gamepad-tester.com/ just fine on Firefox+Linux.

[NoahBres]

This isn't a problem with the gamepad API not working. The problem is that the gamepad API doesn't work in non-secure contexts. Local dash isn't HTTPS, thus not a secure context. More details on my investigation can be found here: #67

Those sites should work fine because they are served over HTTPS. The problem is that dash is not served over HTTPS.

[z3db0y]

Lol you guys over-thought the issue, the API you're using is fine and well-supported, it's just that xbox controllers get mapped wrong. I asked another team about their dashboard sticks and they told me their right stick is also wrongly mapped. If a member of the repo has an xbox controller, I suggest testing it- here's proof of concept:

2023-03-04.22-27-09.mp4

Cannot get axes[4] of a 4 element array xd

[z3db0y]

// ==UserScript==
// @name         FTC Dashboard Gamepad Fix
// @namespace    https://z3db0y.com
// @version      1.0
// @description  Fixes improper axes mapping on Xbox controllers in FTC dashboard.
// @author       z3db0y
// @match        http://192.168.43.1:8080/dash
// @match        http://192.168.49.1:8080/dash
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    let map = {};

    let observer = new MutationObserver(m => {
       for(let mut of m) {
           for(let node of mut.addedNodes || []) {
               if(node.nodeName !== 'SCRIPT' || !node.src || !/\/index\..*\.js$/.test(node.src)) continue;
               node.remove();

               let xhr = new XMLHttpRequest();
               xhr.open('GET', node.src, false);
               xhr.send();

               let n = document.createElement('script');
               n.textContent = xhr.response
                   .replace(/case (.+)\.XBOX_360:return{left_stick_x:(.+)\((.+)\.axes\[0]\),left_stick_y:(?:.+)\((?:.+)\.axes\[1]\),right_stick_x:(?:.+)\((?:.+)\.axes\[3]\),right_stick_y:(?:.+)\((?:.+)\.axes\[4]\)/g, 'case $1.XBOX_360:return{left_stick_x:$2($3.axes[0]),left_stick_y:$2($3.axes[1]),right_stick_x:$2($3.axes[2]),right_stick_y:$2($3.axes[3])');
               console.log(n.textContent);
               window.onload = () => document.head.appendChild(n);
           }
       }
    });
    observer.observe(document.documentElement, { childList: true, subtree: true })
})();

For those still having this issue, here's a makeshift fix. (tampermonkey)