Labs 2: Asynchronous Serial Communications

Documentation:

The Labs’ guidances are super clear and easy to follow:

https://itp.nyu.edu/physcomp/lessons/serial-communication-the-basics/

https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-webserial-input-to-p5-js/

https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-webserial-output-from-p5-js/

https://github.com/ITPNYU/physcomp/tree/main/Labs

I used to try serial communication between Arduino and Python, connecting p5js is a new challenge for me. I followed the process step by step even sometimes may have a few problems such as forgetting to end the p5js program and trying to update the Arduino sketches. The code is super advanced and needs a lot of time to follow. I love the checklist so I copy and paste here just in case I forget the steps in the future.

In the HTML file, include the p5.webserial library

• In the global variables of the sketch,

  • make a new instance of the library

  • include a port selector button or some way to invoke the serial port chooser dialogue box

• In the setup:

  • Make sure WebSerial is supported in this browser

  • Include a call to serial.getPorts() to check for available ports.

  • include serial.on() listeners for these events:

    • noport

    • portavailable

    • data

    • close

    • requesterror

  • include navigator listeners for connect and disconnect

• Define handler functions for all of the events above. Most of these can be simple alerts or console.log messages

• *Customize the function that responds to the data listener (usually called serialEvent() in these examples), as you’ll see below.

• *Decide when and how you’ll send serial data out, as you’ll see in the other p5.webserial labs.