A professional, real-time web dashboard for Colmi R02/R09 smart rings built with Next.js 16, React 19, and Web Bluetooth API. Monitor your health metrics including heart rate, SpO2, steps, battery, accelerometer data, and train custom gesture controls directly in your browser.
- Real-time Heart Rate - Continuous BPM tracking with status indicators
- SpO2 Blood Oxygen - Blood oxygen saturation monitoring with visual feedback
- Step Tracking - Daily steps, calories, and distance with live updates
- Battery Monitoring - Real-time battery level with status alerts
- Activity Analytics - Detailed 15-minute interval activity breakdown
- Accelerometer Visualization - Real-time 3-axis motion data with pitch, roll, and yaw
- Gesture Recording - Record and save custom hand gestures
- Pattern Recognition - AI-powered gesture matching with confidence scoring
- Action Triggers - Set custom actions (messages, images, sounds, URLs) for detected gestures
- Data Smoothing - Adjustable smoothing levels for stable gesture detection
- Import/Export - Save and share gesture libraries
- Direct Bluetooth Connection - No backend or server required, pure Web Bluetooth API
- Professional UI - Clean, modern interface following open-source design principles
- Responsive Design - Optimized for desktop, tablet, and mobile
- Dark Mode - Full dark mode support throughout the application
- Tabbed Navigation - Organized tabs for Overview, Health, Activity, Sensors, Gestures, and Advanced settings
- Node.js 18.x or higher
- npm or yarn
- A Colmi R02 or R09 smart ring
- A Web Bluetooth compatible browser:
- Chrome 56+
- Edge 79+
- Opera 43+
- Chrome for Android 56+
Note: Web Bluetooth is not supported in Firefox or Safari.
- Clone the repository
git clone https://github.com/yourusername/colmi-ring-dashboard.git
cd colmi-ring-dashboard- Install dependencies
npm install
# or
yarn install- Run the development server
npm run dev
# or
yarn dev- Open your browser
Navigate to http://localhost:3000
- Click "Connect to Ring" on the landing page
- Select your Colmi device from the Bluetooth pairing dialog (e.g., "R02_4101")
- Grant permissions when prompted
- View your dashboard - All metrics will start updating automatically
- Heart Rate: Navigate to Health tab, click "Start Monitoring" for continuous tracking
- SpO2: Click "Start SpO2" to begin blood oxygen monitoring
- Battery: Click refresh icon to update battery level
- Steps: Automatically synced on connection and updated in real-time
- Activity: View 15-minute interval breakdown in the Activity tab
- Navigate to Gestures tab
- Start Raw Data Mode to begin receiving accelerometer data
- Record a Gesture:
- Click "Start Recording"
- Perform your gesture (e.g., point up, tilt left, twist clockwise)
- Click "Stop Recording" (aim for 30-50+ samples)
- Name and Save your gesture
- Add Actions (optional):
- Click on a saved gesture to expand details
- Select "Add Action" to configure triggers
- Choose action type: Message, Image, Sound, or URL
- Actions trigger when gesture is detected with 80%+ confidence
- Toggle Actions on/off using the Action Triggers switch
- Export/Import gestures for backup or sharing
- Data Smoothing: Adjust smoothing level (1-10) for stable gesture detection
- Calibration: Use the calibrate button to set current position as zero reference
- Emergency Stop: Stop all monitoring with one click (stops ring flashing)
- Ring Reboot: Restart the ring device if needed
colmi-ring-dashboard/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── AccelerometerCard.tsx # 3-axis motion visualization
│ ├── ActivityCard.tsx # Activity tracking and analytics
│ ├── BatteryCard.tsx # Battery level monitoring
│ ├── ConnectionAlert.tsx # Connection status alerts
│ ├── ConnectionStatusCard.tsx # Detailed connection info
│ ├── DailyStepsCard.tsx # 15-minute interval breakdown
│ ├── DashboardHeader.tsx # Main dashboard header
│ ├── DataDashboard.tsx # Main dashboard component
│ ├── DataQualityCard.tsx # Data quality metrics
│ ├── DebugInfo.tsx # Debug information panel
│ ├── GestureTrainer.tsx # Gesture recording & recognition
│ ├── HeartRateCard.tsx # Heart rate monitoring
│ ├── LiveStepsCard.tsx # Real-time step updates
│ ├── RingConnector.tsx # Bluetooth connection UI
│ ├── SpO2Card.tsx # Blood oxygen monitoring
│ ├── StatusFooter.tsx # Dashboard footer
│ ├── StepsCard.tsx # Step counter display
│ ├── Tabs.tsx # Tab navigation component
│ └── index.ts # Component exports
├── lib/ # Core library code
│ ├── colmi-ring-service.ts # Bluetooth service implementation
│ ├── constants.ts # Protocol constants and commands
│ ├── types.ts # TypeScript type definitions
│ └── index.ts
├── public/ # Static assets
├── .gitignore # Git ignore rules
├── CODE_OF_CONDUCT.md # Community guidelines
├── CONTRIBUTING.md # Contribution guidelines
├── LICENSE # MIT License
├── next.config.ts # Next.js configuration
├── package.json # Dependencies and scripts
├── postcss.config.mjs # PostCSS configuration
├── README.md # This file
└── tsconfig.json # TypeScript configuration
- Framework: Next.js 16 with App Router and Turbopack
- UI Library: React 19.2 with Server Components
- Language: TypeScript 5
- Styling: Tailwind CSS 4 with custom design system
- Icons: Lucide React - Modern icon library
- Bluetooth: Web Bluetooth API
- Storage: Browser LocalStorage for gesture persistence
The gesture training system allows you to:
- Record gestures by capturing raw accelerometer data in real-time
- Analyze patterns with automatic averaging and range calculation
- Match gestures using Euclidean distance algorithms with confidence scoring
- Trigger actions when gestures are detected (80%+ confidence threshold)
- Persist data with automatic localStorage saving and JSON import/export
Use Cases:
- Quick actions (e.g., tilt left to open a URL)
- Accessibility shortcuts
- Silent notifications
- Custom alert systems
- Prototype development for wearable interactions
- Pitch (X-axis): Forward/backward hand tilt
- Roll (Y-axis): Left/right hand tilt
- Yaw (Z-axis): Clockwise/counter-clockwise wrist twist
- G-Force Display: Real-time gravity force on each axis
- Motion History: Visual graph of last 20 readings per axis
- Calibration: Set any position as zero reference point
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm run start
# Run linter
npm run lintNo environment variables required! This app runs entirely in the browser.
| Browser | Support | Notes |
|---|---|---|
| Chrome | ✅ Yes | Full support (56+) |
| Edge | ✅ Yes | Full support (79+) |
| Opera | ✅ Yes | Full support (43+) |
| Firefox | ❌ No | Web Bluetooth not supported |
| Safari | ❌ No | Web Bluetooth not supported |
| Chrome Android | ✅ Yes | Full support (56+) |
Contributions are welcome! Please read our Contributing Guidelines and Code of Conduct before submitting a PR.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'feat: add AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- @atc1441 - For reverse engineering the Colmi protocol
- colmi_r02_client - Python client that inspired this project
- Colmi - For creating these amazing smart rings
- Web Bluetooth requires HTTPS in production (works with localhost in development)
- Some browsers may require manual Bluetooth pairing before connection
- Connection stability may vary based on browser and device
- colmi_r02_client - Python client for Colmi rings
- Gadgetbridge - Android app for various smart devices
If you encounter any issues or have questions:
- Check the Issues page
- Read the documentation in the
docs/folder - Open a new issue with detailed information
- Gesture training and recognition system
- Accelerometer visualization with pitch/roll/yaw
- Data export (JSON for gestures)
- Real-time step tracking with live updates
- Professional UI with dark mode
- SpO2 monitoring
- Action triggers for gestures
- Add automated tests (Jest, React Testing Library)
- Historical data storage with IndexedDB
- CSV export for health metrics
- Create Progressive Web App (PWA)
- Add more chart visualizations (trends, comparisons)
- Support for additional Colmi models (R06, etc.)
- Multi-language support (i18n)
- Cloud sync for gesture libraries
- Advanced gesture analytics
- Gesture collision detection