smooth time calculation

Webserver/src/routes/clock/+page.svelte

@@ -70,7 +70,7 @@
 			minute: 0,
 			hour: 0
 		},
-		speed: 0.4
+		speed: 1.25
 	};
 	// Constant system values
 	const TWO_PI = 2 * Math.PI;
@@ -86,12 +86,21 @@
 	}
 
 	async function update() {
-		// Update time variables
+		// Get current datetime and date
 		const current = new Date(Date.now());
+		const day = new Date(current.toDateString());
+
+		// Calculate millis diff between now and midnight
+		const milli = current.getTime() - day.getTime();
+		// Calculate seconds, minutes and hours
+		const second = milli / 1000;
+		const minute = second / 60;
+		const hour = minute / 60;
+		// Update time variables
 		clock.time = {
-			second: current.getSeconds() / 60,
+			second: second / 60,
-			minute: current.getMinutes() / 60,
+			minute: minute / 60,
-			hour: (current.getHours() % 2) / 12
+			hour: (hour % 12) / 12
 		};
 		// Update hand positions
 		clock.positions = {
@@ -112,14 +121,6 @@
 		if (clockEnabled) await displayMatrixClock();
 	}
 
-	// Converts the x and y number values in the given positions object to strings
-	function convertNumbers(positions: { x: number; y: number }): { x: string; y: string } {
-		return {
-			x: positions.x.toString(),
-			y: positions.y.toString()
-		};
-	}
-
 	// Displays a clock part on the matrix display
 	async function displayClockPart(
 		part: 'body' | 'seconds' | 'minutes' | 'hours',
@@ -144,39 +145,48 @@
 		return await redirectAPI({ fdata });
 	}
 
+	// Converts the x and y number values in the given positions object to strings
+	function convertNumbers(positions: { x: number; y: number }): { x: string; y: string } {
+		return {
+			x: positions.x.toString(),
+			y: positions.y.toString()
+		};
+	}
+
 	// Converts the x and y values from percentage to matrix coordinates
 	function coordsToMatrix(x: string, y: string): { x: string; y: string } {
 		// Calculate the matrix coordinates based on the percentage values of x and y
-		return {
+		return convertNumbers({
-			x: Math.round((Number(x) / 100) * matrix.width).toString(),
+			x: Math.round((Number(x) / 100) * matrix.width),
-			y: Math.round((Number(y) / 100) * matrix.height).toString()
+			y: Math.round((Number(y) / 100) * matrix.height)
-		};
+		});
 	}
 
 	// Displays the clock on the matrix display, converting number values to strings where necessary
 	async function displayMatrixClock() {
+		const middle = coordsToMatrix('50', '50');
 		// Display the body of the clock
 		await displayClockPart('body', {
-			x: '50',
+			x: middle.x,
-			y: '50',
+			y: middle.y,
-			r: clock.body.toString()
+			r: (clock.body * 2 - 1).toString()
 		});
 		// Display the seconds of the clock, converting position coordinates to strings
 		await displayClockPart('seconds', {
-			x: '50',
+			x: middle.x,
-			y: '50',
+			y: middle.y,
 			position: convertNumbers(clock.positions?.second!)
 		});
 		// Display the minutes of the clock, converting position coordinates to strings
 		await displayClockPart('minutes', {
-			x: '50',
+			x: middle.x,
-			y: '50',
+			y: middle.y,
 			position: convertNumbers(clock.positions?.minute!)
 		});
 		// Display the hours of the clock, converting position coordinates to strings
 		await displayClockPart('hours', {
-			x: '50',
+			x: middle.x,
-			y: '50',
+			y: middle.y,
 			position: convertNumbers(clock.positions?.hour!)
 		});
 		// Update the clock by fetching the update API endpoint