{"id":9548,"date":"2022-05-31T07:52:53","date_gmt":"2022-05-31T11:52:53","guid":{"rendered":"https:\/\/itp.nyu.edu\/physcomp\/?page_id=9548"},"modified":"2022-08-26T17:53:24","modified_gmt":"2022-08-26T21:53:24","slug":"p5-serialport-and-p5-webserial-compared","status":"publish","type":"page","link":"https:\/\/itp.nyu.edu\/physcomp\/lessons\/p5-serialport-and-p5-webserial-compared\/","title":{"rendered":"p5.serialport and p5.webserial Compared"},"content":{"rendered":"\n

Asynchronous serial communication is not part of the core of p5.js, nor is it part of the core for web browsers. To read serial in a p5.js sketch, or in a web page in general, you need some help. One approach is to open a separate application that connects to the serial port and offers a webSocket connection to the browser. This is the approach that the p5.serialport library and the p5.serialcontrol app take. Another approach is to use the browser API called WebSerial<\/a>. This is the approach that the p5.webserial library takes. <\/p>\n\n\n\n

The difference between them is best illustrated by Figures 1 and 2 below. With p5.seriaport, you must open another application on your computer, p5.serialcontrol<\/a>, to communicate with the serial port. It is this application that handles serial communication, not the p5.js sketch in the browser. This can be more complicated for beginning users. <\/p>\n\n\n\n

\"Diagram<\/a>
Figure 1. Diagram of the connection from the serial port to p5.js through p5.serialcontrol<\/em><\/figcaption><\/figure><\/div>\n\n\n\n
\"Diagram
<\/a>Figure 2. Diagram of the connection from the serial port to p5.js through p5.webserial<\/em><\/figcaption><\/figure><\/div>\n\n\n\n
p5.serialport\/p5.serialcontrol:<\/th>p5.webserial:<\/th><\/tr><\/thead>
advantages:<\/strong>
* works in all browsers.
* Allows your browser to connect to the serial port of a remote computer, if that computer is running a web server program.
* Supports opening multiple serial ports at the same time<\/td>		advantages:<\/strong>
* connection is direct to the browser, making it easier for beginners to learn



<\/td><\/tr>
disadvantages:<\/strong>
* requires a third application (p5.serialcontrol), making it more difficult for beginners to learn<\/td>		disadvantages:<\/strong>
* only works in Chrome and Edge browsers
* No connection to remote computers
* Not sure if it supports a second serial port.<\/td><\/tr><\/tbody><\/table>
Table 1. Comparing p5.seriaport to p5.webserial<\/figcaption><\/figure>\n\n\n\n

The APIs of p5.serialport and p5.webserial are similar, so it’s pretty straightforward to convert between them.<\/p>\n\n\n\n

The code below is a typical p5.serialport setup. You make an instance of the p5.serialport library with the port name, then you make callback functions for the primary tasks:<\/p>\n\n\n

\nlet serial;          \/\/ variable to hold an instance of the serialport library\nlet portName = '\/dev\/cu.usbmodem1421';  \/\/ fill in your serial port name here\n \nfunction setup() {\n  serial = new p5.SerialPort();       \/\/ make a new instance of the serialport library\n  serial.on('list', printList);  \/\/ set a callback function for the serialport list event\n  serial.on('connected', serverConnected); \/\/ callback for connecting to the server\n  serial.on('open', portOpen);        \/\/ callback for the port opening\n  serial.on('data', serialEvent);     \/\/ callback for when new data arrives\n  serial.on('error', serialError);    \/\/ callback for errors\n  serial.on('close', portClose);      \/\/ callback for the port closing\n \n  serial.list();                      \/\/ list the serial ports\n  serial.open(portName);              \/\/ open a serial port\n}\n<\/pre><\/div>\n\n\n
 The code below is a typical p5.webserial setup. You check t see if WebSerial is available, and then you make an instance of the p5.webserial library, then you look for ports using getPorts()<\/code>:<\/p>\n\n\n
\n\/\/ variable to hold an instance of the p5.webserial library:\nconst serial = new p5.WebSerial();\n \/\/ port chooser button:\nlet portButton;\n\/\/ variable for incoming serial data:\nlet inData;\n \nfunction setup() {\n   \/\/ check to see if serial is available:\n   if (!navigator.serial) {\n    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");\n  }\n  \/\/ check for any ports that are available:\n  serial.getPorts();\n  \/\/ setup function continues below:\n<\/pre><\/div>\n\n\n
Unlike with p5.serialport, you don’t pass in the port name. Instead, the user chooses the port with a pop-up menu:<\/p>\n\n\n
\n  \/\/ if there's no port chosen, choose one:\n  serial.on("noport", makePortButton);\n  \/\/ open whatever port is available:\n  serial.on("portavailable", openPort);\n  \/\/ setup function continues below:\n<\/pre><\/div>\n\n\n
Then you make callback functions for the primary tasks. These are similar to p5.serialport’s callbacks:<\/p>\n\n\n
\n   \/\/ handle serial errors:\n  serial.on("requesterror", portError);\n  \/\/ handle any incoming serial data:\n  serial.on("data", serialEvent);\n  serial.on("close", makePortButton)\n  \/\/ setup function continues below:\n<\/pre><\/div>\n\n\n
You also add listeners for when the USB serial port enumerates or de-enumerates. This way, if you unplug your serial device or reset it, your program automatically reopens it when it’s available:<\/p>\n\n\n
\n  \n  \/\/ add serial connect\/disconnect listeners from WebSerial API:\n  navigator.serial.addEventListener("connect", portConnect);\n  navigator.serial.addEventListener("disconnect", portDisconnect);\n} \/\/ end of setup function\n<\/pre><\/div>\n\n\n
The functions in each API are similar too: <\/p>\n\n\n\n
p5.serialport functions (from the library’s <\/strong>guide<\/a>)<\/strong><\/th>p5.webserial functions (from the library’s guide<\/a>)<\/th><\/tr><\/thead>
read()<\/code> returns a single byte of data (first in the buffer)<\/td>read()<\/code><\/strong> \u2014 reads a single byte from the queue (returns a number)<\/td><\/tr>

readChar()<\/code> returns a single char, e,g, ‘A’, ‘a’<\/td>		readChar()<\/code><\/strong> \u2014 reads a single byte from the queue as a character (returns a string)<\/td><\/tr>

readBytes()<\/code> returns all of the data available as an array of bytes<\/td>		readBytes()<\/code><\/strong> \u2014 reads all data currently available in the queue as a Uint8Array<\/code>.<\/td><\/tr>
readBytesUntil(charToFind)<\/code> returns all of the data available until charToFind<\/code><\/code> is encountered<\/td>readBytesUntil(charToFind)<\/code><\/strong> \u2014 reads bytes until a character is found (returns a Uint8Array<\/code>)<\/td><\/tr>

readString() <\/code>returns all of the data available as a string<\/td>		<\/td><\/tr>
readStringUntil(charToFind)<\/code> returns all of the data available as a string until  charToFind<\/code><\/code> is encountered<\/td>readStringUntil(stringToFind)<\/code><\/strong> \u2014 reads out a string until a certain substring is found (returns a string)<\/td><\/tr>
last() <\/code>returns the last byte of data from the buffer<\/td><\/td><\/tr>

lastChar()<\/code> returns the last byte of data from the buffer as a char<\/td>		<\/td><\/tr>
<\/td>readLine()<\/code><\/strong> \u2014 read a string until a line ending is found (returns a string)<\/td><\/tr>
write()<\/code> – sends most any JS data type out the port.<\/td>write()<\/code> – sends most any JS data type out the port.<\/td><\/tr>
<\/td>print()<\/code>– sends string data out the serial port<\/td><\/tr>
<\/td>println()<\/code> – sends string data out the serial port, along with a newline character.<\/td><\/tr><\/tbody><\/table>
Table 2. Comparison of p5.serialport and p5.webserial APIs<\/figcaption><\/figure>\n\n\n\n
<\/p>\n\n\n\n
Both p5.serialport and p5.webserial will do the job of getting bytes from a serial device like an Arduino or other microcontroller to p5.js and vice versa. Which you use depends on what you need. p5.webserial is great if you’re connected directly to the browser’s computer via USB. For most serial applications, this is the way to go.  Alternately, p5.serialport offers the advantage that you can run p5.serialcontrol app on your browser’s computer or on another computer on the same network. That way, a browser on your phone or tablet can communicate to the serial device via the computer running p5.serialcontrol. <\/p>\n\n\n\n
This site contains lab examples for both p5.serialport<\/a> and p5.webserial<\/a> for your convenience. <\/p>\n","protected":false},"excerpt":{"rendered":"
Asynchronous serial communication is not part of the core of p5.js, nor is it part of the core for web browsers. To read serial in a p5.js sketch, or in a web page in general, you need some help. One approach is to open a separate application that connects to the serial port and offers … Continue reading “p5.serialport and p5.webserial Compared”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":13,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[42,52,31,79,78,26,9],"tags":[],"class_list":["post-9548","page","type-page","status-publish","hentry","category-asynchronous-serial","category-lesson","category-p5-js","category-p5-serialport","category-p5-webserial","category-programming","category-serial-communication"],"_links":{"self":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/9548"}],"collection":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/comments?post=9548"}],"version-history":[{"count":17,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/9548\/revisions"}],"predecessor-version":[{"id":10255,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/9548\/revisions\/10255"}],"up":[{"embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/media?parent=9548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/categories?post=9548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itp.nyu.edu\/physcomp\/wp-json\/wp\/v2\/tags?post=9548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}