Issue: Marker boxes were misaligned with actual PDF content
Cause: Coordinate system mismatch between PDF (72 DPI) and rendered images (150 DPI)
Fix: Apply proper DPI scaling factor to coordinates
Changes:
- Calculate scale factor: DPI / 72 (e.g., 150/72 = 2.083)
- Scale all x/y coordinates before drawing
- Store page_image_dpi in JSON for frontend
- Add debug console logs to verify scaling
Formula:
- pixel_coordinate = pdf_coordinate × (image_dpi / 72)
- Example: 100 points @ 150 DPI = 208 pixels
Now markers should align perfectly with PDF content!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Backend Changes:
- Added coordinates field to AccessibilityIssue class
- Extract and store x0, y0, x1, y1 coordinates for image issues
- Generate PNG images for each page (100 DPI)
- Save page images alongside JSON report
- Include page_images map in JSON output
Coordinate Support:
- Image issues now include exact location on page
- Coordinates use PDF coordinate system (bottom-left origin)
- Ready for visual highlighting in web interface
Image Generation:
- Automatic when --output specified
- Images saved to {output}_images/ directory
- PNG format optimized for web display
- Only generated if pdf2image available
Next: Update web interface to display pages with markers
🤖 Generated with [Claude Code](https://claude.com/claude-code)
New Features:
- 📄 Interactive page overview map showing issue severity
- Color-coded page cards (red=critical, yellow=warning, green=good)
- Click page cards to jump to that page's issues
- Collapsible sections for each page
- Issue grouping: Document-wide vs Page-specific
- Visual icons for each issue category (🏗️📋🖼️🎨 etc)
- Severity icons (🚨❌⚠️ℹ️✅)
- Better "How to Fix" recommendations
- Page sections collapse/expand with ▼▶ indicators
Improvements:
- Much easier to navigate multi-page PDFs
- Visual heat map shows problem areas at a glance
- Grouped by page makes fixing issues more systematic
- Category icons help identify issue types quickly
🤖 Generated with Claude Code
