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

feat: Changes to HippieClock

Browse source 
- Make some methods private
- Add wrap element to parts
- Change color of sections
- Fix resize by changing styles of wrap element
This commit is contained in:
sthag 2026-03-01 18:47:01 +01:00
parent 48b6e1d0ed
commit 7f4b4aeaee
1 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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');
}