Satellitenhimmel repariert

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(`<?xml version="1.0" encoding="UTF-8"?>`);
+            parts.push('<' + '?xml version="1.0" encoding="UTF-8"?>');
             parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" role="img" aria-label="Satellitenhimmel">`);
             parts.push(`<rect width="${size}" height="${size}" fill="#ffffff" />`);
             parts.push(`<circle cx="${toSvgNumber(cx)}" cy="${toSvgNumber(cy)}" r="${toSvgNumber(radius)}" fill="${palette.skyFill}" />`);
@@ -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);