Project

• Write an application that interfaces a user with an I/O device.
• compare as many tool options as possible.

Tools

• Arduino IDE
• XIAO RP2040
• WebSerial

This week was the time to make numbers look nice! I used the capacitive touch sense board from Week 3 to display the values in an interactive way. This could help me with my final project if I wanted to visualize the motion tracking of the 8x8 grid LiDAR module I plan to use. The PCB has 6 touch pads displaying a value from 0 (no touch) to 200 (full touch). I edited the original Arduino script to separate the values by a comma, but otherwise kept it similar to Quentin's test touch script. Once the script was uploaded, values were displayed on the Arduino Serial Monitor.

I took inspiration from a previous assignment done by Nadieh and followed her steps to build a website interface via Serial. I created an HTML file that initialized a connection via Serial to the XIAO RP2040. DISCLAIMER: it is very important that the Serial Monitor on the Arduino IDE is CLOSED before you attempt to connect the WebSerial. This would have saved me lots of troubleshooting effort wondering why the connection wasn't working, otherwise they will just fight for control over the port endlessly. Once the connection is made via WebSerial, there is a 2x3 grid of cards displaying the touch pad values. As those values increase from 0 to 200, the cards light up and become a darker, bolder blue. This way it was easy to visualize which pad I was pressing at what time, which could help me understand the VL53L5CX data when implemented.

To implement, the necessary steps are:

• Upload the Arduino code to the XIAO RP2040.
• Open the Serial Monitor, double-check that values are displaying correctly, and CLOSE it.
• Open the website on your browser and initialize the Serial connection with the XIAO RP2040.
• Touch the capacitive pads and ensure that values & cards are changing appropriately.