jonready.github.io/speedo.html at master · jonready/jonready.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speedometer</title>
    <style>
        /* Full-screen container for the speedometer */
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            background: #282c34;
            color: white;
            font-family: Arial, sans-serif;
        }

        /* Speedometer canvas */
        #speedometer {
            width: 80vw; /* Dynamic width for responsive design */
            height: 80vw; /* Maintain aspect ratio */
        }

        /* Speed display */
        .speed {
            position: absolute;
            font-size: 3rem;
            color: white;
        }

        /* Toggle button */
        .toggle {
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #61dafb;
            border: none;
            border-radius: 5px;
            color: #282c34;
            font-size: 1rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="speedometer"></canvas>
    <div class="speed" id="speed">0 km/h</div>
    <button class="toggle" id="unitToggle">Switch to mph</button>

    <script>
        // Initialize variables
        let lastSpeed = 0;
        let useKmH = true;
        const maxSpeed = 360; // Maximum speed on the speedometer
        const smoothingFactor = 0.2; // Adjust this for animation smoothness
        const canvas = document.getElementById('speedometer');
        const ctx = canvas.getContext('2d');
        const speedDisplay = document.getElementById('speed');

        // Resize the canvas to be responsive
        function resizeCanvas() {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            drawSpeedometer(lastSpeed); // Redraw on resize
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas(); // Initial size

        // Function to draw the speedometer
        function drawSpeedometer(speed) {
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = Math.min(centerX, centerY) - 20;

            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw the fixed outer circle
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.lineWidth = 20;
            ctx.strokeStyle = '#444'; // Fixed outer color
            ctx.stroke();

            // Calculate the arc end angle
            const endAngle = (Math.min(speed, maxSpeed) / maxSpeed) * 2 * Math.PI;

            // Determine color based on speed
            let color;
            if (speed < maxSpeed / 3) {
                color = 'green';
            } else if (speed < (2 * maxSpeed) / 3) {
                color = 'yellow';
            } else {
                color = 'red';
            }

            // Draw the speed arc (starts at the bottom)
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0.5 * Math.PI, 0.5 * Math.PI + endAngle);
            ctx.lineWidth = 20;
            ctx.strokeStyle = color;
            ctx.stroke();

            // Update speed text position
            speedDisplay.style.left = `${centerX + canvas.offsetLeft - speedDisplay.clientWidth / 2}px`;
            speedDisplay.style.top = `${centerY + canvas.offsetTop - speedDisplay.clientHeight / 2}px`;

            // Update speed text
            speedDisplay.textContent = `${speed.toFixed(1)} ${useKmH ? 'km/h' : 'mph'}`;
        }

        // Function to update speed
        function updateSpeed(position) {
            const speed = position.coords.speed; // Speed in meters per second
            let speedConverted;
            if (useKmH) {
                speedConverted = speed * 3.6; // Convert to km/h
            } else {
                speedConverted = speed * 2.237; // Convert to mph
            }

            // Apply smoothing
            lastSpeed = lastSpeed + (speedConverted - lastSpeed) * smoothingFactor;
            drawSpeedometer(lastSpeed);
        }

        // Function to handle errors
        function showError(error) {
            console.error(error);
            alert("Unable to retrieve speed. Please ensure location services are enabled.");
        }

        // Toggle between km/h and mph
        document.getElementById('unitToggle').addEventListener('click', () => {
            useKmH = !useKmH;
            const buttonText = useKmH ? 'Switch to mph' : 'Switch to km/h';
            document.getElementById('unitToggle').textContent = buttonText;
        });

        // Initialize geolocation
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(updateSpeed, showError, { enableHighAccuracy: true });
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    </script>
</body>
</html>