From 368d10f1e71e7785ae0dae361b94e810b58273e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20M=C3=BCller?= <ich@eskimue.de>
Date: Mon, 13 Jul 2026 13:41:31 +0200
Subject: [PATCH] =?UTF-8?q?D=C3=A4mmerungsgrafik=20weiter=20verfeinern?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/daemmerungszeiten.php | 34 +++++++++++++---------------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/public/daemmerungszeiten.php b/public/daemmerungszeiten.php
index 2ded712..c4d46ad 100644
--- a/public/daemmerungszeiten.php
+++ b/public/daemmerungszeiten.php
@@ -365,20 +365,6 @@ body.daemmerungszeiten-page main > .container {
                         <input id="yearSelect" type="number" min="1900" max="2200" value="<?= htmlspecialchars((string) date('Y'), ENT_QUOTES, 'UTF-8') ?>">
                     </div>
                 </div>
-                <div class="twilight-inline-fields">
-                    <div class="twilight-field">
-                        <label for="resolutionInfo">Auswertungsraster</label>
-                        <input id="resolutionInfo" type="text" value="1 Minute (fest)" readonly>
-                    </div>
-                    <div class="twilight-field">
-                        <label for="canvasQualitySelect">Canvas-Qualität</label>
-                        <select id="canvasQualitySelect">
-                            <option value="1">1x</option>
-                            <option value="2" selected>2x</option>
-                            <option value="3">3x</option>
-                        </select>
-                    </div>
-                </div>
                 <div class="twilight-inline-fields">
                     <div class="twilight-field">
                         <label for="lineOverlay">Linienoverlay</label>
@@ -494,7 +480,6 @@ const fieldPreset = document.getElementById('presetLocation');
 const fieldName = document.getElementById('locationName');
 const fieldTimezone = document.getElementById('timezone');
 const fieldYear = document.getElementById('yearSelect');
-const fieldCanvasQuality = document.getElementById('canvasQualitySelect');
 const fieldOverlay = document.getElementById('lineOverlay');
 const fieldPngScale = document.getElementById('pngScaleSelect');
 const renderButton = document.getElementById('renderButton');
@@ -961,7 +946,7 @@ function readFormState() {
         timeZone,
         year,
         stepMinutes,
-        canvasQuality: Number(fieldCanvasQuality.value) || 1,
+        canvasQuality: 3,
         pngScale: Number(fieldPngScale.value) || 1,
         showLines: fieldOverlay.value === 'on'
     };
@@ -1149,7 +1134,7 @@ async function buildChartData(state, token) {
     };
 }
 
-function drawChart(chart, targetContext = null, targetWidth = null, targetHeight = null, targetScale = null) {
+function drawChart(chart, targetContext = null, targetWidth = null, targetHeight = null, targetScale = null, backgroundFill = null) {
     const context = targetContext || canvas.getContext('2d');
     const width = targetWidth || canvas.clientWidth;
     const height = targetHeight || canvas.clientHeight;
@@ -1167,6 +1152,11 @@ function drawChart(chart, targetContext = null, targetWidth = null, targetHeight
     context.scale(pixelRatio, pixelRatio);
     context.clearRect(0, 0, width, height);
 
+    if (backgroundFill) {
+        context.fillStyle = backgroundFill;
+        context.fillRect(0, 0, width, height);
+    }
+
     const margin = { top: 22, right: 18, bottom: 48, left: 70 };
     const plotWidth = Math.max(10, width - margin.left - margin.right);
     const plotHeight = Math.max(10, height - margin.top - margin.bottom);
@@ -1208,9 +1198,11 @@ function drawChart(chart, targetContext = null, targetWidth = null, targetHeight
         context.lineTo(x, margin.top + plotHeight);
         context.stroke();
 
-        const labelX = index === chart.monthBoundaries.length - 1
-            ? margin.left + plotWidth - 10
-            : x + 8;
+        const nextBoundary = chart.monthBoundaries[index + 1];
+        const startDay = boundary.dayIndex;
+        const endDay = nextBoundary ? nextBoundary.dayIndex : chart.totalDays;
+        const midDay = startDay + ((endDay - startDay) / 2);
+        const labelX = margin.left + (midDay / chart.totalDays) * plotWidth;
         context.fillText(boundary.label.replace('.', ''), labelX, margin.top + plotHeight + 10);
     });
 
@@ -1447,7 +1439,7 @@ function exportCurrentChartAsPng() {
     const exportContext = exportCanvas.getContext('2d');
 
     exportContext.scale(scale, scale);
-    drawChart(currentChart, exportContext, canvas.clientWidth, canvas.clientHeight, scale);
+    drawChart(currentChart, exportContext, canvas.clientWidth, canvas.clientHeight, scale, '#121726');
 
     exportCanvas.toBlob((blob) => {
         if (!blob) {