219 lines
6.2 KiB
Markdown
219 lines
6.2 KiB
Markdown
# MYP Netzwerk-Visualisierung
|
|
|
|
**Mercedes-Benz 3D-Druck-Management-System**
|
|
Interaktive Netzwerk-Architektur-Visualisierung
|
|
|
|
## 🎯 Überblick
|
|
|
|
Diese moderne, interaktive Visualisierung zeigt die komplette Netzwerk-Architektur des MYP (Mercedes-Benz 3D-Druck-Management) Systems. Mit Glassmorphism-Design, warmen Glow-Effekten und flüssigen Animationen bietet sie eine beeindruckende Präsentations-Oberfläche.
|
|
|
|
## ✨ Features
|
|
|
|
### 🎨 Visuelle Effekte
|
|
- **Glassmorphism-Design** mit transluzenten Oberflächen
|
|
- **Warme Glow-Effekte** für alle Netzwerk-Komponenten
|
|
- **Flüssige Animationen** mit GSAP-Performance
|
|
- **Partikel-Animation** für atmosphärischen Hintergrund
|
|
- **Responsive Design** für alle Bildschirmgrößen
|
|
|
|
### 🖱️ Interaktivität
|
|
- **Hover-Effekte** mit detaillierten Komponenteninfos
|
|
- **Klick-Interaktionen** für erweiterte Modalansichten
|
|
- **Keyboard-Navigation** für Barrierefreiheit
|
|
- **Dynamische Verbindungsanimationen**
|
|
- **Netzwerk-Pulse** zur Simulation von Datenflüssen
|
|
|
|
### 📊 Dargestellte Architektur
|
|
- **Benutzer-Schicht**: Kiosk-Interface und Web-Frontend
|
|
- **Server-Schicht**: Raspberry Pi, Flask Backend, SQLite
|
|
- **Netzwerk-Schicht**: Switch und Tapo Smart Plugs
|
|
- **Hardware-Schicht**: 3D-Drucker-Fleet
|
|
|
|
## 🚀 Installation & Start
|
|
|
|
### Voraussetzungen
|
|
- Node.js (Version 14 oder höher) - *Optional für lokalen Development-Server*
|
|
- Moderner Webbrowser mit JavaScript-Unterstützung
|
|
|
|
### Schnellstart
|
|
|
|
```bash
|
|
# 1. In das Visualisierungsverzeichnis wechseln
|
|
cd network-visualization
|
|
|
|
# 2. Dependencies installieren (optional)
|
|
npm install
|
|
|
|
# 3. Development-Server starten
|
|
npm run dev
|
|
|
|
# Alternative: Direkt im Browser öffnen
|
|
# Öffnen Sie index.html in Ihrem Browser
|
|
```
|
|
|
|
### Verfügbare Scripts
|
|
|
|
```bash
|
|
# Development-Server mit Live-Reload
|
|
npm run dev
|
|
|
|
# Vorschau-Server
|
|
npm run preview
|
|
|
|
# Build-Prozess (für Deployment)
|
|
npm run build
|
|
```
|
|
|
|
## 🎛️ Verwendung
|
|
|
|
### 🖱️ Maus-Interaktionen
|
|
- **Hover**: Zeigt Komponenten-Details im Info-Panel
|
|
- **Click**: Öffnet erweiterte Modal-Ansicht mit Spezifikationen
|
|
- **Hervorhebung**: Verbundene Komponenten werden automatisch markiert
|
|
|
|
### ⌨️ Keyboard-Navigation
|
|
- **Tab**: Navigation zwischen Komponenten
|
|
- **Enter/Space**: Komponenten-Details öffnen
|
|
- **Escape**: Modal schließen
|
|
|
|
### 📱 Touch-Geräte
|
|
- **Tap**: Entspricht Maus-Klick
|
|
- **Long-Press**: Entspricht Hover-Effekt
|
|
|
|
## 🏗️ Architektur
|
|
|
|
### 📁 Dateistruktur
|
|
```
|
|
network-visualization/
|
|
├── index.html # Haupt-HTML-Datei
|
|
├── styles.css # Glassmorphism & Animations-Styles
|
|
├── script.js # Interaktivität & GSAP-Animationen
|
|
├── package.json # NPM-Konfiguration
|
|
└── README.md # Diese Dokumentation
|
|
```
|
|
|
|
### 🧩 Komponenten-Übersicht
|
|
- **NetworkVisualization**: Haupt-Klasse für Interaktionen
|
|
- **PerformanceMonitor**: FPS-Monitoring für Debug-Modus
|
|
- **Modal-System**: Dynamische Detail-Ansichten
|
|
- **Animation-Engine**: GSAP-basierte Animationen
|
|
|
|
## 🎨 Design-System
|
|
|
|
### 🌈 Farbpalette
|
|
```css
|
|
/* Primäre Farben */
|
|
--bg-primary: #0a0a0a /* Tiefschwarz */
|
|
--glass-bg: rgba(255,255,255,0.05) /* Transluzent */
|
|
--text-primary: #ffffff /* Weiß */
|
|
|
|
/* Mercedes-Benz Branding */
|
|
--mb-silver: #c7c7c7 /* Mercedes Silber */
|
|
--mb-blue: #0066cc /* Mercedes Blau */
|
|
--mb-gold: #ffb000 /* Mercedes Gold */
|
|
|
|
/* Komponenten-Farben */
|
|
--user-color: #ff6b6b /* Benutzer-Schicht */
|
|
--server-color: #4ecdc4 /* Server-Schicht */
|
|
--network-color: #45b7d1 /* Netzwerk-Schicht */
|
|
--hardware-color: #f39c12 /* Hardware-Schicht */
|
|
```
|
|
|
|
### ✨ Effekte
|
|
- **Glassmorphism**: `backdrop-filter: blur(15px)`
|
|
- **Glow-Effekte**: `box-shadow: 0 0 40px color`
|
|
- **Animationen**: GSAP-Timeline mit Easing
|
|
- **Hover-Transformationen**: 3D-Rotationen und Skalierung
|
|
|
|
## 🔧 Anpassungen
|
|
|
|
### 🎛️ Konfiguration
|
|
Die Visualisierung kann durch Anpassung der CSS-Custom-Properties personalisiert werden:
|
|
|
|
```css
|
|
:root {
|
|
/* Glow-Intensitäten anpassen */
|
|
--glow-soft: 0 0 20px;
|
|
--glow-medium: 0 0 40px;
|
|
--glow-strong: 0 0 60px;
|
|
|
|
/* Animationsgeschwindigkeiten */
|
|
--anim-fast: 0.3s;
|
|
--anim-medium: 0.6s;
|
|
--anim-slow: 1.2s;
|
|
}
|
|
```
|
|
|
|
### 🔧 JavaScript-Erweiterungen
|
|
Neue Komponenten können durch Erweiterung der `NetworkVisualization`-Klasse hinzugefügt werden:
|
|
|
|
```javascript
|
|
// Neue Komponente hinzufügen
|
|
const newNode = document.createElement('div');
|
|
newNode.className = 'node custom-node';
|
|
newNode.setAttribute('data-info', 'Komponenten-Beschreibung');
|
|
```
|
|
|
|
## 📊 Performance
|
|
|
|
### ⚡ Optimierungen
|
|
- **Hardware-Beschleunigung**: CSS-Transforms und Opacity-Animationen
|
|
- **Lazy-Loading**: Animationen nur bei Bedarf
|
|
- **Debounced-Events**: Optimierte Event-Handler
|
|
- **Memory-Management**: Cleanup von GSAP-Animationen
|
|
|
|
### 📈 Monitoring
|
|
Debug-Modus aktivieren für Performance-Metriken:
|
|
```
|
|
http://localhost:3000/?debug=true
|
|
```
|
|
|
|
## 🎯 Präsentations-Tipps
|
|
|
|
### 🖥️ Optimale Darstellung
|
|
- **Auflösung**: 1920x1080 oder höher
|
|
- **Browser**: Chrome, Firefox, Safari (neueste Versionen)
|
|
- **Hardware**: Dedicated Graphics für beste Performance
|
|
|
|
### 🎤 Präsentations-Flow
|
|
1. **Überblick**: Gesamtarchitektur zeigen
|
|
2. **Layer-Navigation**: Von oben nach unten durch die Schichten
|
|
3. **Interaktionen**: Hover-Effekte zur Komponenten-Erklärung
|
|
4. **Details**: Modal-Ansichten für technische Spezifikationen
|
|
5. **Datenflüsse**: Verbindungsanimationen erklären
|
|
|
|
## 🔄 Updates & Wartung
|
|
|
|
### 📦 Dependencies aktualisieren
|
|
```bash
|
|
npm update
|
|
```
|
|
|
|
### 🐛 Debugging
|
|
- Browser-Entwicklertools verwenden
|
|
- Debug-Modus aktivieren (`?debug=true`)
|
|
- Performance-Monitor überwachen
|
|
- Console-Logs prüfen
|
|
|
|
## 📝 Lizenz
|
|
|
|
MIT License - Siehe Haupt-Projektlizenz
|
|
|
|
## 👥 Entwickelt für
|
|
|
|
**Mercedes-Benz 3D-Druck-Management-System**
|
|
IHK-Projektarbeit - Technische Dokumentation
|
|
|
|
---
|
|
|
|
## 🚀 Bereit für die Präsentation!
|
|
|
|
Diese Visualisierung bietet eine moderne, professionelle Darstellung der MYP-Systemarchitektur und eignet sich perfekt für:
|
|
|
|
- ✅ IHK-Abschlusspräsentationen
|
|
- ✅ Technische Dokumentationen
|
|
- ✅ Stakeholder-Meetings
|
|
- ✅ System-Überblick-Demos
|
|
- ✅ Ausbildungs-/Schulungszwecke
|
|
|
|
**Viel Erfolg bei Ihrer Präsentation! 🎉** |