source/screens/demo/examples/clock.liquid

@@ -8,7 +8,8 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
-	<button id="tglFormat">12-Stunden-Format</button>
+	<button id="tglFormat" title="Toggle hour display">12-Stunden-Format</button>
+	<button id="tglSections" title="Toggle sections">Abschnitte</button>
 </header>
 <main>
 	<div class="wrap">
@@ -28,6 +29,7 @@ tags:
 	const centerY = canvasRings.height / 2;
 
 	let is24HourFormat = true;
+	let drawSections = false;
 	let currentDate = new Date();
 	let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
 	let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
@@ -66,7 +68,7 @@ tags:
 			color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
 		}
 	];
-	const sections = [
+	const groups = [
 		{
 			radius: rings[1].radius,
 			color: `rgba(0, 0, 0, .1)`,
@@ -88,8 +90,8 @@ tags:
 			width: ringWidth * 2 + ringGap * 2
 		}
 	];
-	const markerColor = `rgba(0, 0, 0, .2)`;
-	const markers = [
+	const sectionMarkerColor = `rgba(0, 0, 0, .2)`;
+	let sections = [
 		{
 			amount: 60,
 			radius: maxSize,
@@ -130,14 +132,13 @@ tags:
 	document.getElementById('tglFormat').addEventListener('click', () => {
 		is24HourFormat = !is24HourFormat;
 		document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
+		sections[2].amount = is24HourFormat ? 24 : 12;
+		drawBackground();
 	});
 
-	sections.forEach((section) => {
-		ctxBkg.strokeStyle = section.color;
-		ctxBkg.lineWidth = section.width;
-		ctxBkg.beginPath();
-		ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
-		ctxBkg.stroke();
+	document.getElementById('tglSections').addEventListener('click', () => {
+		drawSections = !drawSections;
+		drawBackground();
 	});
 
 	markers.forEach((marker) => {
@@ -159,7 +160,9 @@ tags:
 		}
 	});
 
+	drawBackground();
 	updateRings();
+	// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
 	setInterval(updateRings, 1000);
 
 	function updateRings() {
@@ -228,6 +231,7 @@ tags:
 			rings[1].color
 		);
 		drawArc(
+			// is24HourFormat ? ((hours === 0) ? 24 : hours) : hours % 12,
 			is24HourFormat ? hours : hours % 12,
 			is24HourFormat ? 24 : 12,
 			rings[2].radius,
@@ -238,5 +242,38 @@ tags:
 		drawArc(dayOfYear, 365, rings[5].radius, rings[5].color);
 		drawArc(month, 12, rings[6].radius, rings[6].color);
 	}
+
+	function drawBackground() {
+		ctxBkg.clearRect(0, 0, canvasBkg.width, canvasBkg.height);
+
+		groups.forEach((section) => {
+			ctxBkg.strokeStyle = section.color;
+			ctxBkg.lineWidth = section.width;
+			ctxBkg.beginPath();
+			ctxBkg.arc(centerX, centerY, section.radius, 0, 2 * Math.PI);
+			ctxBkg.stroke();
+		});
+
+		if (drawSections) {
+			sections.forEach((marker) => {
+				for (let i = 0; i < marker.amount; i++) {
+					const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
+					const outerRadius = marker.radius + ringWidth / 2;
+					const outerX = centerX + outerRadius * Math.cos(angle);
+					const outerY = centerY + outerRadius * Math.sin(angle);
+					const innerRadius = marker.radius - ringWidth / 2;
+					const innerX = centerX + innerRadius * Math.cos(angle);
+					const innerY = centerY + innerRadius * Math.sin(angle);
+
+					ctxBkg.strokeStyle = sectionMarkerColor;
+					ctxBkg.lineWidth = marker.width;
+					ctxBkg.beginPath();
+					ctxBkg.moveTo(outerX, outerY);
+					ctxBkg.lineTo(innerX, innerY);
+					ctxBkg.stroke();
+				}
+			});
+		}
+	}
 </script>
 {% endblock %}