add front pose display (#12)

* add front pose display

* add robot rotation to vision pose display

* remove buffer package

* actually fix robot pose (hopefully lol)

* fix table adding extra headers

* fixed vision rotation (fr this time)

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@types/d3": "^7.4.3",
+    "csv-parse": "^5.5.5",
     "d3": "^7.9.0"
   }
 }

public/index.html

@@ -28,6 +28,8 @@ <h2>SimpleScope</h2>
       <p id="robotX"></p>
       <p id="robotY"></p>
       <p id="robotRotation"></p>
+      <p id="frontPose"></p>
+      <p id="visionRotation"></p>
 
       <table id="cycleTime">
       </table>

ts/funcs.ts

@@ -3,24 +3,3 @@
 export const degreesToRadians = (x: number): number => (x * Math.PI) / 180;
 
 export const clamp = (num: number, min: number, max: number): number => Math.min(Math.max(num, min), max);
-
-export const csvJSON = (csv: string) => {
-    const lines = csv.split("\n");
-
-    let result = [];
-
-    const headers = lines[0].split(",");
-
-    for (let i = 1; i < lines.length; i++) {
-        let obj = {};
-        let currentLine = lines[i].split(",");
-
-        for (let j = 0; j < headers.length; j++) {
-            obj[headers[j]] = currentLine[j];
-        }
-
-        result.push(obj);
-    }
-
-    return result;
-}

ts/main.ts

@@ -1,5 +1,6 @@
 import * as d3 from "d3";
-import { degreesToRadians, clamp, csvJSON } from './funcs';
+import { degreesToRadians, clamp } from './funcs';
+import { parse } from 'csv-parse/browser/esm/sync';
 
 let playing: boolean = false;
 let i: number = 0;
@@ -78,12 +79,29 @@ function initialize(data: object[]) {
       matchState += ` (running: ${data[i]["Currently selected autonomous"]})`;
     }
 
+    const visionPose = JSON.parse(item["Front Pose"]);
+    const visionX = visionPose[0];
+    const visionY = visionPose[1];
+    const visionRot = degreesToRadians(visionPose[2]);
+
+    const visionFieldX = fieldWidthScale(visionX);
+    const visionFieldY = fieldHeightScale(visionY);
+
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.translate(visionFieldX, visionFieldY);
+    ctx.rotate(visionRot);
+    ctx.translate(-visionFieldX, -visionFieldY);
+    ctx.strokeStyle = "green";
+    ctx.strokeRect(visionFieldX - (FIELD_ROBOT_SIDE / 2), visionFieldY - (FIELD_ROBOT_SIDE / 2), FIELD_ROBOT_SIDE, FIELD_ROBOT_SIDE);
+
     document.getElementById("matchState").innerHTML = `Match State: ${matchState}`;
     document.getElementById("matchTime").innerHTML = `Match Time: ${String((Number(data[i]["time"]) - startTime).toFixed(2))} sec`;
     document.getElementById("managerState").innerHTML = `Manager State ${data[i]["Manager State"]}`;
     document.getElementById("robotX").innerHTML = `Robot X: ${data[i]["Robot X"]}`;
     document.getElementById("robotY").innerHTML = `Robot Y: ${data[i]["Robot Y"]}`;
     document.getElementById("robotRotation").innerHTML = `Robot Rotation: ${degreesToRadians(Number(item["Robot Theta (deg)"]))}`;
+    document.getElementById("frontPose").innerHTML = `Front Pose: ${visionX}, ${visionY}`
+    document.getElementById("visionRotation").innerHTML = `Vision Rotation: ${visionRot}`
   };
 
   // Match slider
@@ -137,6 +155,8 @@ function initialize(data: object[]) {
 
   // Add cycle analysis to table
   let table = "";
+
+  document.getElementById("cycleTime").innerHTML = ``;
 
   let lastTime = Number(data[teleopStart]["time"]);
   const teleopTimeOffset = lastTime;
@@ -188,8 +208,9 @@ const stepLogging = (backwards) => {
 async function changedFile(event) {
     const file = event.target.files.item(0);
     const text = await file.text();
+    const jsonFromCSV = parse(text, {columns: true, skip_empty_lines: true});
 
-    initialize(csvJSON(text));
+    initialize(jsonFromCSV);
 }
 
 document.getElementById("playPause").addEventListener("click", () => { playing = !playing; });