Eskimue/skyview.astronomiemuseum.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dämmerungsgrafik weiter verfeinern

Browse Source
This commit is contained in:
Eskimue
2026-07-13 13:41:31 +02:00
parent 06ceb9183b
commit 368d10f1e7
1 changed files with 13 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/daemmerungszeiten.php
+13 -21
View File
@@ -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') ?>"> <input id="yearSelect" type="number" min="1900" max="2200" value="<?= htmlspecialchars((string) date('Y'), ENT_QUOTES, 'UTF-8') ?>">
</div> </div>
</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-inline-fields">
<div class="twilight-field"> <div class="twilight-field">
<label for="lineOverlay">Linienoverlay</label> <label for="lineOverlay">Linienoverlay</label>
@@ -494,7 +480,6 @@ const fieldPreset = document.getElementById('presetLocation');
const fieldName = document.getElementById('locationName'); const fieldName = document.getElementById('locationName');
const fieldTimezone = document.getElementById('timezone'); const fieldTimezone = document.getElementById('timezone');
const fieldYear = document.getElementById('yearSelect'); const fieldYear = document.getElementById('yearSelect');
const fieldCanvasQuality = document.getElementById('canvasQualitySelect');
const fieldOverlay = document.getElementById('lineOverlay'); const fieldOverlay = document.getElementById('lineOverlay');
const fieldPngScale = document.getElementById('pngScaleSelect'); const fieldPngScale = document.getElementById('pngScaleSelect');
const renderButton = document.getElementById('renderButton'); const renderButton = document.getElementById('renderButton');
@@ -961,7 +946,7 @@ function readFormState() {
timeZone, timeZone,
year, year,
stepMinutes, stepMinutes,
canvasQuality: Number(fieldCanvasQuality.value) || 1, canvasQuality: 3,
pngScale: Number(fieldPngScale.value) || 1, pngScale: Number(fieldPngScale.value) || 1,
showLines: fieldOverlay.value === 'on' 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 context = targetContext || canvas.getContext('2d');
const width = targetWidth || canvas.clientWidth; const width = targetWidth || canvas.clientWidth;
const height = targetHeight || canvas.clientHeight; const height = targetHeight || canvas.clientHeight;
@@ -1167,6 +1152,11 @@ function drawChart(chart, targetContext = null, targetWidth = null, targetHeight
context.scale(pixelRatio, pixelRatio); context.scale(pixelRatio, pixelRatio);
context.clearRect(0, 0, width, height); 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 margin = { top: 22, right: 18, bottom: 48, left: 70 };
const plotWidth = Math.max(10, width - margin.left - margin.right); const plotWidth = Math.max(10, width - margin.left - margin.right);
const plotHeight = Math.max(10, height - margin.top - margin.bottom); 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.lineTo(x, margin.top + plotHeight);
context.stroke(); context.stroke();
const labelX = index === chart.monthBoundaries.length - 1 const nextBoundary = chart.monthBoundaries[index + 1];
? margin.left + plotWidth - 10 const startDay = boundary.dayIndex;
: x + 8; 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); context.fillText(boundary.label.replace('.', ''), labelX, margin.top + plotHeight + 10);
}); });
@@ -1447,7 +1439,7 @@ function exportCurrentChartAsPng() {
const exportContext = exportCanvas.getContext('2d'); const exportContext = exportCanvas.getContext('2d');
exportContext.scale(scale, scale); exportContext.scale(scale, scale);
drawChart(currentChart, exportContext, canvas.clientWidth, canvas.clientHeight, scale); drawChart(currentChart, exportContext, canvas.clientWidth, canvas.clientHeight, scale, '#121726');
exportCanvas.toBlob((blob) => { exportCanvas.toBlob((blob) => {
if (!blob) { if (!blob) {