From 203d3bf11036d7a5e3dddb6343a1ab79cc23496b Mon Sep 17 00:00:00 2001
From: e7d <michael@e7d.io>
Date: Sun, 5 Feb 2023 12:00:07 +0100
Subject: [PATCH] feat(): WIP add telemetry skin

---
 .vscode/tasks.json                |  17 ++
 css/main.css                      |   1 +
 index.html                        |   7 +
 js/gamepad.js                     | 453 ++++++++++++++++++------------
 samples.txt                       |   5 +
 templates/debug/template.js       |   2 +-
 templates/telemetry/template.css  | 116 ++++++++
 templates/telemetry/template.html |  32 +++
 templates/telemetry/template.js   | 143 ++++++++++
 9 files changed, 589 insertions(+), 187 deletions(-)
 create mode 100644 .vscode/tasks.json
 create mode 100644 samples.txt
 create mode 100644 templates/telemetry/template.css
 create mode 100644 templates/telemetry/template.html
 create mode 100644 templates/telemetry/template.js

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
new file mode 100644
index 0000000..4982aed
--- /dev/null
+++ b/.vscode/tasks.json
@@ -0,0 +1,17 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "docker",
+            "type": "shell",
+            "command": "docker compose up",
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
+        }
+    ]
+}
diff --git a/css/main.css b/css/main.css
index 2af6222..d63ddad 100644
--- a/css/main.css
+++ b/css/main.css
@@ -134,6 +134,7 @@ body.unsupported #gamepad {
     border-radius: 4px;
     background: whitesmoke;
     border: none;
+    max-width: 200px;
 }
 
 #help-popout {
diff --git a/index.html b/index.html
index 5405e99..489963c 100644
--- a/index.html
+++ b/index.html
@@ -84,6 +84,12 @@
 	</div>
 	<div id="gamepad"></div>
 	<div id="overlay" style="display: none;">
+		<span id="gamepad-id">
+			<label for="gamepad-id">Gamepad</label>
+			<select name="gamepad-id">
+				<option value="auto">Auto</option>
+			</select>
+		</span>
 		<span id="skin">
 			<label for="skin">Skin</label>
 			<select name="skin">
@@ -91,6 +97,7 @@
 				<option value="ds4">DualShock 4</option>
 				<option value="xbox-one">Xbox One</option>
 				<option value="debug">Debug</option>
+				<option value="telemetry">Telemetry</option>
 			</select>
 		</span>
 		<span id="background">
