//<script src="https://unpkg.com/p5-webserial@0.1.1/build/p5.webserial.js"></script>

​

//Declare the serial object

const serial = new p5.WebSerial();

​

var xAccel, yAccel, zAccel,

    xGyro, yGyro, zGyro;

​

function setup() {

  createCanvas(400, 400);

​

  //lab version:

  if (!navigator.serial) {

    //navigator is P5 Navigator?

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

  }

  //library version:

  // if (!p5.WebSerial.checkSupport()) {

  //   alert("WebSerial is not supported.");

  // }

  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.write('x'); //initiate data if handshaking

  });

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

  //dark background, white text:

  background(32);

​

  fill(255);

  noStroke();

​

  // display the incoming serial data text on screen:

  var xPos = 10, yPos = 10, yStep = 11; //these are just handy temporary variables for positioning the text on scree. This way if I want to move where the text is, or the spacing, I can adjust these instead of all 6 lines below

  text("xAccel: " + xAccel, xPos, yPos+=yStep);

  text("yAccel: " + yAccel, xPos, yPos+=yStep);

  text("zAccel: " + zAccel, xPos, yPos+=yStep);

  text("xGyro: " + xGyro, xPos, yPos+=yStep);

  text("yGyro: " + yGyro, xPos, yPos+=yStep);

  text("zGyro: " + zGyro, xPos, yPos+=yStep);

  //XYZ traditionally mapped to RGB. We'll reuse xPos and yPos to position the axis symbol 

  xPos = width/2 - 50, yPos = height/2;

  strokeWeight(10); //with a side stroke weight we can draw lines instead of think about rects. 

  var scale = 40;   //The accelerometer reports values as multiples of earth's gravity (1g). So the range is ~-10-10 and it would be nive to scale it up enough to see clearly on the screen

​

  //Draw Accelerometer so each axis grows acoording to the reported value.

  stroke(255, 0, 0);

  line(xPos, yPos, xPos+scale*yAccel, yPos); //I'm drawing the accelerometer's Y value on the X axis and vise versa because I think of the USB port as the "top" of the board

  stroke(0,255,0);

  line(xPos, yPos, xPos, yPos+scale*xAccel);

  stroke(0,0,255);

  strokeWeight(5);

  line(xPos, yPos, xPos+scale*zAccel/2, yPos+scale*zAccel/2); //draw z on a diagonal

  //Draw Gyro to the right of the accelerometer

  xPos = width/2 + 50

  scale = .5; //These values are much larger (degrees/second maybe?) so we'll shrink to fit

  stroke(255, 0, 0);

  strokeWeight(10);

  line(xPos, yPos, xPos+scale*yGyro, yPos);

  stroke(0,255,0);

  line(xPos, yPos, xPos, yPos+scale*xGyro);

  stroke(0,0,255);

  strokeWeight(5);

  line(xPos, yPos, xPos+scale*zGyro/2, yPos+scale*zGyro/2);

}

​

function keyPressed() {

  //hot ket forces open a serial dialog

  if (key == "s") {

    serial.requestPort();

  }

  //console.log("Sending " + key);

  serial.write(key);

}

​

// function mouseDragged() {

//   var outByte = byte(map(mouseY, 0, height, 0, 255));

//   serial.write(outByte);

// }

​

// 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 serialEvent() {

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

  // lastDataTime = millis();

  let inString = serial.readStringUntil("\r\n");

  if (inString != null) {

    //console.log(inString);

    let temp = split((inString), ",");

    //console.log(temp);

    if (temp.length==6) { //looks like a good packet, so let's assign the contents to our global variables

      xAccel = Number(temp[0]);

      yAccel = Number(temp[1]);

      zAccel = Number(temp[2]);

      xGyro = Number(temp[3]);

      yGyro = Number(temp[4]);

      zGyro = Number(temp[5]);

    }

  } serial.write('x');

}