Baipyrus/Matrix
1
0
Fork 0
mirror of https://gitlab1.ptb.de/waltem01/Matrix synced 2024-11-12 16:03:50 +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;
// Clock hand radii
hands: {
second: number;
minute: number;
hour: number;
};
// Clock time percentages
time: {
second: number;
minute: number;
hour: number;
};
// Clock hand positions
positions?: {
second: {
x: number;
y: number;
};
minute: {
x: number;
y: number;
@ -34,10 +40,12 @@
const clock: Clock = {
body: 48,
hands: {
second: 45,
minute: 40,
hour: 25
},
time: {
second: 0,
minute: 0,
hour: 0
},
@ -47,8 +55,8 @@
const TWO_PI = 2 * Math.PI;
const HALF_PI = Math.PI / 2;
function calcPos(time: 'minute' | 'hour', operation: 'sin' | 'cos') {
// Calculate (x = r * cos(a), y = r * sin(a))
function calcPos(time: 'second' | 'minute' | 'hour', operation: 'sin' | 'cos') {
const radius = clock.hands[time];
const angle = TWO_PI * clock.time[time];
const relative = Math[operation](angle - HALF_PI);
@ -56,17 +64,20 @@
return 50 + radius * relative;
}
function update() {
const current = new Date();
const time = current.toTimeString();
const [hour, minute, _] = time.split(' ')[0].split(':');
async function update() {
// Update time variables
const current = new Date(Date.now());
clock.time = {
hour: Number(hour) / 12,
minute: Number(minute) / 60
second: current.getSeconds() / 60,
minute: current.getMinutes() / 60,
hour: (current.getHours() % 2) / 12
};
// Update hand positions
clock.positions = {
second: {
x: calcPos('second', 'cos'),
y: calcPos('second', 'sin')
},
minute: {
x: calcPos('minute', 'cos'),
y: calcPos('minute', 'sin')
@ -79,7 +90,6 @@
}
onMount(() => {
update();
setInterval(update, clock.speed * 1000);
});
</script>
@ -89,6 +99,16 @@
<svg class="text-white" viewBox="0 0 100 100">
<!-- Clock body -->
<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
class="stroke-current"
x1="50"