update readme files

Author: cgreening

README.md

@@ -1,9 +1,9 @@
 [![Firmware CI](https://github.com/atomic14/ESP32-LSM6DS3-Demo/actions/workflows/firmware.yml/badge.svg)](https://github.com/atomic14/ESP32-LSM6DS3-Demo/actions/workflows/firmware.yml)
 [![Frontend CI](https://github.com/atomic14/ESP32-LSM6DS3-Demo/actions/workflows/frontend.yml/badge.svg)](https://github.com/atomic14/ESP32-LSM6DS3-Demo/actions/workflows/frontend.yml)
 
-# ESP32S3 Accelerometer Demo
+# ESP32S3 IMU (Accelerometer + Gyroscope) Demo
 
-A complete hardware + software solution for real-time 3D accelerometer visualization. This project combines an ESP32S3 microcontroller with LSM6DS3 accelerometer and a sophisticated web-based 3D visualization frontend.
+A complete hardware + software solution for real-time 3D IMU visualization. This project combines an ESP32S3 microcontroller with the LSM6DS3 accelerometer/gyroscope and a web-based 3D visualization frontend.
 
 ![Demo](images/demo.png)
 
@@ -60,8 +60,11 @@ npm run dev         # Start development server
 1. Open `http://localhost:5173` in Chrome/Edge
 2. Click "Connect to ESP32S3"
 3. Select ESP32S3 serial port
-4. Place PCB flat and click "Calibrate"
-5. Tilt the PCB to see real-time 3D visualization
+4. Choose an orientation mode:
+   - `Accelerometer (abs)`: absolute tilt (pitch/roll) with optional smoothing
+   - `Gyro (integrated)`: integrates angular rate to track orientation (no smoothing)
+5. Use the `Reset` button to zero orientation if needed
+6. Tilt/rotate the PCB to see real-time 3D visualization
 
 ## Features
 
@@ -74,13 +77,15 @@ npm run dev         # Start development server
 ### Frontend
 - **WebSerial Integration**: Direct browser-to-device communication
 - **3D PCB Model**: GLB file support with automatic scaling
-- **Adjustable Smoothing**: Fine-tune responsiveness vs stability
+- **Orientation Modes**: Accelerometer (absolute tilt) or Gyro (integrated)
+- **Adjustable Smoothing (Accel only)**: Fine-tune responsiveness vs stability
+- **Dual Charts**: Live accelerometer and gyroscope charts with titles and right-aligned legends
 - **Professional Lighting**: Specular reflections and realistic materials
 - **Mouse Controls**: Orbit camera, zoom, and inspect the model
 
 ## Data Format
 
-The firmware outputs JSON at 10Hz:
+The firmware outputs JSON at 10Hz (example):
 ```json
 {"accel":{"x":0.123,"y":0.456,"z":0.789},"gyro":{"x":1.23,"y":4.56,"z":7.89},"temp":25.4}
 ```
@@ -131,7 +136,7 @@ npm run lint             # Code linting
 - **Gyroscope Range**: ±125°/s, ±250°/s, ±500°/s, ±1000°/s, ±2000°/s
 - **I2C Speed**: 100kHz for reliable communication
 - **Serial Baud Rate**: 115200 for fast data transfer
-- **Update Rate**: 10Hz (100ms intervals)
+- **Update Rate**: 10Hz (100ms intervals) by default (adjustable in firmware)
 
 ## License
 

frontend/README.md

@@ -1,13 +1,15 @@
 # Accelerometer Frontend
 
-Real-time 3D visualization of ESP32S3 accelerometer data using Three.js and the WebSerial API.
+Real-time 3D visualization of ESP32S3 accelerometer and gyroscope data using Three.js and the WebSerial API.
 
 ## Features
 
-- **Real-time 3D Visualization**: Live PCB orientation tracking based on accelerometer data
+- **Real-time 3D Visualization**: Live PCB orientation tracking
 - **WebSerial Integration**: Direct connection to ESP32S3 via WebSerial API
 - **GLB Model Support**: Displays actual PCB 3D model converted from STEP files
-- **Adjustable Smoothing**: Fine-tune responsiveness vs stability
+- **Orientation Modes**: Accelerometer (absolute tilt) or Gyro (integrated)
+- **Adjustable Smoothing (Accel only)**: Fine-tune responsiveness vs stability
+- **Dual Charts**: Separate live charts for accelerometer (g) and gyroscope (°/s)
 - **Professional Lighting**: Specular lighting with realistic material reflections
 
 ## Requirements
@@ -41,7 +43,12 @@ Real-time 3D visualization of ESP32S3 accelerometer data using Three.js and the
 - **Connect Button**: Establishes WebSerial connection to ESP32S3
 - **Status Indicator**: Shows connection state (Connected/Disconnected)
 
-### 3D Visualization
+### 3D Visualization & Controls
+- **Orientation Mode**: Choose between `Accelerometer (abs)` and `Gyro (integrated)`
+  - In Gyro mode, orientation integrates angular rate with no smoothing (for accuracy)
+  - In Accel mode, orientation uses absolute tilt (pitch/roll) with optional smoothing
+- **Smoothing**: Slider enabled in Accel mode; disabled in Gyro mode
+- **Reset**: Resets the model orientation and gyro integration
 - **Mouse Drag**: Rotate camera around PCB
 - **Mouse Wheel**: Zoom in/out
 - **Real-time Updates**: PCB orientation matches physical device
@@ -53,6 +60,13 @@ The frontend expects JSON data from the ESP32S3:
 {"accel":{"x":0.123,"y":0.456,"z":0.789},"gyro":{"x":1.23,"y":4.56,"z":7.89},"temp":25.4}
 ```
 
+## Charts
+
+- Two overlaid charts are rendered:
+  - **Accelerometer (g)**: X/Y/Z in ±2g by default
+  - **Gyroscope (°/s)**: X/Y/Z in ±500°/s by default
+- Titles appear top-center; legends are right-aligned. Ranges can be adjusted in `src/main.ts` when constructing the graphs.
+
 ## Build Commands
 
 ```bash
@@ -88,7 +102,7 @@ src/
 ├── scene.ts          # Three.js scene setup and lighting
 ├── pcb-model.ts      # PCB 3D model and orientation logic
 ├── webserial.ts      # WebSerial communication manager
-├── graph.ts          # Lightweight accelerometer graph overlay
+├── graph.ts          # Lightweight graph overlay for accel/gyro X/Y/Z
 └── types.d.ts        # Type definitions
 
 public/