Difference between revisions of "P5js-WebSerial"
From Digipool-Wiki
(→P5JS Code) |
(→P5JS Code) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
This code receives the value of A0 and displays it on the screen. | 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) | + | * Make sure to turn on WebSerial API in Chrome to connect (Arduino) |
| − | Use the Basics/AnalogReadSerial example on the | + | * Use the Basics/AnalogReadSerial example on the Arduino |
| − | Click on the program window to establish the serial connection | + | * Click on the program window to establish the serial connection |
| − | If the connection is interrupted, the program must be restarted (reload) | + | * If the connection is interrupted, the program must be restarted (reload) |
| + | <br> | ||
== Use this command to send data to the Arduino: == | == Use this command to send data to the Arduino: == | ||
| Line 25: | Line 26: | ||
<pre> | <pre> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
let baud = 9600; | let baud = 9600; | ||
| Line 82: | Line 68: | ||
if (serialOn == 1) { | if (serialOn == 1) { | ||
if (inStringList.length == 1) { | if (inStringList.length == 1) { | ||
| − | serialValue = int | + | serialValue = int(inStringList[0]); |
} | } | ||
} | } | ||
Latest revision as of 22:39, 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
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(inStringList[0]);
}
}
}
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);
}
}
}
