Update README with full project docs, setup, and device classification

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

svelte-app/README.md

@@ -1,42 +1,105 @@
-# sv
+# SCADA Device Layout Tool
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+Interactive canvas-based tool for designing SCADA device layouts. Built with SvelteKit + Svelte 5 + TypeScript + HTML5 Canvas.
 
-## Creating a project
+## Project Structure
 
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project
-npx sv create my-app
+```
+scada_device_layout/
+├── projectes/                          # Project data (outside svelte-app)
+│   └── CDW5/
+│       └── excel/
+│           ├── Amazon CDW5_Devices IO.xlsx
+│           └── Amazon CDW5_IP Addresses_Local.xlsx
+├── svelte-app/                         # Main application
+│   ├── src/
+│   │   ├── lib/
+│   │   │   ├── stores/layout.svelte.ts # Central state (LayoutStore)
+│   │   │   ├── canvas/renderer.ts      # Canvas draw loop (HiDPI-aware)
+│   │   │   ├── canvas/interactions.ts  # Mouse/keyboard, drag-and-drop
+│   │   │   ├── canvas/collision.ts     # AABB, spacing, snap
+│   │   │   ├── symbols.ts             # Symbol definitions, image cache
+│   │   │   ├── symbol-config.ts       # EPC, induction, photoeye, curve config
+│   │   │   ├── pdf.ts                 # PDF background (pdfjs-dist v5)
+│   │   │   ├── export.ts              # SVG export, JSON save/load
+│   │   │   └── projects.ts            # Project/MCM discovery
+│   │   ├── components/
+│   │   │   ├── Canvas.svelte           # Canvas + PDF background + context menu
+│   │   │   ├── Toolbar.svelte          # Left panel: project/MCM, settings, palette
+│   │   │   ├── Palette.svelte          # Symbol palette (drag to place)
+│   │   │   └── DeviceDock.svelte       # Right panel: device list from Excel
+│   │   └── routes/+page.svelte         # App layout
+│   ├── static/
+│   │   ├── symbols/                    # SVG symbol files
+│   │   └── projectes/                  # Build-generated manifests + MCM placeholders
+│   │       ├── manifest.json           # Project/MCM manifest (auto-generated)
+│   │       └── devices-manifest.json   # Device list per MCM (auto-generated)
+│   └── vite.config.ts                  # Vite plugins for manifest generation
 ```
 
-To recreate this project with the same configuration:
+## Setup & Run
 
 ```sh
-# recreate this project
-npx sv@0.12.5 create --template minimal --types ts --install npm svelte-app
+cd svelte-app
+npm install
+npm run dev          # Dev server at http://localhost:5173
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Build & Preview
 
 ```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+npm run build        # Production build to build/
+npm run preview      # Preview at http://localhost:4173
 ```
 
-## Building
+## Excel Data
 
-To create a production version of your app:
+Place Excel files in `projectes/{PROJECT}/excel/`:
 
-```sh
-npm run build
-```
+- **Devices IO** (`*Devices IO*.xlsx`): Contains MCM sheets with device assignments. Columns: Controller name, Signal type, Address name, Assigned device, Description.
+- **IP Addresses** (`*IP Address*.xlsx`): Network structure sheets with VFDs, FIOMs, DPMs.
 
-You can preview the production build with `npm run preview`.
+The Vite build plugin auto-parses these into `devices-manifest.json` at build time.
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+## Features
+
+- **Canvas rendering** with `requestAnimationFrame` loop and dirty flag
+- **HiDPI zoom** — canvas buffer scales to `DPR x zoomLevel` (capped at 4x) for crisp rendering at any zoom
+- **Configurable canvas size** — W/H adjustable in Settings, saved per MCM
+- **Symbol palette** (left dock) — drag generic symbols onto canvas
+- **Device dock** (right dock) — per-MCM device list parsed from Excel, grouped by symbol type. Drag to place with auto-labeling. Placed devices disappear from the list; deleting from canvas restores them.
+- **3-slice photoeye resize** — extending PEs stretches only the middle beam, left/right caps stay fixed
+- **PDF background** — load reference PDFs behind the canvas, adjustable scale/position
+- **SVG export** with Inkscape-compatible labels
+- **JSON save/load** — layout state persisted to localStorage per project/MCM
+- **Undo** (Ctrl+Z), multi-select, snap-to-grid, collision detection
+
+## Symbol Types
+
+Conveyance: Conveyor, Chute, Tipper, Curved Conveyor/Chute (30/45/60/90), Spur, Extendo, Induction, Diverter
+I/O: FIO/SIO/FIOH
+Sensors: Photoeye, Pressure Sensor
+Controls: Jam Reset, Start, Start Stop, Chute Enable, Package Release, Beacon, Solenoid
+Other: PDP, DPM, MCM, EPC, IP Camera
+
+## Device Classification (from Excel)
+
+| Excel suffix | Symbol | Notes |
+|---|---|---|
+| TPE, LPE, JPE, FPE, BDS, TS | Photoeye | All PE variants |
+| EPC | EPC | 2 channels per EPC, only 1 symbol |
+| JR_PB | Jam Reset | _LT variants skipped (indicator light) |
+| S_PB | Start | |
+| SS_SPB / SS_STPB | Start Stop | |
+| EN_PB | Chute Enable | |
+| PR_PB | Package Release | |
+| SOL | Solenoid | |
+| DIV_LS | Diverter | |
+| BCN | Beacon | All color variants consolidated |
+| VFD (from IP sheet) | Conveyor | VFD = conveyor drive |
+| FIO*, SIO*, FIOM, FIOH | FIO/SIO/FIOH | From both controller and device columns |
+| DPM | DPM | From IP sheet |
+| PDP CB + PMM | PDP | Consolidated per PDP unit |
+| PS | Pressure Sensor | |
+
+Skipped: ENSH/ENW (encoders), VFD_DISC (disconnect), _LT (lights), EPC 2nd channel, ESTOP, SCALE, STO, PRX, LRPE.