OW2 SR Tracker
Ranked screenshot capture with native Windows UI parsing for Overwatch 2 analysis.
An Electron desktop app that captures Overwatch 2 ranked UI snapshots and stores them with a configurable right-edge crop for skill-rating analysis. Built with a native C++ Win32 addon for window detection, screenshot capture, and global hotkey registration.
- TypeScript
- Electron
- React
- React Router
- Vite
- TailwindCSS
- pngjs
- C++
- Win32 API
- node-addon-api
- node-gyp
- GDI+
The app runs on Windows and provides both a button-triggered capture and global hotkey support (F8-F12, Ctrl+F8, Alt+F8) to grab in-game screenshots without tabbing out. The React UI displays the full capture, the cropped region, and a detailed event log showing every step the native layer took—window handle resolution, render dimensions, buffer validation, and PNG serialization.
Captures flow through a C++ addon (built with node-addon-api and native Win32 APIs) that finds the Overwatch window by title, grabs its pixel buffer via BitBlt, optionally applies contrast stretching, and returns a PNG binary to the Electron main process. The app then uses pngjs to crop the right edge and saves both images to disk. A retry mechanism (up to 3 attempts, with up to 5 capture retries per attempt) handles transient failures.
Configuration is environment-driven: OW2_WINDOW_TITLE, OW2_CROP_WIDTH, OW2_OUTPUT_DIR, and screenshot filenames all come from .env or environment variables. In dev mode captures go to images/ow2srtracker; when packaged the default is Pictures/OW2SRTracker beside the exe. The native addon also supports template matching for future UI element detection, with two-phase coarse/full verification and debug telemetry output.
- Native C++ Win32 addon for window capture via BitBlt, global hotkey registration, and template matching infrastructure (coarse-phase + full-verify scanning with early rejection)
- Dual capture modes: manual button-triggered and global hotkey (with fallback chain across F8–F12 and Ctrl/Alt variants)
- Comprehensive retry and validation: PNG signature checking, file size verification on write-back, grayscale contrast stretching, and timestamped uniqueness for concurrent captures
- React UI with Tailwind CSS displaying full screenshot and cropped edge side-by-side, live render dimensions, and structured event log from native layer
- Environment-driven configuration (window title, crop width, output directory) with sensible defaults and .env override support at development and runtime