🐛 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:
2025-06-14 16:26:43 +02:00
parent ee54bc273c
commit 89037861e3
2472 changed files with 691099 additions and 1 deletions

View 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! 🎉**