commit 1b80cf033271c6552944d4b04d36c46a6e169895 Author: Justin Oros Date: Tue Jun 9 13:41:27 2026 -0700 Camera Spec Card Generator Turn any photo or Siril FITS file into a shareable camera spec card. diff --git a/README.md b/README.md new file mode 100644 index 0000000..779a05f --- /dev/null +++ b/README.md @@ -0,0 +1,126 @@ +# Camera Spec Card Generator + +**Turn any photo or Siril FITS file into a shareable camera spec card.** + +Drop your image, get a beautifully formatted 1080Γ—1080 overlay with your shooting data β€” no account, no upload, no server. Just one HTML file. + +πŸ”— **[Try it live β†’ justinoros.github.io/spec-card](http://justinoros.github.io/spec-card)** + +--- + +![Spec Card Example](bg.jpg) + +--- + +## Features + +- **Drag & drop or browse** β€” JPEG, PNG, TIFF, CR2 RAW, and FITS files +- **Auto-reads metadata** β€” EXIF for camera photos, FITS headers for Siril exports +- **Astrophotography fields** β€” camera, telescope, lens, focal length, aperture, filter, shutter, frames stacked, total integration, ISO/gain, object, location, Bortle scale, and date +- **Smart background handling** β€” images without EXIF data are used as the card background without overwriting your spec fields +- **Click any field on the card** to edit it inline, or use the edit panel below +- **Live updates** β€” every keystroke instantly re-renders the card +- **Two-column layout** β€” automatically activates when 8+ fields are populated +- **Text size and background blur sliders** +- **Custom icon and text colors** via hex input +- **Editable header and footer** β€” swap "SPEC CARD" for your target name, and the footer for your IG handle, YouTube, or website +- **Downloads as a timestamped 1080Γ—1080 JPEG** β€” `camera-spec-card-YYYYMMDD-HHMMSS.jpg` +- **Zero dependencies at runtime** β€” everything runs in the browser, nothing is sent to a server + +--- + +## Usage + +### Option 1 β€” Use the hosted version +Visit **[justinoros.github.io/spec-card](http://justinoros.github.io/spec-card)** β€” no installation needed. + +### Option 2 β€” Self-host or run locally +1. Clone or download this repo +2. Place your own background image as `bg.jpg` in the same folder (optional) +3. Open `index.html` in any modern browser β€” that's it + +``` +spec-card/ +β”œβ”€β”€ index.html ← the entire app +└── bg.jpg ← background wallpaper (optional, replace with your own) +``` + +--- + +## Supported File Types + +| Format | Metadata Source | Image Preview | +|--------|----------------|---------------| +| JPEG / PNG | EXIF | βœ… Used as card background | +| TIFF (8-bit / 16-bit) | TIFF IFD tags | βœ… Used as card background | +| CR2 / CR3 RAW | Embedded EXIF | βœ… Embedded JPEG preview extracted | +| FITS / FIT | FITS header keywords | ❌ Gradient placeholder (drop a separate image to set background) | + +> **TIFF note:** 32-bit float TIFFs (Siril's default linear export) are not supported. Export as 16-bit or 8-bit TIFF from Siril before use. + +--- + +## FITS Keywords Read + +When a `.fit` or `.fits` file is loaded, the following header keywords are extracted automatically: + +| Card Field | FITS Keywords | +|---|---| +| Camera | `INSTRUME` | +| Lens | `LENS`, `OPTICS` | +| Focal Length | `FOCALLEN`, `FOCAL` | +| Aperture | `FOCRATIO`, `APERTURE` | +| Filter | `FILTER`, `FILT` | +| Shutter / Exposure | `EXPTIME`, `EXPOSURE` | +| Frames Stacked | `STACKCNT`, `NCOMBINE`, `NFRAMES` | +| Total Integration | `TOTALEXP` | +| ISO / Gain | `ISO`, `GAIN` | +| Object | `OBJECT`, `TARGET` | +| Location | `SITELAT` + `SITELONG` | +| Bortle Scale | `BORTLE`, `SQMVALUE` | +| Date | `DATE-OBS`, `DATE` | + +Any fields not present in the file can be filled in manually using the edit panel. + +--- + +## Recommended Workflow for Astrophotography + +1. **Drop your background image** (exported PNG/TIFF from Siril, or any photo) β€” used as the blurred background +2. **Drop your FITS file** β€” populates all available spec data without replacing the background +3. **Fill in any missing fields** in the edit panel (Bortle, location, total integration, etc.) +4. **Adjust** text size, blur, and colors to taste +5. **Download** your 1080Γ—1080 spec card and share alongside your image + +--- + +## Customization + +All fields on the card are editable β€” tap directly on the card or use the panel below it: + +- **Header** β€” defaults to `SPEC CARD`, change to your target name or session title +- **Footer** β€” defaults to `@FateOfAstrophilia`, change to your IG, YouTube, website, or anything +- **Icon color** β€” any 6-digit hex (default `#c8a96e`) +- **Text color** β€” any 6-digit hex (default `#e8eaf0`) +- **Text size** β€” slider from 60% to 140% +- **Background blur** β€” slider from 0px (sharp) to 60px + +--- + +## Built With + +- Vanilla HTML, CSS, and JavaScript β€” no framework, no build step +- [EXIF.js](https://github.com/exif-js/exif-js) β€” JPEG/PNG EXIF parsing +- [UTIF2](https://github.com/photopea/UTIF.js) β€” TIFF decoding +- Custom binary EXIF parser for CR2 RAW files +- Custom FITS header parser + +--- + +## License + +MIT β€” free to use, fork, and modify. + +--- + +*Made with ❀️ by [Justin Oros](https://www.instagram.com/FateOfAstrophilia) Β· [@FateOfAstrophilia](https://www.instagram.com/FateOfAstrophilia)* diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 0000000..7017e9b Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..38bc47f --- /dev/null +++ b/index.html @@ -0,0 +1,1835 @@ + + + + + +Camera Spec Card Generator + + + + + + + + + + + +
+
Camera Spec Card Generator
+
by Justin Oros
+

Turn any photo into
a camera spec card

+

Drop a photo. We'll read its EXIF metadata and generate a shareable spec overlay β€” perfect for Instagram.

+ + + + + + + @FateOfAstrophilia + +
+ +
+ + + + + + +

Drop your photo here

+

JPEG, PNG, TIFF, CR2 RAW, FITS β€” EXIF metadata will be extracted automatically

+ + +
+ +
+
Your spec card
+
+ + + + + + + + + +