feat: Remove legacy clock version
This commit is contained in:
parent
05f2ab1c0d
commit
56633b364e
2 changed files with 3 additions and 289 deletions
|
|
@ -11,284 +11,13 @@ tags:
|
||||||
<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
|
<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
|
||||||
<button id="tglSections" title="Toggle sections">Abschnitte</button>
|
<button id="tglSections" title="Toggle sections">Abschnitte</button>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main></main>
|
||||||
<div class="wrap">
|
|
||||||
<canvas id="background" width="768" height="768"></canvas>
|
|
||||||
<canvas id="rings" width="768" height="768"></canvas>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script>
|
<script>
|
||||||
const canvasBkg = document.getElementById('background');
|
// TODO: Kalenderwoche ergänzen
|
||||||
const ctxBkg = canvasBkg.getContext('2d');
|
// TODO: Mondphase ergänzen
|
||||||
const canvasRings = document.getElementById('rings');
|
|
||||||
const ctxRings = canvasRings.getContext('2d');
|
|
||||||
const wrap = document.querySelector('.wrap');
|
|
||||||
|
|
||||||
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());
|
|
||||||
|
|
||||||
const outerMargin = 8;
|
|
||||||
const ringWidth = 16;
|
|
||||||
const ringGap = 8;
|
|
||||||
let centerX = canvasRings.width / 2;
|
|
||||||
let centerY = canvasRings.height / 2;
|
|
||||||
let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
|
|
||||||
const rings = [
|
|
||||||
{
|
|
||||||
radius: maxSize,
|
|
||||||
color: 'black'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap),
|
|
||||||
color: 'lightgrey'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap) * 2,
|
|
||||||
color: 'white'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap) * 3 - ringGap,
|
|
||||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap) * 4 - ringGap * 2,
|
|
||||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap) * 5 - ringGap * 3,
|
|
||||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap) * 6 - ringGap * 3,
|
|
||||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-purple').trim()
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const groups = [
|
|
||||||
{
|
|
||||||
radius: rings[1].radius,
|
|
||||||
color: `rgba(0, 0, 0, .05)`,
|
|
||||||
width: 72
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: rings[3].radius,
|
|
||||||
color: `rgba(0, 0, 0, .1)`,
|
|
||||||
width: ringWidth + ringGap
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: rings[4].radius,
|
|
||||||
color: `rgba(0, 0, 0, .15)`,
|
|
||||||
width: ringWidth + ringGap
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
|
|
||||||
color: `rgba(0, 0, 0, .2)`,
|
|
||||||
width: ringWidth * 2 + ringGap * 2
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const sectionMarkerColor = `rgba(0, 0, 0, .2)`;
|
|
||||||
let sections = [
|
|
||||||
{
|
|
||||||
amount: 60,
|
|
||||||
radius: maxSize,
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
amount: 60,
|
|
||||||
radius: rings[1].radius,
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
amount: is24HourFormat ? 24 : 12,
|
|
||||||
radius: rings[2].radius,
|
|
||||||
width: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
amount: 7,
|
|
||||||
radius: rings[3].radius,
|
|
||||||
width: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
amount: daysInCurrentMonth,
|
|
||||||
radius: rings[4].radius,
|
|
||||||
width: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
amount: 365,
|
|
||||||
radius: rings[5].radius,
|
|
||||||
width: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
amount: 12,
|
|
||||||
radius: rings[6].radius,
|
|
||||||
width: 3
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('tglSections').addEventListener('click', () => {
|
|
||||||
drawSections = !drawSections;
|
|
||||||
drawBackground();
|
|
||||||
});
|
|
||||||
|
|
||||||
// FIXME: Konstanten mit maxSize werden nicht verändert
|
|
||||||
window.addEventListener('resize', resizeClock);
|
|
||||||
|
|
||||||
resizeClock();
|
|
||||||
// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
|
|
||||||
setInterval(updateRings, 1000);
|
|
||||||
|
|
||||||
function updateRings() {
|
|
||||||
currentDate = new Date();
|
|
||||||
const currentSeconds = currentDate.getSeconds();
|
|
||||||
const currentMinutes = currentDate.getMinutes();
|
|
||||||
const currentHours = currentDate.getHours();
|
|
||||||
const currentDayOfWeek = getNumericWeekday(currentDate);
|
|
||||||
const currentDayOfMonth = currentDate.getDate();
|
|
||||||
const currentDayOfYear = getNumericYearDay(currentDate);
|
|
||||||
currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
|
|
||||||
daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
|
|
||||||
|
|
||||||
drawRings(
|
|
||||||
currentSeconds,
|
|
||||||
currentMinutes,
|
|
||||||
currentHours,
|
|
||||||
currentDayOfWeek,
|
|
||||||
currentDayOfMonth,
|
|
||||||
currentMonth,
|
|
||||||
currentDayOfYear,
|
|
||||||
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 getNumericYearDay(date) {
|
|
||||||
const start = new Date(date.getFullYear(), 0, 0);
|
|
||||||
return Math.floor((date - start) / 86400000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function daysInMonth(month, year) {
|
|
||||||
return new Date(year, month, 0).getDate();
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawArc(value, maxValue, radius, strokeStyle) {
|
|
||||||
const startAngle = -0.5 * Math.PI; // Start at the top
|
|
||||||
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
|
|
||||||
|
|
||||||
ctxRings.lineWidth = 16;
|
|
||||||
ctxRings.strokeStyle = strokeStyle;
|
|
||||||
ctxRings.beginPath();
|
|
||||||
ctxRings.arc(centerX, centerY, radius, startAngle, endAngle, false);
|
|
||||||
ctxRings.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Array rings nutzen
|
|
||||||
function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, dayOfYear, daysInCurrentMonth) {
|
|
||||||
ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
|
|
||||||
|
|
||||||
drawArc(
|
|
||||||
(seconds === 0) ? 60 : seconds,
|
|
||||||
60,
|
|
||||||
rings[0].radius,
|
|
||||||
rings[0].color
|
|
||||||
);
|
|
||||||
drawArc(
|
|
||||||
(minutes === 0) ? 60 : minutes,
|
|
||||||
60,
|
|
||||||
rings[1].radius,
|
|
||||||
rings[1].color
|
|
||||||
);
|
|
||||||
drawArc(
|
|
||||||
// is24HourFormat ? ((hours === 0) ? 24 : hours) : hours % 12,
|
|
||||||
is24HourFormat ? hours : hours % 12,
|
|
||||||
is24HourFormat ? 24 : 12,
|
|
||||||
rings[2].radius,
|
|
||||||
rings[2].color
|
|
||||||
);
|
|
||||||
drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
|
|
||||||
drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resizeClock() {
|
|
||||||
const height = window.innerHeight;
|
|
||||||
const width = window.innerWidth;
|
|
||||||
const windowDimension = {
|
|
||||||
value: Math.min(height, width),
|
|
||||||
smaller: height < width ? 'height' : 'width'
|
|
||||||
};
|
|
||||||
const clockSize = Math.floor(windowDimension.value * 0.9);
|
|
||||||
|
|
||||||
canvasBkg.style.width = clockSize + 'px';
|
|
||||||
canvasBkg.style.height = clockSize + 'px';
|
|
||||||
canvasRings.style.width = clockSize + 'px';
|
|
||||||
canvasRings.style.height = clockSize + 'px';
|
|
||||||
canvasBkg.width = clockSize;
|
|
||||||
canvasBkg.height = clockSize;
|
|
||||||
canvasRings.width = clockSize;
|
|
||||||
canvasRings.height = clockSize;
|
|
||||||
|
|
||||||
centerX = canvasRings.width / 2;
|
|
||||||
centerY = canvasRings.height / 2;
|
|
||||||
maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
|
|
||||||
|
|
||||||
wrap.style.width = clockSize + 'px';
|
|
||||||
wrap.style.height = clockSize + 'px';
|
|
||||||
|
|
||||||
drawBackground();
|
|
||||||
updateRings();
|
|
||||||
}
|
|
||||||
|
|
||||||
class HippieClock {
|
class HippieClock {
|
||||||
constructor(element, date, options) {
|
constructor(element, date, options) {
|
||||||
this.element = element;
|
this.element = element;
|
||||||
|
|
|
||||||
|
|
@ -22,19 +22,4 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap {
|
|
||||||
display: none;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue