112 lines
No EOL
3.2 KiB
Text
112 lines
No EOL
3.2 KiB
Text
---
|
|
title: Clock
|
|
tags:
|
|
- demoExample
|
|
---
|
|
{% assign pageBase = "../../" -%}
|
|
{% assign bodyClass = "body_clock" -%}
|
|
{% layout "hippie/full.liquid" %}
|
|
|
|
{% block body %}
|
|
<main>
|
|
<canvas id="clock" width="512" height="512"></canvas>
|
|
<p>
|
|
<button id="toggleFormat">12-Stunden-Format</button>
|
|
</p>
|
|
</main>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
{{ block.super -}}
|
|
<script>
|
|
// Page script
|
|
const canvas = document.getElementById('clock');
|
|
const ctx = canvas.getContext('2d');
|
|
let is24HourFormat = true;
|
|
const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
|
|
const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
|
|
const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
|
|
|
|
document.getElementById('toggleFormat').addEventListener('click', () => {
|
|
is24HourFormat = !is24HourFormat;
|
|
document.getElementById('toggleFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
|
|
});
|
|
|
|
function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
const lineWidth = 16;
|
|
const lineGap = 8;
|
|
const maxSize = canvas.width / 2 - lineWidth;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
function drawArc(value, maxValue, radius, strokeStyle) {
|
|
const startAngle = -0.5 * Math.PI; // Start at the top
|
|
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
|
|
ctx.lineWidth = 16;
|
|
ctx.strokeStyle = strokeStyle;
|
|
ctx.stroke();
|
|
}
|
|
|
|
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,
|
|
maxSize - (lineWidth + lineGap) * 2,
|
|
'white'
|
|
);
|
|
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
|
|
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
|
|
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
|
|
}
|
|
|
|
function updateRings() {
|
|
const currentDate = new Date();
|
|
const currentSeconds = currentDate.getSeconds();
|
|
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());
|
|
|
|
drawRings(
|
|
currentSeconds,
|
|
currentMinutes,
|
|
currentHours,
|
|
currentDayOfWeek,
|
|
currentDayOfMonth,
|
|
currentMonth,
|
|
daysInCurrentMonth
|
|
);
|
|
}
|
|
|
|
// TODO: Parameter für Wochenstart ergänzen
|
|
function getNumericWeekday(date) {
|
|
const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
|
|
return (weekday === 0) ? 7 : weekday;
|
|
}
|
|
|
|
function daysInMonth(month, year) {
|
|
return new Date(year, month, 0).getDate();
|
|
}
|
|
|
|
updateRings();
|
|
setInterval(updateRings, 1000);
|
|
</script>
|
|
{% endblock %} |