xxxxxxxxxx
102
// Basic implementation of Web Serial following instructions from:
// 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);
}