gpcon.js
/**
	 * Update the UI components based on gamepad values
	 */
Update the UI components based on gamepad values
Update the UI components based on gamepad values
function updateUI() {
		let gamepads = navigator.getGamepads();
		let mode = qs("#mode-select").value; 
		for (let i = 0; i < gamepads.length; i++) {
			let gp = gamepads[i];
			let j;
			if (!gp || !gp.connected) { continue; }
			let gpElem = qs("#gamepad-" + i);
			let buttonBox = qs(".gamepad-buttons-box", gpElem);
			for (j = 0; j < gp.buttons.length; j++) {
				let buttonElem = qs("#gamepad-" + i + "-button-" + j, buttonBox)
				let button = gp.buttons[j];
				buttonElem.innerHTML = button.value;
				if (button.pressed) {
					buttonElem.classList.add("pressed");
				} else {
					buttonElem.classList.remove("pressed");
				}
			}
			let axesBox = qs(".gamepad-axes-box", gpElem);
			let axesBoxCount = ((gp.axes.length + 1) / 2)|0; 
			for (j = 0; j < axesBoxCount; j++) {
				let axisPairContainer = qs("#gamepad-" + i + "-axis-pair-container-" + j, axesBox);
				let axisPairValue = qs(".gamepad-axis-pair-value", axisPairContainer);
				let axisPip = qs(".gamepad-axis-pip", axisPairContainer);
				let axisCross = qs(".gamepad-axis-crosshair", axisPairContainer);
				let valueX, valueY, valueStr;
				let deadzoneActive = qs("#deadzone").checked;
				valueX = gp.axes[j*2];
				if (deadzoneActive) {
					valueX = gpLib.deadzone(valueX);
				}
				valueStr = valueX.toFixed(2);
				axisCross.style.left = (valueX + 1) / 2 * 100 + '%';
				axisPip.style.left = axisCross.style.left;
				if (!(j == axesBoxCount - 1 && gp.axes.length % 2 == 1)) {
					valueY = gp.axes[j*2+1];
					if (deadzoneActive) {
						valueY = gpLib.deadzone(valueY);
					}
					valueStr += ',' + valueY.toFixed(2);
					axisCross.style.left = (valueX + 1) / 2 * 100 + '%';
					axisCross.style.top = (valueY + 1) / 2 * 100 + '%';
					let clampCircle = qs(".gamepad-circle", axisPairContainer);
					if (mode == 'clamp') {
						let clampX, clampY;
						[clampX, clampY] = gpLib.clamp(valueX, valueY, mode);
						axisPip.style.left = (clampX + 1) / 2 * 100 + '%';
						axisPip.style.top = (clampY + 1) / 2 * 100 + '%';
						clampCircle.classList.remove("nodisp");
						valueStr = clampX.toFixed(2) + ',' + clampY.toFixed(2);
					} else {
						axisPip.style.left = axisCross.style.left;
						axisPip.style.top = axisCross.style.top;
						clampCircle.classList.add("nodisp");
					}
				}
				axisPairValue.innerHTML = valueStr;
			}
		}
	 }
function updateUI ( ) { let gamepads = navigator . getGamepads ( ) ; let mode = qs ( "#mode-select" ) . value ; for ( let i = 0 ; i < gamepads . length ; i ++ ) { let gp = gamepads [ i ] ; let j ; if ( ! gp || ! gp . connected ) { continue ; } let gpElem = qs ( "#gamepad-" + i ) ; let buttonBox = qs ( ".gamepad-buttons-box" , gpElem ) ; for ( j = 0 ; j < gp . buttons . length ; j ++ ) { let buttonElem = qs ( "#gamepad-" + i + "-button-" + j , buttonBox ) let button = gp . buttons [ j ] ; buttonElem . innerHTML = button . value ; if ( button . pressed ) { buttonElem . classList . add ( "pressed" ) ; } else { buttonElem . classList . remove ( "pressed" ) ; } } let axesBox = qs ( ".gamepad-axes-box" , gpElem ) ; let axesBoxCount = ( ( gp . axes . length + 1 ) / 2 ) | 0 ; for ( j = 0 ; j < axesBoxCount ; j ++ ) { let axisPairContainer = qs ( "#gamepad-" + i + "-axis-pair-container-" + j , axesBox ) ; let axisPairValue = qs ( ".gamepad-axis-pair-value" , axisPairContainer ) ; let axisPip = qs ( ".gamepad-axis-pip" , axisPairContainer ) ; let axisCross = qs ( ".gamepad-axis-crosshair" , axisPairContainer ) ; let valueX , valueY , valueStr ; let deadzoneActive = qs ( "#deadzone" ) . checked ; valueX = gp . axes [ j * 2 ] ; if ( deadzoneActive ) { valueX = gpLib . deadzone ( valueX ) ; } valueStr = valueX . toFixed ( 2 ) ; axisCross . style . left = ( valueX + 1 ) / 2 * 100 + '%' ; axisPip . style . left = axisCross . style . left ; if ( ! ( j == axesBoxCount - 1 && gp . axes . length % 2 == 1 ) ) { valueY = gp . axes [ j * 2 + 1 ] ; if ( deadzoneActive ) { valueY = gpLib . deadzone ( valueY ) ; } valueStr += ',' + valueY . toFixed ( 2 ) ; axisCross . style . left = ( valueX + 1 ) / 2 * 100 + '%' ; axisCross . style . top = ( valueY + 1 ) / 2 * 100 + '%' ; let clampCircle = qs ( ".gamepad-circle" , axisPairContainer ) ; if ( mode == 'clamp' ) { let clampX , clampY ; [ clampX , clampY ] = gpLib . clamp ( valueX , valueY , mode ) ; axisPip . style . left = ( clampX + 1 ) / 2 * 100 + '%' ; axisPip . style . top = ( clampY + 1 ) / 2 * 100 + '%' ; clampCircle . classList . remove ( "nodisp" ) ; valueStr = clampX . toFixed ( 2 ) + ',' + clampY . toFixed ( 2 ) ; } else { axisPip . style . left = axisCross . style . left ; axisPip . style . top = axisCross . style . top ; clampCircle . classList . add ( "nodisp" ) ; } } axisPairValue . innerHTML = valueStr ; } } }
Update the UI components based on gamepad values
Update the UI components based on gamepad values
// raw, norm, clamp // For each controller, show all the button and axis information // Show button values // Put the value in there // Change color if pressed or not // Show axis values // Round up (e.g. 3 axes is 2 boxes) // Set the value label // Position the raw indicator // Position the pip over the raw indicator for now // If we're not a single axis in the last box, show the second axis in this box. // This handles a last box with a single axis (odd number of axes total). // Set the value label // Position the raw indicator // Position the pip, clamping if necessary // Clamp // Overwrite the value string with clamped values // Raw