From e46264b201fb077d10432cdf1774f1466b49f10f Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Sun, 27 Apr 2025 06:26:10 +0200 Subject: [PATCH] Fix: network background loading and fallback mechanism: Implement a retry logic for loading the network background image with a maximum of two attempts, first trying the SVG version and then falling back to a JPG if necessary. Add a fallback background drawing function to maintain visual continuity when image loading fails. Update placeholder comment in JPG file to reflect the use of an SVG alternative. --- website/__pycache__/app.cpython-311.pyc | Bin 47069 -> 47397 bytes website/static/network-background.js | 97 ++++++++++++++++------- website/static/network-bg.jpg | 6 +- website/static/network-bg.svg | 99 ++++++++++++++++++++++++ 4 files changed, 172 insertions(+), 30 deletions(-) create mode 100644 website/static/network-bg.svg diff --git a/website/__pycache__/app.cpython-311.pyc b/website/__pycache__/app.cpython-311.pyc index 896763ec00409c539eb7a0b16fe898ff25d20d6b..f024fec67e0f96e33e7feccde607e7bcefa5e966 100644 GIT binary patch delta 393 zcmccno@wbPCf?<|yj%=Guwy-M#<7XKl8m=Ds$bxp{E%HjxM~?A1H)<{hJaMTl*rSLCMGB6m*$mBw(}O7d`&^9K83LaY#_v{HB8HZywz}#Ug6UEFNIZlYgyHW~|sOxAHaCK}7me3zXimYe-9A0v1$W-G6C6hm9E3ug} zFfycCPY&QynLLlrn6Yf~LRC@L>J;5IHIv`)Nix=MX5)95HJM|TGGqB>omID)CiASd p;M&H>0My37P~5TEZ|zI2$vHb#2r`JqC^FwsWQkE_zoWqjBmuR!DuDn1 diff --git a/website/static/network-background.js b/website/static/network-background.js index 9f615a0..2274539 100644 --- a/website/static/network-background.js +++ b/website/static/network-background.js @@ -11,6 +11,8 @@ let scaleDirection = 1; let opacityDirection = 1; let animationFrameId = null; let isDarkMode = document.documentElement.classList.contains('dark'); +let loadAttempts = 0; +const MAX_LOAD_ATTEMPTS = 2; // Initialize the canvas and load the image function initNetworkBackground() { @@ -36,16 +38,34 @@ function initNetworkBackground() { // Get context with alpha enabled ctx = canvas.getContext('2d', { alpha: true }); - // Load the network image + // Load the network image - versuche zuerst die SVG-Version networkImage = new Image(); networkImage.crossOrigin = "anonymous"; // Vermeidet CORS-Probleme - networkImage.src = '/static/network-bg.jpg'; - // Fallback auf lokalen Pfad, falls der absolute Pfad fehlschlägt + // Event-Handler für Fehler - Fallback auf Standard-Hintergrund networkImage.onerror = function() { - networkImage.src = 'static/network-bg.jpg'; + loadAttempts++; + if (loadAttempts < MAX_LOAD_ATTEMPTS) { + // Wenn SVG fehlschlägt, versuche JPG + if (networkImage.src.endsWith('svg')) { + networkImage.src = '/static/network-bg.jpg'; + } else { + // Wenn beide fehlschlagen, starte einfach Animation ohne Hintergrund + console.log("Konnte kein Hintergrundbild laden, verwende einfachen Hintergrund"); + isImageLoaded = true; // Trotzdem Animation starten + startAnimation(); + } + } else { + // Zu viele Versuche, verwende einfachen Hintergrund + console.log("Konnte kein Hintergrundbild laden, verwende einfachen Hintergrund"); + isImageLoaded = true; // Trotzdem Animation starten + startAnimation(); + } }; + // Versuche zuerst die SVG-Version zu laden + networkImage.src = '/static/network-bg.svg'; + networkImage.onload = function() { isImageLoaded = true; startAnimation(); @@ -102,9 +122,6 @@ function resizeCanvas() { // Start animation function startAnimation() { - if (!isImageLoaded) return; - - // Cancel any existing animation if (animationFrameId) { cancelAnimationFrame(animationFrameId); } @@ -115,7 +132,7 @@ function startAnimation() { // Draw network image function drawNetworkImage() { - if (!isImageLoaded || !ctx) return; + if (!ctx) return; // Clear canvas with proper clear method ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1)); @@ -135,33 +152,57 @@ function drawNetworkImage() { // Set global opacity, angepasst für Dark Mode ctx.globalAlpha = isDarkMode ? opacity : opacity * 0.8; - // Bildgröße berechnen, um den Bildschirm abzudecken - const imgAspect = networkImage.width / networkImage.height; - const canvasAspect = canvas.width / canvas.height; - - let drawWidth, drawHeight; - - if (canvasAspect > imgAspect) { - drawWidth = canvas.width / (window.devicePixelRatio || 1); - drawHeight = drawWidth / imgAspect; + if (isImageLoaded && networkImage.complete) { + // Bildgröße berechnen, um den Bildschirm abzudecken + const imgAspect = networkImage.width / networkImage.height; + const canvasAspect = canvas.width / canvas.height; + + let drawWidth, drawHeight; + + if (canvasAspect > imgAspect) { + drawWidth = canvas.width / (window.devicePixelRatio || 1); + drawHeight = drawWidth / imgAspect; + } else { + drawHeight = canvas.height / (window.devicePixelRatio || 1); + drawWidth = drawHeight * imgAspect; + } + + // Draw image centered + ctx.drawImage( + networkImage, + -drawWidth / 2, + -drawHeight / 2, + drawWidth, + drawHeight + ); } else { - drawHeight = canvas.height / (window.devicePixelRatio || 1); - drawWidth = drawHeight * imgAspect; + // Fallback: Zeichne einen einfachen Hintergrund mit Punkten + drawFallbackBackground(); } - // Draw image centered - ctx.drawImage( - networkImage, - -drawWidth / 2, - -drawHeight / 2, - drawWidth, - drawHeight - ); - // Restore context state ctx.restore(); } +// Fallback-Hintergrund mit Punkten und Linien +function drawFallbackBackground() { + const width = canvas.width / (window.devicePixelRatio || 1); + const height = canvas.height / (window.devicePixelRatio || 1); + + // Zeichne einige zufällige Punkte + ctx.fillStyle = isDarkMode ? 'rgba(139, 92, 246, 0.2)' : 'rgba(139, 92, 246, 0.1)'; + + for (let i = 0; i < 50; i++) { + const x = Math.random() * width; + const y = Math.random() * height; + const radius = Math.random() * 3 + 1; + + ctx.beginPath(); + ctx.arc(x - width/2, y - height/2, radius, 0, Math.PI * 2); + ctx.fill(); + } +} + // Animation loop function animate() { // Update animation parameters diff --git a/website/static/network-bg.jpg b/website/static/network-bg.jpg index 71ca67d..25e474e 100644 --- a/website/static/network-bg.jpg +++ b/website/static/network-bg.jpg @@ -1,5 +1,7 @@ -/* Dies ist ein Platzhalter für das Netzwerk-Hintergrundbild. +/* Dies ist ein Platzhalter für das Netzwerk-Hintergrundbild mit Base64-Kodierung. Das eigentliche Bild sollte hier durch eine echte JPG-Datei ersetzt werden. Empfohlene Bildgröße: mindestens 1920x1080px - Optimaler Stil: Dunkler Hintergrund mit abstrakten Verbindungslinien und Punkten */ \ No newline at end of file + Optimaler Stil: Dunkler Hintergrund mit abstrakten Verbindungslinien und Punkten + + Da wir keine echte JPG-Datei erstellen können, verwende stattdessen eine SVG-Datei mit dem gleichen Namen. */ diff --git a/website/static/network-bg.svg b/website/static/network-bg.svg new file mode 100644 index 0000000..7ae76ba --- /dev/null +++ b/website/static/network-bg.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file