Hi,
I am trying to get a Webserver (using Spiffs) running on the things plus that renders a processing sketch. Im having trouble with defining the correct serial port for the processing sketch. Can anyone point me in the right direction?
Thanks! Andreas
Ino:
#include "WiFi.h"
#include "SPIFFS.h"
#include "ESPAsyncWebServer.h"
#include <Wire.h>
#include "SparkFun_BNO080_Arduino_Library.h"
BNO080 myIMU;
const char* ssid = "alpaca-old";
const char* password = "testingesp32";
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
AsyncWebSocketClient * globalClient = NULL;
void onWsEvent(AsyncWebSocket * server, AsyncWebSocketClient * client, AwsEventType type, void * arg, uint8_t *data, size_t len){
if(type == WS_EVT_CONNECT){
Serial.println("Websocket client connection received");
globalClient = client;
} else if(type == WS_EVT_DISCONNECT){
Serial.println("Websocket client connection finished");
globalClient = NULL;
}
}
void setup(){
Serial.begin(115200);
if(!SPIFFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(9000);
Serial.println("Connecting to WiFi..");
}
Serial.println(WiFi.localIP());
delay(9000);
ws.onEvent(onWsEvent);
server.addHandler(&ws);
server.on("/html", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/ws.html", "text/html");
});
server.on("/processing.js", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/processing.js", "application/javascript");
});
server.on("/test2.pde", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/test2.pde", "application/processing");
});
server.on("/toxiclibs.min.js", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/toxiclibs.min.js", "application/javascript");
});
server.begin();
Serial.end();
Serial.begin(9600);
Wire.begin();
Wire.setClock(400000); //Increase I2C data rate to 400kHz
myIMU.begin();
myIMU.enableRotationVector(50); //Send data update every 50ms
}
void loop(){
if (myIMU.dataAvailable() == true)
{
float quatI = myIMU.getQuatI();
float quatJ = myIMU.getQuatJ();
float quatK = myIMU.getQuatK();
float quatReal = myIMU.getQuatReal();
Serial.print(quatReal, 2);
Serial.print(F(","));
Serial.print(quatI, 2);
Serial.print(F(","));
Serial.print(quatJ, 2);
Serial.print(F(","));
Serial.print(quatK, 2);
Serial.println();
}
}
Processing sketch:
import toxi.geom.*;
import toxi.geom.mesh.*;
import toxi.math.waves.*;
import toxi.processing.*;
String myString = null;
Serial myPort; // The serial port
ToxiclibsSupport gfx;
boolean waitFlag = true;
void setup() {
size(600,600,P3D);
gfx=new ToxiclibsSupport(this);
background(255);
noStroke();
fill(200,200,200);
myPort = Serial(this, COM1, 9600);
myPort.clear();
// Throw out the first chunk in case we caught it in the
// middle of a frame
myString = myPort.readStringUntil(13);
myString = null;
}
void draw() {
Quaternion RotQ = new Quaternion(1,0,0,0);
float qMatrix[] = {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
PMatrix M1 = getMatrix();
// When there is a sizeable amount of data on the serial port
// read everything up to the first linefeed
if(myPort.available() > 30){
myString = myPort.readStringUntil(13);
// generate an array of strings that contains each of the commas
// separated values
String inQuat[] = splitTokens(myString, ",");
// make sure that inQuat has a length of 4 before proceeding
if (inQuat.length == 4){
// build a Quaternion from inQuat[] array
RotQ = new Quaternion(float(inQuat[0]), float(inQuat[1]), float(inQuat[2]),float(inQuat[3]));
RotQ.toMatrix4x4().toFloatArray(qMatrix);
M1.set(
qMatrix[0],
qMatrix[1],
qMatrix[2],
qMatrix[3],
qMatrix[4],
qMatrix[5],
qMatrix[6],
qMatrix[7],
qMatrix[8],
qMatrix[9],
qMatrix[10],
qMatrix[11],
qMatrix[12],
qMatrix[13],
qMatrix[14],
qMatrix[15]
);
AABB cube;
background(255);
// Set some mood lighting
ambientLight(128, 128, 128);
directionalLight(128, 128, 128, 0, 0, 1);
lightFalloff(1, 0, 0);
lightSpecular(0, 0, 0);
// Get to the middle of the screen
translate(width/2,height/2,0);
// Do some rotates to get oriented "behind" the device
rotateX(-PI/2);
// Apply the Matrix that we generated from our IMU Quaternion
applyMatrix(M1);
// Draw the Cube from a 3D Bounding Box
cube=new AABB(new Vec3D(0,0,0),new Vec3D(100,100,100));
gfx.box(cube);
}
}else{
if(waitFlag){
textSize(32);
text("Waiting for quaternions to chew on...", 10, 30);
waitFlag = false;}
}
}
HTML:
<!doctype html>
<html>
<script src="processing.js"></script>
<head>
<script type = "text/javascript">
var ws = new WebSocket("ws://192.168.1.166/ws");
ws.onopen = function() {
window.alert("Connected");
};
</script>
<script type="text/javascript" src="toxiclibs.min.js"></script>
<script type="text/javascript" src="three.min.js"></script>
<script type="text/processing" data-processing-target="myCanvas">
ToxiclibsSupport = toxi.processing.ToxiclibsSupport;
import toxi.geom.*;
import toxi.geom.mesh.*;
import toxi.math.waves.*;
import toxi.processing.*;
import processing.serial.*;
ToxiclibsSupport gfx;
boolean waitFlag = true;
void setup() {
size(900,900,P3D);
gfx=new ToxiclibsSupport(this);
background(255);
stroke(33);
fill(200,200,200);
background(255);
noStroke();
fill(200,200,200);
}
</script>
</script>
<title>Processing Sketch</title>
</head>
<body>
<p>Let's work this biatch.</p>
<div>
<p id = "display">Not connected</p>
</div>
<canvas id="myCanvas" data-processing-sources="test2.pde"></canvas>
</body>
</html>