website/docs/ANLEITUNG.md

Anleitung: Animierter Netzwerk-Hintergrund

Diese Anleitung erklärt, wie Sie ein Netzwerk-Bild als animierten Hintergrund für die gesamte Website einrichten können.

Option 1: Manuelle Installation

1. Kopieren Sie das gewünschte Netzwerk-Bild (z.B. d2efd014-1325-471f-b9a7-90d025eb81d6.png) in die Datei website/static/network-bg.jpg.

   Sie können dafür das beiliegende Batch-Skript verwenden:

   copy-network-image.bat d2efd014-1325-471f-b9a7-90d025eb81d6.png
   

2. Starten Sie den Flask-Server mit dem folgenden Befehl:

   python start-flask-server.py
   

3. Öffnen Sie die Website unter http://127.0.0.1:5000/

Anpassung der Animation

Sie können die Animation des Netzwerk-Hintergrunds anpassen, indem Sie die Datei website/static/network-background.js bearbeiten. Hier sind die wichtigsten Parameter:

let animationSpeed = 0.0005; // Geschwindigkeit der Rotation
let scaleSpeed = 0.0002;     // Geschwindigkeit der Skalierung
let opacitySpeed = 0.0003;   // Geschwindigkeit der Transparenzänderung

Animation der Mindmap-Verbindungen

Die Verbindungen zwischen den Knoten in der Mindmap werden jetzt mit einer fließenden Animation dargestellt. Diese Animationen verbessern die Sichtbarkeit der Zusammenhänge und machen die Interaktion mit der Karte intuitiver.

Funktionen:

1. Animierte Linien: Die Verbindungslinien zwischen den Knoten bewegen sich in einem fließenden Muster.
2. Hervorhebung bei Hover: Beim Überfahren eines Knotens oder einer Verbindung mit der Maus werden diese hervorgehoben.
3. Kategorien-Beziehungen: Die visuellen Verbindungen zwischen den Kategorien sind jetzt deutlicher erkennbar.

Position des Auswahlfelds

Das Auswahlfeld auf der Karte wurde weiter nach links verschoben, sodass es vollständig sichtbar ist, wenn keine Auswahl getroffen wurde. Die Größe wurde ebenfalls angepasst, um die Lesbarkeit zu verbessern.

Wiederherstellung des ursprünglichen Hintergrunds (optional)

Wenn Sie zum ursprünglichen Sternenhintergrund zurückkehren möchten, müssen Sie folgende Änderungen vornehmen:

1. Bearbeiten Sie die Datei website/templates/base.html und ersetzen Sie:

   <!-- Network Background Script -->
   <script src="{{ url_for('static', filename='network-background.js') }}"></script>
   

   mit:

   <!-- Three.js für den Sternenhintergrund -->
   <script src="{{ url_for('static', filename='three.min.js') }}"></script>
   <script src="{{ url_for('static', filename='background.js') }}"></script>
   

2. Bearbeiten Sie die Datei website/templates/mindmap.html und entfernen Sie die Zeile:

   <script src="{{ url_for('static', filename='network-animation.js') }}"></script>
   

3. Entfernen Sie den CSS-Code für #mindmap-container::before und die anderen netzwerkspezifischen Stile aus der Datei website/templates/mindmap.html.

4. Starten Sie den Flask-Server neu, um die Änderungen zu übernehmen.