Arduino und P5.js

P5.js als eine web-basierte Sprache ermöglicht einen schnellen Austausch zwischen einen Arduino und eine Website.

Obwohl p5.js in JavaScript und nicht in Java geschrieben ist hat die p5.js Implementierung eine fast identische API. Es ist also sehr einfach, bereits vorhandenen Processing-Code in p5.js zu übersetzen (und p5.js im Allgemeinen zu lernen, wenn man Processing kennt). Ähnlich wie Processing abstrahiert p5.js einen Großteil der Komplexität beim Schreiben von JavaScript und ermöglicht es, sich ausschließlich auf interaktive Grafiken und Visualisierungen zu fokussieren.

Für eine Kommunikation zwischen p5.js und Arduino benutzen wir WebSerial API, die es Websites ermöglicht, mit Peripheriegeräten zu kommunizieren, die an den Computer angeschlossen sind. Derzeit läuft Web Serial nur unter Internet Explorer und Chrome. Um es zu nutzen, müssen wir Chrome (oder einen auf Chrome basierenden) Browser installieren.

P5.js Arduino Kommunikation

let msg;
let serialOptions = { baudRate: 9600 };
let serial;
let clicked = false;
// Board Info which can be found in Arduino under Tools ---> Get Board Info
let portInfo = { usbVendorId: 0x3EB, usbProductId: 0x2145 }

function setup() {
  createCanvas(240, 480);
  // Setup Web Serial using serial.js
  serial = new Serial();
  serial.on(SerialEvents.CONNECTION_OPENED, onSerialConnectionOpened);
  serial.on(SerialEvents.CONNECTION_CLOSED, onSerialConnectionClosed);
  serial.on(SerialEvents.DATA_RECEIVED, onSerialDataReceived);
  serial.on(SerialEvents.ERROR_OCCURRED, onSerialErrorOccurred);
 
  // If we have previously approved ports, attempt to connect with them
  // serial.autoConnectAndOpenPreviouslyApprovedPort(serialOptions);
  
  // Add in a lil <p> element to provide messages. This is optional
  msg = createP("");
}

async function connectPort() {
  if (!serial.isOpen()) {
    await serial.connectAndOpen(portInfo, serialOptions);
  }
}

function draw() {
  background(255);
  //sendValue();
}

/**
 * Callback function by serial.js when there is an error on web serial
 * 
 * @param {} eventSender 
 */
 function onSerialErrorOccurred(eventSender, error) {
  console.log("onSerialErrorOccurred", error);
  msg.html(error);
}

/**
 * Callback function by serial.js when web serial connection is opened
 * 
 * @param {} eventSender 
 */
function onSerialConnectionOpened(eventSender) {
  console.log("onSerialConnectionOpened");
  msg.html("Serial connection opened successfully");
}

/**
 * Callback function by serial.js when web serial connection is closed
 * 
 * @param {} eventSender 
 */
function onSerialConnectionClosed(eventSender) {
  console.log("onSerialConnectionClosed");
  msg.html("onSerialConnectionClosed");
}

/**
 * Callback function serial.js when new web serial data is received
 * 
 * @param {*} eventSender 
 * @param {String} newData new data received over serial
 */
function onSerialDataReceived(eventSender, newData) {
  console.log("onSerialDataReceived", newData);
  msg.html("onSerialDataReceived: " + newData);
}

async function serialWriteTextData() {
  const data = new Uint8Array([14, 201, 108, 255, 11]); 

  if (serial.isOpen()) {
    console.log("Writing to serial: ", data);
    serial.writeLine("<" + data + ">");
  }
}