fSpy Angular Workspace

This directory contains the Angular of fSpy camera calibration matching electron app. It targets Angular 21 and TypeScript ES2020 with strict type checking.

The workspace is configured as a multi-project setup:

• A reusable calibration library
• A demo application that exercises the library API

Features

• Full 2VP Calibration (control points, reference distance, origin, 3D overlays)
• All Principal Point Modes from fSpy: Image midpoint, Manual, From 3rd VP
• Direct Three.js Export: threeCameraChange output with ThreeCameraConfig (FOV in degrees, Y-up matrix, aspect, near/far) + applyThreeCameraConfig(camera, config) helper
• Rectangle Mode for simplified calibration
• Parity Tests against original .fspy files
• Locked to 2 Vanishing Points — 1VP not supported (yet)

Projects

• Library: fspy-calibrator

  • Location: projects/fspy-calibrator/
  • Build command:
    • From root:
      • ng build fspy-calibrator
  • Output: dist/fspy-calibrator/

• Demo application: demo

  • Location: projects/demo/
  • Development server command:
    • From root:
      • ng serve demo
  • Default URL: http://localhost:4200/

Getting started

From the repository root:

1. Install dependencies (first time only):
   • npm install
2. Run the demo application:
   • ng serve demo

After the server starts, open http://localhost:4200/ in a browser. The page reloads automatically when you change source files.

Library usage

The fspy-calibrator project is published as a buildable Angular library. Its compiled output lives under dist/fspy-calibrator/ after running ng build fspy-calibrator.

Public API (fspy-calibrator)

<fspy-calibrator
  [imageUrl]="imageSrc"
  [cameraDistanceScale]="10"
  (calibrationChange)="onCalibration($event)"
  (threeCameraChange)="applyToThreeJs($event)">
</fspy-calibrator>

• imageUrl: string | null — URL or dataURL
• cameraDistanceScale: number — camera distance scale (default 10)
• calibrationChange: CameraParameters | null — raw fSpy output
• threeCameraChange: ThreeCameraConfig | null — Three.js ready

See demo for full example.

Reference to Original fSpy

For all usage, UI flows and math: see official fSpy docs and original repo. This port faithfully replicates the 2VP workflow.

Technical doc

See ARCHITECTURE.md file for more implementation details. See API.md file for more details on how to use the angular component.

Contributions

Bug reports or missing features (e.g. 1VP)? Feel free to open a PR — all contributions are welcome.

License

GPL-3.0, as original fSpy.