reversible and docs (#24)

* thx jude

* draggable but kinda ugly

* draggable, logo test

* finished renderer.js

* some more docs

* not working yet

* can generate, animates wrong

* fixed width height, logging

* fixed

src/PathGen.js

@@ -1,12 +1,14 @@
 // Find java
 require('./../node_modules/java/postInstall.js');
 
-const java = require('java');
+const java = require('java'); // node modules
 const mvn = require('node-java-maven');
+const $ = require('jquery');
 const Translation2d = require('./Translation2d.js');
 const Rotation2d = require('./Rotation2d.js');
 const Pose2d = require('./Pose2d.js');
 
+// importing classes with node-java-maven
 mvn({ packageJsonPath: `${__dirname}/../package.json` }, (err, mvnResults) => {
   if (err) {
     return console.error('could not resolve maven dependencies', err);
@@ -21,16 +23,18 @@ mvn({ packageJsonPath: `${__dirname}/../package.json` }, (err, mvnResults) => {
 
 
   function generatePath(waypoints) {
+    // velocities are not being handled by path gen, default values
     const generator = new PathGeneratorJava(1.0, 1.0, 1.0, 1.0);
     const splinePoints = [];
-    for (let i = 0; i < waypoints.length; i += 1) {
+    const isReversed = $('#is_reversed').is(':checked');
+    for (let i = 0; i < waypoints.length; i += 1) { // appending waypoints with Pose2d objects
       splinePoints.push(
         Pose2dJava(Vector2Java(waypoints[i].getTranslation.x, waypoints[i].getTranslation.y),
           java.getStaticFieldValue('org.team5499.monkeyLib.math.geometry.Rotation2d', 'Companion').fromDegreesSync(waypoints[i].getRotation.getDegrees())),
       );
     }
     const splinePointsJava = java.newArray('org.team5499.monkeyLib.math.geometry.Pose2d', splinePoints);
-    const generated = generator.generatePathSync(false, splinePointsJava, 1.0, 1.0, 1.0, 1.0);
+    const generated = generator.generatePathSync(isReversed, splinePointsJava, 1.0, 1.0, 1.0, 1.0);
     const generatedPath = [];
     for (let i = 0; i < generated.getPathLengthSync(); i += 1) {
       const pose = generated.getPoseSync(i).getPoseSync();

src/css/style.css

@@ -70,7 +70,14 @@ td>input, td>input:focus {
 	outline: none;
 }
 
-
+.dot {
+	z-index: -1;
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	border-radius: 10px;
+	background-color: fuchsia;
+}
 
 .drag_handler {
     margin-left: 3px;

src/index.html

@@ -19,6 +19,7 @@
             <button onclick="draw(3)">Animate</button>
             <button onclick="flipField()">Flip Field</button>
             <span class="checkbox">Is reversed: <input type="checkbox" id="is_reversed"></span>
+            <span id="coords"></span>
         </div>
         <table>
             <thead>

src/renderer.js

@@ -8,6 +8,7 @@ const Pose2d = require('./Pose2d.js');
 
 let waypoints = [];
 let splinePoints = [];
+let movePoints = [];
 let ctx;
 let ctxBackground;
 let image;
@@ -27,6 +28,36 @@ const waypointRadius = 7;
 const splineWidth = 2;
 const pi = Math.PI;
 
+/**
+ * Converts coordinates relative to the full picture to coordinates relative to field
+ *
+ * @param mX X-coordinate
+ * @param mY Y-coordinate
+ * @returns coords coordinates list of x, y
+ */
+
+function getFieldCoords(mX, mY){
+  let x = mX - 162;
+  let y = -1 * mY + 256;
+  let coords = [x, y]
+  return (coords);
+}
+
+/**
+ * Converts coordinates relative to the field to coordinates relative to full picture
+ *
+ * @param mX X-coordinate
+ * @param mY Y-coordinate
+ * @returns coordinates list of x, y
+ */
+
+function getFullCoords(mX, mY){
+  let x = mX + 162;
+  let y = -1 * mY + 256;
+  let coords = [x, y]
+  return (coords);
+}
+
 function d2r(d) {
   return d * (Math.PI / 180);
 }
@@ -36,18 +67,27 @@ function r2d(r) {
 }
 
 let animation;
-function animate() {
+
+/**
+ * Draws the generated path without reloading the points
+ */
+
+ function animate() {
   drawSplines(false, true);
 }
 
+/**
+ * Draws to canvas
+ *
+ * @param {number} style specifies what to draw: 1 is waypoints only, 2 is waypoints + splines, and 3 is the animation
+ */
+
 function draw(style) {
   clear();
   drawWaypoints();
   switch (style) {
-    // waypoints only
     case 1:
       break;
-      // all
     case 2:
       drawSplines(true);
       drawSplines(false);
@@ -60,6 +100,13 @@ function draw(style) {
   }
 }
 
+/**
+ * Draws 4 points on the vertices of the bounding box of the robot
+ *
+ * @param position list of x, y
+ * @param heading angle in degrees
+ */
+
 function drawRobot(position, heading) {
   const h = heading;
   const angles = [h + (pi / 2) + t, h - (pi / 2) + t, h + (pi / 2) - t, h - (pi / 2) - t];
@@ -72,6 +119,14 @@ function drawRobot(position, heading) {
   });
 }
 
+/**
+ * Fills path with velocity-dependent color
+ *
+ * @param position Pose2d list of generated points
+ * @param heading angle in degrees
+ * @param color hue: rgba
+ */
+
 function fillRobot(position, heading, color) {
   const previous = ctx.globalCompositeOperation;
   ctx.globalCompositeOperation = 'destination-over';
@@ -92,6 +147,13 @@ function fillRobot(position, heading, color) {
   ctx.globalCompositeOperation = previous;
 }
 
+/**
+ * Draws generated path. Can animate or update
+ *
+ * @param {boolean} fill
+ * @param {boolean} animate
+ */
+
 function drawSplines(fill, animate) {
   animate = animate || false;
   let i = 0;
@@ -132,20 +194,30 @@ function drawSplines(fill, animate) {
   }
 }
 
+/**
+ * Draws user-inputed waypoints using drawRobot()
+ */
+
 function drawWaypoints() {
   waypoints.forEach((waypoint) => {
     waypoint.draw(true, waypointRadius, ctx);
     drawRobot(waypoint, waypoint.rotation.getRadians());
   });
 }
 
+/**
+ * Run when points are updated,
+ * pushes new points to waypoints and redraws the path
+ * @var {Array} splinePoints generated Pose2d points
+ */
+
+
 function update() {
   if (animating) {
     return;
   }
 
   waypoints = [];
-  // let data = ;
   $('tbody').children('tr').each(function () {
     const x = parseInt($($($(this).children()).children()[0]).val());
     const y = parseInt($($($(this).children()).children()[1]).val());
@@ -161,20 +233,29 @@ function update() {
   });
 
   draw(1);
-  if ($('#is_reversed').checked) {
-    waypoints.reverse();
-  }
+
   splinePoints = [];
   splinePoints = PathGen.generatePath(waypoints);
-  splinePoints.pop();
+  var printSpline = [];
+  for (i = 1; i <= splinePoints.length - 1; i++) {
+    printSpline.push(splinePoints[i].getTranslation);
+  }
   console.log('generated path');
+  console.log(printSpline);
+
+  splinePoints.pop();
+
   draw(2);
 }
 
 
 const r = Math.sqrt((robotWidth ** 2) + (robotHeight ** 2)) / 2;
 const t = Math.atan2(robotHeight, robotWidth);
 
+/**
+ * Delays before updating
+ */
+
 function rebind() {
   const change = 'propertychange change click keyup input paste';
   const input = $('input');
@@ -224,12 +305,19 @@ function init() {
 }
 
 let flipped = false;
+/**
+ * Flips field and updates
+ */
 function flipField() {
   flipped = !flipped;
   ctx.drawImage(flipped ? imageFlipped : image, 0, 0, width, height);
   update();
 }
 
+/**
+ * Clears all drawn elements
+ */
+
 function clear() {
   ctx = document.getElementById('field').getContext('2d');
   ctx.clearRect(0, 0, width, height);
@@ -240,10 +328,20 @@ function clear() {
   ctxBackground.drawImage(flipped ? imageFlipped : image, 0, 0, width, height);
 }
 
+/**
+ * Runs when Add Point is clicked, updates
+ */
+
 function addPoint() {
   let prev;
   if (waypoints.length > 0) prev = waypoints[waypoints.length - 1].translation;
   else prev = new Translation2d(20, 20);
+  var newFieldCoords = getFullCoords(prev.x + 50, prev.y + 50);
+
+  $('#canvases').append(`${"<span class = 'dot' style={left: " +
+  newFieldCoords[0] + "; top: " +
+  newFieldCoords[1] +  ">" + "</span>"}`);
+
   $('tbody').append(`${'<tr>' + "<td class='drag_handler'></td>"
         + "<td class='x'><input type='number' value='"}${prev.x + 50}'></td>`
         + `<td class='y'><input type='number' value='${prev.y + 50}'></td>`