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