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