From 20e9c60afafc48c4fbc399e6a96e2fafb502d2b4 Mon Sep 17 00:00:00 2001 From: igurielidze Date: Fri, 20 Mar 2026 17:50:09 +0400 Subject: [PATCH] Update README with full project docs, setup, and device classification Co-Authored-By: Claude Opus 4.6 (1M context) --- svelte-app/README.md | 113 +++++++++++++++++++++++++++++++++---------- 1 file changed, 88 insertions(+), 25 deletions(-) diff --git a/svelte-app/README.md b/svelte-app/README.md index 483846e..cc84994 100644 --- a/svelte-app/README.md +++ b/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.