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!
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:
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.
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
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.
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!
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.
When you first connect, you'll see that most of the calibration registers show as Uncalibrated.
Once you have gone through the calibration steps, you will see that they are all fully calibrated.
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!