Those three numbers are 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 - Install Chrome

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

Step 2 - Enable Web Serial API if necessary

As of Chrome 89, Web Serial is enabled by default.

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 3 - Visit the Adafruit 3D Model viewer

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

Verify you have 115200 Baud selected (it only really matters for non-native-serial devices but might as well make sure its right)

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

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!

This guide was first published on Feb 17, 2020. It was last updated on Feb 17, 2020.

This page (WebSerial Visualizer) was last updated on Feb 16, 2020.

Text editor powered by tinymce.