Baipyrus/Matrix
1
0
Fork 0
mirror of https://gitlab1.ptb.de/waltem01/Matrix synced 2024-11-14 08:53:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved time calculations and accuracy

Browse Source
This commit is contained in:
waltem01 2024-03-08 10:27:23 +01:00
parent 8f28820452
commit 9d482e8492
1 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
Webserver/src/routes/clock/+page.svelte
View File

@ -7,16 +7,22 @@
body: number; body: number;
// Clock hand radii // Clock hand radii
hands: { hands: {
second: number;
minute: number; minute: number;
hour: number; hour: number;
}; };
// Clock time percentages // Clock time percentages
time: { time: {
second: number;
minute: number; minute: number;
hour: number; hour: number;
}; };
// Clock hand positions // Clock hand positions
positions?: { positions?: {
second: {
x: number;
y: number;
};
minute: { minute: {
x: number; x: number;
y: number; y: number;
@ -34,10 +40,12 @@
const clock: Clock = { const clock: Clock = {
body: 48, body: 48,
hands: { hands: {
second: 45,
minute: 40, minute: 40,
hour: 25 hour: 25
}, },
time: { time: {
second: 0,
minute: 0, minute: 0,
hour: 0 hour: 0
}, },
@ -47,8 +55,8 @@
const TWO_PI = 2 * Math.PI; const TWO_PI = 2 * Math.PI;
const HALF_PI = Math.PI / 2; const HALF_PI = Math.PI / 2;
function calcPos(time: 'minute' | 'hour', operation: 'sin' | 'cos') {
// Calculate (x = r * cos(a), y = r * sin(a)) // Calculate (x = r * cos(a), y = r * sin(a))
function calcPos(time: 'second' | 'minute' | 'hour', operation: 'sin' | 'cos') {
const radius = clock.hands[time]; const radius = clock.hands[time];
const angle = TWO_PI * clock.time[time]; const angle = TWO_PI * clock.time[time];
const relative = Math[operation](angle - HALF_PI); const relative = Math[operation](angle - HALF_PI);
@ -56,17 +64,20 @@
return 50 + radius * relative; return 50 + radius * relative;
} }
function update() { async function update() {
const current = new Date();
const time = current.toTimeString();
const [hour, minute, _] = time.split(' ')[0].split(':');
// Update time variables // Update time variables
const current = new Date(Date.now());
clock.time = { clock.time = {
hour: Number(hour) / 12, second: current.getSeconds() / 60,
minute: Number(minute) / 60 minute: current.getMinutes() / 60,
hour: (current.getHours() % 2) / 12
}; };
// Update hand positions // Update hand positions
clock.positions = { clock.positions = {
second: {
x: calcPos('second', 'cos'),
y: calcPos('second', 'sin')
},
minute: { minute: {
x: calcPos('minute', 'cos'), x: calcPos('minute', 'cos'),
y: calcPos('minute', 'sin') y: calcPos('minute', 'sin')
@ -79,7 +90,6 @@
} }
onMount(() => { onMount(() => {
update();
setInterval(update, clock.speed * 1000); setInterval(update, clock.speed * 1000);
}); });
</script> </script>
@ -89,6 +99,16 @@
<svg class="text-white" viewBox="0 0 100 100"> <svg class="text-white" viewBox="0 0 100 100">
<!-- Clock body --> <!-- Clock body -->
<circle class="stroke-current" cx="50" cy="50" r={clock.body} fill="none" stroke-width="2" /> <circle class="stroke-current" cx="50" cy="50" r={clock.body} fill="none" stroke-width="2" />
<!-- Clock seconds hand -->
<line
class="stroke-current"
x1="50"
y1="50"
x2={clock.positions?.second.x ?? 50}
y2={clock.positions?.second.y ?? 50}
stroke-width=".5"
/>
<!-- Clock minutes hand -->
<line <line
class="stroke-current" class="stroke-current"
x1="50" x1="50"