diff --git a/js/gamepad.js b/js/gamepad.js
index 4395c63..77e0a47 100644
--- a/js/gamepad.js
+++ b/js/gamepad.js
@@ -9,39 +9,38 @@ class Gamepad {
      */
     constructor() {
         // cached DOM references
-        this.$body = $("body");
-        this.$instructions = $("#instructions");
-        this.$placeholder = $("#placeholder");
-        this.$gamepad = $("#gamepad");
-        this.$overlay = $("#overlay");
-        this.$skinSelect = $("select[name=skin]");
-        this.$backgroundSelect = $("select[name=background]");
-        this.$colorOverlay = this.$overlay.find("#color");
-        this.$colorSelect = this.$colorOverlay.find("select[name=color]");
-        this.$triggersOverlay = this.$overlay.find("#triggers");
-        this.$triggersSelect = this.$triggersOverlay.find(
-            "select[name=triggers]"
-        );
-        this.$helpPopout = $("#help-popout");
-        this.$gamepadList = $("#gamepad-list");
+        this.$body = $('body');
+        this.$instructions = $('#instructions');
+        this.$placeholder = $('#placeholder');
+        this.$gamepad = $('#gamepad');
+        this.$overlay = $('#overlay');
+        this.$gamepadSelect = $('select[name=gamepad-id]');
+        this.$skinSelect = $('select[name=skin]');
+        this.$backgroundSelect = $('select[name=background]');
+        this.$colorOverlay = this.$overlay.find('#color');
+        this.$colorSelect = this.$colorOverlay.find('select[name=color]');
+        this.$triggersOverlay = this.$overlay.find('#triggers');
+        this.$triggersSelect = this.$triggersOverlay.find('select[name=triggers]');
+        this.$helpPopout = $('#help-popout');
+        this.$gamepadList = $('#gamepad-list');
 
         this.backgroundStyle = [
-            "transparent",
-            "checkered",
-            "dimgrey",
-            "black",
-            "white",
-            "lime",
-            "magenta",
+            'transparent',
+            'checkered',
+            'dimgrey',
+            'black',
+            'white',
+            'lime',
+            'magenta',
         ];
         this.textColors = [
-            "black",
-            "black",
-            "black",
-            "white",
-            "black",
-            "black",
-            "black",
+            'black',
+            'black',
+            'black',
+            'white',
+            'black',
+            'black',
+            'black',
         ];
 
         // ensure the GamePad API is available on this browser
@@ -55,40 +54,44 @@ class Gamepad {
             // See: https://html5gamepad.com/codes
             debug: {
                 id: /debug/,
-                name: "Debug",
+                name: 'Debug',
             },
             ds4: {
                 id: /054c|54c|09cc|046d|0810|2563/, // 054c = Sony vendor code, 046d,0810,2563 = PS-like controllers vendor codes
-                name: "DualShock 4",
-                colors: ["black", "white", "red", "blue"],
+                name: 'DualShock 4',
+                colors: ['black', 'white', 'red', 'blue'],
                 triggers: true,
             },
             // gamecube: {
             //     id: /0079/, // 0079 = Nintendo GameCube vendor code
-            //     name: "GameCube Controller",
-            //     colors: ["black", "purple"],
+            //     name: 'GameCube Controller',
+            //     colors: ['black', 'purple'],
             // },
-            // "joy-con": {
+            // 'joy-con': {
             //     id: /200e/, // 0079 = Joy-Con specific product code
-            //     name: "Joy-Con (L+R) Controllers",
-            //     colors: ["blue-red", "grey-grey"],
+            //     name: 'Joy-Con (L+R) Controllers',
+            //     colors: ['blue-red', 'grey-grey'],
             // },
             // stadia: {
             //     id: /18d1/, // 18d1 = Google vendor code
-            //     name: "Stadia Controller",
-            //     colors: ["black"],
+            //     name: 'Stadia Controller',
+            //     colors: ['black'],
             // },
-            // "switch-pro": {
+            // 'switch-pro': {
             //     id: /057e|20d6/, // 057e = Nintendo Switch vendor code, 20d6 = Switch Pro-like vendor code
-            //     name: "Switch Pro Controller",
-            //     colors: ["black"],
+            //     name: 'Switch Pro Controller',
+            //     colors: ['black'],
             // },
-            "xbox-one": {
+            'xbox-one': {
                 id: /045e|xinput|XInput/, // 045e = Microsoft vendor code, xinput = standard Windows controller
-                name: "Xbox One",
-                colors: ["black", "white"],
+                name: 'Xbox One',
+                colors: ['black', 'white'],
                 triggers: true,
             },
+            'telemetry': {
+                id: /telemetry/, // 045e = Microsoft vendor code, xinput = standard Windows controller
+                name: 'Telemetry'
+            },
         };
 
         // gamepad help default values
@@ -100,6 +103,7 @@ class Gamepad {
         this.overlayDelay = 5000;
 
         // active gamepad default values
+        this.isFirstscan = true;
         this.scanDelay = 200;
         this.debug = false;
         this.index = null;
@@ -111,7 +115,7 @@ class Gamepad {
         this.colorIndex = null;
         this.colorName = null;
         this.triggersMeter = false;
-        this.zoomMode = "auto";
+        this.zoomMode = 'auto';
         this.zoomLevel = 1;
         this.mapping = {
             buttons: [],
@@ -122,36 +126,36 @@ class Gamepad {
         // this.hash = this.readHash();
 
         // listen for gamepad related events
-        this.haveEvents = "GamepadEvent" in window;
+        this.haveEvents = 'GamepadEvent' in window;
         if (this.haveEvents) {
             window.addEventListener(
-                "gamepadconnected",
+                'gamepadconnected',
                 this.onGamepadConnect.bind(this)
             );
             window.addEventListener(
-                "gamepaddisconnected",
+                'gamepaddisconnected',
                 this.onGamepadDisconnect.bind(this)
             );
         }
 
         // listen for mouse move events
-        window.addEventListener("mousemove", this.onMouseMove.bind(this));
+        window.addEventListener('mousemove', this.onMouseMove.bind(this));
         // listen for keyboard events
-        window.addEventListener("keydown", this.onKeyDown.bind(this));
+        window.addEventListener('keydown', this.onKeyDown.bind(this));
         // listen for keyboard events
-        window.addEventListener("resize", this.onResize.bind(this));
+        window.addEventListener('resize', this.onResize.bind(this));
 
         // bind a gamepads scan
         window.setInterval(this.scan.bind(this), this.scanDelay);
 
         // change the type if specified
-        const skin = this.getUrlParam("type");
+        const skin = this.getUrlParam('type');
         if (skin) {
             this.changeSkin(skin);
         }
 
         // change the background if specified
-        const background = this.getUrlParam("background");
+        const background = this.getUrlParam('background');
         if (background) {
             let backgroundStyleIndex;
             for (let i = 0; i < this.backgroundStyle.length; i++) {
@@ -176,11 +180,11 @@ class Gamepad {
         const getGamepadsFn = navigator.getGamepads
             ? () => navigator.getGamepads()
             : navigator.webkitGetGamepads
-            ? () => navigator.webkitGetGamepads()
-            : null;
+                ? () => navigator.webkitGetGamepads()
+                : null;
         if (!getGamepadsFn) {
-            this.$body.addClass("unsupported");
-            throw new Error("Unsupported gamepad API");
+            this.$body.addClass('unsupported');
+            throw new Error('Unsupported gamepad API');
         }
         this.getNavigatorGamepads = getGamepadsFn;
     }
@@ -189,17 +193,20 @@ class Gamepad {
      * Initialises the overlay selectors
      */
     initOverlaySelectors() {
-        this.$skinSelect.on("change", () =>
+        this.$gamepadSelect.on('change', () =>
+            this.changeGamepad(this.$gamepadSelect.val())
+        );
+        this.$skinSelect.on('change', () =>
             this.changeSkin(this.$skinSelect.val())
         );
-        this.$backgroundSelect.on("change", () =>
+        this.$backgroundSelect.on('change', () =>
             this.changeBackgroundStyle(this.$backgroundSelect.val())
         );
-        this.$colorSelect.on("change", () =>
+        this.$colorSelect.on('change', () =>
             this.changeGamepadColor(this.$colorSelect.val())
         );
-        this.$triggersSelect.on("change", () =>
-            this.toggleTriggersMeter(this.$triggersSelect.val() === "meter")
+        this.$triggersSelect.on('change', () =>
+            this.toggleTriggersMeter(this.$triggersSelect.val() === 'meter')
         );
     }
 
@@ -299,6 +306,25 @@ class Gamepad {
         }, this.overlayDelay);
     }
 
+    /**
+     * Updates the list of connected gamepads in the overlay
+     */
+    updateGamepadList() {
+        this.$gamepadSelect.find('.entry').remove();
+        const $options = [];
+        for (let key = 0; key < this.gamepads.length; key++) {
+            const gamepad = this.gamepads[key];
+            if (!gamepad) {
+                continue;
+            }
+
+            $options.push(
+                `<option class='entry' value='${gamepad.id}'>${gamepad.id}</option>'`
+            );
+        }
+        this.$gamepadSelect.append($options.join(''));
+    }
+
     /**
      * Update colors following the active/inactive gamepad
      */
@@ -315,7 +341,7 @@ class Gamepad {
         }
 
         const colorOptions = colors.map(
-            (color) => `<option value="${color}">${color}</option>`
+            (color) => `<option value='${color}'>${color}</option>`
         );
         this.$colorSelect.html(colorOptions);
         this.$colorOverlay.fadeIn();
@@ -345,6 +371,12 @@ class Gamepad {
      * @param {GamepadEvent} e
      */
     onGamepadConnect(e) {
+        // refresh gamepads information
+        this.pollGamepads();
+
+        // refresh gamepad list on overlay
+        this.updateGamepadList();
+
         // refresh gamepad list on help, if displayed
         if (this.helpVisible) this.buildHelpGamepadList();
     }
@@ -355,9 +387,15 @@ class Gamepad {
      * @param {GamepadEvent} e
      */
     onGamepadDisconnect(e) {
+        // refresh gamepads information
+        this.pollGamepads();
+
+        // refresh gamepad list on overlay
+        this.updateGamepadList();
+
         if (e.gamepad.index === this.index) {
             // display a disconnection indicator
-            this.$gamepad.addClass("disconnected");
+            this.$gamepad.addClass('disconnected');
             this.disconnectedIndex = e.gamepad.index;
 
             // refresh gamepad list on help, if displayed
@@ -366,7 +404,7 @@ class Gamepad {
     }
 
     /**
-     * Handles the mouse "mousemove" event
+     * Handles the mouse 'mousemove' event
      *
      * @param {MouseEvent} e
      */
@@ -377,61 +415,61 @@ class Gamepad {
     }
 
     /**
-     * Handles the keyboard "keydown" event
+     * Handles the keyboard 'keydown' event
      *
      * @param {KeyboardEvent} e
      */
     onKeyDown(e) {
         switch (e.code) {
-            case "Delete":
-            case "Escape":
+            case 'Delete':
+            case 'Escape':
                 this.clear();
                 this.displayPlaceholder();
                 break;
-            case "KeyB":
+            case 'KeyB':
                 this.changeBackgroundStyle();
                 break;
-            case "KeyC":
+            case 'KeyC':
                 this.changeGamepadColor();
                 break;
-            case "KeyD":
+            case 'KeyD':
                 this.toggleDebug();
                 break;
-            case "KeyG":
+            case 'KeyG':
                 this.toggleGamepadType();
                 break;
-            case "KeyH":
+            case 'KeyH':
                 this.toggleHelp();
                 break;
-            case "KeyT":
+            case 'KeyT':
                 this.toggleTriggersMeter();
                 break;
-            case "NumpadAdd":
-            case "Equal":
-                this.changeZoom("+");
+            case 'NumpadAdd':
+            case 'Equal':
+                this.changeZoom('+');
                 break;
-            case "NumpadSubtract":
-            case "Minus":
-                this.changeZoom("-");
+            case 'NumpadSubtract':
+            case 'Minus':
+                this.changeZoom('-');
                 break;
-            case "Numpad5":
-            case "Digit5":
-                this.changeZoom("auto");
+            case 'Numpad5':
+            case 'Digit5':
+                this.changeZoom('auto');
                 break;
-            case "Numpad0":
-            case "Digit0":
+            case 'Numpad0':
+            case 'Digit0':
                 this.changeZoom(0);
                 break;
         }
     }
 
     /**
-     * Handles the keyboard "keydown" event
+     * Handles the keyboard 'keydown' event
      *
      * @param {WindowEvent} e
      */
     onResize(e) {
-        if (this.zoomMode === "auto") this.changeZoom("auto");
+        if (this.zoomMode === 'auto') this.changeZoom('auto');
     }
 
     /**
@@ -447,9 +485,6 @@ class Gamepad {
      * Builds the help gamepad list
      */
     buildHelpGamepadList() {
-        // refresh gamepads information
-        this.pollGamepads();
-
         const $tbody = [];
         for (let key = 0; key < this.gamepads.length; key++) {
             const gamepad = this.gamepads[key];
@@ -458,18 +493,20 @@ class Gamepad {
             }
 
             $tbody.push(
-                `<tr><td>${gamepad.index}</td><td>${gamepad.id}</td></tr>"`
+                `<tr><td>${gamepad.index}</td><td>${gamepad.id}</td></tr>'`
             );
         }
         if ($tbody.length === 0) {
             $tbody.push('<tr><td colspan="2">No gamepad detected.</td></tr>');
         }
 
-        this.$gamepadList.html($tbody.join(""));
+        this.$gamepadList.html($tbody.join(''));
     }
 
     /**
      * Return the connected gamepad
+     *
+     * @returns {object}
      */
     getActive() {
         return this.gamepads[this.index];
@@ -479,14 +516,15 @@ class Gamepad {
      * Return the gamepad type for the connected gamepad
      *
      * @param {object} gamepad
+     * @returns {string}
      */
     getType(gamepad) {
-        const type = this.getUrlParam("type");
+        const type = this.getUrlParam('type');
 
         // if the debug option is active, use the associated template
-        if (type === "debug") this.debug = true;
+        if (type === 'debug') this.debug = true;
         if (this.debug) {
-            return "debug";
+            return 'debug';
         }
 
         // if the gamepad type is set through params, apply it
@@ -501,7 +539,7 @@ class Gamepad {
             }
         }
 
-        return "xbox-one";
+        return 'xbox-one';
     }
 
     /**
@@ -514,6 +552,12 @@ class Gamepad {
         // refresh gamepad information
         this.pollGamepads();
 
+        if (this.isFirstscan) {
+            // update the overlay list
+            this.updateGamepadList();
+            this.isFirstscan = false;
+        }
+
         for (let index = 0; index < this.gamepads.length; index++) {
             if (
                 null !== this.disconnectedIndex &&
@@ -524,6 +568,15 @@ class Gamepad {
             const gamepad = this.gamepads[index];
             if (!gamepad) continue;
 
+            // check the parameters for a selected gamepad
+            const gamepadId = this.getUrlParam('gamepad');
+            if (gamepadId) {
+                if (gamepad.id === gamepadId) {
+                    this.map(gamepad.index);
+                    return;
+                }
+            }
+
             // read the gamepad buttons
             let button;
             for (
@@ -563,17 +616,17 @@ class Gamepad {
      */
     map(index) {
         // ensure a gamepad need to be mapped
-        if ("undefined" === typeof index) return;
+        if ('undefined' === typeof index) return;
 
         // hide the help messages
         this.hideInstructions(true);
-        this.$helpPopout.removeClass("active");
+        this.$helpPopout.removeClass('active');
         this.hidePlaceholder(true);
 
         // update local references
         this.index = index;
         this.disconnectedIndex = null;
-        this.$gamepad.removeClass("disconnected");
+        this.$gamepad.removeClass('disconnected');
         const gamepad = this.getActive();
 
         // ensure that a gamepad was actually found for this index
@@ -594,7 +647,8 @@ class Gamepad {
         // initial setup of the gamepad
         this.identifier = this.identifiers[this.type];
 
-        // update gamepad color and triggers selectors on overlay
+        // update the overlay selectors
+        this.$gamepadSelect.val(gamepad.id);
         this.updateColors();
         this.updateTriggers();
 
@@ -607,15 +661,27 @@ class Gamepad {
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "map",
-                eventLabel: "Map",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'map',
+                eventLabel: 'Map',
                 eventValue: this.identifier,
             });
         }
     }
 
+    /**
+     * Computes a SHA-1 for a given string
+     *
+     * @param {string} value
+     * @returns {string}
+     */
+    async toHash(value) {
+        return crypto.subtle
+            .digest('SHA-1', new TextEncoder().encode(value))
+            .then(ab => encodeURIComponent(String.fromCharCode.apply(null, new Uint8Array(ab))));
+    }
+
     /**
      * Disconnect the active gamepad
      *
@@ -637,16 +703,17 @@ class Gamepad {
         this.colorName = null;
         this.zoomLevel = 1;
         this.$gamepad.empty();
+        this.$gamepadSelect.val('auto')
         this.updateColors();
         this.updateTriggers();
         this.clearUrlParams();
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "disconnect",
-                eventLabel: "Disconnect",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'disconnect',
+                eventLabel: 'Disconnect',
                 eventValue: this.identifier,
             });
         }
@@ -667,22 +734,22 @@ class Gamepad {
 
             // read for parameters to apply:
             // - color
-            this.changeGamepadColor(this.getUrlParam("color"));
+            this.changeGamepadColor(this.getUrlParam('color'));
             // - triggers mode
-            this.toggleTriggersMeter(this.getUrlParam("triggers") === "meter");
+            this.toggleTriggersMeter(this.getUrlParam('triggers') === 'meter');
             // - zoom$
             window.setTimeout(() =>
                 this.changeZoom(
-                    this.type === "debug"
-                        ? "auto"
-                        : this.getUrlParam("zoom") || "auto"
+                    this.type === 'debug'
+                        ? 'auto'
+                        : this.getUrlParam('zoom') || 'auto'
                 )
             );
 
             // save the buttons mapping of this template
             this.mapping.buttons = [];
             for (let index = 0; index < gamepad.buttons.length; index++) {
-                this.mapping.buttons[index] = $(`[data-button="${index}"]`);
+                this.mapping.buttons[index] = $(`[data-button='${index}']`);
             }
 
             // save the axes mapping of this template
@@ -738,20 +805,20 @@ class Gamepad {
         for (let index = 0; index < gamepad.buttons.length; index++) {
             // find the DOM element
             const $button = this.mapping.buttons[index];
-            if (!$button) {
+            if (!$button || $button.length === 0) {
                 // nothing to do for this button if no DOM element exists
-                break;
+                continue;
             }
 
             // read the button data
             const button = gamepad.buttons[index];
 
             // update the display values
-            $button.attr("data-pressed", button.pressed);
-            $button.attr("data-value", button.value);
+            $button.attr('data-pressed', button.pressed);
+            $button.attr('data-value', button.value);
 
             // hook the template defined button update method
-            if ("function" === typeof this.updateButton) {
+            if ('function' === typeof this.updateButton) {
                 this.updateButton($button);
             }
         }
@@ -767,35 +834,44 @@ class Gamepad {
         for (let index = 0; index < gamepad.axes.length; index++) {
             // find the DOM element
             const $axis = this.mapping.axes[index];
-            if (!$axis) {
-                // nothing to do for this button if no DOM element exists
-                break;
+            if (!$axis || $axis.length === 0) {
+                // nothing to do for this axis if no DOM element exists
+                continue;
             }
 
             // read the axis data
             const axis = gamepad.axes[index];
 
             // update the display values
-            if ($axis.is("[data-axis=" + index + "]")) {
-                $axis.attr("data-value", axis);
+            if ($axis.is('[data-axis=' + index + ']')) {
+                $axis.attr('data-value', axis);
             }
-            if ($axis.is("[data-axis-x=" + index + "]")) {
-                $axis.attr("data-value-x", axis);
+            if ($axis.is('[data-axis-x=' + index + ']')) {
+                $axis.attr('data-value-x', axis);
             }
-            if ($axis.is("[data-axis-y=" + index + "]")) {
-                $axis.attr("data-value-y", axis);
+            if ($axis.is('[data-axis-y=' + index + ']')) {
+                $axis.attr('data-value-y', axis);
             }
-            if ($axis.is("[data-axis-z=" + index + "]")) {
-                $axis.attr("data-value-z", axis);
+            if ($axis.is('[data-axis-z=' + index + ']')) {
+                $axis.attr('data-value-z', axis);
             }
 
             // hook the template defined axis update method
-            if ("function" === typeof this.updateAxis) {
+            if ('function' === typeof this.updateAxis) {
                 this.updateAxis($axis);
             }
         }
     }
 
+    changeGamepad(gamepadId) {
+        // get the index corresponding to the identifier of the gamepad
+        const index = this.gamepads.findIndex(g => g && g.id === gamepadId);
+
+        // set the selected gamepad
+        this.updateUrlParams({ gamepad: gamepadId !== 'auto' ? gamepadId : undefined });
+        index === -1 ? this.clear() : this.map(index);
+    }
+
     /**
      * Changes the skin
      *
@@ -807,7 +883,7 @@ class Gamepad {
 
         // set the selected skin
         this.debug = skin === 'debug';
-        this.updateUrlParams({ type: skin !== "auto" ? skin : undefined });
+        this.updateUrlParams({ type: skin !== 'auto' ? skin : undefined });
         this.map(this.index);
     }
 
@@ -817,12 +893,12 @@ class Gamepad {
      * @param {any} style
      */
     changeBackgroundStyle(style) {
-        if ("undefined" === typeof style) {
+        if ('undefined' === typeof style) {
             this.backgroundStyleIndex++;
             if (this.backgroundStyleIndex > this.backgroundStyle.length - 1) {
                 this.backgroundStyleIndex = 0;
             }
-        } else if ("string" === typeof style) {
+        } else if ('string' === typeof style) {
             this.backgroundStyleIndex = this.backgroundStyle.findIndex(
                 (s) => s === style
             );
@@ -834,8 +910,8 @@ class Gamepad {
 
         this.$body.css({
             background:
-                this.backgroundStyleName === "checkered"
-                    ? "url(css/transparent-bg.png)"
+                this.backgroundStyleName === 'checkered'
+                    ? 'url(css/transparent-bg.png)'
                     : this.backgroundStyleName,
             color: this.textColors[this.backgroundStyleIndex],
         });
@@ -846,10 +922,10 @@ class Gamepad {
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "change-background-color",
-                eventLabel: "Change Background Color",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'change-background-color',
+                eventLabel: 'Change Background Color',
                 eventValue: this.backgroundStyleName,
             });
         }
@@ -864,13 +940,13 @@ class Gamepad {
         // ensure that a gamepad is currently active
         if (this.index === null) return;
 
-        if ("undefined" === typeof color) {
+        if ('undefined' === typeof color) {
             // no color was specified, load the next one in list
             this.colorIndex++;
             if (this.colorIndex > this.identifier.colors.length - 1) {
                 this.colorIndex = 0;
             }
-        } else if ("string" === typeof style) {
+        } else if ('string' === typeof style) {
             this.colorIndex = this.identifier.colors.findIndex(
                 (c) => c === color
             );
@@ -894,7 +970,7 @@ class Gamepad {
             : null;
 
         // update the DOM with the color value
-        this.$gamepad.attr("data-color", this.colorName);
+        this.$gamepad.attr('data-color', this.colorName);
 
         // update current settings
         this.updateUrlParams({ color: this.colorName });
@@ -902,10 +978,10 @@ class Gamepad {
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "change-gamepad-color",
-                eventLabel: "Change Gamepad Color",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'change-gamepad-color',
+                eventLabel: 'Change Gamepad Color',
                 eventValue: this.colorName,
             });
         }
@@ -921,12 +997,12 @@ class Gamepad {
         if (this.index === null) return;
 
         // ensure we have some data to process
-        if (typeof level === "undefined") return;
+        if (typeof level === 'undefined') return;
 
-        this.zoomMode = level === "auto" ? "auto" : "manual";
+        this.zoomMode = level === 'auto' ? 'auto' : 'manual';
 
-        if (this.zoomMode === "auto") {
-            // "auto" means a "contained in window" zoom, with a max zoom of 1
+        if (this.zoomMode === 'auto') {
+            // 'auto' means a 'contained in window' zoom, with a max zoom of 1
             this.zoomLevel = Math.min(
                 window.innerWidth / this.$gamepad.width(),
                 window.innerHeight / this.$gamepad.height(),
@@ -935,11 +1011,11 @@ class Gamepad {
         } else if (level === 0) {
             // 0 means a zoom reset
             this.zoomLevel = 1;
-        } else if (level === "+" && this.zoomLevel < 2) {
-            // "+" means a zoom in if we still can
+        } else if (level === '+' && this.zoomLevel < 2) {
+            // '+' means a zoom in if we still can
             this.zoomLevel += 0.1;
-        } else if (level === "-" && this.zoomLevel > 0.1) {
-            // "-" means a zoom out if we still can
+        } else if (level === '-' && this.zoomLevel > 0.1) {
+            // '-' means a zoom out if we still can
             this.zoomLevel -= 0.1;
         } else if (!isNaN((level = parseFloat(level)))) {
             // an integer value means a value-based zoom
@@ -951,21 +1027,21 @@ class Gamepad {
 
         // update the DOM with the zoom value
         this.$gamepad.css(
-            "transform",
+            'transform',
             `translate(-50%, -50%) scale(${this.zoomLevel}, ${this.zoomLevel})`
         );
 
         // update current settings
         this.updateUrlParams({
-            zoom: this.zoomMode === "auto" ? undefined : this.zoomLevel,
+            zoom: this.zoomMode === 'auto' ? undefined : this.zoomLevel,
         });
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "change-zoom",
-                eventLabel: "Change Zoom",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'change-zoom',
+                eventLabel: 'Change Zoom',
                 eventValue: this.zoomLevel,
             });
         }
@@ -983,7 +1059,7 @@ class Gamepad {
 
         // compute next type
         const types = Object.keys(this.identifiers).filter(
-            (i) => i !== "debug"
+            (i) => i !== 'debug'
         );
         let typeIndex = types.reduce((typeIndex, type, index) => {
             return type === this.type ? index : typeIndex;
@@ -992,10 +1068,10 @@ class Gamepad {
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "toggle-type",
-                eventLabel: "Toggle Type",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'toggle-type',
+                eventLabel: 'Toggle Type',
                 eventValue: this.type,
             });
         }
@@ -1019,10 +1095,10 @@ class Gamepad {
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "toggle-debug",
-                eventLabel: "Toggle Debug",
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'toggle-debug',
+                eventLabel: 'Toggle Debug',
                 eventValue: this.debug,
             });
         }
@@ -1036,19 +1112,20 @@ class Gamepad {
      */
     toggleHelp() {
         // refresh gamepad lsit with latest data
+        this.pollGamepads();
         this.buildHelpGamepadList();
 
         // display the help popout
-        this.$helpPopout.toggleClass("active");
-        this.helpVisible = this.$helpPopout.is(".active");
+        this.$helpPopout.toggleClass('active');
+        this.helpVisible = this.$helpPopout.is('.active');
 
         // save statistics
         if (!!window.ga) {
-            ga("send", "event", {
-                eventCategory: "Gamepad",
-                eventAction: "toggle-help",
-                eventLabel: "Toggle Help",
-                eventValue: this.$helpPopout.is("active"),
+            ga('send', 'event', {
+                eventCategory: 'Gamepad',
+                eventAction: 'toggle-help',
+                eventLabel: 'Toggle Help',
+                eventValue: this.$helpPopout.is('active'),
             });
         }
     }
@@ -1062,12 +1139,12 @@ class Gamepad {
 
         this.triggersMeter =
             useMeter !== undefined ? useMeter : !this.triggersMeter;
-        this.$gamepad[this.triggersMeter ? "addClass" : "removeClass"](
-            "triggers-meter"
+        this.$gamepad[this.triggersMeter ? 'addClass' : 'removeClass'](
+            'triggers-meter'
         );
 
         // update current settings
-        const triggers = this.triggersMeter ? "meter" : "opacity";
+        const triggers = this.triggersMeter ? 'meter' : 'opacity';
         this.updateUrlParams({ triggers });
         this.$triggersSelect.val(triggers);
     }
@@ -1076,9 +1153,10 @@ class Gamepad {
      * Reads an URL search parameter
      *
      * @param {*} name
+     * @returns {string|boolean|null}
      */
     getUrlParam(name) {
-        let matches = new RegExp("[?&]" + name + "(=([^&#]*))?").exec(
+        let matches = new RegExp('[?&]' + name + '(=([^&#]*))?').exec(
             window.location.search
         );
         return matches ? decodeURIComponent(matches[2] || true) || true : null;
@@ -1086,12 +1164,14 @@ class Gamepad {
 
     /**
      * Read url settings to produce a key/value object
+     *
+     * @returns {object}
      */
     getUrlParams() {
         const settingsArr = window.location.search
-            .replace("?", "")
-            .split("&")
-            .map((param) => param.split("="));
+            .replace('?', '')
+            .split('&')
+            .map((param) => param.split('='));
         const settings = {};
         Object.keys(settingsArr).forEach((key) => {
             const [k, v] = settingsArr[key];
@@ -1105,6 +1185,7 @@ class Gamepad {
      */
     clearUrlParams() {
         this.updateUrlParams({
+            gamepad: undefined,
             type: undefined,
             color: undefined,
             debug: undefined,
@@ -1123,7 +1204,7 @@ class Gamepad {
         const query = Object.entries(params)
             .filter(([, value]) => value !== undefined && value !== null)
             .map(([key, value]) => `${key}=${value}`)
-            .join("&");
+            .join('&');
         window.history.replaceState({}, document.title, `/?${query}`);
     }
 }
diff --git a/samples.txt b/samples.txt
new file mode 100644
index 0000000..e97a9f0
--- /dev/null
+++ b/samples.txt
@@ -0,0 +1,5 @@
+Sample: T818
+http://localhost:8081/?gamepad=Thrustmaster%20Thrustmaster%20Advance%20Racer%20(Vendor:%20044f%20Product:%20b696)&triggers=opacity&clutchIndex=6&clutchMin=1&clutchMax=-1&brakeIndex=1&brakeMin=1&brakeMax=-1&throttleIndex=5&throttleMin=1&throttleMax=-1&directionIndex=0&directionDegrees=900&type=telemetry
+
+Sample: Xbox Controller
+http://localhost:8081/?gamepad=Microsoft%20Controller%20(STANDARD%20GAMEPAD%20Vendor:%20045e%20Product:%200b00)&triggers=opacity&brakeType=button&brakeIndex=6&brakeMin=0&brakeMax=1&throttleType=button&throttleIndex=7&throttleMin=0&throttleMax=1&directionIndex=0&directionDegrees=180&type=telemetry
diff --git a/templates/debug/template.js b/templates/debug/template.js
index 37d9e26..70a6b75 100644
--- a/templates/debug/template.js
+++ b/templates/debug/template.js
@@ -17,7 +17,7 @@
     $id.html(activeGamepad.id);
     updateTimestamp();
     $index.html(activeGamepad.index);
-    $mapping.html(activeGamepad.mapping);
+    $mapping.html(activeGamepad.mapping || 'N/A');
     $rumble.html(
         activeGamepad.vibrationActuator
             ? activeGamepad.vibrationActuator.type
diff --git a/templates/telemetry/template.css b/templates/telemetry/template.css
new file mode 100644
index 0000000..ae94a73
--- /dev/null
+++ b/templates/telemetry/template.css
@@ -0,0 +1,116 @@
+#gamepad #telemetry {
+    background: var(--main-bg-color);
+    display: flex;
+    width: 650px;
+    height: 120px;
+    border-top-right-radius: 60px;
+    border-bottom-right-radius: 60px;
+
+    --black-color: black;
+    --white-color: white;
+    --grey-color: grey;
+    --main-bg-color: #444;
+    --main-component-color: grey;
+    --meter-idle-color: var(--grey-color);
+    --clutch-color: blue;
+    --brake-color: red;
+    --throttle-color: lime;
+}
+
+#gamepad #telemetry #chart {
+    flex: 1;
+    margin: 4px;
+    background-color: var(--main-component-color);
+    border: 1px solid var(--black-color);
+}
+
+#gamepad #telemetry #meters {
+    display: flex;
+    justify-content: space-around;
+    width: 90px;
+}
+
+#gamepad #telemetry #meters .meter {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    margin: 4px 2px;
+}
+
+#gamepad #telemetry #meters .meter .value {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 10pt;
+    color: var(--white-color);
+}
+
+#gamepad #telemetry #meters .meter .bar {
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+    background-color: var(--main-component-color);
+    border: 1px solid var(--black-color);
+}
+#gamepad #telemetry #meters .meter .bar .filler {
+    width: 100%;
+    height: 0%;
+    transition: height 100ms;
+}
+#gamepad #telemetry #meters #clutch.meter .bar .filler {
+    background-color: var(--clutch-color);
+}
+#gamepad #telemetry #meters #brake.meter .bar .filler {
+    background-color: var(--brake-color);
+}
+#gamepad #telemetry #meters #throttle.meter .bar .filler {
+    background-color: var(--throttle-color);
+}
+
+#gamepad #telemetry #direction {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    border-radius: 50%;
+}
+
+#gamepad #telemetry #direction #wheel {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 90%;
+    height: 90%;
+    border-radius: 50%;
+    background-color: var(--black-color);
+}
+
+#gamepad #telemetry #direction #wheel #wheel--center {
+    display: block;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    border-radius: 50%;
+    background-color: var(--main-bg-color);
+}
+
+#gamepad #telemetry #direction #wheel #wheel--indicator {
+    display: block;
+    width: 7%;
+    height: 50%;
+    background-color: var(--white-color);
+    transform-origin: bottom;
+    transform: rotate(0deg);
+    transition: transform 100ms;
+}
+
+#gamepad #telemetry #direction {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    border-radius: 50%;
+}
diff --git a/templates/telemetry/template.html b/templates/telemetry/template.html
new file mode 100644
index 0000000..1ed9524
--- /dev/null
+++ b/templates/telemetry/template.html
@@ -0,0 +1,32 @@
+<link rel="stylesheet" href="templates/telemetry/template.css">
+<script src="https://www.gstatic.com/charts/loader.js"></script>
+<script src="templates/telemetry/template.js"></script>
+<div id="telemetry">
+	<div id="chart"></div>
+	<div id="meters">
+		<div id="clutch" class="meter">
+			<div class="value">0</div>
+			<div class="bar">
+				<div class="filler"></div>
+			</div>
+		</div>
+		<div id="brake" class="meter">
+			<div class="value">0</div>
+			<div class="bar">
+				<div class="filler"></div>
+			</div>
+		</div>
+		<div id="throttle" class="meter">
+			<div class="value">0</div>
+			<div class="bar">
+				<div class="filler"></div>
+			</div>
+		</div>
+	</div>
+	<div id="direction">
+		<div id="wheel">
+			<div id="wheel--indicator"></div>
+			<div id="wheel--center"></div>
+		</div>
+	</div>
+</div>
diff --git a/templates/telemetry/template.js b/templates/telemetry/template.js
new file mode 100644
index 0000000..67137de
--- /dev/null
+++ b/templates/telemetry/template.js
@@ -0,0 +1,143 @@
+/**
+ * The Telemetry template class
+ *
+ * @class TelemetryTemplate
+ */
+class TelemetryTemplate {
+    /**
+     * Creates an instance of TelemetryTemplate.
+     */
+    constructor() {
+        this.AXES = ['clutch', 'brake', 'throttle', 'direction'];
+
+        this.frequency = 1000 / 60;
+        this.historyLength = 5000;
+        this.length = this.historyLength / this.frequency;
+        this.index = 0;
+
+        this.$clutchValue = document.querySelector('#clutch .value');
+        this.$clutchBar = document.querySelector('#clutch .bar .filler');
+        this.$brakeValue = document.querySelector('#brake .value');
+        this.$brakeBar = document.querySelector('#brake .bar .filler');
+        this.$throttleValue = document.querySelector('#throttle .value');
+        this.$throttleBar = document.querySelector('#throttle .bar .filler');
+        this.$directionIndicator = document.querySelector('#direction #wheel--indicator');
+
+        this.init();
+    }
+
+    toPercentage(value, min, max) {
+        // debugger;
+        return value !== undefined
+            ? Math.round((value - min) * (100 / (max - min)))
+            : 0;
+    }
+
+    toDegrees(value, min, max) {
+        const percentage = this.toPercentage(value, min, max);
+        return (this.directionDegrees) * (percentage - 50) / 100;
+    }
+
+    toAxisValue(gamepad, axis) {
+        const { [`${axis}Type`]: type, [`${axis}Index`]: index, [`${axis}Min`]: min, [`${axis}Max`]: max } = this[axis];
+        const value = type === 'button' ? gamepad.buttons[index].value : gamepad.axes[index];
+        return axis === 'direction' ? this.toDegrees(value, min, max) : this.toPercentage(value, min, max);
+    }
+
+    loadAxes() {
+        this.AXES.forEach((axis) => {
+            this[axis] = {
+                [`${axis}Type`]: (window.gamepad.getUrlParam(`${axis}Type`) || 'axis').replace('axis', 'axe'),
+                [`${axis}Index`]: window.gamepad.getUrlParam(`${axis}Index`),
+                [`${axis}Min`]: window.gamepad.getUrlParam(`${axis}Min`) || -1,
+                [`${axis}Max`]: window.gamepad.getUrlParam(`${axis}Max`) || 1,
+            }
+        });
+        this.directionDegrees = window.gamepad.getUrlParam('directionDegrees') || 360;
+    }
+
+    init() {
+        this.loadAxes();
+
+        if (!window.google) {
+            window.setTimeout(this.init.bind(this), 100);
+            return;
+        }
+
+        google.charts.load('current', {
+            packages: ['corechart', 'line'],
+        });
+        google.charts.setOnLoadCallback(this.drawChart.bind(this));
+    }
+
+    drawChart() {
+        this.initialData = [['Time', 'Clutch', 'Brake', 'Throttle']];
+        for (this.index = 0; this.index < this.length; this.index++) {
+            this.initialData.push([this.index, 0, 0, 0]);
+        }
+        this.data = google.visualization.arrayToDataTable(this.initialData);
+        this.options = {
+            backgroundColor: 'transparent',
+            chartArea: {
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'transparent',
+            },
+            hAxis: {
+                textPosition: 'none',
+                gridlines: {
+                    color: 'transparent',
+                }
+            },
+            vAxis: {
+                textPosition: 'none',
+                gridlines: {
+                    color: 'transparent',
+                },
+                minValue: 0,
+                maxValue: 100,
+            },
+            colors: ['blue', 'red', 'lime'],
+            legend: 'none'
+        };
+        this.chart = new google.visualization.LineChart(document.querySelector('#chart'));
+        this.chart.draw(this.data, this.options);
+
+        this.update();
+    }
+
+    update() {
+        const gamepad = window.gamepad.getActive();
+        if (!gamepad) return;
+
+        const [clutch, brake, throttle, direction] = this.AXES.map((axis) => this.toAxisValue(gamepad, axis));
+
+        this.updateChart(clutch, brake, throttle);
+        this.updateMeters(clutch, brake, throttle, direction);
+        window.setTimeout(this.update.bind(this), this.frequency);
+    }
+
+    updateChart(clutch, brake, throttle) {
+        if (this.data.getNumberOfRows() > this.length) {
+            this.data.removeRows(0, this.data.getNumberOfRows() - this.length);
+        }
+        this.data.addRow([this.index, clutch, brake, throttle]);
+        this.chart.draw(this.data, this.options);
+        this.index++;
+    }
+
+    updateMeters(clutch, brake, throttle, direction) {
+        Object.entries({ clutch, brake, throttle, direction }).forEach(([axis, value]) => {
+            if (axis === 'direction') {
+                this.$directionIndicator.style.transform = `rotate(${value}deg)`;
+                return;
+            }
+            this[`$${axis}Value`].innerHTML = value;
+            this[`$${axis}Bar`].style.height = `${value}%`;
+        });
+    };
+}
+
+window.telemetryTemplate = new TelemetryTemplate();