// https://developer.chrome.com/docs/capabilities/serial

//

// We recommend that you instead use the serial.js library from the

// Makeability Lab. See:

// https://editor.p5js.org/jonfroehlich/sketches/vPfUvLze_C

//

// and a basic visualization version here:

// https://editor.p5js.org/jonfroehlich/sketches/5Knw4tN1d

//

// By Jon E. Froehlich

// @jonfroehlich

// http://makeabilitylab.io/

//

​

let btnConnect;

let port;

let reader;

let inputDone;

let outputDone;

let inputStream;

let outputStream;

let circleDiameter = 0;

let receivedData = '';

​

function setup() {

  // Create a canvas of size 400x400 pixels

  createCanvas(400, 400);

​

  // Check if the Web Serial API is supported in the user's browser

  if ("serial" in navigator) {

    print("Web Serial is supported!");

  } else {

    print("Web Serial is not supported :(");

  }

  // Create a 'Connect' button

  btnConnect = createButton('Connect');

  // Add an event listener to the 'Connect' button

  // Chrome security requires that Web Serial connections only happen

  // in response to user action (so some random website doesn't connect to

  // your web serial device unbeknownst to you)

  document.querySelector('button').addEventListener('click', async () => {

    // Prompt the user to select any serial port

    const port = await navigator.serial.requestPort();

    // Open the selected serial port with a baud rate of 9600

    await port.open({ baudRate: 9600 });

​

    // Setup the input and output stream.

    // Create a new TextDecoderStream which provides a streaming interface for decoding 

    //text from a stream of binary data.

    const decoder = new TextDecoderStream();

    // Pipe the readable stream of the serial port to the writable stream of the decoder.

    // This automatically transfers data from the readable stream to the writable stream.

    // It returns a promise (inputDone) that fulfills when all the data has been transferred.

    inputDone = port.readable.pipeTo(decoder.writable);

    // Get the readable stream from the decoder. This stream will emit the decoded text data.

    inputStream = decoder.readable;

    // Get a reader for the input stream. The reader is an object that you can use to read data from the stream.

    reader = inputStream.getReader();

​

    serialReadLoop();

  });

}

​

// Read data from the port.

async function serialReadLoop() {

  // Loop indefinitely.

  while (true) {

    // Read data from the input stream.

    const { value, done } = await reader.read();

    if (value) {

      // Accumulate the incoming data until a newline character is encountered.

      receivedData += value;

      if (receivedData.includes('\n')) {

        // Parse the accumulated data as a float and map it to the range of the circle diameter.

        circleDiameter = map(parseFloat(receivedData), 0, 1, 0, 200);

        print("Received data: " + receivedData);

        // Reset the accumulated data for the next reading.

        receivedData = '';

      }

    }

    // If the stream is done, release the reader and break the loop.

    if (done) {

      reader.releaseLock();

      break;

    }

  }

}

​

​

function draw() {

  background(220);

  ellipse(width / 2, height / 2, circleDiameter, circleDiameter);

}