mouse-polling-rate-checker

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        .test-area {
            width: 100%;
            height: 300px;
            background: #f0f0f0;
            border: 2px solid #333;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: default;
            user-select: none;
        }
        .results {
            margin: 20px 0;
            padding: 15px;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .start-btn {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .start-btn:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Mouse Polling Rate Checker</h1>
        <p>Move your mouse inside the test area to measure your mouse's polling rate.</p>
        <button class="start-btn" onclick="startTest()">Start Test</button>
        <div class="test-area" id="testArea">
            Click Start Test and move your mouse here
        </div>
        <div class="results">
            <h3>Results:</h3>
            <p>Current Polling Rate: <span id="currentRate">0</span> Hz</p>
            <p>Average Polling Rate: <span id="averageRate">0</span> Hz</p>
            <p>Samples Collected: <span id="samples">0</span></p>
            <p>Time Elapsed: <span id="timeElapsed">0</span> seconds</p>
        </div>
    </div>

    <script>
        let isTracking = false;
        let startTime = 0;
        let samples = 0;
        let lastTime = 0;
        let intervals = [];
        let testArea = document.getElementById('testArea');
        
        function startTest() {
            // Reset values
            isTracking = true;
            samples = 0;
            intervals = [];
            startTime = performance.now();
            lastTime = startTime;
            
            // Update UI
            document.getElementById('samples').textContent = '0';
            document.getElementById('currentRate').textContent = '0';
            document.getElementById('averageRate').textContent = '0';
            document.getElementById('timeElapsed').textContent = '0';
            testArea.textContent = 'Move your mouse here';
            
            // Start update loop
            requestAnimationFrame(updateStats);
        }

        testArea.addEventListener('mousemove', function(e) {
            if (!isTracking) return;
            
            const currentTime = performance.now();
            const interval = currentTime - lastTime;
            
            if (interval > 0) {  // Avoid division by zero
                intervals.push(interval);
                samples++;
                lastTime = currentTime;
                
                // Keep only last 100 samples for current rate
                if (intervals.length > 100) {
                    intervals.shift();
                }
            }
        });

        function updateStats() {
            if (!isTracking) return;
            
            const currentTime = performance.now();
            const elapsedSeconds = (currentTime - startTime) / 1000;
            
            // Calculate current polling rate (last 100 samples)
            let currentRate = 0;
            if (intervals.length > 0) {
                const avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
                currentRate = Math.round(1000 / avgInterval);
            }
            
            // Calculate average polling rate
            const averageRate = Math.round(samples / elapsedSeconds);
            
            // Update display
            document.getElementById('currentRate').textContent = currentRate;
            document.getElementById('averageRate').textContent = averageRate;
            document.getElementById('samples').textContent = samples;
            document.getElementById('timeElapsed').textContent = elapsedSeconds.toFixed(1);
            
            // Stop test after 10 seconds
            if (elapsedSeconds >= 10) {
                isTracking = false;
                testArea.textContent = 'Test completed. Click Start Test to try again.';
                return;
            }
            
            requestAnimationFrame(updateStats);
        }
    </script>
</body>
</html>