Serial read data and graph using p5.webserial

Listens for an ASCII string with a newline at the end.

Lists serial ports in a browser selection window. 

When you choose a port, it opens the port and 

graphs the incoming data.

created 31 May 2022

modified 11 Jun 2022

by Tom Igoe

*/

​

// variable to hold an instance of the p5.webserial library:

const serial = new p5.WebSerial();

// port chooser button:

let portButton;

// variable for incoming serial data:

let inData;

let xPos = 0;                     // x position of the graph

​

function setup() {

  createCanvas(400, 300);

  background(0x08, 0x16, 0x40);

​

  // check to see if serial is available:

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

  // check for any ports that are available:

  serial.getPorts();

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

  // open whatever port is available:

  serial.on("portavailable", openPort);

  // handle serial errors:

  serial.on("requesterror", portError);

  // handle any incoming serial data:

  serial.on("data", serialEvent);

  serial.on("close", makePortButton)

  // add serial connect/disconnect listeners:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

}

​

// if there's no port selected, 

// make a port select button appear:

function makePortButton() {

  // create and position a port chooser button:

  portButton = createButton('choose port');

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

​

// make the port selector window appear:

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

​

function draw() {

  graphData(inData);

}

​

function graphData(newData) {

  // map the range of the input to the window height:

  var yPos = map(newData, 0, 255, 0, height);

  // draw the line in a pretty color:

  stroke(0xA8, 0xD9, 0xA7);

  line(xPos, height, xPos, height - yPos);

  // at the edge of the screen, go back to the beginning:

  if (xPos >= width) {

    xPos = 0;

    // clear the screen by resetting the background:

    background(0x08, 0x16, 0x40);

  } else {

    // increment the horizontal position for the next reading:

    xPos++;

  }

}

​

// open the selected port, and make the port 

// button invisible:

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

​

  // once the port opens, let the user know:

  function initiateSerial() {

    console.log("port open");

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

​

// pop up an alert if there's a port error:

function portError(err) {

  alert("Serial port error: " + err);

}

// read any incoming data as a string

// (assumes a newline at the end of it):

function serialEvent() {

  // read a string from the serial port:

  var inString = serial.readLine();

  // check to see that there's actually a string there:

  if (inString) {

    // convert it to a number:

    inData = Number(inString);

  }

}

​

// try to connect if a new serial port 

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

​

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

​

function closePort() {

  serial.close();

}