logo
Kurashizu Blogwhere ideas flow
  • Home
  • News
  • Blog
  • About
  • Home
  • News
  • Blog
  • About

© 2026 Kurashizu. All rights reserved.

Admin·New Post·Service Status
Powered by Cloudflare·02.11.26
← Back to news

Steam Controller Auto-Charge – pilot to magnetic charging puck using CV

Original article
github.com|187 points|47 comments|by zdw|Jul 3, 2026

Steam Controller Auto-Charge: CV-Driven Magnetic Docking

This project, developed by FossPrime, is an open-source web application that transforms the process of charging a Steam Controller. Instead of manual placement, the app pilots the controller into its magnetic charging puck by leveraging optical flow computer vision and WebHID telemetry.

"Slam the controller into the magnetic puck until it charges."


🚀 Core Functionalities

The system achieves autonomous navigation through a combination of visual tracking and haptic feedback.

👁️ Visual Tracking & Navigation

  • Optical Flow: The app employs OpenCV.js to monitor specific coordinates on both the charging puck and the controller via an overhead camera.
  • Haptic Steering: By connecting to the Triton Controller via WebHID, the app streams telemetry (Report 67) and triggers 70Hz asymmetric haptic pulses. These pulses are sent to the internal dual Linear Resonant Actuators (LRAs) to physically nudge the controller toward the target.
  • Proximity Creep Mode: To prevent the controller from overshooting or colliding harshly, the system implements a "soft-dock" logic: If distance<150px  ⟹  Haptic Frequency=70Hz×0.5\text{If distance} < 150\text{px} \implies \text{Haptic Frequency} = 70\text{Hz} \times 0.5If distance<150px⟹Haptic Frequency=70Hz×0.5

🔋 Battery & Power Monitoring

The application intercepts specific HID reports to track the charging state:

Report IDHex ValuePurposeData Extracted
1210x79Charging ConfirmationVerifies magnetic connection
670x43Battery TelemetryLive % and Cell Voltage (mV)

🛠️ Setup & Installation

The project is designed for a streamlined build process using the Nix Package Manager, which handles all dependencies and the WASM compilation.

Prerequisites

  • Install Nix Package Manager

Quick Start

Run the following command to initialize the environment, install dependencies, and launch the development server:

nix-shell --run "npm install && npm run dev"

🕹️ How to Use

  1. Hardware Setup: Position a webcam directly above your workspace, facing downward.
  2. Connection: Launch the web interface and click Connect Steam Controller to establish a WebHID link.
  3. Calibration:
    • Click the charging puck.
    • Click the top of the controller.
    • Click the bottom of the controller.
  4. Execution: The controller will now be manually moved autonomously navigate to the puck using a Lucas-Kanade optical flow loop and a Rust/WASM-powered CNN for object avoidance.

🏗️ System Architecture

The application is split into a reactive frontend and a high-performance processing backend.

Component Breakdown

  • App.vue: The heart of the app. Manages the UI, camera streams, and the PID loop for tracking.
  • steamController.ts: A WebHID abstraction layer that converts API calls into the specific byte payloads required by the Steam Controller.
  • objectDetector.ts & objectWorker.ts: These handle object detection within a Web Worker to prevent the main UI thread from lagging.
  • wasm-object-detect/: A high-performance visual processing module written in Rust and compiled to WebAssembly.

📊 Project Metadata

Inspiration: This project was heavily inspired by the work of Very Lazy Pixel.

Language Distribution:

  • Vue: 31.2%
  • TypeScript: 30.6%
  • Rust: 25.2%
  • Python: 6.7%
  • CSS: 3.8%
  • Nix: 2.2%
  • HTML: 0.3%

License: This software is released under the MIT License.

Project Banner