Settings UI - Benutzeroberfläche

Übersicht

Die neue Settings-Oberfläche trennt benutzerfreundliche Einstellungen von technischen Verbindungsdetails durch ein Tab-System.

---

🎨 Interface Design

Tab-basierte Konfiguration

Die Wechselrichter-Konfiguration ist in zwei Tabs unterteilt:

┌─────────────────────────────────────────┐
│  Allgemein  |  Verbindung              │
└─────────────────────────────────────────┘

---

Tab 1: Allgemein

Benutzerfreundliche Einstellungen

Dieser Tab enthält alle Informationen, die für den Endbenutzer relevant sind:

Felder

Feld	Typ	Beschreibung
Name	Text	Eindeutiger Name für den Wechselrichter
Hersteller	Dropdown	Auswahl aus 8 Herstellern
Modell	Dropdown	Automatisch gefiltert nach Hersteller
Standort	Text	Stadt oder Adresse der Installation
Installationsjahr	Zahl	Jahr zwischen 2000 und aktuell
Demo Mode	Checkbox	Aktiviert simulierte Daten
Nennleistung	Zahl	Peak Power in kW (nur Demo)
Monitoring aktiv	Checkbox	Aktiviert/Deaktiviert Überwachung

Screenshot-Beispiel

┌─────────────────────────────────────────┐
│ Inverter Name                           │
│ [Niederlauer PV-Anlage_______________] │
│                                         │
│ Hersteller          Modell             │
│ [Kostal ▼]          [PLENTICORE + 4.2▼]│
│                                         │
│ Standort                                │
│ [Niederlauer________________________] │
│                                         │
│ Installationsjahr                       │
│ [2023__]                               │
│                                         │
│ ☐ Demo Mode (Simulated Inverter)      │
│                                         │
│ ☑ Enable monitoring                    │
└─────────────────────────────────────────┘

---

Tab 2: Verbindung

Technische Verbindungsdetails

Dieser Tab enthält alle technischen Parameter für die API-Kommunikation:

Nur für echte Wechselrichter

Der Verbindungs-Tab ist deaktiviert, wenn Demo Mode aktiv ist.

Felder

Feld	Typ	Beschreibung
Protocol Type	Dropdown	SMA/Kostal/Delta (auto-selected)
IP Address	Text	Lokale IP-Adresse (z.B. 192.168.1.100)
Port	Zahl	Standard 502 (Modbus) oder 80 (HTTP)
Username	Text	Optional für API-Zugriff
Password	Password	Optional mit Sichtbarkeits-Toggle

Screenshot-Beispiel

┌─────────────────────────────────────────┐
│ ℹ API-Verbindung wird automatisch       │
│   konfiguriert. Basierend auf Hersteller│
│   und Modell wird die passende API-     │
│   Struktur von EVCC übernommen.         │
│                                         │
│ Protocol Type                           │
│ [KOSTAL ▼]                             │
│                                         │
│ IP Address / Hostname        Port      │
│ [192.168.1.100__________]   [80___]   │
│                                         │
│ ─── Authentication (optional) ───      │
│ Leave empty if not required            │
│                                         │
│ Username            Password           │
│ [admin______]       [●●●●●●●●] 👁      │
│                                         │
│ ⚠ Verbindungstest wird nach dem        │
│   Speichern automatisch durchgeführt.  │
└─────────────────────────────────────────┘

Features

🔐 Password Visibility Toggle

• Klicken auf das Auge-Icon zeigt/versteckt das Passwort
• Icons: 👁️ (Visibility) / 🙈 (VisibilityOff)

🔌 Auto-Konfiguration

• Protocol Type wird automatisch basierend auf Hersteller gesetzt:
• SMA → Modbus TCP (Port 502)
• Kostal → HTTP API (Port 80)
• Delta → Modbus TCP (Port 502)
• Fronius → HTTP API (Port 80)
• etc.

---

🎯 Demo Mode

Aktivierung

Checkbox "Demo Mode" im Tab "Allgemein":

• ✅ Aktiviert:
• Tab "Verbindung" wird deaktiviert
• Zusätzliches Feld "Nennleistung" erscheint
• IP wird automatisch auf "demo.local" gesetzt

• Simulierte Daten werden generiert

• ❌ Deaktiviert:

• Tab "Verbindung" ist verfügbar
• Echte Wechselrichter-Verbindung wird hergestellt

Demo-Daten

// Simulierte Produktion basierend auf:
- Peak Power (kW)
- Tageszeit (Sonnenstand)
- Wetterbedingungen (simuliert)
- Realistische Produktionskurve

---

💾 Speichern

Validierung

Vor dem Speichern werden alle Felder validiert:

• ✅ Name nicht leer
• ✅ Hersteller ausgewählt
• ✅ Modell ausgewählt
• ✅ Standort angegeben
• ✅ Installationsjahr gültig
• ✅ IP-Adresse im richtigen Format (wenn nicht Demo)
• ✅ Port im Bereich 1-65535

Backend Payload

{
  "name": "Niederlauer PV-Anlage",
  "manufacturer": "Kostal",
  "model": "PLENTICORE plus 4.2",
  "location": "Niederlauer",
  "installation_year": 2023,
  "ip_address": "192.168.1.100",
  "port": 80,
  "protocol": "modbus",
  "enabled": true,
  "is_demo": false,
  "username": "admin",
  "password": "geheim"
}

---

🔄 API Integration

EVCC Pattern

Die API-Struktur folgt dem EVCC-Pattern:

1. Hersteller auswählen → bestimmt Protocol Type
2. Modell auswählen → bestimmt Register-Mapping
3. Verbindung testen → validiert Konfiguration
4. Daten abrufen → startet automatisches Polling

Unterstützte Protokolle

Hersteller	Protocol	Port	Auth
SMA	Modbus TCP	502	❌
Kostal	HTTP API	80	✅
Delta	Modbus TCP	502	❌
Fronius	HTTP API	80	❌
SolarEdge	Modbus TCP	1502	❌
Huawei	Modbus TCP	502	❌

---

🎨 Material-UI Komponenten

Verwendete Komponenten

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Tabs,
  Tab,
  TextField,
  MenuItem,
  Checkbox,
  FormControlLabel,
  InputAdornment,
  IconButton,
  Alert,
  Grid,
  Box,
} from '@mui/material';

import {
  Visibility,
  VisibilityOff,
} from '@mui/icons-material';

Theme

• Primary Color: Material Blue
• Secondary Color: Material Orange
• Success: Green (für aktivierte Wechselrichter)
• Warning: Amber (für Demo Mode)

---

📱 Responsive Design

Das UI passt sich automatisch an verschiedene Bildschirmgrößen an:

Desktop (>1200px)

┌──────────────┬──────────────┬──────────────┐
│  Card 1      │  Card 2      │  Card 3      │
└──────────────┴──────────────┴──────────────┘

Tablet (768px - 1200px)

┌──────────────┬──────────────┐
│  Card 1      │  Card 2      │
├──────────────┴──────────────┤
│  Card 3                     │
└─────────────────────────────┘

Mobile (<768px)

┌─────────────────────────────┐
│  Card 1                     │
├─────────────────────────────┤
│  Card 2                     │
├─────────────────────────────┤
│  Card 3                     │
└─────────────────────────────┘

---

🚀 Zugriff

Die Settings-Oberfläche ist verfügbar unter:

• Lokal: http://localhost:3000
• Cloudflare: https://solarlog.karma.organic

Navigation: Dashboard → Settings (Menü oben rechts)