Interactive, full-stack electrical circuit and panel mapping application for tracing branch circuits, documenting load centers, and mapping electrical devices (lighting fixtures, wall receptacles, switches, and dedicated appliances) across architectural floorplans.

Repository: https://git.theta42.com/wmantly/electrical-chart

⚡ Overview & Features

Interactive Architectural Schematic:
- Renders all 141 electrical devices (48 lights, 49 receptacles, 44 switches) and room structures derived from diagram.drawio.
- Supports dual orientation modes: Field Doc Landscape (matching physical handheld floorplan printout) and Draw.io Native.
- Smooth pan and zoom navigation (mouse wheel + click-and-drag).
Physical Panel Scheduling:
- GE PowerMark Gold Load Center (Subpanel): 12 slots with 1/2-inch THQP slim tandem breakers (6A, 6B, 7A, 7B, 8A, 8B, 9A, 9B, 11A, 11B, 2-pole 240V heaters).
- Main Service Panel (Square D QO): Main disconnect, subpanel feeder, 240V range/HVAC/dryer, utility branch circuits.
Painter Mode (Rapid Tagging):
- Click any breaker card in the sidebar to activate Painter Mode.
- Click any device on the floor plan to instantly assign it to that breaker with zero dialogs.
- Right-click any device to unassign it.
Room Bulk Actions & Lasso Selection:
- Assign entire rooms of receptacles or lighting in a single click via the Device Inspector.
Visual Circuit Tracing:
- Color-coded badges per circuit (6A, 7B, 7A, etc.).
- Dashed circuit run lines dynamically link all devices sharing the same breaker.
- Unmapped warning halos highlight every unverified fixture that still needs testing.
Exports:
- Export back to updated Draw.io XML with embedded circuit tags.
- Export Panel Schedule CSV for printing panel door labels.
- Export full JSON state dump.

🚀 Quickstart

Prerequisites

Node.js v18+ (tested on Node v22)
npm

Installation & Run

git clone ssh://gitea@git.theta42.com:2222/wmantly/electrical-chart.git
cd electrical-chart
npm install
npm start

Open http://localhost:3456 in your browser.

To run on a different port:

PORT=3000 npm start

📁 Project Architecture

electrical-chart/
├── app.js                 # Express application setup & middleware
├── bin/
│   └── www                # HTTP server launcher
├── conf/
│   └── base.js            # Configuration (port, database paths)
├── data/
│   └── electrical_chart.sqlite # SQLite database (auto-created on startup)
├── diagram.drawio         # Master Draw.io architectural source
├── lib/
│   └── seed.js            # Initial database seeder & circuit pre-mappings
├── models/
│   └── db.js              # better-sqlite3 connection & schema migrations
├── public/
│   ├── css/
│   │   └── style.css      # Dark blueprint theme & responsive styling
│   └── js/
│       └── app.js         # Interactive SVG rendering, pan/zoom, painter mode
├── routes/
│   ├── api.js             # REST API (/api/state, /api/devices/assign, exports)
│   └── render.js          # Main page render route
└── views/
    └── index.ejs          # EJS single-page layout