Was ist das?
Eine interaktive Webanwendung zur Möblierungs- und Sitzplatzplanung in Architekturplänen. Lade einen Grundriss, kalibriere den Maßstab, platziere Möbel und Gewerke per Drag & Drop. Mehrere Etagen, mehrere Projekte, alles offline im Browser.
In 6 Schritten loslegen
- Welcome-Dialog: „+ Neues Projekt" → Name vergeben → „Leer" wählen (oder ein Beispiel aus
samples/ importieren).
- Toolbar Reihe 1: „+ Etage" → Name vergeben → Plan-Datei wählen (JPG/PNG/PDF/DXF/DWG).
- Bei JPG/PNG/PDF: Plan-Wizard öffnet sich → zwei Punkte auf bekannter Maßlinie klicken → reale Distanz in Metern → Übernehmen. Bei DXF: Maßstab wird automatisch aus der Datei gelesen.
- Linke Sidebar öffnen („MÖBEL"-Tab am linken Rand) → Möbel-Kategorie wählen → Button klicken → Möbel erscheint in der roten Spawn-Zone.
- Möbel mit der Maus an Zielposition ziehen. Klick = +45° drehen. Mehrere markieren mit Strg+Klick oder Rechteck-Auswahl.
- Toolbar: „💾 Speichern" → bleibt im Browser. Backup: „⬇ JSON-Export" als externe Datei.
Was kann das Programm?
- Pläne aus JPG, PNG, PDF, DXF und DWG laden
- Echte Maße (in Metern) durch Kalibrierung
- ~160 Möbel-, Geräte- und Symbol-Typen in 16 Sektionen (inkl. Bar, Außen, Wände, Beleuchtung)
- Mehrere Layer pro Etage (Möbel/Elektro/Heizung/Grundriss/etc.)
- Strecken, Polylinien und Flächen messen
- Wände aus dem Plan automatisch erkennen (Vanilla-JS-Bildverarbeitung)
- Eigene Vorlagen speichern (Einzel-Items oder Gruppen)
- A4-Druck, PNG-Export, selektiver JSON-Export, Standalone-HTML-Export
Toolbar-Reihen
Reihe 1 — Etagen: Etagen-Tabs (Klick = Wechsel) · „+ Etage" (Neu anlegen) · „⚙ Etagen" (verwalten) · AP-Gesamt-Counter
Reihe 2 — Plan: Zoom-Slider (20–120 %) · ppm-Anzeige · „📏 Kalibrieren" · „📐 Messen" (3 Modi) · „🧱 Grundriss erkennen" · „🗑️ Löschen" · „↺ Reset" (Etage)
Reihe 3 — Output: „🖨️ Drucken / PDF" (A4 pro Etage) · „📷 PNG (Etage)" · „⬇ JSON-Export" (selektiv) · „⬆ JSON-Import" · „📦 App+Projekte" (Standalone-HTML)
Reihe 4 — Projekt: „💾 Speichern" · „📂 Projekte" (umschalten/neu) · aktueller Projekt-Name · „❓ Hilfe"
Reihe 5 — Auswahl (erscheint nur bei Selektion): X ausgewählt · „💾 Als Vorlage" (Gruppen-Template)
Reihe 6 — Layer: Plan-Layer (🖼️) und Möbel-Layer als Pills. Klick aufs Auge togglet Sichtbarkeit, Klick auf den Punkt setzt aktiv, Doppelklick auf den Namen benennt um, X löscht.
Sidebar (linker Rand)
Roter „MÖBEL"-Tab am Bildschirm-Rand. Klick → einklappbares Akkordeon mit ~16 Sektionen (Arbeitsplätze, Möbel, Pflanzen, Küche, Elektrotechnik, Beleuchtung, EDV, Klima, Heizung, Sanitär, Sicherheit, Schilder, Bar & Theke, Wände & Öffnungen, Außen / Terrasse, Frei Definieren). „Arbeitsplätze" oben gepinnt, „Frei Definieren" unten gepinnt, dazwischen alphabetisch. Suche oben filtert live. Zustand der Sektionen + Sidebar-offen wird gespeichert.
Spawn-Zone (rotes Rechteck)
Zeigt, wo neue Möbel platziert werden. Per Drag an der roten Beschriftung verschiebbar. Klicks IN der Zone gehen zu Möbeln darunter durch — die Zone blockiert nichts. Pro Etage wird die letzte Position gespeichert.
Layer-System
Jede Etage hat eigene Layer. Plan-Layer = Hintergrund-Bild (kann mehrere geben). Möbel-Layer = einzelne Ebenen mit Möbeln/Symbolen. Aktiver Layer = wo neue Möbel landen. Beim Erkennen oder DXF-Import wird automatisch ein Layer „Grundriss" angelegt.
Unterstützte Plan-Formate
| Format | Verarbeitung | Maßstab |
| JPG / PNG | direkt | manuell per 2-Punkt-Wizard |
| PDF | via inline PDF.js → erste Seite (oder Wahl) als PNG | manuell |
| DXF | Vanilla-JS-Parser (LINE/LWPOLYLINE/CIRCLE/ARC); wird auf Canvas gerendert UND als Wand-Items angelegt | automatisch aus $INSUNITS-Header (mm/cm/m/in/ft) |
| DWG | drei Wege zur Wahl: lokaler Service, Online-Konverter, manuell als DXF speichern | nach Konvertierung wie DXF |
Plan-Wizard (für JPG/PNG/PDF)
Nach Upload: großes Modal mit dem Plan und Zoom/Scroll. Zwei Punkte auf einer bekannten Maßlinie anklicken (z.B. Außenwand mit Maßangabe „24,42 m"). Reale Distanz eintragen → Übernehmen. Tipp: lange Strecken für höhere Genauigkeit. Nachträglich änderbar via „📏 Kalibrieren".
DXF-Import — Details
Der eingebaute Parser liest direkte Linien-Entitäten. Die Modell-Bounding-Box wird auf 1800 px Breite skaliert; der so entstehende „Plan-Bild" wird als Plan-Layer gesetzt. Parallel landen alle Linien als wall-line-Items in einem neu angelegten Layer „Grundriss".
- Unterstützt: LINE, LWPOLYLINE, CIRCLE, ARC
- Nicht (vollständig) unterstützt: POLYLINE-VERTEX-Paare (alter Format), SPLINE, HATCH, INSERT (Blocks werden nicht expandiert), TEXT/MTEXT
- Wenn DXF-Header keine Einheit liefert: Maßstab muss manuell kalibriert werden
DWG-Import — Wege
Beim DWG-Upload öffnet sich ein Auswahl-Dialog:
- Lokaler Service: Python-Service auf deinem Rechner ruft ODA File Converter auf. Datenschutzfreundlich, aber Setup nötig. Details im Tab „🗎 DWG-Service".
- Online-Konverter: Direktlinks zu kostenlosen Diensten (CloudConvert, Convertio, Aspose, AnyConv). Datei verlässt deinen Rechner.
- Manuell: In deinem CAD-Programm (AutoCAD, BricsCAD, QCAD, LibreCAD, …) „Speichern unter…" → DXF wählen → diese DXF dann hier hochladen.
Du musst nichts installieren, wenn du Online- oder CAD-Konvertierung nutzt.
Lokaler DWG-Konverter-Service einrichten
Der Service läuft auf 127.0.0.1:8765, nimmt DWG entgegen, ruft den ODA File Converter auf und gibt DXF zurück. Daten bleiben auf deinem Rechner.
🪟 Windows — Anleitung
- Python 3 installieren
- ODA File Converter installieren (kostenlos)
- Service starten — PowerShell oder CMD öffnen, Ordner wechseln:
cd C:\…\gebaeudeplaner\helper
python dwg_converter_service.py
Erfolgs-Output sollte beginnen mit „ODA Pfad: C:\Program Files\ODA\…\ODAFileConverter.exe".
- Fenster offen lassen während du DWG-Dateien importierst.
Falls ODA in nicht-Standard-Pfad: vor dem Start setzen:
set ODA_PATH=C:\Pfad\zu\ODAFileConverter.exe
python dwg_converter_service.py
🐧 Linux — Anleitung
- Python 3 ist meist schon installiert. Prüfen:
python3 --version. Falls nicht: sudo apt install python3 (Debian/Ubuntu) bzw. sudo pacman -S python (Arch/Manjaro).
- ODA File Converter installieren:
- Download: opendesign.com/guestfiles/oda_file_converter (Linux x64 .deb oder .rpm)
- Debian/Ubuntu:
sudo dpkg -i ODAFileConverter_*.deb && sudo apt --fix-broken install
- Arch/Manjaro: aus dem AUR (
yay -S oda-file-converter) oder die .rpm mit alien umpacken
- Fedora/RHEL:
sudo dnf install ./ODAFileConverter_*.rpm
- Qt-Bibliothek nachziehen falls Fehler:
sudo apt install libqt5gui5 bzw. sudo pacman -S qt5-base
- Service starten:
cd ~/…/gebaeudeplaner/helper
python3 dwg_converter_service.py
- Fenster/Terminal offen lassen während Konvertierungen.
🍏 macOS — Anleitung
- Python 3 installieren:
brew install python (mit Homebrew) oder vom python.org-Installer
- ODA File Converter: opendesign.com/guestfiles/oda_file_converter → macOS-Build →
.dmg-Datei öffnen und nach /Applications ziehen
- Im Terminal:
cd ~/…/gebaeudeplaner/helper
python3 dwg_converter_service.py
Test ob alles läuft
Im Browser http://127.0.0.1:8765/ping aufrufen — sollte JSON liefern mit "oda_found": true.
Sicherheits-Hinweis
Service lauscht nur auf 127.0.0.1 (nicht im LAN sichtbar). Theoretisch könnte jede lokal laufende App den Service ansprechen. Wenn nicht in Verwendung: Fenster schließen, Service stoppt mit Strg+C.
Alternativen (kein Setup nötig)
- Online-Konverter — Links direkt im DWG-Upload-Dialog. CloudConvert, Convertio, Aspose, AnyConv. Datei wird zu Drittanbieter hochgeladen.
- CAD-Tool — AutoCAD/BricsCAD/QCAD/LibreCAD: „Speichern unter" → DXF → diese DXF hier hochladen.
📐 Messen — 3 Modi
Toolbar → „📐 Messen". Im Hint-Banner erscheinen drei Pillen:
- Strecke (Standard): 2 Klicks → gerade Linie → Confirm „X,XX m — speichern?"
- Polylinie: beliebig viele Klicks → Doppelklick beendet → Gesamtlänge in m
- Fläche: Polygon-Klicks → Doppelklick schließt → Fläche in m² (Shoelace-Formel)
Bei „OK" werden Annotationen auf den aktiven Layer abgelegt. Sie sind danach normale Items: drehbar, verschiebbar, löschbar, im PNG-Export sichtbar. Esc beendet den Modus.
🧱 Grundriss-Erkennung
Toolbar → „🧱 Grundriss erkennen". Analyse-Pipeline (Vanilla JS):
- Plan-Bild wird auf max 800 px Breite herunterskaliert (Performance)
- Grayscale-Konversion + Adaptive Threshold
- Sobel-Gradient → Edge-Map
- Hough-Transform → Polar-Linien
- Linien-zu-Segmente entlang der Edges + Cluster ähnlicher Linien
Im Review-Dialog:
- Schieberegler: Empfindlichkeit (Threshold) und Min-Linienlänge → „⟳ Neu berechnen"
- Bereichswahl: „🔲 Bereich zeichnen" → Rechteck auf dem Plan ziehen → Erkennung läuft nur darin (Schnittansichten und Schriftblöcke ausblenden)
- Klick auf eine Linie: aktiv (grün) / deaktiviert (grau-gestrichelt)
- Ziel-Layer: bestehender „Grundriss" oder neu anlegen
- Wand-Stärke: in cm einstellbar (Default 12 cm = Trockenbau)
- Beim Übernehmen: Plan-Layer kann optional ausgeblendet werden
Qualität: sehr gut bei CAD-PDF-Exporten, mittel bei gescannten/handgezeichneten Plänen. Für Türen/Fenster (Bogen-Symbole) noch nicht implementiert.
Möbel platzieren
Sidebar → Sektion wählen → Button klicken → Möbel erscheint in Spawn-Zone der aktuellen Etage und im aktiven Layer.
Bei vielen Möbel-Typen öffnet sich erst ein Maß-Dialog mit Quick-Picks (z.B. Unterschrank: 40/50/60/80/100/120 cm Breite). Bei manchen auch Farb-Auswahl.
Mehrfach-Auswahl
- Strg+Klick oder Shift+Klick: Möbel zur Auswahl togglen
- Rechteck-Auswahl: Maus auf leerer Fläche ziehen → Marquee
- Alle markierten zusammen ziehen / drehen / löschen
- Reihe „Auswahl" in der Toolbar zeigt Anzahl + bietet „💾 Als Vorlage"
🎨 Frei Definieren
Sidebar → Sektion „Frei Definieren" → „🎨 Neues freies Objekt…"
Im Dialog:
- Symbol-Picker (27 Vorlagen) oder eigenes Emoji/Text eintippen
- Maße in cm, Farbe, Label
- Checkbox „Als Vorlage speichern" → Name + Ziel-Sektion wählen → das Möbel erscheint dauerhaft in der gewählten Sidebar-Sektion mit ★-Markierung
Vorlagen aus Mehrfach-Auswahl
Mehrere Möbel auswählen → Toolbar „💾 Als Vorlage" → Name eingeben. Die Vorlage erscheint in der Sektion „Eigene Vorlagen". Klick spawnt alle enthaltenen Möbel zusammen in der Spawn-Zone (relative Anordnung bleibt). ✕ am Vorlagen-Button löscht.
Maßstab + Rotation
- Klick auf Möbel = +45° Drehung
- Shift + Mausrad über Möbel = ±5° Fein-Rotation
- Strg + ziehen = Raster-Snap auf 10-cm-Gitter
Stromkreis-Planung — die Idee
Du planst die elektrische Infrastruktur in drei Ebenen:
- Verteiler (Unterverteilung, Sicherungsschrank) — z.B. „UV-EG"
- FI-Schalter (Fehlerstromschutz, üblich 30 mA) — eine Schutzgruppe pro Verteiler
- LS-Schalter (Leitungsschutz, einzelner Stromkreis) — z.B. „B16" (Charakteristik B, 16 A)
Steckdosen werden einem LS zugeordnet. Damit weißt du jederzeit, welche Steckdose an welcher Sicherung hängt und welcher FI sie schützt.
Workflow
- Steckdosen ganz normal auf dem Plan setzen (Sidebar → Elektrotechnik).
- Toolbar Reihe 4: „⚡ Stromkreise" → öffnet den Verteiler-Dialog.
- „+ Verteiler" für jede Unterverteilung anlegen (Name editierbar). Optional „🔗 Item" → mit einem Sicherungsschrank-Item auf dem Plan verknüpfen.
- Pro Verteiler „+ FI" hinzufügen (Auslösestrom in mA setzbar).
- Pro FI „+ LS" hinzufügen — jedes LS ist ein Stromkreis. Charakteristik (B/C/K) und Nennstrom (A) wählen.
- Steckdosen auf dem Plan markieren (Rechteck-Auswahl oder Strg-/Shift-Klick).
- Im Dialog hinter dem Ziel-LS auf „→" klicken — alle markierten Steckdosen werden zugeordnet. (Alternative: Auswahl-Reihe → „→ Stromkreis" für Liste.)
Visualisierung
- Jedem LS wird automatisch eine eindeutige Farbe aus einer Palette zugewiesen.
- Zugeordnete Steckdosen bekommen einen dezenten Farbring (Box-Shadow) in der LS-Farbe.
- Im Dialog: „👁" hinter einem LS lässt seine Steckdosen kurz pulsieren — schnelle Sichtkontrolle.
- Checkbox „⚠ unzugeordnete Steckdosen markieren" im Dialog: ungebundene Steckdosen bekommen ein gelbes ⚠.
Was stromkreisfähig ist
Alle Items mit hinterlegter Stromlast sind einem LS zuweisbar (markieren → „→ Stromkreis"):
- Steckdosen: Schuko (single + double), Außen-Schuko, Wallbox
- Leuchten: komplette Sektion (intern + außen, inkl. LED-Leisten, Lichtbänder, Pendel, Poller, Strahler)
- Küchengeräte: Kühlschrank, Spülmaschine, Herd, Backofen, Mikrowelle, Wasserkocher, Kaffeemaschine, Kaffeestation, Dunstabzug, Warmwasserspeicher
- EDV / AV: Switch, Server-Rack, Beamer, TV 50"/82"/100". WLAN-AP, IP-Kamera und IP-Telefon sind PoE-Verbraucher — siehe Abschnitt „PoE-Auslastung" weiter unten.
- Klima: AC-Decke/Wand/Boden (Innengerät — Außeneinheit ist gemeinsam abgerechnet)
- Heizung/Lüftung: Gas-Kessel, Wärmepumpe-Innen, Lüfter, Hebeanlage
- Sanitär: Handtrockner, Trinkwasserspender
- Sicherheit: Notlicht, Rettungsschilder
- Außen: Pumpe, Brunnenpumpe
Nicht stromkreisfähig (Möbel, passive Schränke, Sensorik mit Batterie, Daten-/EDV-Dosen, Glasfaser, Antenne, HDMI, Schalter, FI/LS-Item) — keine Last, kein Eintrag im Dialog.
Last-Schätzung pro Stromkreis
Im Dialog zeigt jeder LS eine farbige Last-Pille: aktuell W / max W
- Annahme-Beispiele: Schuko 200 W · Wallbox 11 000 W · Herd 7500 W · Spülmaschine 2000 W · Kühlschrank 150 W · Mikrowelle 1500 W · Kaffeestation 1500 W · Switch 250 W (PoE-Budget inkl. APs/Kameras) · Server-Rack 1500 W · AC-Innen 1200–1500 W · Beamer 300 W · TV 50"/82"/100" = 150/250/400 W · Handtrockner 1500 W · LED-Beleuchtung 10–80 W.
- Maximal-Last = Nennstrom × 230 V × 0,6 (60 % Derating laut DIN/VDE-Empfehlung).
- Farbcode: grün <60 % Auslastung, gelb 60–80 %, rot ≥80 %.
- Die Annahmen sind eine grobe Plausibilitätshilfe — die Belastungsberechnung beim Elektriker bleibt maßgeblich.
Export für Elektriker-Übergabe
Im Stromkreis-Dialog oben rechts:
- 📋 Export (.md) — Markdown mit Tabelle aller Stromkreise und Liste unzugeordneter Steckdosen. Lesbar in Mail/Druck.
- 📊 CSV — Excel-DE-kompatibel (Semikolon-Trenner, UTF-8-BOM). Direkt in Excel/LibreOffice importierbar.
Doppelte zählen doppelt
Doppelsteckdosen (socket-double, data-socket-double) zählen bei der Stockwerks- und Stromkreis-Zählung als 2 Dosen. Glasfaser und einfache LAN/Antenne/HDMI zählen als 1.
Tab-Counter
Jeder Etagen-Tab zeigt zusätzlich zur AP-Zahl die Elektro-Bilanz:
- 🔌 = Strom-Steckdosen (Doppel = 2)
- 🌐 = Netzwerk-/EDV-Dosen + Glasfaser (Doppel = 2)
- 💡 = Leuchten / Leuchtstellen (jede Leuchte = 1)
PoE-Auslastung pro Switch (v9.34)
Statt pauschal 250 W pro Switch wird die Last dynamisch berechnet:
- Switch-Basisverbrauch: 50 W (Eigenverbrauch ohne PoE)
- + PoE-Verbrauch je Gerät: WLAN-AP 15 W, IP-Kamera 8 W, IP-Telefon 5 W
- PoE-Budget pro Switch: 240 W (typischer 24-Port-PoE+-Switch)
Workflow: PoE-Geräte markieren → Auswahl-Reihe → „→ PoE-Quelle" → Switch wählen. Dialog zeigt aktuelle Auslastung pro Switch (grün/gelb/rot wie bei Stromkreisen). Im Stromkreis-Dialog gibt es eine 📡 PoE-Übersicht am Ende mit allen Switches und ihren Budget-Werten plus Warnung bei verwaisten PoE-Geräten.
Der Stromkreis (LS), an dem der Switch hängt, bekommt die effektive Switch-Last (50 W + PoE-Summe), nicht mehr die alte Pauschale.
Was die Stromkreise nicht tun (bewusst)
- Es gibt keine automatische Lastberechnung. Anzahl Steckdosen pro LS ist sichtbar — die Lastannahme (z.B. „Büro ~ 200 W/Dose") bleibt deine Entscheidung.
- Es werden keine Kabel geroutet. Der Plan dient der Zuordnung, nicht der Trassen-Planung.
- Die Stromkreis-Struktur wird mit dem Projekt gespeichert (Standalone: IndexedDB, Server: Datenbank) und in JSON-Exports übernommen.
Zwei Ansichten — Grundriss + Seitenriss
Die Anwendung hat zwei Modi, umschaltbar in Toolbar Reihe 2 → Ansicht:
- 🗺️ Grundriss (Default): Klassische Top-Down-Sicht auf den Etagenplan.
- 🧱 Wand-Ansicht: Seitenriss — alle wandmontierten Elemente (Steckdosen, Schalter, Leuchten, Detektoren, Schilder, …) werden auf ihrer Montagehöhe dargestellt. Boden und Decke sind als Linien sichtbar, dazwischen Hilfslinien alle 50 cm.
Wozu?
Sanity-Check vor Elektro-Termin: Sind alle Schuko-Dosen wirklich auf 30 cm? Sitzt der Schalter neben der Tür auf 105 cm? Hängt die Pendelleuchte auf 200 cm? Solche Inkonsistenzen sieht man im Seitenriss in einer Sekunde, im Grundriss gar nicht.
Montagehöhe (z_cm)
- Jedes Item hat eine Montagehöhe
z_cm über OK Fertigfußboden.
- Defaults aus der Praxis (DIN 18015 / Erfahrungswerte): Schuko 30 · Schalter 105 · Thermostat 150 · Doppelschuko über Schreibtisch typisch 110 (manuell setzen) · Feuerlöscher 110 · Erste-Hilfe-Kasten 150 · Rauchmelder 270 · Deckenleuchten 270 · Pendel 200–220 · Wandleuchte 180 · Schreibtischlampe 75 · Fenster (Brüstung) 90.
- Doppelklick auf ein Item im Seitenriss → Eingabe „Montagehöhe in cm". Wird im State gespeichert. Default greift, solange du nicht manuell überschreibst.
Raumhöhe
Default 300 cm. Button „📐 Raumhöhe" in der Ansicht-Toolbar (nur im Wand-Modus sichtbar) → Eingabe in cm (200–600). Wird pro Etage gespeichert (`floor.roomHeightCm`).
Wand-Filter (v9.35)
Im Wand-Modus erscheint eine Dropdown-Liste mit allen Wand-Items der Etage. Eine Wand wählen filtert auf Items im Umkreis von 80 cm dieser Wand und projiziert sie auf deren Achse. So bekommt man eine echte „Schnitt-Ansicht" einer einzelnen Wand.
- „— alle Items projiziert —": Default, zeigt alle wandmontierten Items auf globaler X-Achse (wie vorher v9.29)
- Wand X (length · angle): Filter aktiv, nur Items entlang dieser Wand werden gezeigt
Was die Wand-Ansicht nicht ist
- Kein 3D: es ist ein 2D-Seitenriss — Items sind nicht räumlich, sondern in ihrer Höhe markiert.
- PNG-Export verwendet derzeit immer den Grundriss-Modus. Wand-Ansicht kann gedruckt werden (siehe Print-Optionen).
Maus & Tastatur
| Aktion | Wirkung |
| Möbel ziehen | Verschieben (bei Multi-Select: alle zusammen) |
| Möbel klicken | +45° drehen (bei Multi-Select: alle zusammen) |
| Shift + Mausrad über Möbel | Fein-Rotation ±5° |
| Strg + ziehen | Raster-Snap (10-cm-Gitter) |
| Strg/Cmd + Klick | Möbel zur Auswahl togglen |
| Shift + Klick | Additiv zur Auswahl |
| Maus auf leerer Fläche ziehen | Rechteck-Auswahl (Marquee) |
| Esc | Auswahl aufheben / Modus beenden / Dialog schließen |
| Entf / Backspace | Markierte Möbel löschen (Confirm) |
| Doppelklick (im Mess-Modus) | Polylinie/Fläche abschließen |
Standalone vs. Server
Die App existiert in zwei Varianten aus derselben Codebasis:
| Standalone | Server |
| Speicherung | IndexedDB im Browser | SQLite auf dem Server |
| Login | — | User + Passwort (Session-Cookie) |
| Multi-User | — | Owner / Editor / Viewer pro Projekt |
| Offline | ✓ | — |
| Geräte-übergreifend | JSON-Export/Import | automatisch |
| Konflikt-Handling | — | Optimistic-Lock, Konflikt-Dialog |
Server aufsetzen (Linux, kurz)
cd backend/
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python3 ../scripts/build_html.py --mode server
python3 setup_admin.py
uvicorn main:app --host 127.0.0.1 --port 8000
Produktiv-Setup mit systemd, Caddy/nginx-Proxy, Backup-Cron:
siehe backend/README.md im Repo.
Vorlagen: backend/gebaeudeplaner.service.template,
backend/Caddyfile.template.
Sharing (nur Server-Modus)
Im Projekt-Switcher („📂 Projekte") hat jedes Projekt, dessen Owner du bist,
einen 🤝-Knopf. Klick öffnet den Sharing-Dialog:
- Aktuelle Freigaben mit Rolle (Viewer/Editor) — Rolle per Dropdown ändern, ✕ zum Entfernen
- User hinzufügen: aus Dropdown wählen, Rolle setzen, „+ Hinzufügen"
Geteilte Projekte tauchen beim Empfänger automatisch in seiner Projekt-Liste auf — mit Markierung „geteilt von <owner>".
Welche Variante läuft hier gerade?
— wird beim Öffnen befüllt —
Setup: pro Firma eine Instanz
Pro Firma läuft ein eigener Server (FastAPI + SQLite). Auf dieser Instanz arbeiten beliebig viele Benutzer (interne Kollegen, externe Partner wie Architekten / Elektriker / Bauleiter) auf mehreren Bauprojekten parallel.
⚙ Admin-Panel (v9.37+)
Sichtbar nur für Rolle admin in Toolbar Reihe 4:
- + Neuen Benutzer einladen: Username + 🎲-Zufalls-Passwort (14 Zeichen) + Rolle (user/admin)
- Erzeugtes Passwort wird einmalig in der Tabelle in Monospace angezeigt — sicher an den Empfänger weitergeben
- Pro User: 🔑 Passwort zurücksetzen · Rolle ändern (Dropdown) · Aktiv togglen · 🗑 löschen
- Self-Lock: du kannst dich nicht selbst herabstufen, deaktivieren oder löschen, wenn du der letzte aktive Admin bist (Backend wirft 400)
- User mit eigenen Projekten lassen sich nicht löschen (409) — Eigentum erst übertragen oder Projekte selbst löschen
Projekt-Sharing (v9.18+)
Wer ein Projekt anlegt, wird automatisch dessen Owner („Master"). Im Projekt-Switcher hat jedes eigene Projekt einen 🤝-Knopf:
- Editor: darf Inhalt ändern + speichern
- Viewer: nur lesen
- Rolle live per Dropdown ändern, ✕ entfernt den Zugriff
Geteilte Projekte erscheinen beim Empfänger automatisch im Projekt-Switcher mit „geteilt von <Owner>". Bei gleichzeitigen Edits sorgt der Konflikt-Dialog dafür, dass Änderungen nicht überschrieben werden (Optimistic-Lock).
Möbel-Vorlagen zentral (v9.38+)
Im Server-Modus liegen Vorlagen zentral auf dem Server statt browser-lokal:
- Beim Speichern fragt das System: „Soll diese Vorlage geteilt werden?"
- Privat: nur du siehst sie · Geteilt: alle Benutzer der Instanz sehen sie
- Eigene shared Vorlagen tragen ein 🌐, fremde shared ein 👤 mit „(von <Owner>)"
- Löschen darf nur der Owner — bei fremden Vorlagen ist das ✕ ausgeblendet
- Sichtbarkeit nachträglich änderbar:
toggleTemplateVisibility(id) (im Code; UI-Toggle kann ergänzt werden)
Beispiel-Workflow: externen Elektriker einbinden
- Admin: ⚙ Admin → User
wimmer-elektro anlegen, Rolle user, Zufalls-Passwort generieren, weitergeben
- Owner des betroffenen Projekts: Projekt-Switcher → 🤝 → User wählen → Rolle „Editor"
- Elektriker meldet sich an, sieht das Projekt, kann Stromkreise/Steckdosen direkt im Plan zuordnen
- Nach Abschluss: Admin → wimmer-elektro deaktivieren oder löschen (falls keine eigenen Projekte)
📜 Versionen (v9.39+)
Jedes Speichern legt automatisch eine Version an. Über 📜 Versionen in der Toolbar:
- Versionen benennen (z.B. „Vor Ortstermin Wimmer") — benannte Versionen werden nie automatisch gelöscht; unbenannte werden auf die letzten 30 pro Projekt beschnitten
- ↩ Wiederherstellen: setzt die aktuelle Version auf den Stand einer alten Version (der bisherige Stand wird vorher als neue Version gesichert)
- 🔍 Diff (v9.50): zwei Versionen aus den Dropdowns wählen → Liste der hinzugefügten / entfernten / geänderten Items mit Feld-Diff (vorher → nachher)
📑 Audit-Log (v9.40+)
Über 📑 Audit sichtbar. Wer hat wann was getan: Logins, Projekt-Saves, Sharing-Änderungen, User-Edits. Admin sieht alle Events der Instanz, normale User nur ihre eigenen. Filter nach Aktion, Ziel-Typ, Ziel-ID. CSV-Export für Excel (v9.44+).
⭐ Project-Templates (v9.47+)
Im Projekt-Switcher hat jedes eigene Projekt einen ⭐/☆-Knopf. Wer markiert macht es zur Vorlage:
- Vorlagen sind für alle Benutzer der Instanz read-only sichtbar
- Beim Anlegen eines neuen Projekts erscheint die Option „⭐ Aus Vorlage klonen" mit Dropdown
- Geklont werden alle Etagen, Layer, Items und Pläne — das Original bleibt unverändert
🔔 Benachrichtigungen (v9.48+)
In der Toolbar erscheint 🔔 Inbox mit Anzahl ungelesener Nachrichten. Ausgelöst durch:
- share: jemand hat dich zu einem Projekt eingeladen
- role_changed: deine Rolle wurde geändert (z.B. von Viewer auf Editor)
- unshare: dein Zugriff wurde entzogen
Aktualisierung erfolgt beim Login + manuellem Refresh (kein Polling).
🔗 Public-Links (read-only, v9.49+)
Wer ein Projekt mit Externen ohne Login teilen will: im Sharing-Dialog Sektion 🔗 Public-Links:
- Label (optional) + Ablauf-Dauer (7 / 30 / 90 Tage oder unbefristet) → „+ Link erzeugen"
- Der vollständige Token wird nur einmal angezeigt — sofort kopieren und an den Empfänger
- Empfänger öffnet die URL
?public=… und sieht das Projekt schreibgeschützt mit Banner
- Aktive Links lassen sich jederzeit widerrufen (✕) — sind dann sofort ungültig
🔐 2FA / TOTP (v9.51+)
Optional pro User. Toolbar-Knopf 🔐 2FA:
- „+ 2FA jetzt einrichten" → Server zeigt Base32-Secret + otpauth-URI einmalig an
- Secret in einer Authenticator-App scannen oder eintippen (Aegis, Google Authenticator, …)
- Aktuellen 6-stelligen Code zur Bestätigung eingeben → 2FA ist aktiv
- Beim nächsten Login wird zusätzlich der Code abgefragt; das Feld blendet der Login-Dialog automatisch ein
- Deaktivieren verlangt Eingabe des Passworts, damit kein fremder Sessionhopper das abschalten kann
📋 2FA-Backup-Codes (v9.52+)
Notfall-Codes für den Fall, dass das Phone weg ist. Im 2FA-Dialog (nur wenn 2FA aktiv) gibt es Sektion 📋 Backup-Codes:
- „🔁 10 neue Codes erzeugen" generiert sie einmalig — danach kopieren oder 🖨 drucken und sicher ablegen (z.B. Passwortmanager, ausgedruckt im Tresor)
- Jeder Code lässt sich genau einmal beim Login eingeben (statt des 6-stelligen TOTP-Codes); danach ist er verbraucht
- Status-Anzeige im Dialog: „N von 10 Codes übrig" — bei < 3 wird gewarnt
- Neuerzeugen invalidiert alle bisherigen Codes; sicher gegen aus alten Backups
🔑 Passkeys / WebAuthn (v9.60+)
Passwortloser Login per Touch ID, Windows Hello, Sicherheits-Token (YubiKey, Solo) oder Smartphone-Passkey. Pflicht-Voraussetzung: HTTPS-Verbindung.
- 2FA-Dialog → Sektion 🔑 Passkeys → „+ Passkey registrieren" → Browser fragt nach Authenticator
- Beim nächsten Login: Benutzername eintippen, dann 🔑 Passkey-Button → Browser fragt nach Touch/Klick auf den Schlüssel — kein Passwort, kein TOTP
- Mehrere Passkeys pro User möglich (z.B. „MacBook Touch ID" + „YubiKey" + „iPhone")
- Liste mit Labels + letzter Verwendung; Löschen jederzeit möglich
- Funktioniert parallel zu Passwort+TOTP — wer kein Passkey hat, loggt sich wie gewohnt ein
🔗 Public-Link-Admin-Übersicht (v9.53+)
Toolbar-Button 🔗 Links (nur Admin) öffnet eine instanzweite Tabelle aller Public-Share-Links — egal welches Projekt. Pro Eintrag: Projekt, Label, Ersteller, Erstell-/Ablaufdatum, Status (aktiv/widerrufen/abgelaufen). Aktive Links lassen sich zentral widerrufen — wichtig für Audit oder wenn der Owner nicht erreichbar.
📦 Möbel-Kompositionen (v9.55+)
Vorgefertigte Multi-Item-Vorlagen mit 📦-Badge im Möbel-Akkordeon:
- 4er-Bench mit Trennwand, 6er-Bench mit Trennwand (Arbeitsplätze)
- Besprechung 6 Plätze + TV (Tisch + 6 Stühle + Display als ein Klick)
- Phonebox-Paar (2× Framery One)
- Server-Rack-Set (Server + USV + Patchpanel im EDV-Bereich)
Klick platziert alle Items relativ zum Origin; danach lassen sie sich gemeinsam selektieren + verschieben. Eigene Vorlagen über 💾 Als Vorlage aus der Auswahl-Leiste — landen daneben.
📏 Mess-Werkzeug (v9.56+)
Mess-Modus per 📐 Messen-Button. Drei Sub-Modi:
- Strecke: 2 Klicks → Distanz; Live-Vorschau zeichnet vom letzten Punkt eine gestrichelte Linie zum Cursor mit Wert
- Polylinie: Klicks beliebig, Doppelklick beendet → Gesamtlänge
- Fläche: Klicks rundum, Doppelklick schließt → m²
Doppelklick auf eine bestehende Mess-Annotation öffnet einen Prompt zum Editieren der Beschriftung (z.B. „Wandbreite Verwaltung — 5,01 m"). Print-Dialog hat Checkbox „Mess-Liste" für eine Tabellenseite pro Etage.
🖼 Versionen-Diff visuell (v9.59+)
Im Versionen-Dialog nach Auswahl zweier Versionen und Klick 🔍 Diff erscheint ein 🖼 Im Plan markieren-Button im Header des Diff-Ergebnisses. Schließt den Dialog und zeichnet farbige Marker direkt über die Items des aktuellen Stockwerks:
- + grün = neu in v_b
- − rot = nur in v_a, in v_b entfernt
- ~ gelb = in beiden, Felder unterschiedlich (Position, Größe, Label…)
Banner oben rechts mit Reset-Knopf; Etagenwechsel verwirft Markierungen automatisch.
📱 PWA / App-Installation (v9.58+)
Im Server-Mode lässt sich der Gebäudeplaner als Installierbare App betreiben:
- Chrome/Edge auf Desktop: Menü → Installieren … oder Adressleisten-Icon
- Mobile Browser: „Zum Startbildschirm hinzufügen"
- Funktioniert nur über HTTPS (oder localhost)
- App-Shell wird gecached, nach einmaligem Laden auch offline öffenbar (Login schlägt dann aber fehl bis Netz wieder da)
💾 Geo-Backup (v9.57+)
Admin-Hinweis: `backup.sh` schiebt jeden lokalen Snapshot zusätzlich via `rclone` in einen Cloud-Speicher (S3, B2, Hetzner Storage Box, Google Drive). Konfiguration über Env-Var `GEBAEUDEPLANER_REMOTE`. Details in `backend/README.md`.
🟢 Online-Anzeige (v9.43+)
Wer gerade am selben Projekt arbeitet, taucht als 🟢 N Benutzer aktiv-Badge neben dem Projektnamen auf (Mouseover: Liste). Polling alle 30 Sekunden; Einträge älter als 60 s gelten als offline.
🔑 Passwort vergessen (v9.42+)
Auf der Login-Seite Link „🔑 Passwort vergessen?" → Benutzername oder E-Mail eintragen → System schickt Reset-Mail (sofern SMTP konfiguriert). One-shot-Link, 1 Stunde gültig.
Wo werden meine Daten gespeichert?
Alles läuft lokal im Browser. Speicher: IndexedDB (kein 5 MB-Limit wie bei localStorage, ca. 50 % der freien Festplatte verfügbar). Kein Server, keine Cloud, kein Account.
Mehrere Projekte: parallel im selben Browser. „📂 Projekte"-Dialog zum Wechseln, Anlegen, Umbenennen, Löschen.
Backup & Transfer
- ⬇ JSON-Export: selektiver Export (Etagen/Layer per Checkbox). Datei lässt sich auf einem anderen Rechner per ⬆ JSON-Import wieder einlesen (Modus „Hinzufügen" oder „Ersetzen").
- 📦 App+Projekte: exportiert App + alle Projekte als eine HTML-Datei. Empfänger öffnet sie → die enthaltenen Projekte werden angeboten zu übernehmen. Ideal zum Weitergeben an Mitarbeiter ohne Setup.
Wann gehen Daten verloren?
- Browser-Cache komplett gelöscht (Inkl. „Site-Daten" / „IndexedDB")
- Inkognito-/Privatfenster (IndexedDB wird beim Schließen geleert)
- Browser-Update kann selten zu Quota-Reset führen
Tipp: regelmäßig „⬇ JSON-Export" oder „📦 App+Projekte" als Backup ablegen.
Quota voll?
Wenn der Browser keinen Platz mehr hat, erscheint ein roter Banner. Lösung: ältere Projekte löschen (mit JSON-Export-Backup vorher) oder andere Site-Daten freiräumen.