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

docs: Update clock

Browse source 
- Screen now uses template script
- Use mapping for section stroke
This commit is contained in:
sthag 2026-03-01 11:46:19 +01:00
parent 8ce1e14fad
commit 5261754da5
1 changed files with 5 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,6 +15,8 @@ tags:
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ block.super -}}
<script> <script>
// TODO: Kalenderwoche ergänzen // TODO: Kalenderwoche ergänzen
// TODO: Mondphase ergänzen // TODO: Mondphase ergänzen
@ -37,7 +39,7 @@ tags:
this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`); this.addRing('seconds', 1, 21, 60, `rgb(250, 216, 3)`);
this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`); this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`); this.addRing('minutes', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
this.addRing('dotweek', .7, 32, 7, `rgb(142, 31, 104)`); this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`); this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`); this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`); this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
@ -98,8 +100,7 @@ tags:
const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle); const innerY = this.toPixelY(shape.center) + innerRadius * Math.sin(angle);
ctx.strokeStyle = 'black'; ctx.strokeStyle = 'black';
// TODO: Stärke an shape.max orientieren ctx.lineWidth = mapRange(shape.max, 7, 72, .1, 5, true, true);
ctx.lineWidth = 1;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(outerX, outerY); ctx.moveTo(outerX, outerY);
ctx.lineTo(innerX, innerY); ctx.lineTo(innerX, innerY);
@ -241,7 +242,7 @@ tags:
this.shapes.push({type: 'circle', id, center, radius, color}); this.shapes.push({type: 'circle', id, center, radius, color});
} }
addRing(id, radius, angle, max, color = 'black', center = .5, stroke = 16) { addRing(id, radius, angle, max, color = 'white', center = .5, stroke = 16) {
this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke}); this.shapes.push({type: 'ring', id, radius, angle, max, color, center, stroke});
} }