Difference between revisions of "P5js-WebSerial"

From Digipool-Wiki
Jump to: navigation, search
(Created page with " == P5JS Code == <pre> // 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-Contr...")
 
(→‎P5JS Code)
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
  
−
== P5JS Code ==
 
  
−
<pre>
+
== P5js-WebSerial ==
  
−
// WebSerial
+
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 USB-Controller (Arduino)
+
−
// Use the Basics/AnalogReadSerial example on the arduino
+
  
−
/*
+
* Make sure to turn on WebSerial API in Chrome to connect (Arduino)
−
Use this command to send data to the 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)
 +
 
 +
<br>
 +
 
 +
== Use this command to send data to the Arduino: ==
 +
 
 +
<pre>
  
 
   if (serialDevice) {
 
   if (serialDevice) {
Line 16: Line 20:
 
     serialDevice.writeString("\n");
 
     serialDevice.writeString("\n");
 
   }
 
   }
−
 
+
 
−
*/
+
</pre> 
 +
 
 +
== P5JS Code ==
 +
 
 +
<pre>
  
 
let baud = 9600;
 
let baud = 9600;
Line 60: Line 68:
 
   if (serialOn == 1) {
 
   if (serialOn == 1) {
 
     if (inStringList.length == 1) {
 
     if (inStringList.length == 1) {
−
       serialValue = int(map(parseInt(inStringList[0]), 0, 1024, 0, 1001));
+
       serialValue = int(inStringList[0]);
 
     }
 
     }
 
   }
 
   }
Line 75: Line 83:
 
</pre>
 
</pre>
  
−
HTML Code
+
== HTML Code ==
  
 
<pre>
 
<pre>
Line 93: Line 101:
 
   </body>
 
   </body>
 
</html>
 
</html>
 +
 +
</pre>
 +
 +
== serial-device.js Class ==
 +
 +
<pre>
 +
 +
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);
 +
    }
 +
  }
 +
}
  
 
</pre>
 
</pre>

Latest revision as of 22:39, 31 October 2024


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);
    }
  }
}
Retrieved from "http://www.digipool.info/m/index.php?title=P5js-WebSerial&oldid=94782"