Skip to content

Repository files navigation

🖱️ Mouse_controller

Use your Android phone as a real-time wireless motion mouse — tilt your phone to control your laptop cursor just like pointing a smart TV remote.

Mouse_controller is a full-stack motion-control platform built using Python, WebSockets, smartphone gyroscope sensors, Android integration, and a modern interactive frontend website.

The project combines:

  • Real-time motion tracking
  • Wireless cursor interaction
  • QR-based device pairing
  • WebSocket communication
  • Interactive frontend dashboard
  • Live telemetry visualization
  • Smartphone gyroscope control
  • you can check out the front end(ONLY) here:- https://mouse-controller-nine.vercel.app/

✨ Features

  • 📱 Control laptop cursor using phone motion
  • ⚡ Real-time low-latency communication
  • 📡 WebSocket-based architecture
  • 🎯 Gyroscope and orientation tracking
  • 🖥️ Modern frontend interface
  • 📊 Live telemetry dashboard
  • 🔒 HTTPS + WSS support
  • 📲 QR-based instant connection
  • 🌐 Responsive web interface
  • 🎨 Futuristic UI animations
  • 📶 Live connection monitoring
  • 🧠 Motion telemetry visualization

📸 Screenshots

Frontend Interface

Frontend


Live Dashboard

Dashboard


🚀 Quick Start

Website Flow

  1. Open the frontend website
  2. Click on:
    Get Started
    
  3. The backend server starts the connection system
  4. A QR code is generated dynamically
  5. Scan the QR code using your phone
  6. Allow gyroscope permissions
  7. Tilt the phone to control the cursor in real time

⚙️ Manual Backend Setup

If you want to run the backend manually:

1. Install Python Dependencies

cd AirMouse
pip install -r requirements.txt

2. Start the Python Server

python server.py

The terminal will display something similar to:

https://192.168.x.x:8443

3. Open Another Terminal

Open a new terminal while the backend server is still running.

cd main_website
npm install
npm run dev

4. Connect Your Phone

  1. Connect laptop and phone to the same WiFi network
  2. click on get started in the website , it will give you a qr code
  3. scan it on phone
  4. Open the generated HTTPS URL in Chrome on your phone
  5. If Chrome shows:
    Your connection is not private
    
    tap:
    Advanced → Proceed
    
  6. The motion controller interface opens
  7. Tap:
    Connect
    
  8. Allow motion sensor permissions
  9. Start controlling the cursor using phone motion

🎮 Controls

ActionFunction
Cursor MovementTilt phone
Left ClickLeft Click button
Right ClickRight Click button
Double ClickDouble button
ScrollScroll Up / Down
Pause TrackingTracking ON/OFF
Adjust SpeedSensitivity slider

📊 Project Architecture

Phone Motion Sensors
│
▼
DeviceOrientation API
│
▼
WebSocket Communication
│
▼
Python Backend Server
│
▼
Cursor Processing Engine
│
▼
Desktop Cursor Control
│
▼
Frontend Dashboard Interface

🧠 Technologies Used

Frontend

  • Next.js
  • React
  • Tailwind CSS
  • Framer Motion
  • JavaScript

Backend

  • Python
  • FastAPI
  • WebSockets
  • pyautogui

Mobile

  • Android Motion Sensors
  • DeviceOrientation API

📂 Project Structure

Mouse_controller/
│
├── AirMouse/ # Python motion backend
├── main_website/ # Frontend website
├── AirMouseClient/ # Android motion client
├── CursorBrowser/ # Android browser integration
├── gyroTCP/ # TCP communication experiments
├── UDP/ # UDP communication experiments
├── 1st.png
├── 2nd.png
└── README.md

🌐 Frontend Setup

cd main_website
npm install
npm run dev

📡 Communication Flow

Smartphone
↓
Motion Sensor Data
↓
WebSocket Transmission
↓
Python Backend Processing
↓
Cursor Rendering
↓
Frontend Telemetry Dashboard

📈 Telemetry Features

The frontend dashboard visualizes:

  • Connection state
  • Motion sensor values
  • Alpha/Beta/Gamma data
  • Signal status
  • Device activity
  • Motion tracking state
  • Real-time interaction feedback

💡 Tips & Tricks

  • Hold the phone parallel to the ground for smoother movement
  • Lower sensitivity for precise control
  • Increase sensitivity for faster movement
  • Use Tracking ON/OFF while repositioning your hand
  • Stable WiFi improves responsiveness
  • Small wrist movements give better accuracy

🛠️ Troubleshooting

ProblemSolution
Cannot connectEnsure both devices are on same WiFi
Cursor jumpsReduce sensitivity slider
Gyroscope not workingUse HTTPS instead of HTTP
Phone permissions blockedAllow motion sensor permissions
Connection blockedAllow ports through firewall
Cursor too sensitiveLower sensitivity in controller
Delayed movementCheck WiFi stability

🔒 Security Notes

  • HTTPS is used for motion sensor access
  • WSS is used for secure WebSocket communication
  • Local network communication keeps latency low
  • QR pairing helps simplify device connection

🔮 Future Improvements

  • AI-based motion smoothing
  • Gesture recognition
  • Multi-device support
  • Cloud-based pairing
  • Public deployment
  • Better motion calibration
  • Remote internet-based control
  • Voice command integration
  • Haptic feedback support

👨‍💻 Author

Ayush Narayan

BTech ISE — BMS College of Engineering


📜 License

This project is licensed under the MIT License.


⭐ Project Goal

This project was developed to explore:

  • motion intelligence
  • real-time communication
  • wireless interaction systems
  • frontend/backend integration
  • sensor-based computing
  • interactive web technologies
  • real-time device communication

About

Real-time gyroscope-based wireless mouse controller using smartphone motion sensors, WebSockets, FastAPI, Android, and Next.js.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages