That raw data is all fine and good, but we want to see what they mean in 3D space, right? Traditionally, a Processing sketch would be used to read the serial data and convert it to a 3D rotation - but thanks to Web Serial API we can use any Chrome browser - a lot easier than installing Processing!

Step 1 - Wire up the BNO055 to your Microcontroller using I2C

First wire up a BNO055 to your board exactly as shown on the previous pages using the I2C interface.  Here's an example of wiring a Feather M0 to the sensor with I2C:

Step 2 - Load the Sketch onto your device

Continue by making sure you still have the Arduino IDE open and have the latest version of the Adafruit BNO055 library installed. Open the sketch at Examples → Adafruit BNO055 → webserial_3d

Upload the sketch to your Microcontroller Board.

Step 3 - Install Chrome

Start by installing the Chrome browser if you haven't yet.

Step 4 - Enable Web Serial API if necessary

At the time of this tutorial, you'll need to enable the Serial API, which is really easy.

Visit chrome://flags from within Chrome. Find and enable the Experimental Web Platform features

Restart Chrome

Step 5 - Visit the Adafruit 3D Model viewer

In Chrome, visit https://adafruit.github.io/Adafruit_WebSerial_3DModelViewer/

Verify you have 9600 Baud selected (it only really matters for non-native-serial devices but might as well make sure its right). If you changed it in the sketch, be sure it matches.

Click Connect

When the security window pops up, pick the matching Serial/COM port for your board running the AHRS sketches. Make sure the serial port isn't open in Arduino or something else.

You'll see the serial port monitor on the bottom and a 3D bunny on the top. Try rotating and twisting the sensor to see it move!

Step 6 - Calibration

The devices will need to be calibrated each time it is powered up. You can see the Device Calibration page for more details on performing the actual calibration, but the WebSerial interface provides a convenient way to check the current calibration status.

Step 7 - Euler Angles or Quaternions

The WebSerial interface is also able to use both Euler Angles and Quaternions. Euler angles represent the X, Y, and Z axes and are easier to understand, but also have the disadvantage of "Gimbal Lock" at certain angles. To get around that, quaternions can be used. The angle type selection is at the top.

You can choose between using Euler Angles and Quaternions.

Try playing around with both by moving the bunny around and see if you can see the differences!