diff --git a/public/satellitenhimmel.php b/public/satellitenhimmel.php index 11ec0e6..bc8f4bd 100644 --- a/public/satellitenhimmel.php +++ b/public/satellitenhimmel.php @@ -517,7 +517,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) { const ctx = canvas.getContext('2d'); const exportLogoImg = new Image(); exportLogoImg.src = 'images/logoAM_sw.png'; - const EXPORT_BACKGROUND_COLOR = '#f3efe6'; + const EXPORT_BACKGROUND_COLOR = '#d2c8b6'; let invertSky = false; let mirrorEastWest = true; let exportOpaqueSky = false; @@ -1298,6 +1298,65 @@ if (!empty($currentLocation) && is_array($currentLocation)) { return `satellitenhimmel_${name}_${parts.year}-${padNumber(parts.month)}-${padNumber(parts.day)}_${padNumber(parts.hour)}-${padNumber(parts.minute)}.${extension}`; } + function getSatpassExportInfoLines() { + const satelliteName = (lastSelectedSatelliteName || 'Satellit').trim(); + const parts = [satelliteName]; + + if (lastSelectedPass?.aosTime instanceof Date && lastSelectedPass?.losTime instanceof Date) { + parts.push(formatDateLocal(lastSelectedPass.aosTime)); + parts.push(`Überflug ${formatTime(lastSelectedPass.aosTime)} bis ${formatTime(lastSelectedPass.losTime)} Uhr`); + } + + return [{ + text: parts.join(' | '), + fontSize: 17, + fontWeight: '600' + }]; + } + + function drawSatpassExportInfo(targetCtx, targetCanvas) { + const lines = getSatpassExportInfoLines(); + if (!lines.length) return; + + const padding = Math.round(targetCanvas.width * 0.028); + const lineGap = 0; + const innerPaddingX = 18; + const innerPaddingY = 10; + + let maxWidth = 0; + let totalHeight = innerPaddingY * 2; + lines.forEach((line, index) => { + targetCtx.save(); + targetCtx.font = `${line.fontWeight} ${line.fontSize}px Georgia`; + const width = targetCtx.measureText(line.text).width; + targetCtx.restore(); + maxWidth = Math.max(maxWidth, width); + totalHeight += line.fontSize; + if (index < lines.length - 1) totalHeight += lineGap; + }); + + const panelWidth = Math.min(targetCanvas.width - padding * 2, maxWidth + innerPaddingX * 2); + const panelX = (targetCanvas.width - panelWidth) / 2; + const panelY = Math.max(0, padding - 5); + targetCtx.save(); + targetCtx.fillStyle = 'rgba(255, 252, 245, 0.88)'; + targetCtx.strokeStyle = 'rgba(96, 82, 56, 0.22)'; + targetCtx.lineWidth = 1.5; + targetCtx.fillRect(panelX, panelY, panelWidth, totalHeight); + targetCtx.strokeRect(panelX, panelY, panelWidth, totalHeight); + + let textY = panelY + innerPaddingY; + lines.forEach((line) => { + targetCtx.font = `${line.fontWeight} ${line.fontSize}px Georgia`; + targetCtx.fillStyle = '#2d2417'; + targetCtx.textAlign = 'center'; + targetCtx.textBaseline = 'top'; + targetCtx.fillText(line.text, panelX + panelWidth / 2, textY); + textY += line.fontSize + lineGap; + }); + targetCtx.restore(); + } + function generateSatpassSvgMarkup() { const prevExport = exportOpaqueSky; exportOpaqueSky = true; @@ -1308,7 +1367,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) { const lon = Number(SITE_LOCATION.longitude); const starTime = lastReferenceTime ?? new Date(); const parts = []; - parts.push(``); + parts.push('<' + '?xml version="1.0" encoding="UTF-8"?>'); parts.push(``); parts.push(``); parts.push(``); @@ -1441,6 +1500,7 @@ if (!empty($currentLocation) && is_array($currentLocation)) { ectx.fillStyle = EXPORT_BACKGROUND_COLOR; ectx.fillRect(0,0,ec.width,ec.height); ectx.drawImage(canvas, 0, 0); + drawSatpassExportInfo(ectx, ec); try { await ensureExportLogoLoaded(); const margin = Math.round(ec.width*0.025), lw = Math.round(ec.width*0.16);