Included with the BNO055 library is an example of how to send orientation readings to a webpage and use it to rotate a 3D model. Follow the steps below to setup and run this example.

This example is for use with Raspberry Pi and other Linux computers - flask doesn't run on CircuitPython yet!

Dependencies

In addition to the BNO055 libary, you'll need to install the flask Python web framework.

Connect to your board in a command terminal and run the following commands:

sudo apt-get update
sudo apt-get install python3-flask

sudo apt-get update
sudo apt-get install python3-flask

You will also need to be using a web browser that supports WebGL on your computer or laptop.  I recommend and have tested the code for this project with the latest version of Chrome.

Download the WebGL Example

The example can be found in the library repo here. There are various ways you can get all the code. The easiest is probably to just clone the repo to your Pi:

git clone https://github.com/adafruit/Adafruit_CircuitPython_BNO055.git

git clone https://github.com/adafruit/Adafruit_CircuitPython_BNO055.git

And then you can navigate to the examples folder in the repo. Or copy the example to another location, etc.

Start Server

Navigate to the webgl_demo example folder that you downloaded above. Then you can start the server by running:

sudo python3 server.py

sudo python3 server.py

You should see text like the following after the server starts running:

* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
* Restarting with stat

* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
* Restarting with stat

Now open a web browser on your computer and navigate to your board's IP address or hostname on port 5000.  For example on a Raspberry Pi http://raspberrypi.local:5000/ might work, or on a BeagleBone Black http://beaglebone:5000/ is the URL to try.  If neither URL works you'll need to look up the IP address of your device and then access it on port 5000.  For example if your board has the IP address 192.168.1.5 you would access http://192.168.1.5:5000/.

Once the page loads you should see something like the following:

If you move the BNO055 sensor you should see the 3D model move too. However when the demo first runs the sensor will be uncalibrated and likely not providing good orientation data. Follow the next section to learn how to calibrate the sensor.

Sensor Calibration

This feature is currently not active. Once the library has been updated to allow calibration data to be saved and loaded, this section will get updated.

For now, just have fun spinning the little 3D rabbit around.

Usage

You can line up the axes of the sensor and 3D model by using the Straighten button.  First you'll need to place the BNO sensor in a very specific orientation.  Place the sensor flat in front of you and with the row of SDA, SCL, etc. pins facing away from you like shown below:

Then click the Straighten button and you should see the 3D model snap into its normal position:

Now move the BNO055 sensor around and you should see your movements exactly matched by the 3D model!

You can also change the 3D model by clicking the Model drop down on the right and changing to a different model, like a cat statue:

That's all there is to using the BNO055 WebGL demo!

To stop the server go back to the terminal where it was started and press Ctrl-C.

More Info

Describing how all of the WebGL code works is a little too complex for this guide, however the high level components of the example are:

• flask web service framework: This is a great, simple web framework that is used by server.py to serve the main index.html page and expose a few web service endpoints to read BNO sensor data and save/load calibration data.
• HTML5 server sent events: This is how data is sent from the server to the webpage.  With SSE a connection is kept open and data is pushed to the client web page.  BNO sensor readings are taken and sent over SSE where they're use to update the orientation of the model.  This page has a little more info on how to use HTML5 SSE with the flask framework (although it uses a more complex multiprocessing framework called gevent that isn't necessary for simple apps like this demo).
• Three.js: This is the JavaScript library that handles all the 3D model rendering.
• Bootstrap & jQuery: These are a couple other JavaScript libraries that are used for the layout and some core functionality of the page.

That's all there is to using the BNO055 WebGL demo.  Enjoy using the BNO055 absolute orientation sensor in your own projects!