brian/PropMaker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Making prop wiring / pixel diagrams
4 commits 1 branch 0 tags 361 KiB
  • TypeScript 93.7%
  • CSS 5.5%
  • Dockerfile 0.5%
  • JavaScript 0.2%
  • HTML 0.1%
Find a file
Exact
Brian McGonagill 389b36ed1c Enlarge wire-diagram export dots and numbers (keep spacing) 
Old caps (16px radius / 22px font) read tiny on the multi-thousand-px
full-content canvas. Grow them relative to the real node spacing:
nodeRadius = clamp(spacing*0.2, 7, 48),
labelFont  = clamp(min(spacing*1.0, (spacing - nodeRadius - 6)/1.4), 10, 60).
The spacing-based guard keeps the dot diameter and its below-label within the
gap, so larger marks still never overlap. Layout scale (distances) unchanged.

+unit case asserting prominent sizing; wire e2e still green; container rebuilt.
2026-09-12 15:35:38 -05:00
client Enlarge wire-diagram export dots and numbers (keep spacing) 2026-09-12 15:35:38 -05:00
docker Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
docs Export/print the full wire diagram (not just the viewport) 2026-09-12 15:26:12 -05:00
server Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
tests/e2e Export/print the full wire diagram (not just the viewport) 2026-09-12 15:26:12 -05:00
.dockerignore Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
.gitignore Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
AGENTS.md Enlarge wire-diagram export dots and numbers (keep spacing) 2026-09-12 15:35:38 -05:00
App_req.md Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
eslint.config.js Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
LICENSE Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
package-lock.json Fix HEIC upload on Safari/WebKit: use heic-to instead of heic2any 2026-09-12 12:48:24 -05:00
package.json Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
Project_Plan.md Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
README.md Export/print the full wire diagram (not just the viewport) 2026-09-12 15:26:12 -05:00
tsconfig.base.json Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00
vitest.config.ts Initial commit: PropMaker pixel prop designer 2026-09-12 12:34:03 -05:00

README.md

PropMaker

Design pixel-based lighting prop layouts and wiring diagrams, then import them into xLights as Custom Models (.xmodel).

  • Open source (MIT), self-hosted with Docker Compose.
  • React + TypeScript + Konva frontend, Node/Express + SQLite backend.
  • Phone HEIC/HEIF photos are auto-converted to JPEG in the browser on upload.
  • See Project_Plan.md for the full build plan and milestones.

Features (complete — M1–M10)

  • Guided 6-step flow — create a prop, upload a reference photo, calibrate scale, place, validate, and export (export lands in M9).
  • Konva canvas editor — place pixels by click, drag to move, delete from the end of the string; wheel-zoom-to-cursor, pan (tool / Space / middle-drag), adaptive grid, and fit-to-prop.
  • Live styling inspector — dot colour/size, numbered labels with start value, font size and 9-point position, wire colour/width, and background visibility/opacity.
  • Undo / redo — session history over the design (view excluded); continuous edits coalesce into one step.
  • Scale calibration + distance validation — two-pixel calibration to inches, live red-X markers on over-long wire edges, and a per-string spacing summary.
  • Auto-route — nearest-neighbour + 2-opt reorder to minimise over-distance edges then wire length, with a green preview and apply/cancel (one undoable step).
  • Wire diagram — printable black-on-white schematic with front/back mirror, grid, zoom/pan, over-distance markers, and full-diagram PNG/print export (dots and numbers auto-sized to stay legible, independent of on-screen zoom).
  • xLights export — one-click Custom Model .xmodel download (nodes numbered in string order) plus Mark Complete.
  • Autosave to SQLite — debounced (and flushed on navigation/close so nothing is lost), persisted across browsers via a Docker volume.
  • Polish — keyboard-shortcut help (press ?), dark full-bleed canvas, responsive layout, and an MIT-licensed, Docker-verified one-process deployment.

Development

npm install
npm run dev          # starts API (:5174) and client (:5173)
npm run typecheck
npm run lint
npm test             # unit + api + e2e

Docker

docker compose -f docker/docker-compose.yml up --build
# open http://localhost:8080

Documentation

  • docs/user-guide.md — end-user workflow.
  • docs/developer-guide.md — architecture and contributing.

License

MIT — see LICENSE. All dependencies are MIT/Apache/BSD.