This directory contains example programs that use the imu-tools npm package to connect to an ESP32 that is running either the MicroPython code in imu-tools, or the Arduino (C++) code in Arduino-BLE-IMU.
To run these examples, run a server such as:
- (Atom) atom-live-server package
- (Visual Studio Code) Live Server extension. CLick the Live Server icon in the status bar at the bottom of the window.
- (Command line)
python -m SimpleHTTPServer 5500. (The inclusion of5500is not necessary, but makes this compatible with the URLs in the Guide section below.)
A device can be connected either via BLE ("Bluetooth Low Energy"), or an MQTT broker.
To connect to a device via Bluetooth, click the "BLE Connect" button. Unfortunately, this needs to be repeated each time the page is loaded.
To connect to an MQTT server ("broker"), click "Open Controls" and enter the hostname of the MQTT broker, and enter the username and password. If several devices are connected to the same server, the programs will display data from all of them. Enter a device id in the controls to restrict them to only a single device.
(If you run a server at port 5500, as above, you can click on the example names below in order to open them in a browser.)
index.html displays a list of examples in this directory.
3d-model.html is a p5.js sketch that displays the
Stanford bunny. The 3d
orientation of the bunny is yolked to the IMU orientation. The model is red
before the sensor is minimally calibrated, and it fades out when sensor data is
not being received. (With the Gravity BNO055, the model mostly stays red.)
This sketch has a lot of features, that make it useful for interaction but
difficult to read the code. See 3d-example, below.
The "Calibrate" button resets tells the software that the IMU is currently in home position (rightside up). It is not related to the IMU's built-in calibration feature, that synchronizes the IMU's sensors to each other.
3d-example.html is a simpler sketch
that also displays the bunny. It assumes that only a single IMU is connected.
sketch.html is simple p5.js sketch that
displays the Euler angles. Use it as a starter templtate for writing p5.js
sketches that use the IMU.
dashboard.html displays a directory of web pages in the
web directory directory. It is written in React, with
Babel to process JSX.
barchart.html displays a live bar chart of sensor data.
This is implemented as a p5.js sketch.
chart.html uses HighCharts
to display another live graph, that automatically scales the y axis as data
arrives.
See the npm imu-tools README for additional documentation for the IMU connection code.
MIT