let videoWidth;

let videoHeight;

let maxVoltReading = 1023;

let minVoltReading = 0;

let defaultState = -1;

let spriteWidth = 2560;

let spriteHeight = 80;

let value = -1;

let video;

let video_x;

let video_y;

let videoAspectRatio;

let canvasAspectRatio;

let flippedVideo;

let predictions = [];

let controlState = false;

let instructionPage;

let currentPage = 1;

​

function preload() {

  instructionPage = loadImage('instructions.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

  handpose.on("predict", results => {

    predictions = results;

  });

​

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background(255);

​

  flippedVideo = ml5.flipImage(video);

​

  // Calculate the aspect ratios for video and canvas

  videoAspectRatio = video.width / video.height;

  canvasAspectRatio = width / height;

​

​

  // Adjust video dimensions based on aspect ratios

  if (canvasAspectRatio > videoAspectRatio) {

    videoWidth = width;

    videoHeight = width / videoAspectRatio;

  } else {

    videoWidth = height * videoAspectRatio;

    videoHeight = height;

  }

​

  // Calculate video position

  video_x = (width - videoWidth) / 2;

  video_y = (height - videoHeight) / 2;

​

  if (currentPage == 1) {

    // display instructions page

    image(instructionPage, 0, 0, width, height);

  }

  else if (currentPage == 2) {

    // serial connection page

    if (!serialActive) {

      runSerialPage();

    } 

​

    else {

​

      // controlling page

      if (controlState) {

        runControllingPage();

      } 

​

      // device has been turned off

      else {

        runTorqueyOff();

      }

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

}

​

function mousePressed() {

  if (currentPage == 1) {

    currentPage++;

  }

  else {

    currentPage--;

  }

}

​

​

function readSerial(data) {

​

  if (data != null) {

    ////////////////////////////////////

    //READ FROM ARDUINO HERE

    ////////////////////////////////////

    if (int(trim(data)) == maxVoltReading) {

      controlState = true;

    }

    else if (int(trim(data)) == minVoltReading){

      controlState = false;

    }

​

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = value + "\n";

    writeSerial(sendToArduino);

    // reset value

    value = defaultState;

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  for (let i = 0; i < predictions.length; i += 1) {

    const prediction = predictions[i];

    let area = [0, 0, 0, 0, 0];

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      let x = map(keypoint[0], 0, 640, 0, videoWidth);

      let y = map(keypoint[1], 0, 480, 0, videoHeight);

      ellipse(x, y, 10, 10);

      // count number of trues

      // -- helps to detect the area the detected hand is in

      if (withinLeft(x, y)) {

        area[0] += 1;

      }

      if (withinTopCenter(x, y)) {

        area[1] += 1;

      }

      if (withinRight(x, y)) {

        area[2] += 1;

      }

      if (withinMiddleCenter(x, y)) {

        area[3] += 1;

      }

      if (withinBottomCenter(x, y)) {

        area[4] += 1;

      }

      // end of count

    }

    // print index

    for (let i = 0; i < area.length; i += 1) {

      if (area[i] == 21) {

        value = i;

      }

    }

  }

}

​