69 lines
2.9 KiB
Markdown
69 lines
2.9 KiB
Markdown
# 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:
|
|
|
|
```javascript
|
|
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:
|
|
```html
|
|
<!-- Network Background Script -->
|
|
<script src="{{ url_for('static', filename='network-background.js') }}"></script>
|
|
```
|
|
|
|
mit:
|
|
```html
|
|
<!-- 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:
|
|
```html
|
|
<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. |