MengLinMaker / IMU-Webserial-Visualiser

Visualising IMU orientation using "Three.js" via the experimental "Web Serial API".

Home Page:https://menglinmaker-imu-webserial-visualiser.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

IMU webserial visualiser

IMU visualiser using quaternions in [w, i, j, k] format. The ESP32 code for extracting BNO080 data can be found in the "Bno080-examples" folder.

Made using Three.js, which is a WebGL wrapper, and the experimental Web Serial API. An ESP32 microctontroller interfaces with BNO080 IMU and streams data to the website. Data streaming test codes can be found here. Finally, the website is built using Vite and uploaded to Netlify. Overall the data streaming and animation performance is capable of supporting multiple IMUs simultaneously. Judge the performance for yourself:

Instructions:

Live Visualisation Streaming

  1. Select baud rate.
  2. Click connect and choose COM port. Recording Serial Data
  3. Choose buffer size for saving CSV (Optional).
  4. Click save and enter file name to save (Optional). Note: Choose a reasonable value for CSV buffer size: under 10^6.

Credits

This code was modified from Mike Molinari's serialTerminal.com: https://github.com/mmiscool/serialTerminal.com Reskinned UI and refactored the original code. Added ability to save CSV file and determine last full line, stored in "currentData". Access the original webserial terminal here: https://www.serialterminal.com

About

Visualising IMU orientation using "Three.js" via the experimental "Web Serial API".

https://menglinmaker-imu-webserial-visualiser.netlify.app/

License:ISC License


Languages

Language:JavaScript 74.1%Language:HTML 15.7%Language:CSS 10.2%