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

feat: More elements for clock and style change

Browse source 
- Add day of month
- Clock uses maximum canvas size
This commit is contained in:
sthag 2025-11-16 13:21:25 +01:00
parent 9e560d7e62
commit 86fce27554
1 changed files with 25 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,10 +29,12 @@ tags:
document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
});
function drawCircle(seconds, minutes, hours, dayOfWeek, month) {
function drawCircle(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 128;
const lineWidth = 16;
const lineGap = 8;
const maxSize = canvas.width / 2 - lineWidth;
ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -47,16 +49,17 @@ tags:
ctx.stroke();
}
drawArc(seconds, 60, radius, 'black');
drawArc(minutes, 60, radius - 20, 'lightgrey');
drawArc(seconds, 60, maxSize, 'black');
drawArc(minutes, 60, maxSize - lineWidth - lineGap, 'lightgrey');
drawArc(
is24HourFormat ? hours : hours % 12,
is24HourFormat ? 24 : 12,
radius - 40,
maxSize - (lineWidth + lineGap) * 2,
'white'
);
drawArc(dayOfWeek, 7, radius - 60, '#fad803');
drawArc(month, 12, radius - 80, '#d30a51');
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, '#fad803');
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, '#d30a51');
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, '#273f8b');
}
function updateCircle() {
@ -65,9 +68,19 @@ tags:
const currentMinutes = currentDate.getMinutes();
const currentHours = currentDate.getHours();
const currentDayOfWeek = getNumericWeekday(currentDate);
const currentDayOfMonth = currentDate.getDate();
const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
drawCircle(currentSeconds, currentMinutes, currentHours, currentDayOfWeek, currentMonth);
drawCircle(
currentSeconds,
currentMinutes,
currentHours,
currentDayOfWeek,
currentDayOfMonth,
currentMonth,
daysInCurrentMonth
);
}
// TODO: Parameter für Wochenstart ergänzen
@ -76,6 +89,10 @@ tags:
return (weekday === 0) ? 7 : weekday;
}
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
updateCircle();
setInterval(updateCircle, 1000);
</script>