From 7f4b4aeaee22e2108a64c32671c13ef660737d0c Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 1 Mar 2026 18:47:01 +0100 Subject: [PATCH] feat: Changes to HippieClock - Make some methods private - Add wrap element to parts - Change color of sections - Fix resize by changing styles of wrap element --- source/screens/demo/examples/clock.liquid | 52 +++++++++++++---------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/source/screens/demo/examples/clock.liquid b/source/screens/demo/examples/clock.liquid index 4890c40..85c7ad9 100644 --- a/source/screens/demo/examples/clock.liquid +++ b/source/screens/demo/examples/clock.liquid @@ -30,7 +30,7 @@ tags: h24: true, sections: true }; - this.parts = this.createContext(['bkg', 'hands']); + this.parts = this.#createContext(['background', 'hands']); this.shapes = []; this.init(); @@ -56,8 +56,16 @@ tags: resize() { this.parts.forEach(part => { + this.updateOptions({size: Math.floor(this.getSize().value * 0.9)}) + + if (part.name === 'wrap') { + part.element.style.height = this.options.size + 'px'; + part.element.style.width = this.options.size + 'px'; + } + part.element.width = part.element.offsetWidth; part.element.height = part.element.offsetHeight; + this.draw(); }); } @@ -65,7 +73,7 @@ tags: draw() { // TODO: Nur geänderte Teile löschen this.parts.forEach(part => { - part.context.clearRect(0, 0, part.element.width, part.element.height); + part.context?.clearRect(0, 0, part.element.width, part.element.height); }); let ctx = undefined; @@ -73,14 +81,14 @@ tags: this.shapes .filter(item => item.type === 'circle') .forEach((shape) => { - const radius = this.toPixelSize(shape.radius) / 2; + const radius = this.#toPixelSize(shape.radius) / 2; ctx = this.parts[0].context; ctx.fillStyle = shape.color; ctx.beginPath(); ctx.arc( - this.toPixelX(shape.center), - this.toPixelY(shape.center), + this.#toPixelX(shape.center), + this.#toPixelY(shape.center), radius, 0, Math.PI * 2 @@ -92,18 +100,18 @@ tags: .filter(item => item.type === 'ring') .forEach((shape) => { if (this.options.sections) { - const outerRadius = this.toPixelSize(shape.radius) / 2; - const innerRadius = this.toPixelSize(shape.radius) / 2 - shape.stroke; + const outerRadius = this.#toPixelSize(shape.radius) / 2; + const innerRadius = this.#toPixelSize(shape.radius) / 2 - shape.stroke; ctx = this.parts[0].context; for (let i = 0; i < shape.max; i++) { const angle = (i * (360 / shape.max) - 90) * (Math.PI / 180); // -90 to start at top - const outerX = this.toPixelX(shape.center) + outerRadius * Math.cos(angle); - const outerY = this.toPixelY(shape.center) + outerRadius * Math.sin(angle); - const innerX = this.toPixelX(shape.center) + innerRadius * Math.cos(angle); - const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle); + const outerX = this.#toPixelX(shape.center) + outerRadius * Math.cos(angle); + const outerY = this.#toPixelY(shape.center) + outerRadius * Math.sin(angle); + const innerX = this.#toPixelX(shape.center) + innerRadius * Math.cos(angle); + const innerY = this.#toPixelY(shape.center) + innerRadius * Math.sin(angle); - ctx.strokeStyle = 'black'; + ctx.strokeStyle = `rgba(0, 0, 0, .25)`; ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true); ctx.beginPath(); ctx.moveTo(outerX, outerY); @@ -112,7 +120,7 @@ tags: } } - const radius = this.toPixelSize(shape.radius) / 2 - shape.stroke / 2; + const radius = this.#toPixelSize(shape.radius) / 2 - shape.stroke / 2; const start = -0.5 * Math.PI; // Start at the top const angle = start + (2 * Math.PI * (shape.angle / shape.max)); ctx = this.parts[1].context; @@ -121,8 +129,8 @@ tags: ctx.lineWidth = shape.stroke; ctx.beginPath(); ctx.arc( - this.toPixelX(shape.center), - this.toPixelY(shape.center), + this.#toPixelX(shape.center), + this.#toPixelY(shape.center), radius, start, angle @@ -149,15 +157,15 @@ tags: this.draw(); } - toPixelX(number) { + #toPixelX(number) { return number * this.parts[0].element.width; } - toPixelY(number) { + #toPixelY(number) { return number * this.parts[0].element.height; } - toPixelSize(number) { + #toPixelSize(number) { return number * Math.min(this.parts[0].element.width, this.parts[0].element.height); } @@ -278,7 +286,7 @@ tags: }; } - createContext(names) { + #createContext(names) { let parts = []; const wrap = document.createElement('div'); @@ -298,11 +306,11 @@ tags: canvas.width = canvas.offsetWidth; wrap.appendChild(canvas); - parts.push({name: name, element: canvas, context: canvas.getContext('2d')}); }); this.element.appendChild(wrap); + parts.push({name: 'wrap', element: wrap}); return parts; } @@ -347,7 +355,7 @@ tags: // TODO: Aktionen gehören quasi zu HippieClock document.getElementById('tglFormat').addEventListener('click', () => { if (clock) { - clock.updateOptions({h24: !clock.options.h24}) + clock.updateOptions({h24: !clock.options.h24}); document.getElementById('tglFormat').textContent = clock.options.h24 ? '12-Stunden' : '24-Stunden'; } else { console.log('No clock available'); @@ -356,7 +364,7 @@ tags: document.getElementById('tglSections').addEventListener('click', () => { if (clock) { - clock.updateOptions({sections: !clock.options.sections}) + clock.updateOptions({sections: !clock.options.sections}); } else { console.log('No clock available'); }