⚡ Designer 3.0 offline

KI Messkonzept Designer 3

Beschreibe deine Anlage – ich leite ein Messkonzept ab und rendere ein Diagramm (lokal, ohne Server).

Willkommen! Beschreibe mir deine elektrische Anlage (z.B. PV, Speicher, Mieter, Wallbox). Ich erstelle ein passendes Messkonzept als Diagramm und Hinweise.
Tipp: Du kannst auch rechts Komponenten anklicken. Chat und Komponenten synchronisieren sich.
Dieses Demo-File nutzt eine kleine Regel-Engine statt echter API-Endpunkte. Export erstellt lokal Dateien (SVG/PNG/„Präsentation“).

Beispiele:

🧾 Ergebnis

📋 Technische Hinweise

📊 Messkonzept-Diagramm

Komponenten
☀️ Erzeuger
🔋 Speicher
💡 Verbraucher
🏗️ Infrastruktur
Aktive Komponenten
KI analysiert deine Anfrage…
Regel-Engine: Extraktion → Messkonzept → Diagramm
🔍
Daten extrahieren
Text → Werte
📊
Messkonzept ableiten
Typ & Zähler
⚡
Hinweise generieren
VDE/Technik
🎨
Diagramm rendern
HTML/CSS
📐
Füge Komponenten hinzu oder nutze den Chat.
`; } // ---- Misc ---- function toggleFloating() { const panel = document.querySelector(".diagram-panel"); // Fullscreen and floating are mutually exclusive if (panel.classList.contains("fullscreen")) panel.classList.remove("fullscreen"); panel.classList.toggle("floating"); resetView(); // Auto-size the floating window to the Messkonzept canvas // In floating mode, prioritize the Messkonzept visibility (collapse palette by default). if (panel.classList.contains("floating")) panel.classList.add("palette-collapsed"); requestAnimationFrame(() => autoSizeDiagramPanelToConcept()); } function maximizeDiagram() { const panel = document.querySelector(".diagram-panel"); if (!panel.classList.contains("floating")) { // Maximize implies floating window mode if (panel.classList.contains("fullscreen")) panel.classList.remove("fullscreen"); panel.classList.add("floating"); panel.classList.add("palette-collapsed"); } panel.style.width = "calc(100vw - 24px)"; panel.style.height = "calc(100vh - 24px)"; panel.style.left = "12px"; panel.style.top = "12px"; resetView(); } function togglePalette() { const panel = document.querySelector(".diagram-panel"); panel.classList.toggle("palette-collapsed"); requestAnimationFrame(() => { if (currentDesign) updateDiagram(currentDesign); else resetView(); }); } function autoSizeDiagramPanelToConcept() { const panel = document.querySelector(".diagram-panel"); if (!panel || !panel.classList.contains("floating")) return; const header = panel.querySelector(".diagram-header"); const palette = panel.querySelector("#componentPalette"); const stage = panel.querySelector(".diagram-stage"); if (!header || !palette || !stage) return; const headerH = header.getBoundingClientRect().height; const paletteVisible = !panel.classList.contains("palette-collapsed"); const paletteW = paletteVisible ? palette.getBoundingClientRect().width : 0; // The Messkonzept stage is the sizing driver: maximize readability within viewport. const desiredStageW = Math.max(820, Math.floor(window.innerWidth * (paletteVisible ? 0.70 : 0.92))); const desiredStageH = Math.max(560, Math.floor(window.innerHeight * 0.88)); const chromeW = 8; // borders/padding approximation const chromeH = 16; const maxW = Math.max(640, window.innerWidth - 24); const maxH = Math.max(420, window.innerHeight - 24); const desiredPanelW = clamp(paletteW + desiredStageW + chromeW, 640, maxW); const desiredPanelH = clamp(headerH + desiredStageH + chromeH, 520, maxH); panel.style.width = `${Math.round(desiredPanelW)}px`; panel.style.height = `${Math.round(desiredPanelH)}px`; // Center the floating panel const left = Math.round((window.innerWidth - desiredPanelW) / 2); const top = Math.round((window.innerHeight - desiredPanelH) / 2); panel.style.left = `${Math.max(12, left)}px`; panel.style.top = `${Math.max(12, top)}px`; // Re-render to new viewport size if (currentDesign) updateDiagram(currentDesign); else resetView(); } function toggleGlossar() { document.getElementById("glossarOverlay").classList.toggle("show"); document.getElementById("glossarPanel").classList.toggle("show"); } function resetAll() { if (!confirm("Alles zurücksetzen (Chat, Komponenten, Diagramm)?")) return; for (const k of Object.keys(activeComponents)) activeComponents[k] = []; nextId = 1; currentDesign = null; currentErklaerungen = []; currentVdeHinweise = []; currentSchaltplanHtml = ""; document.getElementById("chatMessages").innerHTML = `
Willkommen! Beschreibe mir deine elektrische Anlage (z.B. PV, Speicher, Mieter, Wallbox). Ich erstelle ein passendes Messkonzept als Diagramm und Hinweise.
Tipp: Du kannst auch rechts Komponenten anklicken. Chat und Komponenten synchronisieren sich.
`; updateComponentList(); regenerateFromComponents(); resetView(); } // Init updateComponentList();