Gromina · November 1, 2023 08:22
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!-->
 <html class="no-js"> <!--<![endif]-->

 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <style>
        h2 {
            background-color: lightgray;
            font-family: monospace;
            font-size: 44pt;
        }

        .valid {
            background-color: lightgreen;
        }
    </style>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.min.css" rel="stylesheet">
 </head>

 <body>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

            const haveEvents = "ongamepadconnected" in window;
            const controllers = {};

            function connecthandler(e) {
                addgamepad(e.gamepad);
            }

            function addgamepad(gamepad) {
                controllers[gamepad.index] = gamepad;

                const d = document.createElement("div");
                d.setAttribute("id", `controller${gamepad.index}`);

                const t = document.createElement("h1");
                t.textContent = `gamepad: ${gamepad.id}`;
                d.appendChild(t);

                const w = document.createElement("h2");
                w.textContent = `weight: ?`;
                w.className = "weight";
                d.appendChild(w);

                const b = document.createElement("ul");
                b.className = "buttons";
                gamepad.buttons.forEach((button, i) => {
                    const e = document.createElement("li");
                    e.className = "button";
                    e.textContent = `Button ${i}`;
                    b.appendChild(e);
                });

                d.appendChild(b);

                const a = document.createElement("div");
                a.className = "axes";

                gamepad.axes.forEach((axis, i) => {
                    const p = document.createElement("progress");
                    p.className = "axis";
                    p.setAttribute("max", "2");
                    p.setAttribute("value", "1");
                    p.textContent = i;
                    a.appendChild(p);
                    const b = document.createElement("br");
                    a.appendChild(b);

                });

                d.appendChild(a);

                const 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) {
                const d = document.getElementById(`controller${gamepad.index}`);
                document.body.removeChild(d);
                delete controllers[gamepad.index];
            }

            function updateStatus() {
                if (!haveEvents) {
                    scangamepads();
                }

                Object.entries(controllers).forEach(([i, controller]) => {
                    const d = document.getElementById(`controller${i}`);
                    const buttons = d.getElementsByClassName("button");

                    const weight = d.getElementsByClassName("weight")[0];

                    var summ = 0;
                    var valid = (controller.buttons.length >= 1 && controller.buttons[0].pressed) ? true : false;

                    for (i = 0; i < 16; i++) {
                        summ <<= 1;
                        summ |= (controller.buttons.length >= i + 2 && controller.buttons[i + 2].pressed) ? 1 : 0;
                    }
                    weight.innerText = "Вес: " + summ + " г  ( " + (valid ? "valid" : "not valid") + " )";
                    weight.className = valid ? "weight valid" : "weight";

                    controller.buttons.forEach((button, i) => {
                        const b = buttons[i];
                        let pressed = button === 1.0;
                        let val = button;

                        if (typeof button === "object") {
                            pressed = val.pressed;
                            val = val.value;
                        }

                        const pct = `${Math.round(val * 100)}%`;
                        b.style.backgroundSize = `${pct} ${pct}`;
                        b.textContent = pressed ? `Button ${i} [PRESSED]` : `Button ${i}`;
                        b.style.color = pressed ? "#42f593" : "#2e2d33";
                        b.className = pressed ? "button pressed" : "button";
                    });
                    const axes = d.getElementsByClassName("axis");
                    controller.axes.forEach((axis, i) => {
                        const a = axes[i];
                        a.textContent = `${i}: ${axis.toFixed(4)}`;
                        a.setAttribute("value", axis + 1);
                    });
                });

                requestAnimationFrame(updateStatus);
            }

            function scangamepads() {
                const gamepads = navigator.getGamepads();
                document.querySelector("#noDevices").style.display = gamepads.filter(Boolean)
                    .length
                    ? "none"
                    : "block";
                for (const gamepad of gamepads) {
                    if (gamepad) {
                        // Can be null if disconnected during the session
                        if (gamepad.index in controllers) {
                            controllers[gamepad.index] = gamepad;
                        } else {
                            addgamepad(gamepad);
                        }
                    }
                }
            }

            window.addEventListener("gamepadconnected", connecthandler);
            window.addEventListener("gamepaddisconnected", disconnecthandler);

            if (!haveEvents) {
                setInterval(scangamepads, 500);
            }

        });

    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!-->
	<html class="no-js"> <!--<![endif]-->

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<style>
	h2 {
	background-color: lightgray;
	font-family: monospace;
	font-size: 44pt;
	}

	.valid {
	background-color: lightgreen;
	}
	</style>

	<link href="https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.min.css" rel="stylesheet">
	</head>

	<body>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script>
	$(document).ready(function () {

	const haveEvents = "ongamepadconnected" in window;
	const controllers = {};

	function connecthandler(e) {
	addgamepad(e.gamepad);
	}

	function addgamepad(gamepad) {
	controllers[gamepad.index] = gamepad;

	const d = document.createElement("div");
	d.setAttribute("id", `controller${gamepad.index}`);

	const t = document.createElement("h1");
	t.textContent = `gamepad: ${gamepad.id}`;
	d.appendChild(t);

	const w = document.createElement("h2");
	w.textContent = `weight: ?`;
	w.className = "weight";
	d.appendChild(w);

	const b = document.createElement("ul");
	b.className = "buttons";
	gamepad.buttons.forEach((button, i) => {
	const e = document.createElement("li");
	e.className = "button";
	e.textContent = `Button ${i}`;
	b.appendChild(e);
	});

	d.appendChild(b);

	const a = document.createElement("div");
	a.className = "axes";

	gamepad.axes.forEach((axis, i) => {
	const p = document.createElement("progress");
	p.className = "axis";
	p.setAttribute("max", "2");
	p.setAttribute("value", "1");
	p.textContent = i;
	a.appendChild(p);
	const b = document.createElement("br");
	a.appendChild(b);

	});

	d.appendChild(a);

	const 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) {
	const d = document.getElementById(`controller${gamepad.index}`);
	document.body.removeChild(d);
	delete controllers[gamepad.index];
	}

	function updateStatus() {
	if (!haveEvents) {
	scangamepads();
	}

	Object.entries(controllers).forEach(([i, controller]) => {
	const d = document.getElementById(`controller${i}`);
	const buttons = d.getElementsByClassName("button");

	const weight = d.getElementsByClassName("weight")[0];

	var summ = 0;
	var valid = (controller.buttons.length >= 1 && controller.buttons[0].pressed) ? true : false;

	for (i = 0; i < 16; i++) {
	summ <<= 1;
	summ \|= (controller.buttons.length >= i + 2 && controller.buttons[i + 2].pressed) ? 1 : 0;
	}
	weight.innerText = "Вес: " + summ + " г ( " + (valid ? "valid" : "not valid") + " )";
	weight.className = valid ? "weight valid" : "weight";

	controller.buttons.forEach((button, i) => {
	const b = buttons[i];
	let pressed = button === 1.0;
	let val = button;

	if (typeof button === "object") {
	pressed = val.pressed;
	val = val.value;
	}

	const pct = `${Math.round(val * 100)}%`;
	b.style.backgroundSize = `${pct} ${pct}`;
	b.textContent = pressed ? `Button ${i} [PRESSED]` : `Button ${i}`;
	b.style.color = pressed ? "#42f593" : "#2e2d33";
	b.className = pressed ? "button pressed" : "button";
	});
	const axes = d.getElementsByClassName("axis");
	controller.axes.forEach((axis, i) => {
	const a = axes[i];
	a.textContent = `${i}: ${axis.toFixed(4)}`;
	a.setAttribute("value", axis + 1);
	});
	});

	requestAnimationFrame(updateStatus);
	}

	function scangamepads() {
	const gamepads = navigator.getGamepads();
	document.querySelector("#noDevices").style.display = gamepads.filter(Boolean)
	.length
	? "none"
	: "block";
	for (const gamepad of gamepads) {
	if (gamepad) {
	// Can be null if disconnected during the session
	if (gamepad.index in controllers) {
	controllers[gamepad.index] = gamepad;
	} else {
	addgamepad(gamepad);
	}
	}
	}
	}

	window.addEventListener("gamepadconnected", connecthandler);
	window.addEventListener("gamepaddisconnected", disconnecthandler);

	if (!haveEvents) {
	setInterval(scangamepads, 500);
	}

	});

	</script>
	</body>

	</html>