SparkFun Forums 

Where electronics enthusiasts find answers.

Questions &/or issues related to products in the Movement & IMU category should be posted in this forum.
User avatar
By Akaddy
#204300
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:
Code: Select all
#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:
Code: Select all
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:
Code: Select all
<!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>
User avatar
By Akaddy
#204326
I think I have to use websockets to make this work. If anyone has a similar project that uses websockets that would be helpful. thanks.
User avatar
By TS-Chris
#204343
We're not going to be able to help with the code, but I noticed in your code you have COM1 as your port. Are you sure the device you're listening to in Processing is on COM1?