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

feat: Add elements to clock

Browse source 
Add rings for minutes and hours.
This commit is contained in:
sthag 2025-11-16 12:43:10 +01:00
parent dfa315310f
commit 1e874c4ac8
1 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -20,26 +20,37 @@ tags:
const canvas = document.getElementById('clock'); const canvas = document.getElementById('clock');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
function drawRing(seconds) { function drawCircle(seconds, minutes, hours) {
const centerX = canvas.width / 2; const centerX = canvas.width / 2;
const centerY = canvas.height / 2; const centerY = canvas.height / 2;
const radius = 128; const radius = 128;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
const startAngle = -0.5 * Math.PI; // Start at the top function drawArc(value, maxValue, radius, strokeStyle) {
const endAngle = startAngle + (2 * Math.PI * (seconds / 60)); const startAngle = -0.5 * Math.PI; // Start at the top
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
ctx.beginPath(); ctx.beginPath();
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
ctx.lineWidth = 16; ctx.lineWidth = 16;
ctx.strokeStyle = 'black'; ctx.strokeStyle = strokeStyle;
ctx.stroke(); ctx.stroke();
}
drawArc(seconds, 60, radius, 'black');
drawArc(minutes, 60, radius - 20, 'lightgrey');
// drawArc(hours % 12, 12, radius - 40, 'white');
drawArc(hours, 24, radius - 40, 'white');
} }
function updateCircle() { function updateCircle() {
const currentSeconds = new Date().getSeconds(); const currentDate = new Date();
drawRing(currentSeconds); const currentSeconds = currentDate.getSeconds();
const currentMinutes = currentDate.getMinutes();
const currentHours = currentDate.getHours();
drawCircle(currentSeconds, currentMinutes, currentHours);
} }
updateCircle(); updateCircle();