-
+ axis.innerHTML = `
+
+
+
+
`;
- axesContainer.appendChild(colDiv);
+ axesContainer.appendChild(axis);
}
}
// Update gamepad status message
- function updateStatus(message) {
- gamepadStatus.textContent = message;
-
- // Update classes based on if we have a gamepad
- if (Object.keys(gamepads).length > 0) {
- gamepadStatus.classList.remove('alert-warning', 'alert-danger');
- gamepadStatus.classList.add('alert-success');
- } else {
- gamepadStatus.classList.remove('alert-success', 'alert-danger');
- gamepadStatus.classList.add('alert-warning');
- }
+ function updateStatus(message, status) {
+ const resolvedStatus = status || (Object.keys(gamepads).length > 0 ? 'success' : 'warning');
+ gamepadStatusMessage.textContent = message;
+ gamepadStatus.classList.remove('alert-success', 'alert-warning', 'alert-danger');
+ gamepadStatus.classList.add(`alert-${resolvedStatus}`);
}
// Update the gamepad info function to include vibration status
@@ -561,7 +539,15 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Show information about the actuator type
- vibrationStatus.innerHTML = `
Supported Actuator type:
${vibrationCapabilities.type}`;
+ const capabilityBadge = document.createElement('span');
+ capabilityBadge.className = 'gamepad-capability-badge';
+ capabilityBadge.textContent = 'Vibration supported';
+
+ const capabilityType = document.createElement('span');
+ capabilityType.className = 'gamepad-capability-type';
+ capabilityType.textContent = vibrationCapabilities.type;
+
+ vibrationStatus.replaceChildren(capabilityBadge, capabilityType);
vibrationButtons.classList.remove('d-none');
// Show appropriate controls based on an actuator type
@@ -590,6 +576,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Update the value display
buttonValueElement.textContent = value.toFixed(2);
+ buttonElement.setAttribute('aria-valuenow', value.toFixed(2));
// Calculate rotation degrees based on value (0 to 1)
// For a full circle: right part goes from 0 to 180 degrees, left part from 0 to 180 degrees
@@ -655,26 +642,27 @@ document.addEventListener('DOMContentLoaded', function() {
const axisValue = gamepad.axes[i];
const axisValueElement = document.getElementById(`axis-value-${i}`);
const axisProgressElement = document.getElementById(`axis-progress-${i}`);
+ const axisMeterElement = document.getElementById(`axis-meter-${i}`);
- if (axisValueElement && axisProgressElement) {
+ if (axisValueElement && axisProgressElement && axisMeterElement) {
// Display the value
axisValueElement.textContent = axisValue.toFixed(2);
+ axisMeterElement.setAttribute('aria-valuenow', axisValue.toFixed(2));
- // Update the progress bar
- // Convert -1 to 1 to 0 to 100 for the progress bar
- const progressWidth = ((axisValue + 1) / 2) * 100;
+ // Fill away from the zero marker in the direction of travel.
+ const progressWidth = Math.abs(axisValue) * 50;
+ axisProgressElement.style.left = axisValue < 0 ? `${50 - progressWidth}%` : '50%';
axisProgressElement.style.width = `${progressWidth}%`;
// Change color based on the direction
if (axisValue > 0.1) {
- axisProgressElement.classList.remove('bg-info', 'bg-danger');
- axisProgressElement.classList.add('bg-success');
+ axisProgressElement.classList.remove('is-negative');
+ axisProgressElement.classList.add('is-positive');
} else if (axisValue < -0.1) {
- axisProgressElement.classList.remove('bg-info', 'bg-success');
- axisProgressElement.classList.add('bg-danger');
+ axisProgressElement.classList.remove('is-positive');
+ axisProgressElement.classList.add('is-negative');
} else {
- axisProgressElement.classList.remove('bg-success', 'bg-danger');
- axisProgressElement.classList.add('bg-info');
+ axisProgressElement.classList.remove('is-positive', 'is-negative');
}
}
}
@@ -689,9 +677,9 @@ document.addEventListener('DOMContentLoaded', function() {
const rightStick = document.getElementById('right-stick-position');
if (gamepad.axes.length >= 2 && leftStick) {
- // Convert -1 to 1 values to pixel positions
- const x = gamepad.axes[0] * 60; // Scale factor to fit within the circle
- const y = gamepad.axes[1] * 60;
+ const range = (leftStick.parentElement.clientWidth / 2) - (leftStick.clientWidth / 2) - 2;
+ const x = gamepad.axes[0] * range;
+ const y = gamepad.axes[1] * range;
// Center position is 50%, then offset by the calculated amounts
leftStick.style.left = `calc(50% + ${x}px)`;
@@ -699,8 +687,9 @@ document.addEventListener('DOMContentLoaded', function() {
}
if (gamepad.axes.length >= 4 && rightStick) {
- const x = gamepad.axes[2] * 60;
- const y = gamepad.axes[3] * 60;
+ const range = (rightStick.parentElement.clientWidth / 2) - (rightStick.clientWidth / 2) - 2;
+ const x = gamepad.axes[2] * range;
+ const y = gamepad.axes[3] * range;
rightStick.style.left = `calc(50% + ${x}px)`;
rightStick.style.top = `calc(50% + ${y}px)`;
diff --git a/gamepad-tester.html b/gamepad-tester.html
index de4ed9d7..f137ed11 100644
--- a/gamepad-tester.html
+++ b/gamepad-tester.html
@@ -4,6 +4,7 @@
full-width: true
css:
- /assets/css/hide-heading.css
+ - /assets/css/gamepad-tester.css
ext-js:
- href: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.min.js"
sri: "sha512-Y51n9mtKTVBh3Jbx5pZSJNDDMyY+yGe77DGtBPzRlgsf/YLCh13kSZ3JmfHGzYFCmOndraf0sQgfM654b7dJ3w=="
@@ -16,177 +17,197 @@
-
-
-
-
-
Gamepad Tester
-
Connect a controller to test its inputs and functionality
-
No gamepad detected. Connect a gamepad and press any button.
+
+
+
+ Gamepad Tester
+ Check buttons, sticks, triggers, axes, and vibration in real time.
+
+
+
+ Input data stays in your browser.
+
+
-
-
-
+
+
+
+ Devices
+
Connected controllers
+
+
Choose a controller to inspect
+
+
-