feat: New content for clock
- Add background canvas - Add marker - Add sections
This commit is contained in:
parent
8af4dc92d9
commit
6e75d9b290
3 changed files with 184 additions and 68 deletions
|
|
@ -8,7 +8,10 @@ tags:
|
|||
|
||||
{% block body %}
|
||||
<main>
|
||||
<canvas id="rings" width="512" height="512"></canvas>
|
||||
<div class="wrap">
|
||||
<canvas id="background" width="512" height="512"></canvas>
|
||||
<canvas id="rings" width="512" height="512"></canvas>
|
||||
</div>
|
||||
<p>
|
||||
<button id="tglFormat">12-Stunden-Format</button>
|
||||
</p>
|
||||
|
|
@ -17,71 +20,138 @@ tags:
|
|||
|
||||
{% block script %}
|
||||
<script>
|
||||
// Page script
|
||||
const canvas = document.getElementById('rings');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const canvasBkg = document.getElementById('background');
|
||||
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;
|
||||
|
||||
let is24HourFormat = true;
|
||||
const colorDayOfWeek = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim();
|
||||
const colorDayOfMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim();
|
||||
const colorMonth = getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim();
|
||||
let currentDate = new Date();
|
||||
let currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
|
||||
let daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
|
||||
|
||||
const outerMargin = 8;
|
||||
const ringWidth = 16;
|
||||
const ringGap = 8;
|
||||
const maxSize = (canvasRings.width / 2 - ringWidth / 2) - outerMargin;
|
||||
const sections = [
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap),
|
||||
color: `rgba(0, 0, 0, .1)`
|
||||
},
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
|
||||
color: `rgba(0, 0, 0, .2)`
|
||||
},
|
||||
];
|
||||
const rings = [
|
||||
{
|
||||
radius: maxSize,
|
||||
color: 'black'
|
||||
},
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap),
|
||||
color: 'lightgrey'
|
||||
},
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap) * 2,
|
||||
color: 'white'
|
||||
},
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap) * 3 - ringGap,
|
||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-yellow').trim()
|
||||
},
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap) * 4 - ringGap,
|
||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-orange').trim()
|
||||
},
|
||||
{
|
||||
radius: maxSize - (ringWidth + ringGap) * 5 - ringGap,
|
||||
color: getComputedStyle(document.documentElement).getPropertyValue('--clock-color-pink').trim()
|
||||
}
|
||||
];
|
||||
const markerColor = `rgba(0, 0, 0, .2)`;
|
||||
const markers = [
|
||||
{
|
||||
amount: 60,
|
||||
radius: maxSize,
|
||||
width: 1
|
||||
},
|
||||
{
|
||||
amount: 60,
|
||||
radius: rings[1].radius,
|
||||
width: 1
|
||||
},
|
||||
{
|
||||
amount: is24HourFormat ? 24 : 12,
|
||||
radius: rings[2].radius,
|
||||
width: 3
|
||||
},
|
||||
{
|
||||
amount: 7,
|
||||
radius: rings[3].radius,
|
||||
width: 5
|
||||
},
|
||||
{
|
||||
amount: daysInCurrentMonth,
|
||||
radius: rings[4].radius,
|
||||
width: 3
|
||||
},
|
||||
{
|
||||
amount: 12,
|
||||
radius: rings[5].radius,
|
||||
width: 3
|
||||
}
|
||||
];
|
||||
|
||||
document.getElementById('tglFormat').addEventListener('click', () => {
|
||||
is24HourFormat = !is24HourFormat;
|
||||
document.getElementById('tglFormat').textContent = is24HourFormat ? '12-Stunden-Format' : '24-Stunden-Format';
|
||||
});
|
||||
|
||||
function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = canvas.height / 2;
|
||||
const lineWidth = 16;
|
||||
const lineGap = 8;
|
||||
const maxSize = canvas.width / 2 - lineWidth;
|
||||
ctxBkg.lineWidth = 72;
|
||||
ctxBkg.strokeStyle = sections[0].color;
|
||||
ctxBkg.beginPath();
|
||||
ctxBkg.arc(centerX, centerY, sections[0].radius, 0, 2 * Math.PI);
|
||||
ctxBkg.stroke();
|
||||
ctxBkg.strokeStyle = sections[1].color;
|
||||
ctxBkg.beginPath();
|
||||
ctxBkg.arc(centerX, centerY, sections[1].radius, 0, 2 * Math.PI);
|
||||
ctxBkg.stroke();
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
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);
|
||||
|
||||
function drawArc(value, maxValue, radius, strokeStyle) {
|
||||
const startAngle = -0.5 * Math.PI; // Start at the top
|
||||
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle, false);
|
||||
ctx.lineWidth = 16;
|
||||
ctx.strokeStyle = strokeStyle;
|
||||
ctx.stroke();
|
||||
ctxBkg.strokeStyle = markerColor;
|
||||
ctxBkg.lineWidth = marker.width;
|
||||
ctxBkg.beginPath();
|
||||
ctxBkg.moveTo(outerX, outerY);
|
||||
ctxBkg.lineTo(innerX, innerY);
|
||||
ctxBkg.stroke();
|
||||
}
|
||||
});
|
||||
|
||||
drawArc(
|
||||
(seconds === 0) ? 60 : seconds,
|
||||
60,
|
||||
maxSize,
|
||||
'black'
|
||||
);
|
||||
drawArc(
|
||||
(minutes === 0) ? 60 : minutes,
|
||||
60,
|
||||
maxSize - lineWidth - lineGap,
|
||||
'lightgrey'
|
||||
);
|
||||
drawArc(
|
||||
is24HourFormat ? hours : hours % 12,
|
||||
is24HourFormat ? 24 : 12,
|
||||
maxSize - (lineWidth + lineGap) * 2,
|
||||
'white'
|
||||
);
|
||||
drawArc(dayOfWeek, 7, maxSize - (lineWidth + lineGap) * 3, colorDayOfWeek);
|
||||
drawArc(dayOfMonth, daysInCurrentMonth, maxSize - (lineWidth + lineGap) * 4, colorDayOfMonth);
|
||||
drawArc(month, 12, maxSize - (lineWidth + lineGap) * 5, colorMonth);
|
||||
}
|
||||
updateRings();
|
||||
setInterval(updateRings, 1000);
|
||||
|
||||
function updateRings() {
|
||||
const currentDate = new Date();
|
||||
currentDate = new Date();
|
||||
const currentSeconds = currentDate.getSeconds();
|
||||
const currentMinutes = currentDate.getMinutes();
|
||||
const currentHours = currentDate.getHours();
|
||||
const currentDayOfWeek = getNumericWeekday(currentDate);
|
||||
const currentDayOfMonth = currentDate.getDate();
|
||||
const currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
|
||||
const daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
|
||||
currentMonth = currentDate.getMonth() + 1; // Get current month (0-11)
|
||||
daysInCurrentMonth = daysInMonth(currentMonth, currentDate.getFullYear());
|
||||
|
||||
drawRings(
|
||||
currentSeconds,
|
||||
|
|
@ -104,7 +174,41 @@ tags:
|
|||
return new Date(year, month, 0).getDate();
|
||||
}
|
||||
|
||||
updateRings();
|
||||
setInterval(updateRings, 1000);
|
||||
function drawArc(value, maxValue, radius, strokeStyle) {
|
||||
const startAngle = -0.5 * Math.PI; // Start at the top
|
||||
const endAngle = startAngle + (2 * Math.PI * (value / maxValue));
|
||||
|
||||
ctxRings.lineWidth = 16;
|
||||
ctxRings.strokeStyle = strokeStyle;
|
||||
ctxRings.beginPath();
|
||||
ctxRings.arc(centerX, centerY, radius, startAngle, endAngle, false);
|
||||
ctxRings.stroke();
|
||||
}
|
||||
|
||||
function drawRings(seconds, minutes, hours, dayOfWeek, dayOfMonth, month, daysInCurrentMonth) {
|
||||
ctxRings.clearRect(0, 0, canvasRings.width, canvasRings.height);
|
||||
|
||||
drawArc(
|
||||
(seconds === 0) ? 60 : seconds,
|
||||
60,
|
||||
rings[0].radius,
|
||||
rings[0].color
|
||||
);
|
||||
drawArc(
|
||||
(minutes === 0) ? 60 : minutes,
|
||||
60,
|
||||
rings[1].radius,
|
||||
rings[1].color
|
||||
);
|
||||
drawArc(
|
||||
is24HourFormat ? hours : hours % 12,
|
||||
is24HourFormat ? 24 : 12,
|
||||
rings[2].radius,
|
||||
rings[2].color
|
||||
);
|
||||
drawArc(dayOfWeek, 7, rings[3].radius, rings[3].color);
|
||||
drawArc(dayOfMonth, daysInCurrentMonth, rings[4].radius, rings[4].color);
|
||||
drawArc(month, 12, rings[5].radius, rings[5].color);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -17,7 +17,19 @@
|
|||
@extend .sec_main_center;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 512px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -270,21 +270,21 @@
|
|||
padding-left: hippie.$space_double;
|
||||
}
|
||||
|
||||
// Index
|
||||
// -----------------------------------------------------------------------------
|
||||
.wrap {
|
||||
display: flex;
|
||||
// height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
width: 80%;
|
||||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: hippie.$color_darker;
|
||||
#demo {
|
||||
.wrap {
|
||||
display: flex;
|
||||
// height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hello {
|
||||
flex: 0 1 auto;
|
||||
width: 80%;
|
||||
|
||||
ul {
|
||||
padding: 1em 5em;
|
||||
background-color: hippie.$color_darker;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue