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

feat: Add functions to clock

Browse source 
- Add toggle button for sections
- Add function to draw background
This commit is contained in:
sthag 2026-02-26 00:40:54 +01:00
parent 8fb6181154
commit a924065931
1 changed files with 47 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 %}