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

10 years later #1

Merged
sthag merged 374 commits from development into main 2026-03-07 00:18:59 +01:00
Conversation 0 Commits 374 Files changed 135 +3 -289
2 changed files with 3 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 56633b364e - Show all commits

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

@ -11,284 +11,13 @@ tags:
<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
<button id="tglSections" title="Toggle sections">Abschnitte</button>
</header>
<main>
<div class="wrap">
<canvas id="background" width="768" height="768"></canvas>
<canvas id="rings" width="768" height="768"></canvas>
</div>
</main>
<main></main>
{% endblock %}
{% block script %}
<script>
const canvasBkg = document.getElementById('background');
const ctxBkg = canvasBkg.getContext('2d');
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();
}
// TODO: Kalenderwoche ergänzen
// TODO: Mondphase ergänzen
class HippieClock {
constructor(element, date, options) {
this.element = element;

15
source/style/modules/_clock.scss
View file

@ -22,19 +22,4 @@
width: 100%;
overflow: hidden;
}
.wrap {
display: none;
position: relative;
canvas {
position: absolute;
top: 0;
left: 0;
}
}
p {
text-align: center;
}
}