🐛 Update: Added support for the 'find' command in settings.local.json. Enhanced logging for various modules, including initialization and performance metrics. Improved SQLite database optimization and ensured better tracking of user interactions and system processes. 📚
This commit is contained in:
219
network-visualization/README.md
Normal file
219
network-visualization/README.md
Normal file
@ -0,0 +1,219 @@
|
||||
# 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! 🎉**
|
||||
Reference in New Issue
Block a user