Goal: Suppose you want to plug in a microcontroller and have it behave like a USB device (e.g., a controller for a browser-based game). It should be straightforward for other users, without requiring plugins, drivers, or serial bridges to be established. ### Browsers and USB <p> Web browsers cannot directly talk to USB devices like microcontrollers because by default they don't have access to serial ports. This limitation can be overcome by using (1) a Serial Bridge (i.e., running a server on your computer that can act as the communication bridge between the browser and the microcontroller), (2) WebUSB, or (3) WebSerial. </p> ### 1. Serial Bridge One example specific to p5 is the <a href='https://github.com/p5-serial/p5.serialport'>P5.serialserver</a> (or p5.serialcontrol). This requires a separate program that you run to create a server, which can be downloaded <a href='https://github.com/p5-serial/p5.serialcontrol/releases/tag/0.1.2'>here</a>. (Some other tutorials that use this method include <a href='https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/'>Serial Input to p5</a>, <a href='https://itp.nyu.edu/physcomp/labs/labs-serial-communication/two-way-duplex-serial-communication-using-p5js/'>Two-Way (Duplex) Serial Communication Using An Arduino and p5</a>, and an example for <a href='https://create.arduino.cc/projecthub/alankrantas/use-teachable-machine-ai-to-control-anything-2ad1ee'> Teachable Machine</a>. We can set up a simple example to talk to a p5 sketch over Serial. Upload this code to your microcntroller: <pre><code class="language-arduino"> const int sensorPin = A0; // analog pin A0 void setup() { // initialize the serial port for communication Serial.begin(9600); } void loop() { // read from potentiometer int sensorValue = analogRead(sensorPin); // write the value to p5.js Serial.write(sensorValue); delay(10); } </code></pre> <p> The javascript side is a little more complicated. We'll want to make a folder that contains both an index.html file and a sketch.js file. The index.html file should look something like this: </p> <pre><code class="html"> &lt;!doctype html&gt; &lt;html class="no-js" lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/lib/p5.js">&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js">&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="sketch.js">&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p> Finally, you'll need a sketch.js file, which can look something like <a href='https://github.com/ITPNYU/physcomp/tree/master/Labs/P5SerialLabs/P5ReadSerial/readSerial'>this</a>. Make sure to change your port name. </p> ### 2. WebUSB API Another way to talk to your browser is by using microcontrollers that are able to talk over USB directly. Check out <a href='https://learn.adafruit.com/using-webusb-with-arduino-and-tinyusb?view=all'>Adafruit's documentation</a> on how to do this. This method is particularly useful because it allows your browser to directly ask permission to access your microcontroller over USB, meaning you don't need to go through the step of establishing a connection bridge yourself. <a href='../../lab/programming/p5-usb.html' target="_self"> Here's a demo</a> that connects Adafruit's documentation (above) with a 3D interface. Note that this requires the microcontroller to have been programmed with the TinyUSB stack, which is only available for certain microcontrollers. The WebUSB API: - provides access to USB devices from the web - allows you to communicate with many different classes of USB device, including Serial devices - requires the OS to allow the browser to "claim" the USB interface, which means there can't already be a USB device driver present. - requires support for the TinyUSB stack ### 3. WebSerial API The WebSerial API is more generally accessible and useful with any device that can talk Serial. - provides access to serial ports complying with RS232 standards from web - USB is lower level than Serial. Not every Serial device is a USB device. - allows you to communicate with other types of serial devices such as Bluetooth as well as built-in RS-232 ports and other UARTs - the OS needs to have the correct USB serial driver installed so that the device is available through the platform-specific serial API used by the browser to implement Web Serial <a href='../../lab/programming/webserial.html' target="_self"> Here's a page</a> that covers the basics of WebSerial.