diff --git a/Webserver/src/routes/clock/+page.svelte b/Webserver/src/routes/clock/+page.svelte index f5e703e..90c5a2e 100644 --- a/Webserver/src/routes/clock/+page.svelte +++ b/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, - minute: current.getMinutes() / 60, - hour: (current.getHours() % 2) / 12 + second: second / 60, + minute: minute / 60, + 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 { - x: Math.round((Number(x) / 100) * matrix.width).toString(), - y: Math.round((Number(y) / 100) * matrix.height).toString() - }; + return convertNumbers({ + x: Math.round((Number(x) / 100) * matrix.width), + 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', - y: '50', - r: clock.body.toString() + x: middle.x, + y: middle.y, + r: (clock.body * 2 - 1).toString() }); // Display the seconds of the clock, converting position coordinates to strings await displayClockPart('seconds', { - x: '50', - y: '50', + x: middle.x, + y: middle.y, position: convertNumbers(clock.positions?.second!) }); // Display the minutes of the clock, converting position coordinates to strings await displayClockPart('minutes', { - x: '50', - y: '50', + x: middle.x, + y: middle.y, position: convertNumbers(clock.positions?.minute!) }); // Display the hours of the clock, converting position coordinates to strings await displayClockPart('hours', { - x: '50', - y: '50', + x: middle.x, + y: middle.y, position: convertNumbers(clock.positions?.hour!) }); // Update the clock by fetching the update API endpoint