Remove old graph js file

Needs work to add equation, inbounds/outbounds calculation on tracking graph

app.js

@@ -3,6 +3,8 @@ var express = require('express');
 var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');
+var cors = require('cors');
+var http = require('http');
 
 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
@@ -13,6 +15,7 @@ var app = express();
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'jade');
 
+app.use(cors());
 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));

graph.js

@@ -0,0 +1,197 @@
+
+
+//Create delay function
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+//Tennis court coordinates
+//Y: [-5.02m, 5.02m] X: [-11.88m, 11.88m] no Z height
+var x = [-11.88, 11.88, 11.88, -11.88]
+var y = [-5.02, -5.02, 5.02, 5.02]
+//Shift the court slightly up so its not interfering with the grid
+var z = [0.01, 0.01, 0.01, 0.01]
+
+//Face is made up of 2 triangles, both need to be set to the same colour
+var facecolor = [ 'rgb(30, 175, 0)', 'rgb(30, 175, 0)', ]
+
+var court = { name:"Court", x, y, z, facecolor, type: 'mesh3d', }
+
+var x_val =new Array();
+var y_val =new Array();
+var z_val =new Array();
+
+var trajectory = {
+  name: "Trajectory",
+  type: 'scatter3d',
+  mode: 'lines+markers',
+  x: x_val,
+  y: y_val,
+  z: z_val,
+  line: {
+    width: 4,
+    color: '#ff0000',
+  },
+  marker: {
+    color: '#0000ff',
+    size: 2,
+    symbol: 'circle',
+  },
+};
+
+var layout = {
+  title: 'Tennis Ball Trajectory Plot',
+  autosize: true,
+  margin: { autoexpand: true, },
+  scene:{
+    xaxis:{ range:[-18,18], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+    yaxis:{ range:[-10,10], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+    zaxis:{ range:[  0, 2], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+  }
+};
+
+//COEFF = document.getElementById("cor_plot");
+
+var pointCount = 1600;
+var coeff_restitution = 0;
+var velocity_vector_pre = 1;
+var velocity_vector_post = 1;
+
+
+var bounce_sample = new Array();
+var center_bounce = 0;
+var sample = new Array();
+
+
+// variables for failed PolynomialRegression attempt
+//const vector_length = 1; // Determines how many points back to use to calculate average z-velocity
+//const degree = 3;
+//var sample_division = new Array();
+
+
+// Failed implementation for PolynomialRegression library
+// Implementation using regression to create a function that models all points of bounce
+// Third order polynomial has 3 zeros and is the minimum number necessary
+//const regression = new PolynomialRegression(sample, z_val, degree)
+
+// for(let point = 0; point < pointCount * 10; point++)
+// {
+//     //sample_division[point] = regression.predict(point / 10)
+//     if(sample_division[point] > 0.005 && sample_division[point] < 0.015)
+//       // gathers all sub-points within the regression that fall at a "bounce height"
+//       // but this could result in more than one point being recorded. needs to have one centered
+//       // point. gather into array and then take the middle value?
+//     {
+//         bounce_sample.push(point);
+//     }
+// }
+
+//  center_bounce = Math.floor((bounce_sample.length - 1) / 2); // find center of sample
+  //make sure that this can be indexed within the regression. Is this 10x the actual array size?
+//  velocity_vector_pre =  regression.predict(bounce_sample[center_bounce - 1]);
+//  velocity_vector_post = regression.predict(bounce_sample[center_bounce + 1]);
+//  coeff_restitution = Math.abs(velocity_vector_post) / Math.abs(velocity_vector_pre);
+
+
+var cor_trace1 = {
+  name: "2D Tennis Ball Bounce",
+  type: 'scatter',
+  mode: 'lines+markers',
+  x:sample,
+  y:z_val,
+};
+
+var data = [cor_trace1,];
+var cor_layout = {
+  title: '2D Tennis Ball Bounce Graph',
+  autosize: true,
+  margin: { autoexpand: true, },
+  scene:{
+    xaxis:{ range:[0,1800], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+    yaxis:{ range:[-10,10], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+  }
+};
+
+
+//Init plot
+Plotly.newPlot("secondplot", [trajectory,court] , layout, {responsive: true} );
+Plotly.newPlot('cor_plot', data, cor_layout, {responsive: true} );
+
+//Update plot with info from GET call
+function poll(filename) {
+  var jqueryRequest = $.get("http://129.21.94.11:8000/serve/" + filename)
+    .done(function(data) {
+    Papa.parse(data, {
+      dynamicTyping: true,
+      delimiter: " ",
+      //Only include if the input contains a header row; i.e. the first row is labels.
+      //header: true,
+      worker: true,
+      complete: function(results){
+        results.data.forEach((element) => {
+          x_val.push(element[2]);
+          y_val.push(element[0]);
+          //Compensate for court offset
+          z_val.push(element[1]+0.01);
+        });
+
+        console.log(x_val.length)
+        pointCount = x_val.length;
+        for (let point = 0; point < pointCount; point++)
+          {
+            sample.push(point); // Create a series for just sample count
+          }
+          console.log(sample)
+        Plotly.update("secondplot", [trajectory,court], layout, {responsive: true});
+        Plotly.update('cor_plot', data, cor_layout, {responsive: true});
+
+        console.log(pointCount)
+      },
+    });
+  }).fail(function(errorData){
+    console.error("Backend Request failed! Is the backend running?");
+  });
+}
+
+//Get the button from the HTML file
+var button = document.getElementById("sendPost");
+
+//Get the input field from the HTML file
+var input_field = document.getElementById("csvSelector");
+
+//If the user presses "enter" on the input field, call to press the button, as this is expected behaviour
+input_field.addEventListener("keypress",function(event){
+  if (event.key === "Enter"){
+    event.preventDefault();
+    button.click();
+  }
+});
+
+//On button click...
+button.addEventListener("click",function(e){
+  //Get the file name from the text input
+  var file_name = input_field.value;
+  //Send the text input to the web server
+  $.post("http://129.21.94.11:8000/serve", { file_name })
+    //Once the POST response comes back
+    .done(function(){
+      //Wait 2s for image processing to run
+      delay(2000);
+      //Clear current  values to graph the new file
+      x_val.length = 0;
+      y_val.length = 0;
+      z_val.length = 0;
+      sample.length = 0;
+      //Run a GET call, with the given file name
+      poll(file_name);
+      //FitCurve(sample, z_val);
+    });
+},false);
+
+
+//Failed test implementation for polyfit library
+
+//function FitCurve(x, y)
+//{
+//  var poly = Polyfit(x, y);
+//  solver = poly.getPolynomial(degree);
+//  console.log(solver(1.17));
+//}

package-lock.json

@@ -9,8 +9,10 @@
       "version": "0.0.0",
       "dependencies": {
         "cookie-parser": "~1.4.4",
+        "cors": "^2.8.5",
         "debug": "~2.6.9",
         "express": "~4.16.1",
+        "http": "^0.0.1-security",
         "http-errors": "~1.6.3",
         "jade": "~1.11.0",
         "morgan": "~1.9.1",
@@ -237,6 +239,18 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/css": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/css/-/css-1.0.8.tgz",
@@ -397,6 +411,11 @@
       "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
       "integrity": "sha512-8tLu60LgxF6XpdbK8OW3FA+IfTNBn1ZHGHKF4KQbEeSkajYw5PlYJcKluntgegDPTg8UkHjpet1T82vk6TQ68w=="
     },
+    "node_modules/http": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz",
+      "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g=="
+    },
     "node_modules/http-errors": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
@@ -597,6 +616,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",

package.json

@@ -7,8 +7,10 @@
   },
   "dependencies": {
     "cookie-parser": "~1.4.4",
+    "cors": "^2.8.5",
     "debug": "~2.6.9",
     "express": "~4.16.1",
+    "http": "^0.0.1-security",
     "http-errors": "~1.6.3",
     "jade": "~1.11.0",
     "morgan": "~1.9.1",

public/javascripts/graph.js

@@ -1,121 +1,197 @@
-TESTER = document.getElementById("test");
 
-var pointCount = 15;
-var i, r;
 
-var x = [];
-var y = [];
-var z = [];
+//Create delay function
+const delay = ms => new Promise(res => setTimeout(res, ms));
 
-for(i = -pointCount; i < pointCount; i++)
- {
-     r = i * (pointCount - i);
-     x.push(r * Math.cos(i / 30));
-     y.push(r * Math.sin(i / 30));
-     z.push(i);
- }
+//Tennis court coordinates
+//Y: [-5.02m, 5.02m] X: [-11.88m, 11.88m] no Z height
+var x = [-11.88, 11.88, 11.88, -11.88]
+var y = [-5.02, -5.02, 5.02, 5.02]
+//Shift the court slightly up so its not interfering with the grid
+var z = [0.01, 0.01, 0.01, 0.01]
 
-var x2 = [];
-var y2 = [];
-var z2 = [];
-i = 0;
-r = 0;
-for(i=-pointCount; i < pointCount; i++){
-  r= 10 * Math.cos(i/10);
-  x2.push(r*Math.cos(i)+100);
-  y2.push(r*Math.sin(i)+60);
-  z2.push(i);
-}
+//Face is made up of 2 triangles, both need to be set to the same colour
+var facecolor = [ 'rgb(30, 175, 0)', 'rgb(30, 175, 0)', ]
 
-var trace2 = {
-  name: "Line and points",
+var court = { name:"Court", x, y, z, facecolor, type: 'mesh3d', }
+
+var x_val =new Array();
+var y_val =new Array();
+var z_val =new Array();
+
+var trajectory = {
+  name: "Trajectory",
   type: 'scatter3d',
   mode: 'lines+markers',
-  x:x2,
-  y:y2,
-  z:z2,
-  opacity: 0.4,
+  x: x_val,
+  y: y_val,
+  z: z_val,
   line: {
-    width:6,
-    color: '#800000',
+    width: 4,
+    color: '#ff0000',
   },
   marker: {
-    color: '#ffffff',
-    size: 4,
+    color: '#0000ff',
+    size: 2,
     symbol: 'circle',
-    line: {
-      color: 'rgb(0,0,0)',
-      width: 1,
-    }
   },
 };
 
-var trace1 = {
-     name: "Line",
-     type: 'scatter3d',
-     mode: 'lines+markers',
-    opacity: 0.5,
-     x: x,
-     y: y,
-     z: z,
-     line: {
-       width: 8,
-       color: '#008000',
-       },
-  marker: {
-    color: '#000080',
-    size: 4,
-    symbol: 'circle',
-    line: {
-      color: 'rgb(0,0,0)',
-      width: 1,
-    }
-  },
-    };
-
-var x = [-100, -100, 120, 120, -100, -100, 120, 120]
-var y = [-75, 90, 90, -75, -75, 90, 90, -75]
-var z = [-10, -10, -10, -10, 10, 10, 10, 10]
-var i = [7, 0, 0, 0, 4, 4, 2, 6, 4, 0, 3, 7]
-var j = [3, 4, 1, 2, 5, 6, 5, 5, 0, 1, 2, 2]
-var k = [0, 7, 2, 3, 6, 7, 1, 2, 5, 5, 7, 6]
-
-var facecolor = [
-	'rgb(50, 200, 200)',
-	'rgb(100, 200, 255)',
-	'rgb(150, 200, 115)',
-	'rgb(200, 200, 50)',
-	'rgb(230, 200, 10)',
-	'rgb(255, 140, 0)'
-]
-facecolor2 = new Array(facecolor.length * 2);
-facecolor.forEach(function(x, i) {
-	facecolor2[i * 2 + 1] = facecolor2[i * 2] = x;
-});
-
-var mesh = {
-	x: x,
-	y: y,
-	z: z,
-	i: i,
-	j: j,
-	k: k,
-        opacity: 0.4,
-        legend: true,
-	facecolor: facecolor2,
-	type: 'mesh3d'
-}
-
-var data = [trace1,trace2,mesh];
 var layout = {
-  title: '3D Line and Point Plot',
+  title: 'Tennis Ball Trajectory Plot',
   autosize: true,
-  margin: {
-    autoexpand: true,
-    l: 0,
-    r: 0,
-    b: 0,
-    t: 65
+  margin: { autoexpand: true, },
+  scene:{
+    xaxis:{ range:[-18,18], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+    yaxis:{ range:[-10,10], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+    zaxis:{ range:[  0, 2], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
   }
 };
-Plotly.newPlot('test', data, layout, {responsive: true} );
+
+//COEFF = document.getElementById("cor_plot");
+
+var pointCount = 1600;
+var coeff_restitution = 0;
+var velocity_vector_pre = 1;
+var velocity_vector_post = 1;
+
+
+var bounce_sample = new Array();
+var center_bounce = 0;
+var sample = new Array();
+
+
+// variables for failed PolynomialRegression attempt
+//const vector_length = 1; // Determines how many points back to use to calculate average z-velocity
+//const degree = 3;
+//var sample_division = new Array();
+
+
+// Failed implementation for PolynomialRegression library
+// Implementation using regression to create a function that models all points of bounce
+// Third order polynomial has 3 zeros and is the minimum number necessary
+//const regression = new PolynomialRegression(sample, z_val, degree)
+
+// for(let point = 0; point < pointCount * 10; point++)
+// {
+//     //sample_division[point] = regression.predict(point / 10)
+//     if(sample_division[point] > 0.005 && sample_division[point] < 0.015)
+//       // gathers all sub-points within the regression that fall at a "bounce height"
+//       // but this could result in more than one point being recorded. needs to have one centered
+//       // point. gather into array and then take the middle value?
+//     {
+//         bounce_sample.push(point);
+//     }
+// }
+
+//  center_bounce = Math.floor((bounce_sample.length - 1) / 2); // find center of sample
+  //make sure that this can be indexed within the regression. Is this 10x the actual array size?
+//  velocity_vector_pre =  regression.predict(bounce_sample[center_bounce - 1]);
+//  velocity_vector_post = regression.predict(bounce_sample[center_bounce + 1]);
+//  coeff_restitution = Math.abs(velocity_vector_post) / Math.abs(velocity_vector_pre);
+
+
+var cor_trace1 = {
+  name: "2D Tennis Ball Bounce",
+  type: 'scatter',
+  mode: 'lines+markers',
+  x:sample,
+  y:z_val,
+};
+
+var data = [cor_trace1,];
+var cor_layout = {
+  title: '2D Tennis Ball Bounce Graph',
+  autosize: true,
+  margin: { autoexpand: true, },
+  scene:{
+    xaxis:{ range:[0,1800], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+    yaxis:{ range:[-10,10], gridcolor: "#a0a0a0", zerolinecolor: "#a0a0a0", },
+  }
+};
+
+
+//Init plot
+Plotly.newPlot("secondplot", [trajectory,court] , layout, {responsive: true} );
+Plotly.newPlot('cor_plot', data, cor_layout, {responsive: true} );
+
+//Update plot with info from GET call
+function poll(filename) {
+  var jqueryRequest = $.get("http://129.21.94.11:8000/serve/" + filename)
+    .done(function(data) {
+    Papa.parse(data, {
+      dynamicTyping: true,
+      delimiter: " ",
+      //Only include if the input contains a header row; i.e. the first row is labels.
+      //header: true,
+      worker: true,
+      complete: function(results){
+        results.data.forEach((element) => {
+          x_val.push(element[2]);
+          y_val.push(element[0]);
+          //Compensate for court offset
+          z_val.push(element[1]+0.01);
+        });
+
+        console.log(x_val.length)
+        pointCount = x_val.length;
+        for (let point = 0; point < pointCount; point++)
+          {
+            sample.push(point); // Create a series for just sample count
+          }
+          console.log(sample)
+        Plotly.update("secondplot", [trajectory,court], layout, {responsive: true});
+        Plotly.update('cor_plot', data, cor_layout, {responsive: true});
+
+        console.log(pointCount)
+      },
+    });
+  }).fail(function(errorData){
+    console.error("Backend Request failed! Is the backend running?");
+  });
+}
+
+//Get the button from the HTML file
+var button = document.getElementById("sendPost");
+
+//Get the input field from the HTML file
+var input_field = document.getElementById("csvSelector");
+
+//If the user presses "enter" on the input field, call to press the button, as this is expected behaviour
+input_field.addEventListener("keypress",function(event){
+  if (event.key === "Enter"){
+    event.preventDefault();
+    button.click();
+  }
+});
+
+//On button click...
+button.addEventListener("click",function(e){
+  //Get the file name from the text input
+  var file_name = input_field.value;
+  //Send the text input to the web server
+  $.post("http://129.21.94.11:8000/serve", { file_name })
+    //Once the POST response comes back
+    .done(function(){
+      //Wait 2s for image processing to run
+      delay(2000);
+      //Clear current  values to graph the new file
+      x_val.length = 0;
+      y_val.length = 0;
+      z_val.length = 0;
+      sample.length = 0;
+      //Run a GET call, with the given file name
+      poll(file_name);
+      //FitCurve(sample, z_val);
+    });
+},false);
+
+
+//Failed test implementation for polyfit library
+
+//function FitCurve(x, y)
+//{
+//  var poly = Polyfit(x, y);
+//  solver = poly.getPolynomial(degree);
+//  console.log(solver(1.17));
+//}

public/stylesheets/style.css

@@ -6,3 +6,13 @@ body {
 a {
   color: #00B7FF;
 }
+
+button {
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  display: inline-block;
+  font-size: 15px;
+}

views/index.jade

@@ -2,8 +2,12 @@ extends layout
 
 block content
   h1= "Detect Inc. Tennis Ball Path Plotting"
-  p WIP: Currently using sample data to demonstrate capabilities.
-  div(id="test" style="height:700px;")
+  label(for="csvSelector") Input the serve input data to use: 
+  input(id="csvSelector")
+  p
+  button(id="sendPost") Start serve
+  div(id="secondplot" style="height:700px")
   script(src="/javascripts/plotly-2.30.0.min.js")
-  script(src="/javascripts/graph.js")
-  
+  script(src="/javascripts/papaparse-5.4.1.min.js")
+  script(src="/javascripts/jquery-3.7.1.min.js")
+  script(type="module" src="/javascripts/graph.js")