Difference between revisions of "P5js-WebSerial"
From Digipool-Wiki
(→P5JS Code) |
|||
| Line 1: | Line 1: | ||
| + | |||
| + | |||
| + | == P5js-WebSerial == | ||
| + | |||
| + | This code receives the value of A0 and displays it on the screen. | ||
| + | |||
| + | Make sure to turn on WebSerial API in Chrome to connect (Arduino) | ||
| + | Use the Basics/AnalogReadSerial example on the arduino | ||
| + | Click on the program window to establish the serial connection | ||
| + | If the connection is interrupted, the program must be restarted (reload) | ||
| + | |||
| + | |||
| + | == Use this command to send data to the Arduino: == | ||
| + | |||
| + | <pre> | ||
| + | |||
| + | if (serialDevice) { | ||
| + | serialDevice.writeString("1"); | ||
| + | serialDevice.writeString("\n"); | ||
| + | } | ||
| + | |||
| + | </pre> | ||
== P5JS Code == | == P5JS Code == | ||
Revision as of 22:30, 31 October 2024
Contents
P5js-WebSerial
This code receives the value of A0 and displays it on the screen.
Make sure to turn on WebSerial API in Chrome to connect (Arduino) Use the Basics/AnalogReadSerial example on the arduino Click on the program window to establish the serial connection If the connection is interrupted, the program must be restarted (reload)
Use this command to send data to the Arduino:
if (serialDevice) {
serialDevice.writeString("1");
serialDevice.writeString("\n");
}
P5JS Code
// WebSerial
// This code receives the value of A0 and displays it on the screen.
// Make sure to turn on WebSerial API in Chrome to connect USB-Controller (Arduino)
// Use the Basics/AnalogReadSerial example on the arduino
/*
Use this command to send data to the Arduino:
if (serialDevice) {
serialDevice.writeString("1");
serialDevice.writeString("\n");
}
*/
let baud = 9600;
let serialDevice;
let serialValue = 0;
let inString = "1";
let inStringList = "";
let serialOn = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0);
noStroke();
fill(255, 127);
text(serialValue, 100, 100);
}
function mousePressed() {
if (!!serialDevice) {
if (serialOn == 0) {
serialOn = 1;
} else {
serialOn = 0;
}
return;
}
serialDevice = new SerialDevice(
baud,
(data) => serialRead(data),
(err) => serialError(err)
);
serialOn = 1;
}
function serialRead(data) {
console.log("serial data:", data);
inStringList = splitTokens(data, " ");
if (serialOn == 1) {
if (inStringList.length == 1) {
serialValue = int(map(parseInt(inStringList[0]), 0, 1024, 0, 1001));
}
}
}
function serialError(err) {
print("Error:", err);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="serial-device.js"></script>
<script src="sketch.js"></script>
</body>
</html>
serial-device.js Class
class SerialDevice {
constructor(baudRate = 115200, readCallback = null, errorCallback = null) {
this.baudRate = baudRate;
this.readCallback = readCallback;
this.errorCallback = errorCallback;
this.initSerial();
}
async initSerial() {
try {
this.port = await navigator.serial.requestPort(); // Request a port and open a connection.
await this.port.open({
baudrate: this.baudRate,
baudRate: this.baudRate,
}); // Wait for the port to open. Use new & old `baudrate` key for different browsers
console.log(this.port);
this.initialized = true;
} catch (err) {
if (this.errorCallback) this.errorCallback(err);
return;
}
// start reading input
this.startWriting();
this.startReading();
}
async startReading() {
// input from serial device
this.decoder = new TextDecoderStream();
let inputDone = this.port.readable.pipeTo(this.decoder.writable);
this.inputStream = this.decoder.readable;
this.reader = this.inputStream.getReader();
this.readLoop();
}
async readLoop() {
while (true) {
const { value, done } = await this.reader.read();
if (value) {
if (this.readCallback) this.readCallback(value);
}
if (done) {
console.log("[readLoop] DONE", done);
this.reader.releaseLock();
break;
}
}
}
async startWriting() {
// output to serial device
this.encoder = new TextEncoderStream();
this.outputDone = this.encoder.readable.pipeTo(this.port.writable);
this.writerString = this.encoder.writable.getWriter();
}
async writeString(data) {
if (this.port && this.port.writable) {
await this.writerString.write(data);
} else {
console.log("[SerialDevice can't write string]", data);
}
}
}
