interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Update clock

Browse source 
Display full circle when seconds or minutes turn to 0.
This commit is contained in:
sthag 2025-11-23 14:17:24 +01:00
parent 1a1badc786
commit 15bfbcc97b
1 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
source/screens/demo/examples/clock.liquid
View file

@ -32,7 +32,7 @@ tags:
document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
});
function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const lineWidth = 16;
@ -52,8 +52,18 @@ tags:
ctx.stroke();
}
drawArc(seconds, 60, maxSize, 'black');
drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
drawArc(
(seconds === 0) ? 60 : seconds,
60,
maxSize,
'black'
);
drawArc(
(minutes === 0) ? 60 : minutes,
60,
maxSize - lineWidth - lineGap,
'lightgrey'
);
drawArc(
is24HourFormat ? hours : hours % 12,
is24HourFormat ? 24 : 12,
@ -65,7 +75,7 @@ tags:
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
}
function updateCircle() {
function updateRings() {
const currentDate = new Date();
const currentSeconds = currentDate.getSeconds();
const currentMinutes = currentDate.getMinutes();
@ -75,7 +85,7 @@ tags:
const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
drawCircle(
drawRings(
currentSeconds,
currentMinutes,
currentHours,
@ -96,7 +106,7 @@ tags:
return new Date(year, month, 0).getDate();
}
updateCircle();
setInterval(updateCircle, 1000);
updateRings();
setInterval(updateRings, 1000);
</script>
{% endblock %}