MLX90393 Real-Time Visualization

A full-stack project to visualize real-time magnetic field changes captured by the MLX90393 3-axis magnetometer on an ESP32. Data is streamed via serial port to a Node.js backend, and displayed in a browser using Vue.js and D3.js.

---

Features

• Real-time visualization of X, Y, Z magnetic field components.
• Interactive dot position and rotation line representing sensor orientation.
• Time-series graph for continuous monitoring.
• Lightweight Node.js + Socket.IO backend.
• Works cross-platform (Windows, macOS, Linux).

---

Hardware

• MLX90393 3D Magnetometer
• ESP32 development board
• USB cable for serial communication

---

Software Stack

• ESP32 firmware: Arduino sketch using Adafruit MLX90393 library
• Backend: Node.js + Express + Socket.IO + SerialPort
• Frontend: Vue.js + D3.js
• Styling: CSS for graph visualization

---

Setup Instructions

1. Install Arduino IDE & ESP32 Support

1. Download and install the Arduino IDE.

2. Install ESP32 board support:

   • File → Preferences → Additional Boards Manager URLs:
     https://dl.espressif.com/dl/package_esp32_index.json
   • Tools → Board → Boards Manager → Search “ESP32” → Install

3. Install Adafruit MLX90393 library:

   • Tools → Manage Libraries → Search Adafruit MLX90393 → Install

---

2. Flash ESP32

1. Open mlx90393-esp32/mlx90393-esp32.ino in Arduino IDE.
2. Select your ESP32 board and correct COM port.
3. Upload the sketch.

---

3. Setup Node.js Backend

1. Install Node.js (v14+ recommended).

2. Clone this repository:

git clone <your-repo-url>
cd <repo-directory>

3. Install dependencies:

npm install

4. Update the serial port path in index.js if necessary:

const port = new SerialPort('/dev/ttyUSB0', { baudRate: 9600 }) // Linux example

• On Linux/macOS: /dev/ttyUSB0 or /dev/ttyACM0
• On Windows: COM3, COM4, etc. (check Device Manager → Ports)

---

4. Run the Backend Server

node index.js

• Server runs on http://localhost:3000
• The server reads serial data from ESP32 and emits it via Socket.IO to the frontend.

---

5. Open the Frontend

• Open a browser and navigate to http://localhost:3000

• You should see:

  • Table of X/Y/Z values
  • Rotating line representing sensor orientation
  • Movable dot and live graph

---

Notes

• The graph.js currently uses placeholder data; you can connect it to real sensor data by modifying the tick/update functions to consume x, y, z from Vue.
• Ensure your ESP32 is powered and connected before starting the Node.js server.
• On Windows, install serial drivers if the ESP32 is not recognized.

---

Dependencies

Node.js (backend)

• express
• socket.io
• serialport
• @serialport/parser-readline

Frontend

• Vue.js (CDN)
• D3.js (CDN)

---

License

MIT License

---

Author

Christos Kalaitzis