LochCAD

Open-Source Schaltplan- & Lochraster-CAD, direkt im Browser.

Live-Demo · Dokumentation · Mitwirken · Changelog

---

Über das Projekt

LochCAD ist ein webbasiertes EDA-Tool (Electronic Design Automation), das speziell für die Arbeit mit Lochrasterplatinen entwickelt wurde. Schaltpläne zeichnen, auf Lochraster übertragen, in 3D prüfen und als Netzliste oder Stückliste exportieren. Alles kostenlos im Browser, ohne Installation.

Features

Feature	Beschreibung
Schaltplan-Editor	Symbole platzieren, Drähte ziehen, Net-Labels vergeben, mit Multi-Sheet-Support
Lochraster-Editor	Bauteile auf Perfboard/Stripboard platzieren, Drähte routen, Lötbrücken setzen
3D-Vorschau	Interaktive 3D-Ansicht der bestückten Platine (Three.js)
Bauteil-Editor	Eigene Schaltplansymbole und Footprints definieren
Autorouter	Automatisches Routen von Verbindungen auf dem Lochraster
Auto-Layout	Automatische Bauteilplatzierung auf dem Lochraster
ERC / DRC	Electrical & Design Rules Check für Schaltplan und Layout
Simulation	ngspice (WebAssembly) direkt im Browser: Arbeitspunkt, Transient, DC- und AC-Sweep, Messspitzen im Schaltplan, Kurven-Viewer
Echtzeit-Zusammenarbeit	WebSocket-basiert: Räume erstellen/beitreten, Live-Cursor, Presence-Avatare, State-Sync
Benutzerprofile	Profil mit Name und Farbe für die Zusammenarbeit
Export	.lochcad-Projekt, SPICE-Netzliste, Stückliste (CSV/HTML), Netzlisten-JSON, Bestückungsplan-PDF
Projektmanager	Mehrere Projekte verwalten, importieren, exportieren, archivieren
Projekt-Notizen	Markdown-Notizen pro Projekt, exportierbar als .md
Offline-fähig	Läuft komplett im Browser, keine Daten verlassen den Rechner (außer bei Zusammenarbeit)

Schnellstart

Voraussetzungen

• Node.js ≥ 18
• npm oder pnpm

Installation

# Repository klonen
git clone https://github.com/rathlinus/LochCAD.git
cd LochCAD

# Abhängigkeiten installieren
npm install

# Entwicklungsserver starten
npm run dev

Die App ist dann erreichbar unter http://localhost:3000.

Build für Produktion

npm run build
npm run preview

---

Projektstruktur

LochCAD/
├── public/                  # Statische Assets (Logo, Icons)
├── server/
│   └── collab-server.cjs    # WebSocket Collaboration-Server (Node.js)
├── src/
│   ├── components/          # React UI-Komponenten
│   │   ├── collab/          #   Zusammenarbeit (ShareDialog, AuthModal, Presence, Cursors)
│   │   ├── layout/          #   App-Layout, TopBar, Toolbar, StatusBar
│   │   ├── properties/      #   Eigenschaften-Panel
│   │   └── sidebar/         #   Bauteil-Bibliothek Sidebar
│   ├── constants/           # Globale Konstanten (Grid, Farben, Shortcuts)
│   ├── features/            # Feature-Module
│   │   ├── schematic-editor/   # Schaltplan-Editor (Konva)
│   │   ├── perfboard-editor/   # Lochraster-Editor (Konva)
│   │   ├── preview-3d/         # 3D-Vorschau (Three.js / R3F)
│   │   └── component-editor/   # Bauteil-Editor
│   ├── lib/                 # Kernlogik
│   │   ├── collab/          #   Collaboration-Protokoll, Client, Sync-Engine
│   │   ├── engine/          #   Netlist, Router, Auto-Layout, ERC, DRC
│   │   ├── export/          #   SPICE, BOM, PDF, Projektdatei
│   │   ├── component-library/  # Eingebaute Bauteilbibliothek
│   │   ├── clipboard.ts     #   Copy/Paste-Logik
│   │   └── units.ts         #   SI-Einheiten-Konvertierung
│   ├── stores/              # Zustand State-Management (inkl. collabStore, authStore)
│   └── types/               # TypeScript-Typdefinitionen
├── docs/                    # Dokumentation
├── nginx/                   # Nginx-Konfiguration (Deployment)
├── vite.config.ts           # Vite-Konfiguration
├── tailwind.config.js       # Tailwind CSS-Konfiguration
└── tsconfig.json            # TypeScript-Konfiguration

---

Technologie-Stack

Technologie	Einsatz
React 18	UI-Framework
TypeScript 5.6	Typisierung
Vite 6	Build-Tool & Dev-Server
Zustand	State-Management (mit Immer)
Konva / react-konva	2D-Canvas (Schaltplan & Lochraster)
Three.js / @react-three/fiber	3D-Vorschau
Tailwind CSS	Styling
Lucide Icons	Icon-Set
jsPDF	PDF-Generierung
JSZip	Projektdatei-Archiv (.lochcad)
ws	WebSocket (Collaboration-Server)

---

Tastenkürzel

Kürzel	Aktion
Ctrl+S	Projekt speichern
Ctrl+Shift+P	Projektmanager öffnen
Ctrl+N	Neues Projekt
Ctrl+O	Projekt öffnen / importieren
Ctrl+E	Projekt exportieren
Ctrl+Z / Ctrl+Y	Undo / Redo
Ctrl+A	Alles auswählen
Ctrl+= / Ctrl+-	Zoom rein / raus
Ctrl+0	Zoom zurücksetzen
W	Draht-Werkzeug
R	Bauteil drehen
X	Bauteil spiegeln
L	Net-Label platzieren
Del / Backspace	Auswahl löschen
Esc	Werkzeug abbrechen

---

Mitwirken

Beiträge sind herzlich willkommen! Lies bitte zuerst die CONTRIBUTING.md, bevor du einen Pull Request erstellst.

Lizenz

Dieses Projekt steht unter der MIT-Lizenz. Du darfst es frei verwenden, verändern und weitergeben.

---

_{Entwickelt von Linus Rath}