54 lines
2.1 KiB
HTML
54 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mouse Speedometer</title>
|
|
<style>
|
|
body { background: #f4f4f4; font-family: Arial, sans-serif; }
|
|
.container { max-width: 400px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 32px; }
|
|
#speedometer { display: block; margin: 0 auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h2>Mouse Speedometer</h2>
|
|
<div id="speedometer">
|
|
<!-- Inline SVG for speedometer -->
|
|
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
|
<image href="Speed.png" x="0" y="0" width="300" height="200"/>
|
|
<line id="needle" x1="150" y1="120" x2="150" y2="70" stroke="#e74c3c" stroke-width="6" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
<div style="text-align:center; margin-top:20px;">
|
|
<button onclick="setSpeed(0)">0</button>
|
|
<button onclick="setSpeed(100)">100</button>
|
|
<button onclick="setSpeed(200)">200</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
/**
|
|
* Speed is expected to be in the range 0-200. This function maps it to an angle for the needle.
|
|
* at 100Kmh, needle is vertical, it's length is 50px, and it rotates from -120deg (0 speed) to +120deg (max speed).
|
|
* At speed=100, x2=150, y2=70
|
|
*/
|
|
function setSpeed(speed)
|
|
{
|
|
// Clamp speed
|
|
speed = Math.max(0, Math.min(200, speed));
|
|
// Map speed to angle: 0 = -120deg, 100 = 0deg, 200 = +120deg
|
|
var angle = -120 + (speed / 200) * 240;
|
|
var rad = angle * Math.PI / 180;
|
|
var r = 50; // needle length
|
|
var cx = 150, cy = 120;
|
|
var x2 = cx + r * Math.sin(rad); // Use sin for x, cos for y to match SVG coordinate system
|
|
var y2 = cy - r * Math.cos(rad);
|
|
document.getElementById('needle').setAttribute('x2', x2);
|
|
document.getElementById('needle').setAttribute('y2', y2);
|
|
}
|
|
// Example: set speed to 0 initially
|
|
setSpeed(20);
|
|
</script>
|
|
</body>
|
|
</html>
|