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

feat: Change clock layout

Browse source 
- Clock is now centered in window
- Clock is resized according to window
This commit is contained in:
sthag 2026-02-26 19:30:30 +01:00
parent a924065931
commit 2f87621756
2 changed files with 40 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,8 +25,7 @@ tags:
const ctxBkg = canvasBkg.getContext('2d');
const canvasRings = document.getElementById('rings');
const ctxRings = canvasRings.getContext('2d');
const centerX = canvasRings.width / 2;
const centerY = canvasRings.height / 2;
const wrap = document.querySelector('.wrap');
let is24HourFormat = true;
let drawSections = false;
@ -37,7 +36,12 @@ tags:
const outerMargin = 8;
const ringWidth = 16;
const ringGap = 8;
const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
let centerX = canvasRings.width / 2;
let centerY = canvasRings.height / 2;
let maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
resizeClock();
const rings = [
{
radius: maxSize,
@ -141,24 +145,8 @@ tags:
drawBackground();
});
markers.forEach((marker) => {
for (let i = 0; i < marker.amount; i++) {
const angle = (i * (360 / marker.amount) - 90) * (Math.PI / 180); // -90 to start at top
const outerRadius = marker.radius + ringWidth / 2;
const outerX = centerX + outerRadius * Math.cos(angle);
const outerY = centerY + outerRadius * Math.sin(angle);
const innerRadius = marker.radius - ringWidth / 2;
const innerX = centerX + innerRadius * Math.cos(angle);
const innerY = centerY + innerRadius * Math.sin(angle);
ctxBkg.strokeStyle = markerColor;
ctxBkg.lineWidth = marker.width;
ctxBkg.beginPath();
ctxBkg.moveTo(outerX, outerY);
ctxBkg.lineTo(innerX, innerY);
ctxBkg.stroke();
}
});
// FIXME: Konstanten mit maxSize werden nicht verändert
window.addEventListener('resize', resizeClock);
drawBackground();
updateRings();
@ -275,5 +263,35 @@ tags:
});
}
}
function resizeClock() {
const height = window.innerHeight;
const width = window.innerWidth;
const windowDimension = {
value: Math.min(height, width),
smaller: height < width ? 'height' : 'width'
};
const clockSize = Math.floor(windowDimension.value * 0.9);
canvasBkg.style.width = clockSize + 'px';
canvasBkg.style.height = clockSize + 'px';
canvasRings.style.width = clockSize + 'px';
canvasRings.style.height = clockSize + 'px';
canvasBkg.width = clockSize;
canvasBkg.height = clockSize;
canvasRings.width = clockSize;
canvasRings.height = clockSize;
centerX = canvasRings.width / 2;
centerY = canvasRings.height / 2;
maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
wrap.style.width = clockSize + 'px';
wrap.style.height = clockSize + 'px';
console.debug(windowDimension);
console.debug('Clock size: ', clockSize);
console.debug('Radius: ', maxSize);
}
</script>
{% endblock %}

4
source/style/modules/_clock.scss
View file

@ -20,13 +20,11 @@
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
}
.wrap {
position: relative;
height: 768px;
width: 768px;
margin: 0 auto;
}
canvas {