const serial = new p5.WebSerial();

// for data

let portButton;

let inData;                   

let outByte = 0;  

let X_pos;

function setup() {

  createCanvas(400, 300);          

  //  serial chec:

  if (!navigator.serial) {

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

  }

  // if serial is available, add connect/disconnect listeners:

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

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

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

}

function draw() {

   X_pos = map(inData, 0, 255, 50/2, width-(50/2));

   ellipse(X_pos,200,50);

   background(0);

   fill(255);

   text("sensor value: " + inData, 30, 50);

}

​

function makePortButton() {

  // position and button

  portButton = createButton("choose port");

  portButton.position(10, 10);

  portButton.mousePressed(choosePort);

}

​

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

// open the selected port, and make the port 

function openPort() {

  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();

}

function portError(err) {

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

}

function serialEvent() {

  inData = Number(serial.read());

  console.log(inData);

}

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

​

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

function closePort() {

  serial.close();

}

​

// void setup() {

//   Serial.begin(9600); // initialize serial communications

// }

// void loop() {

//   // read the input pin:

//   int potentiometer = analogRead(A0);                  

//   // remap the pot value to fit in 1 byte:

//   int mappedPot = map(potentiometer, 0, 1023, 0, 255); 

//   // print it out the serial port:

//   Serial.write(mappedPot);                             

//   delay(1);                                            

//   delay(100);

// }