{"slug": "building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud", "title": "Building PROTO RECON — From Vague Idea to a Browser-Based Tactical HUD", "summary": "The article describes the development of PROTO RECON, an experimental browser-based app that creates a tactical HUD overlay using a smartphone's camera and sensors, including gyroscope, compass, and GPS. The project evolved from a vague concept inspired by sci-fi interfaces into a functional web prototype built with Canvas 2D and CSS, bypassing heavier libraries like Three.js for better performance. While the app currently features a monochrome green military-style UI with real-time object detection for targeting, it remains in testing and has not yet been optimized for heavy workloads.", "body_md": "Introduction\nThis post walks through how PROTO RECON — an experimental app that combines phone sensors with in-browser ML — evolved from pre-coding requirements to its current implementation. I've verified the UI behavior, but I'm still at the stage of reading the source code for the first time. Here I organize the original requirements and an AI-generated source map as a foundation for deeper dives in future posts.\nNote: This is still in testing. Performance tuning for heavy workloads hasn't been done yet — use at your own risk.\nWhere It Started\nIt began with a vague question: Can we build a digital user experience on top of the real world? The seed of the idea was whether today's phone sensors could overlay something like the robot-view or cockpit-view perspectives from old sci-fi and games onto live scenery.\nBefore writing code, I summarized the requirements, turned functional specs into prose through dialogue with AI, and then started development.\nTechnology Choices (Before Implementation)\nThe noise layer was added later. When I had Cursor implement it, three.js was skipped in favor of Canvas 2D and CSS for CRT-style effects. Writing directly without extra modules kept things lighter — a decision that has paid off on real devices.\nGyro, compass, altitude (on supported devices), GPS, and similar sensors were also in scope, wired to the HUD and minimap.\nRequirements at the Time (Summary)\nThe planning document — built through repeated conversations with AI — was titled Tactical Recon & Guidance Terminal \"PROJECT: LOCK-ON (working title)\". At that point, sensor accuracy led us to assume Phase 2 would require a Unity (native) rewrite. After coding with Cursor, however, things moved better than expected even without three.js, and the outlook shifted to Phase 1 might be achievable on the web alone.\nCore Concept\n-\nVisuals: Monochrome green military-terminal UI, scan lines, noise\n-\nAI: Real-time object detection for targeting and lock-on\n-\nImmersion: Gyro, altitude, BEEP sounds — instrument and audio feedback\n-\nFuture: VR-goggle HUD, gaze control (concept stage)\nPlan vs. Current State\nThe full planning document is collapsed below due to length.\nFull planning document (PROJECT: LOCK-ON draft)\nTactical Recon & Guidance Terminal App — \"PROJECT: LOCK-ON (working title)\" Planning Document\nThis document summarizes a concept for a smartphone camera-filter app that blends retro-futuristic UI with modern AI.\n1. Project Overview\nA \"play\" app that recreates the experience of a military recon terminal from 1980s–90s sci-fi films and games, using live smartphone camera feed and AI.\n2. Core Concept\n-\nVisuals: Monochrome green evoking old terminals. Retro feel via scan lines and noise.\n-\nAI interaction: Automatic targeting and lock-on through real-time object detection.\n-\nImmersion: Gyro, barometric sensor (altimeter), BEEP feedback.\n-\nExtensibility: HUD and gaze control with VR goggles (e.g. Hacosco) — concept stage.\n3. Main Features (excerpt)\n3.1 Video filter\n- Green overlay (night-vision goggle texture)\n- Edge bar graphs and scan indicators\n3.2 AI lock-on\n- Automatic moving-object detection with green bounding-box tracking\n- SE accelerates when the target stays in the reticle center\n- Lock complete: box turns red, warning sound\n- Tap to fire a virtual missile (effect)\n3.3 Sensor-linked instruments\n- Gyro: pitch and roll numeric display\n- Altimeter: relative altitude from barometric sensor (iPhone, etc.)\n4. Development Phases (roadmap at the time)\n-\nPhase 1: Web prototype (Next.js + Three.js + TF.js). Shareable via URL.\n-\nPhase 2: Unity port. Barometric altitude, vibration.\n-\nPhase 3: VR/XR. Stereoscopic display, gaze lock-on.\n5. Distribution Strategy\nDev logs on Qiita / Zenn, short-form video on social, posts on Reddit, etc.\nCreated: April 29, 2026 (planning stage)\nHow Development Proceeded\nCoding was delegated to Cursor, adding features one prompt at a time until the current state. For prompts, I load the requirements document into Gemini and ask what kind of prompt would work best. I've checked JS behavior through the UI, but reading the source comes next. The file list and dependency diagram below were AI-generated and cleaned up for this article.\nSource Layout\nHTML (root level)\nsrc/\n— runtime files\nEntry, config, UI\nVideo & AI inference\nDistance & AR\nNavigation, map, sensors\nFeedback & monitoring\nsrc/\n— tests only (not used on screen)\nDependencies (overview)\nflowchart TB\nindex[index.html] --> main[main.js]\nmain --> config[appConfig / applyDevConfig / uiLexicon]\nmain --> cam[camera + HUD]\nmain --> det[personDetection]\nmain --> face[facePrivacy]\ndet --> tf[tfBackend]\nface --> tf\nmain --> map[miniMap]\nmap --> leaf[miniMapLeaflet]\nmain --> nav[compass / motionHud / motionStabilityLink]\nmain --> range[objectRange]\nrange --> xr[webxrHitTestRange]\nmain --> health[liveHealth]\nmain --> sfx[audioFx]\nmain.js\nties almost everything together; appConfig.js\nsettings and uiLexicon.js\ncopy drive behavior and display across modules.\nClosing — What to Read Next\nFuture posts will open the source and go deep feature by feature. The study roadmap below is the planned reading order (01 is done with this article's file map).\nSource reading roadmap (32 parts — click to expand)\nStage 1 — Config and skeleton (no permissions needed)\nStage 2 ⭐⭐ — Look and boot \"theater\" (testable without camera)\nUI animation and audio control without device permissions.\nStage 3 ⭐⭐⭐ — Media, sensors, tapes (real device required)\nStage 4 ⭐⭐⭐⭐ — Detection, privacy, ML\nStage 5 ⭐⭐⭐⭐⭐ — Integration, ops, errors\nThe next post will start with roadmap #02 (appConfig.js\n).", "url": "https://wpnews.pro/news/building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud", "canonical_source": "https://dev.to/katsuo-chang/building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud-2p78", "published_at": "2026-05-24 00:12:32+00:00", "updated_at": "2026-05-24 00:31:41.866559+00:00", "lang": "en", "topics": ["products", "developer-tools", "machine-learning", "artificial-intelligence"], "entities": ["PROTO RECON", "Cursor"], "alternates": {"html": "https://wpnews.pro/news/building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud", "markdown": "https://wpnews.pro/news/building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud.md", "text": "https://wpnews.pro/news/building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud.txt", "jsonld": "https://wpnews.pro/news/building-proto-recon-from-vague-idea-to-a-browser-based-tactical-hud.jsonld"}}