sfgarza/joystick-example.html

## joystick-example.html
<html>

<head>
    <style>
        .joy-div {
            position: relative;
            height: 157px;
            width: 157px;
            display: inline-block;
            border-width: 10px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0);
            border-image: initial;
        }

        .x-axis {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 50%;
            height: 1px;
            opacity: 0.2;
            background: black;
        }

        .y-axis {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 50%;
            width: 1px;
            opacity: 0.2;
            background: black;
        }

        .circle-outline {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            opacity: 0.2;
            border-radius: 50%;
            border-width: 1px;
            border-style: solid;
            border-color: black;
            border-image: initial;
        }

        .joystick-position {
            position: absolute;
            width: 15px;
            height: 15px;
            transform: translateX(-50%) translateY(-50%);
            border-radius: 50%;
            background: black;
        }
    </style>
    <script>
        /**
         * Mapping function used to translate the joystick values read from the gamepad
         * to its corresponding percentage value to be used to displayits position in CSS
         **/
        function joymap(x, in_min, in_max, out_min, out_max) {
            return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
        }

        // Event Listener to check when a gamepad has been connected.
        window.addEventListener("gamepadconnected", (event) => {
            console.log("A gamepad connected:");
            console.log(event.gamepad);
            let interval;
            if (!interval)
                interval = setInterval(pollGamepads, 100);
        });

        // Event Listener to check when a gamepad has been disconnected.
        window.addEventListener("gamepaddisconnected", (event) => {
            //clearInterval(interval);
            console.log("A gamepad disconnected:");
            console.log(event.gamepad);
        });


        function pollGamepads() {
            try {
                const gp = window.navigator.getGamepads()[0];

                for (let i = 0; i < gp.buttons.length; i++) {
                    if (gp.buttons[i].pressed) {
                        console.log(`Button ${[i]} was pressed`);
                    }
                }

                var joy1 = document.querySelector('#joy1');
                var joy2 = document.querySelector('#joy2');

                // Set color to purple
                joytop1 = joymap(gp.axes[1], -1, 1, 0, 100);
                joy1.style.top = `${joytop1}%`;

                // Set the background color to a light gray
                joyleft1 = joymap(gp.axes[0], -1, 1, 0, 100);
                joy1.style.left = `${joyleft1}%`;

                // Set color to purple
                joytop2 = joymap(gp.axes[3], -1, 1, 0, 100);
                joy2.style.top = `${joytop2}%`;

                // Set the background color to a light gray
                joyleft2 = joymap(gp.axes[2], -1, 1, 0, 100);
                joy2.style.left = `${joyleft2}%`;


            } catch (e) {
                console.log(e);
                clearInterval(interval);
            }

        }
    </script>
</head>

<body>
    <div>
        <div class="joy-div">
            <div class="x-axis"></div>
            <div class="y-axis"></div>
            <div class="circle-outline"></div>
            <div id="joy1" class="joystick-position" style="top: 50%; left: 50%;"></div>
        </div>
        <div class="joy-div">
            <div class="x-axis"></div>
            <div class="y-axis"></div>
            <div class="circle-outline"></div>
            <div id="joy2" class="joystick-position" style="top: 50%; left: 50%;"></div>
        </div>
    </div>
</body>

</html>
	<html>

	<head>
	<style>
	.joy-div {
	position: relative;
	height: 157px;
	width: 157px;
	display: inline-block;
	border-width: 10px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0);
	border-image: initial;
	}

	.x-axis {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 50%;
	height: 1px;
	opacity: 0.2;
	background: black;
	}

	.y-axis {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 50%;
	width: 1px;
	opacity: 0.2;
	background: black;
	}

	.circle-outline {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	opacity: 0.2;
	border-radius: 50%;
	border-width: 1px;
	border-style: solid;
	border-color: black;
	border-image: initial;
	}

	.joystick-position {
	position: absolute;
	width: 15px;
	height: 15px;
	transform: translateX(-50%) translateY(-50%);
	border-radius: 50%;
	background: black;
	}
	</style>
	<script>
	/**
	* Mapping function used to translate the joystick values read from the gamepad
	* to its corresponding percentage value to be used to displayits position in CSS
	**/
	function joymap(x, in_min, in_max, out_min, out_max) {
	return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
	}

	// Event Listener to check when a gamepad has been connected.
	window.addEventListener("gamepadconnected", (event) => {
	console.log("A gamepad connected:");
	console.log(event.gamepad);
	let interval;
	if (!interval)
	interval = setInterval(pollGamepads, 100);
	});

	// Event Listener to check when a gamepad has been disconnected.
	window.addEventListener("gamepaddisconnected", (event) => {
	//clearInterval(interval);
	console.log("A gamepad disconnected:");
	console.log(event.gamepad);
	});


	function pollGamepads() {
	try {
	const gp = window.navigator.getGamepads()[0];

	for (let i = 0; i < gp.buttons.length; i++) {
	if (gp.buttons[i].pressed) {
	console.log(`Button ${[i]} was pressed`);
	}
	}

	var joy1 = document.querySelector('#joy1');
	var joy2 = document.querySelector('#joy2');

	// Set color to purple
	joytop1 = joymap(gp.axes[1], -1, 1, 0, 100);
	joy1.style.top = `${joytop1}%`;

	// Set the background color to a light gray
	joyleft1 = joymap(gp.axes[0], -1, 1, 0, 100);
	joy1.style.left = `${joyleft1}%`;

	// Set color to purple
	joytop2 = joymap(gp.axes[3], -1, 1, 0, 100);
	joy2.style.top = `${joytop2}%`;

	// Set the background color to a light gray
	joyleft2 = joymap(gp.axes[2], -1, 1, 0, 100);
	joy2.style.left = `${joyleft2}%`;


	} catch (e) {
	console.log(e);
	clearInterval(interval);
	}

	}
	</script>
	</head>

	<body>
	<div>
	<div class="joy-div">
	<div class="x-axis"></div>
	<div class="y-axis"></div>
	<div class="circle-outline"></div>
	<div id="joy1" class="joystick-position" style="top: 50%; left: 50%;"></div>
	</div>
	<div class="joy-div">
	<div class="x-axis"></div>
	<div class="y-axis"></div>
	<div class="circle-outline"></div>
	<div id="joy2" class="joystick-position" style="top: 50%; left: 50%;"></div>
	</div>
	</div>
	</body>

	</html>