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

feat: Update clock

Browse source 
- Update resizeClock()
- Change background of groups
This commit is contained in:
sthag 2026-02-28 11:27:23 +01:00
parent 2f87621756
commit 743d9fba9e
1 changed files with 8 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,9 +39,6 @@ tags:
let centerX = canvasRings.width / 2; let centerX = canvasRings.width / 2;
let centerY = canvasRings.height / 2; let centerY = canvasRings.height / 2;
let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin; let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
resizeClock();
const rings = [ const rings = [
{ {
radius: maxSize, radius: maxSize,
@ -75,22 +72,22 @@ tags:
const groups = [ const groups = [
{ {
radius: rings[1].radius, radius: rings[1].radius,
color: `rgba(0, 0, 0, .1)`, color: `rgba(0, 0, 0, .05)`,
width: 72 width: 72
}, },
{ {
radius: rings[3].radius, radius: rings[3].radius,
color: `rgba(0, 0, 0, .2)`, color: `rgba(0, 0, 0, .1)`,
width: ringWidth + ringGap width: ringWidth + ringGap
}, },
{ {
radius: rings[4].radius, radius: rings[4].radius,
color: `rgba(0, 0, 0, .3)`, color: `rgba(0, 0, 0, .15)`,
width: ringWidth + ringGap width: ringWidth + ringGap
}, },
{ {
radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2, radius: maxSize - (ringWidth + ringGap) * 6 - ringGap - ringGap / 2,
color: `rgba(0, 0, 0, .4)`, color: `rgba(0, 0, 0, .2)`,
width: ringWidth * 2 + ringGap * 2 width: ringWidth * 2 + ringGap * 2
} }
]; ];
@ -148,8 +145,7 @@ tags:
// FIXME: Konstanten mit maxSize werden nicht verändert // FIXME: Konstanten mit maxSize werden nicht verändert
window.addEventListener('resize', resizeClock); window.addEventListener('resize', resizeClock);
drawBackground(); resizeClock();
updateRings();
// TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden // TODO: TimeDisplay nutzen, ev. erweitern oder ähnliche Umsetzung anwenden
setInterval(updateRings, 1000); setInterval(updateRings, 1000);
@ -293,5 +289,8 @@ tags:
console.debug('Clock size: ', clockSize); console.debug('Clock size: ', clockSize);
console.debug('Radius: ', maxSize); console.debug('Radius: ', maxSize);
} }
drawBackground();
updateRings();
}
</script> </script>
{% endblock %} {% endblock %}