const serial = new p5.WebSerial();

​

function setup() {

  createCanvas(400, 400);

  // check to see if serial is available:

   if (!navigator.serial) {

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

  } 

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

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

  serial.on("noport", function() { print("No ports yet");});

  serial.on("portavailable", function () {

      print("Port available");

      serial.open();

    });

  serial.on("open", function () { print("Port open"); });

  serial.on("requesterror", function () { print("Request error"); });

  serial.on("readerror", function () { print("Read error"); });

  serial.on("data", serialEvent); //<== This is the main event, see below

  serial.on("close",  function () { serial.close(); });

  serial.getPorts();

}

​

function draw() {

  background(220);

}

​

//Main serial processing code. Template just reads and reports one byte at a time. Flesh this function out to perform better data processing

function serialEvent() {

  //console.log("Got data");

  inData = serial.read();

  //inData = Number(serial.read());

  console.log(inData);

}

​

function keyPressed() {

  //hot ket forces open a serial dialog

  if (key == "s") { serial.requestPort();}

}

​

​

​

// 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");

}

​