index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calibration Simulation</title>
    <button id="compute-button">Refine Measurments 1x</button>
    <button id="compute-1k-button">1,000x</button>
    <button id="compute-10k-button">10,000x</button>
    <button id="compute-end-button">End</button>
    <button id="compute-converge-button">Converge</button>
    <style>
        body {
            margin: 0;
        }
    </style>
    
</head>
<body id= "mainBody">

<---click this button to see the simulation find the corners

<div id = "views"></div>
<div>
    <textarea id="output" style="width: 1000px;" rows="16"></textarea>
</div>

</div>


<script>

//This is the inital guess for how big the machine is. These numbers are wrong intensionally
const initialWidth = 3048 + 12;
const initialHeight = 2200 - 14;


//These are the true corners of the machine that we want to solve for (only used for simulated measurments)
const trueTLX = -0.6948090610228441;
const trueTLY = 2131.275233532367;
const trueTRX = 3034.4072793128926;
const trueTRY = 2127.1780972406527;
const trueBLX = 0;
const trueBLY = 0;
const trueBRX = 3034.960970894897;
const trueBRY = 0;


/**------------------------------------Intro------------------------------------
*
*   If you are reading this code to understand it then I would recommend starting
*  at the bottom of the page and working your way up. The code is written in a
* functional style so the function definitions are at the top and the code that
* actually runs is at the bottom. It was also written quickly and modified a lot
* so it is not very clean. I apologize for that.
*
*------------------------------------------------------------------------------
*/


/**
 * Simulates a measurement at a given location with random and constant errors.
 * @param {number} x - The x-coordinate of the location to measure.
 * @param {number} y - The y-coordinate of the location to measure.
 * @param {number} randomError - The maximum amount of random error to add to the measurement.
 * @param {number} constantError - The constant error to add to the measurement.
 * @returns {Object} - An object containing the simulated measurements at the given location.
 */
function takeSimulatedMeasurement(x,y,randomError, constantError){
    const tl = distanceBetweenPoints(trueTLX, trueTLY, x, y) + ((Math.random()*randomError*2) - randomError) + constantError;
    const tr = distanceBetweenPoints(trueTRX, trueTRY, x, y) + ((Math.random()*randomError*2) - randomError) + constantError;
    const bl = distanceBetweenPoints(trueBLX, trueBLY, x, y) + ((Math.random()*randomError*2) - randomError) + constantError;
    const br = distanceBetweenPoints(trueBRX, trueBRY, x, y) + ((Math.random()*randomError*2) - randomError) + constantError;
    return {tl: tl, tr: tr, bl: bl, br: br};
}

/**
 * Computes the distance between two points.
 * @param {number} a - The x-coordinate of the first point.
 * @param {number} b - The y-coordinate of the first point.
 * @param {number} c - The x-coordinate of the second point.
 * @param {number} d - The y-coordinate of the second point.
 * @returns {number} - The distance between the two points.
 */
function distanceBetweenPoints(a, b, c, d) {
  var dx = c - a;
  var dy = d - b;
  return Math.sqrt(dx * dx + dy * dy);
}

/**
 * Computes the end point of a line based on its starting point, angle, and length.
 * @param {number} startX - The x-coordinate of the line's starting point.
 * @param {number} startY - The y-coordinate of the line's starting point.
 * @param {number} angle - The angle of the line in radians.
 * @param {number} length - The length of the line.
 * @returns {Object} - An object containing the x and y coordinates of the line's end point.
 */
function getEndPoint(startX, startY, angle, length) {
  var endX = startX + length * Math.cos(angle);
  var endY = startY + length * Math.sin(angle);
  return { x: endX, y: endY };
}

/**
 * Computes how close all of the line end points are to each other.
 * @param {Object} line1 - The first line to compare.
 * @param {Object} line2 - The second line to compare.
 * @param {Object} line3 - The third line to compare.
 * @param {Object} line4 - The fourth line to compare.
 * @returns {number} - The fitness value, which is the average distance between all line end points.
 */
function computeEndpointFitness(line1, line2, line3, line4){

    const a = distanceBetweenPoints(line1.xEnd, line1.yEnd, line2.xEnd, line2.yEnd);
    const b = distanceBetweenPoints(line1.xEnd, line1.yEnd, line3.xEnd, line3.yEnd);
    const c = distanceBetweenPoints(line1.xEnd, line1.yEnd, line4.xEnd, line4.yEnd);
    const d = distanceBetweenPoints(line2.xEnd, line2.yEnd, line3.xEnd, line3.yEnd);
    const e = distanceBetweenPoints(line2.xEnd, line2.yEnd, line4.xEnd, line4.yEnd);
    const f = distanceBetweenPoints(line3.xEnd, line3.yEnd, line4.xEnd, line4.yEnd);

    const fitness = (a+b+c+d+e+f)/6;
    

    return fitness;
}

/**
 * Computes the end point of a line based on its starting point, angle, and length.
 * @param {Object} line - The line to compute the end point for.
 * @returns {Object} - The line with the end point added.
 */
function computeLineEndPoint(line){
    const end = getEndPoint(line.xBegin, line.yBegin, line.theta, line.length);
    line.xEnd = end.x;
    line.yEnd = end.y;
    return line;
}

/**
 * Walks the four lines in the given set, adjusting their endpoints to minimize the distance between them.
 * @param {Object} tlLine - The top-left line in the set.
 * @param {Object} trLine - The top-right line in the set.
 * @param {Object} blLine - The bottom-left line in the set.
 * @param {Object} brLine - The bottom-right line in the set.
 * @param {number} stepSize - The amount to adjust the angle of each line by on each iteration.
 * @returns {Object} - An object containing the final positions of each line.
 */
function walkLines(tlLine, trLine, blLine, brLine, stepSize) {
  let changeMade = true;
  let bestFitness = computeEndpointFitness(tlLine, trLine, blLine, brLine);

  while (changeMade) {
    changeMade = false;

    const lines = [tlLine, trLine, blLine, brLine];

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];

      for (let direction of [-1, 1]) {
        const newLine = computeLineEndPoint({
          xBegin: line.xBegin,
          yBegin: line.yBegin,
          theta: line.theta + direction * stepSize,
          length: line.length
        });

        const newFitness = computeEndpointFitness(
          i === 0 ? newLine : tlLine,
          i === 1 ? newLine : trLine,
          i === 2 ? newLine : blLine,
          i === 3 ? newLine : brLine
        );

        if (newFitness < bestFitness) {
          lines[i] = newLine;
          bestFitness = newFitness;
          changeMade = true;
        }
      }
    }

    tlLine = lines[0];
    trLine = lines[1];
    blLine = lines[2];
    brLine = lines[3];
  }

  return { tlLine, trLine, blLine, brLine };
}

/**
 * Computes the fitness of a set of lines based on how close their endpoints are to each other.
 * @param {Object} measurement - An object containing the initial theta values and lengths for each line.
 * @param {Object} individual - An object containing the x and y coordinates for each line's starting point.
 * @returns {Object} - An object containing the fitness value and the final positions of each line.
 */
function magneticallyAttractedLinesFitness(measurement, individual){

    //These set the inital conditions for theta. They don't really mater, they just have to kinda point to the middle of the frame.
    if(measurement.tlTheta == undefined){
        measurement.tlTheta = -.3;
    }
    if(measurement.trTheta == undefined){
        measurement.trTheta = 3.5;
    }
    if(measurement.blTheta == undefined){
        measurement.blTheta = .5;
    }
    if(measurement.brTheta == undefined){
        measurement.brTheta = 2.6;
    }


    //Define the four lines with starting points and lengths
    var tlLine = computeLineEndPoint({xBegin: individual.tl.x, yBegin: individual.tl.y, theta: measurement.tlTheta, length: measurement.tl});
    var trLine = computeLineEndPoint({xBegin: individual.tr.x, yBegin: individual.tr.y, theta: measurement.trTheta, length: measurement.tr});
    var blLine = computeLineEndPoint({xBegin: individual.bl.x, yBegin: individual.bl.y, theta: measurement.blTheta, length: measurement.bl});
    var brLine = computeLineEndPoint({xBegin: individual.br.x, yBegin: individual.br.y, theta: measurement.brTheta, length: measurement.br});

    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .1);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .01);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .001);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .0001);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .00001);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .000001);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .0000001);
    var {tlLine, trLine, blLine, brLine} = walkLines(tlLine, trLine, blLine, brLine, .00000001);

    measurement.tlTheta = tlLine.theta;
    measurement.trTheta = trLine.theta;
    measurement.blTheta = blLine.theta;
    measurement.brTheta = brLine.theta;

    //Compute the final fitness
    const finalFitness = computeEndpointFitness(tlLine, trLine, blLine, brLine);

    //Compute the tension in the two upper belts
    const { TL, TR } = calculateTensions(tlLine.xEnd, tlLine.yEnd, individual);
    measurement.TLtension = TL;
    measurement.TRtension = TR;

    drawLines(tlLine, trLine, blLine, brLine, individual);

    return {fitness: finalFitness, lines: {tlLine: tlLine, trLine: trLine, blLine: blLine, brLine: brLine}};
}

/**
 * Computes the distance of one line's end point from the center of mass of the other three lines.
 * @param {Object} lineToCompare - The line to compute the distance for.
 * @param {Object} line2 - The second line to use in computing the center of mass.
 * @param {Object} line3 - The third line to use in computing the center of mass.
 * @param {Object} line4 - The fourth line to use in computing the center of mass.
 * @returns {Object} - An object containing the x and y distances from the center of mass.
 */
function computeDistanceFromCenterOfMass(lineToCompare, line2, line3, line4){

    //Compute the center of mass
    const x = (line2.xEnd + line3.xEnd + line4.xEnd)/3;
    const y = (line2.yEnd + line3.yEnd + line4.yEnd)/3;

    return {x: lineToCompare.xEnd - x, y: lineToCompare.yEnd - y};
}

/**
 * Computes the distances from the center of mass for four lines and converts them into the relevant variables that we can tweak.
 * @param {Object} lines - An object containing four lines to compute the distances from the center of mass for.
 * @returns {Object} - An object containing the distances from the center of mass for tlX, tlY, trX, trY, and brX.
 */
function generateTweaks(lines){
    //We care about the distances for tlX, tlY, trX, trY, brX

    const tlX = computeDistanceFromCenterOfMass(lines.tlLine, lines.trLine, lines.blLine, lines.brLine).x;
    const tlY = computeDistanceFromCenterOfMass(lines.tlLine, lines.trLine, lines.blLine, lines.brLine).y;
    const trX = computeDistanceFromCenterOfMass(lines.trLine, lines.tlLine, lines.blLine, lines.brLine).x;
    const trY = computeDistanceFromCenterOfMass(lines.trLine, lines.tlLine, lines.blLine, lines.brLine).y;
    const brX = computeDistanceFromCenterOfMass(lines.brLine, lines.tlLine, lines.trLine, lines.blLine).x;

    return {tlX: tlX, tly: tlY, trX: trX, trY: trY, brX: brX};
}

/**
 * Computes all of the tweaks and summarizes them to move the guess furthest from the center of mass of the lines.
 * @param {Array} lines - An array of lines to compute the tweaks for.
 * @param {Object} lastGuess - The last guess made by the algorithm.
 * @returns {Object} - The updated guess with the furthest tweaks applied.
 */
function computeFurthestFromCenterOfMass(lines, lastGuess){

    var tlX = 0;
    var tlY = 0;
    var trX = 0;
    var trY = 0;
    var brX = 0;

    //In total how far is each corner from the center of mass of each measurement
    lines.forEach(line => {
        const tweaks = generateTweaks(line);
        
        tlX = tlX + tweaks.tlX;
        tlY = tlY + tweaks.tly;
        trX = trX + tweaks.trX;
        trY = trY + tweaks.trY;
        brX = brX + tweaks.brX;

    })

    //Divide by the number of measurements to get the average
    tlX = tlX/lines.length;
    tlY = tlY/lines.length;
    trX = trX/lines.length;
    trY = trY/lines.length;
    brX = brX/lines.length;

    //Find which corner is the furthest off and is it in X or Y
    const maxError = Math.max(
        Math.abs(tlX),
        Math.abs(tlY),
        Math.abs(trX),
        Math.abs(trY),
        Math.abs(brX)
    );


    //Move the corner that is the furthest off in the direction needed
    var scalor = -1;
    if(maxError == Math.abs(tlX)){
        //console.log("Move tlY by: " + tlY/divisor);
        lastGuess.tl.x = lastGuess.tl.x + tlX*scalor;
    }
    if(maxError == Math.abs(tlY)){
        //console.log("Move tlY by: " + tlY/divisor);
        lastGuess.tl.y = lastGuess.tl.y + tlY*scalor;
    }
    else if(maxError == Math.abs(trX)){
        //console.log("Move trX by: " + trX/divisor);
        lastGuess.tr.x = lastGuess.tr.x + trX*scalor;
    }
    else if(maxError == Math.abs(trY)){
        //console.log("Move trY by: " + trY/divisor);
        lastGuess.tr.y = lastGuess.tr.y + trY*scalor;
    }
    else if(maxError == Math.abs(brX)){
        //console.log("Move brX by: " + brX/divisor);
        lastGuess.br.x = lastGuess.br.x + brX*scalor;
    }
    
    return lastGuess;
}

/**
 * Computes the fitness of a guess for a set of measurements by comparing the guess to magnetically attracted lines.
 * @param {Array} measurements - An array of measurements to compare the guess to.
 * @param {Object} lastGuess - The last guess made by the algorithm.
 * @returns {Object} - An object containing the fitness of the guess and the lines used to calculate the fitness.
 */
function computeLinesFitness(measurements, lastGuess){
    var fitnesses = [];
    var allLines = [];
    
    //Check each of the measurements against the guess
    measurements.forEach(measurement => {
        const {fitness, lines} = magneticallyAttractedLinesFitness(measurement, lastGuess);
        fitnesses.push(fitness);
        allLines.push(lines);
    });
    
    //Computes the average fitness of all of the measurements
    const fitness = calculateAverage(fitnesses);

    //Here is where we need to do the calculation of which corner is the worst and which direction to move it
    lastGuess = computeFurthestFromCenterOfMass(allLines, lastGuess);
    lastGuess.fitness = fitness;

    return lastGuess;
}


function calculateTensions(x, y, guess) {
    let Xtl = guess.tl.x;
    let Ytl = guess.tl.y;
    let Xtr = guess.tr.x;
    let Ytr = guess.tr.y;
    let Xbl = guess.bl.x;
    let Ybl = guess.bl.y;
    let Xbr = guess.br.x;
    let Ybr = guess.br.y;

    let mass = 5.0;
    const G_CONSTANT = 9.80665;
    let alpha = 0.26;
    let TL, TR;
  
    let A, C, sinD, cosD, sinE, cosE;
    let Fx, Fy;

    A = (Xtl - x) / (Ytl - y);
    C = (Xtr - x) / (Ytr - y);
    A = Math.abs(A);
    C = Math.abs(C);
    sinD = x / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    cosD = y / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    sinE = Math.abs(Xbr - x) / Math.sqrt(Math.pow(Xbr - x, 2) + Math.pow(y, 2));
    cosE = y / Math.sqrt(Math.pow(Xbr - x, 2) + Math.pow(y, 2));

    Fx = Ybr * sinE - Ybl * sinD;
    Fy = Ybr * cosE + Ybl * cosD + mass * G_CONSTANT * Math.cos(alpha);
    // console.log(`Fx = ${Fx.toFixed(1)}, Fy = ${Fy.toFixed(1)}`);

    let TLy = (Fx + C * Fy) / (A + C);
    let TRy = Fy - TLy;
    let TRx = C * (Fy - TLy);
    let TLx = A * TLy;

    // console.log(`TLy = ${TLy.toFixed(1)}, TRy = ${TRy.toFixed(1)}, TRx = ${TRx.toFixed(1)}, TLx = ${TLx.toFixed(1)}`);

    TL = Math.sqrt(Math.pow(TLx, 2) + Math.pow(TLy, 2));
    TR = Math.sqrt(Math.pow(TRx, 2) + Math.pow(TRy, 2));

    return { TL, TR };
}

/**
 * Flips the y-coordinate of a point to account for the canvas having y at the top.
 * @param {number} y - The y-coordinate to flip.
 * @returns {number} - The flipped y-coordinate.
 */
function flipY(y) {
  var canvas = document.getElementById("CursorLayer");
  return canvas.height - y;
}

function changeStrokeStyle(inputValue) {
  const green = [0, 128, 0]; // RGB values for green
  const red = [255, 0, 0]; // RGB values for red
  const range = 60 - 20; // Range of input values
  const increment = (red.map((value, index) => value - green[index])).map(value => value / range); // Increment for each RGB value

  const color = green.map((value, index) => Math.round(value + increment[index] * (inputValue - 20))); // Calculate the color based on the input value

  const canvas = document.getElementById("CursorLayer");
  const ctx = canvas.getContext("2d");

  ctx.strokeStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`; // Set the strokeStyle to the calculated color
}

/**
 * Draws four lines on a canvas element and adds a circle at the end of each line.
 * @param {Object} line1 - An object containing the x and y coordinates of the beginning and end of the first line.
 * @param {Object} line2 - An object containing the x and y coordinates of the beginning and end of the second line.
 * @param {Object} line3 - An object containing the x and y coordinates of the beginning and end of the third line.
 * @param {Object} line4 - An object containing the x and y coordinates of the beginning and end of the fourth line.
 * @returns {void}
 */
function drawLines(line1, line2, line3, line4, guess) {

    //Compute the tensions in the upper two belts
    //const { TL, TR } = calculateTensions(line1.xEnd, line1.yEnd, guess); //This assumes the ends are in the same place which they aren't at first

    var canvas = document.getElementById("CursorLayer");
    var ctx = canvas.getContext("2d");

    // Set the stroke color to a lighter grey
    ctx.strokeStyle = "#999";

    // Draw the four lines
    ctx.setLineDash([5, 5]);

    //Top left line
    ctx.beginPath();
    ctx.moveTo(line1.xBegin / 4, flipY(line1.yBegin / 4));
    ctx.lineTo(line1.xEnd / 4, flipY(line1.yEnd / 4));
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(line1.xEnd / 4, flipY(line1.yEnd / 4), 2, 0, 2 * Math.PI);
    ctx.fill();

    //Top right line
    ctx.beginPath();
    ctx.moveTo(line2.xBegin / 4, flipY(line2.yBegin / 4));
    ctx.lineTo(line2.xEnd / 4, flipY(line2.yEnd / 4));
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(line2.xEnd / 4, flipY(line2.yEnd / 4), 2, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(line3.xBegin / 4, flipY(line3.yBegin / 4));
    ctx.lineTo(line3.xEnd / 4, flipY(line3.yEnd / 4));
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(line3.xEnd / 4, flipY(line3.yEnd / 4), 2, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(line4.xBegin / 4, flipY(line4.yBegin / 4));
    ctx.lineTo(line4.xEnd / 4, flipY(line4.yEnd / 4));
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(line4.xEnd / 4, flipY(line4.yEnd / 4), 2, 0, 2 * Math.PI);
    ctx.fill();
}


/**
 * Calculates the average of an array of numbers.
 * @param {number[]} array - The array of numbers to calculate the average of.
 * @returns {number} - The average of the array.
 */
function calculateAverage(array) {
    var total = 0;
    var count = 0;

    array.forEach(function(item, index) {
        total += Math.abs(item);
        count++;
    });

    return total / count;
}

/**
 * Prints the difference between the real values and the computed values for the corners. Only useful when using simulated
 * measurements.
 * @param {Object} guess - An object containing the x and y coordinates of the top left, top right, bottom left, and bottom right corners of a trapazoid.
 * @returns {void}
 */
function printResults(guess){
    // console.log("tlX error: " + (guess.tl.x - trueTLX) + "mm at: " + guess.tl.x);
    // console.log("tlY error: " + (guess.tl.y - trueTLY) + "mm at: " + guess.tl.y);
    // console.log("trX error: " + (guess.tr.x - trueTRX) + "mm at: " + guess.tr.x);
    // console.log("trY error: " + (guess.tr.y - trueTRY) + "mm at: " + guess.tr.y);
    // console.log("brX error: " + (guess.br.x - trueBRX) + "mm at: " + guess.br.x);

    let output = document.getElementById('output');
    let guessString = "Fitness: " + 1/guess.fitness + "(" + guess.tl.x + ", " + guess.tl.y + "), (" + guess.tr.x + ", " + guess.tr.y + ")\n (" + guess.bl.x + ", " + guess.bl.y + "), (" + guess.br.x + ", " + guess.br.y + ")";
    output.value += guessString + "\n";

    console.log(guessString); 

}

/**
 * Projects the measurements to the plane of the machine. This is needed
 * because the belts are not parallel to the surface of the machine.
 * @param {Object} measurement - An object containing the measurements
 * @returns {Object} - An object containing the projected measurements
 */
function projectMeasurement(measurement){
    const tlZ = 116;
    const trZ = 69;
    const blZ = 47;
    const brZ = 89;

    const tl = Math.sqrt(Math.pow(measurement.tl,2) - Math.pow(tlZ,2));
    const tr = Math.sqrt(Math.pow(measurement.tr,2) - Math.pow(trZ,2));
    const bl = Math.sqrt(Math.pow(measurement.bl,2) - Math.pow(blZ,2));
    const br = Math.sqrt(Math.pow(measurement.br,2) - Math.pow(brZ,2));

    return {tl: tl, tr: tr, bl: bl, br: br};
}

/**
 * Projects an array of measurements to the plane of the machine to account for the fact that the start and end point are not in the same plane.
 * @param {Object[]} measurements - An array of objects containing the measurements of the top left, top right, bottom left, and bottom right corners of a rectangle.
 * @returns {Object[]} - An array of objects containing the projected measurements of the top left, top right, bottom left, and bottom right corners of a rectangle.
 */
function projectMeasurements(measurements){
    var projectedMeasurements = [];

    measurements.forEach(measurement => {
        projectedMeasurements.push(projectMeasurement(measurement));
    });

    return projectedMeasurements;
}

/**
 * Adds a constant to each measurement in an array of measurements.
 * @param {Object[]} measurements - An array of objects containing the measurements of the top left, top right, bottom left, and bottom right corners of a rectangle.
 * @param {number} offset - The constant to add to each measurement.
 * @returns {Object[]} - An array of objects containing the updated measurements of the top left, top right, bottom left, and bottom right corners of a rectangle.
 */
function offsetMeasurements(measurements, offset) {
    const newMeasurements = measurements.map(measurement => {
        return {
            tl: measurement.tl + offset,
            tr: measurement.tr + offset,
            bl: measurement.bl + offset,
            br: measurement.br + offset
        };
    });

    return newMeasurements;
}

/**
 * Scales each measurement in an array of measurements by a constant. 
 * @param {Object[]} measurements - An array of objects containing the measurements of the top left, top right, bottom left, and bottom right corners of a rectangle.
 * @param {number} scale - The constant to multiply each measurement by.
 * @returns {Object[]} - An array of objects containing the updated measurements of the top left, top right, bottom left, and bottom right corners of a rectangle.
 */
function scaleMeasurements(measurements, scale) {
    const newMeasurements = measurements.map(measurement => {
        return {
            tl: measurement.tl * scale,
            tr: measurement.tr * scale,
            bl: measurement.bl,  // * scale,
            br: measurement.br,  // * scale
        };
    });

    return newMeasurements;
}

function scaleMeasurementsBasedOnTension(measurements, guess) {

    const maxScale = 0.995;
    const minScale = 0.994;
    const maxTension = 60;
    const minTension = 20;

    const scaleRange = maxScale - minScale;
    const tensionRange = maxTension - minTension;
    

    const newMeasurements = measurements.map(measurement => {

        const tensionAdjustedTLScale = (1 - ((measurement.TLtension - minTension) / tensionRange)) * scaleRange + minScale;
        const tensionAdjustedTRScale = (1 - ((measurement.TRtension - minTension) / tensionRange)) * scaleRange + minScale;
        
        return {
            tl: measurement.tl * tensionAdjustedTLScale,
            tr: measurement.tr * tensionAdjustedTRScale,
            bl: measurement.bl,  // * scale,
            br: measurement.br,  // * scale
        };
    });

    return newMeasurements;
}

function findMaxFitness(initialGuess, measurements) {
    let currentGuess = JSON.parse(JSON.stringify(initialGuess));
    let stagnantCounter = 0;
    let totalCounter = 0;
    var bestGuess = JSON.parse(JSON.stringify(initialGuess));

    function iterate() {
        if (stagnantCounter < 100 && totalCounter < 200000) {
            //Clear the canvass
            clearCanvas();

            currentGuess = computeLinesFitness(measurements, currentGuess);
            
            if (1/currentGuess.fitness > 1/bestGuess.fitness) {
                bestGuess = JSON.parse(JSON.stringify(currentGuess));
                stagnantCounter = 0;
            } else {
                stagnantCounter++;
            }
            totalCounter++;
            console.log("Total Counter: " + totalCounter);

            if(totalCounter % 100 == 0){
                document.getElementById('output').value = "Best Fitness: " + (1/bestGuess.fitness).toFixed(7) + " in " + totalCounter + "\n";
            }

            // Schedule the next iteration
            setTimeout(iterate, 0);
        }
        else{
            messagesBox = document.getElementById('output');

            if(1/bestGuess.fitness < 0.5){
                messagesBox.value += '\nWARNING FITNESS TOO LOW. DO NOT USE THESE CALIBRATION VALUES!';
            }

            messagesBox.value += '\nCalibration complete \nCalibration values:';
            messagesBox.value += '\nFitness: ' + 1/bestGuess.fitness.toFixed(7);
            messagesBox.value += '\nMaslow_tlX: ' + bestGuess.tl.x.toFixed(1);
            messagesBox.value += '\nMaslow_tlY: ' + bestGuess.tl.y.toFixed(1);
            messagesBox.value += '\nMaslow_trX: ' + bestGuess.tr.x.toFixed(1);
            messagesBox.value += '\nMaslow_trY: ' + bestGuess.tr.y.toFixed(1);
            messagesBox.value += '\nMaslow_blX: ' + bestGuess.bl.x.toFixed(1);
            messagesBox.value += '\nMaslow_blY: ' + bestGuess.bl.y.toFixed(1);
            messagesBox.value += '\nMaslow_brX: ' + bestGuess.br.x.toFixed(1);
            messagesBox.value += '\nMaslow_brY: ' + bestGuess.br.y.toFixed(1);
            messagesBox.scrollTop
            messagesBox.scrollTop = messagesBox.scrollHeight;

            if(1/bestGuess.fitness > 0.5){
                // sendCommand('$/Maslow_tlX=' + bestGuess.tl.x.toFixed(1));
                // sendCommand('$/Maslow_tlY=' + bestGuess.tl.y.toFixed(1));
                // sendCommand('$/Maslow_trX=' + bestGuess.tr.x.toFixed(1));
                // sendCommand('$/Maslow_trY=' + bestGuess.tr.y.toFixed(1));
                // sendCommand('$/Maslow_blX=' + bestGuess.bl.x.toFixed(1));
                // sendCommand('$/Maslow_blY=' + bestGuess.bl.y.toFixed(1));
                // sendCommand('$/Maslow_brX=' + bestGuess.br.x.toFixed(1));
                // sendCommand('$/Maslow_brY=' + bestGuess.br.y.toFixed(1));
                // refreshSettings(current_setting_filter);
                // saveMaslowYaml();

                messagesBox.value += '\nThese values have been automatically saved for you.';
                messagesBox.value += "\nYou MUST restart your machine for them to take effect...I know that is annoying, it's getting fixed ASAP. ";
                messagesBox.scrollTop
                messagesBox.scrollTop = messagesBox.scrollHeight;

                //This restarts the esp32 to prevent you from trying to move the machine after calibration
                // setTimeout(function() {
                // sendCommand('$System/Control=RESTART');
                // }, 2000);
            }
        }
    }

    // Start the iteration
    iterate();
}


//Creates the canvas on which the pattern will be drawn
var canvas = document.createElement('canvas');
canvas.id     = "CursorLayer";
canvas.width  = 1000;
canvas.height = 600;
canvas.style.border   = "1px solid";
document.getElementById("views").appendChild(canvas);


//Deletes everything from the canvas
function clearCanvas() {
    const canvas = document.getElementById('CursorLayer');
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
}

// Computes the fitness of the next single step
const computeButton = document.getElementById('compute-button');
computeButton.addEventListener('click', () => {
    clearCanvas();
    initialGuess = computeLinesFitness(measurements, initialGuess);
    console.log("Fitness: " + 1/initialGuess.fitness);
    printResults(initialGuess);
});


//Create the buttons that the user can click
const compute1kButton = document.getElementById('compute-1k-button');
compute1kButton.addEventListener('click', () => {
    for(let i = 0; i < 1000; i++){
        clearCanvas();
        initialGuess = computeLinesFitness(measurements, initialGuess);
        console.log("Fitness: " + 1/initialGuess.fitness);
    }
    printResults(initialGuess);
});

const compute10kButton = document.getElementById('compute-10k-button');
compute10kButton.addEventListener('click', () => {
    let i = 0;
    function loop() {
        clearCanvas();
        initialGuess = computeLinesFitness(measurements, initialGuess);
        console.log("Fitness: " + 1/initialGuess.fitness);
        i++;
        if (i < 10000) {
            requestAnimationFrame(loop);
        } else {
            printResults(initialGuess);
        }
    }
    loop();
});


const computeEndButton = document.getElementById('compute-end-button');
computeEndButton.addEventListener('click', () => {
    var guessThisTime = JSON.parse(JSON.stringify(initialGuess)); //Deep copy to break the reference to the original object so that we can compute fresh
    var result = findMaxFitness(guessThisTime, measurements);

    printResults(result);
});


// var initialGuess = {
//     tl: {x: 5.08, y: 2790.71},
//     tr: {x: 3650.47, y: 2811.57},
//     bl: {x: 0, y: 0},
//     br: {x: 3655.96, y: 0},
//     fitness: 0
// }
const computeConvergeButton = document.getElementById('compute-converge-button');
computeConvergeButton.addEventListener('click', () => {

    function computeGuess() {
        // Clear the canvas
        clearCanvas();

        var guessThisTime = JSON.parse(JSON.stringify(initialGuess)); //Deep copy to break the reference to the original object so that we can compute fresh
        //Randomize the initial guess +- 200mm
        guessThisTime.tl.x = guessThisTime.tl.x + (Math.random() * 400) - 200;
        guessThisTime.tl.y = guessThisTime.tl.y + (Math.random() * 400) - 200;
        guessThisTime.tr.x = guessThisTime.tr.x + (Math.random() * 400) - 200;
        guessThisTime.tr.y = guessThisTime.tr.y + (Math.random() * 400) - 200;
        guessThisTime.bl.x = guessThisTime.bl.x + (Math.random() * 400) - 200;

        var result = findMaxFitness(guessThisTime, measurements);
        
        printResults(result);

        // Call computeGuess again after a delay
        setTimeout(computeGuess, 0);
    }

    // Start the loop
    computeGuess();
});


//This is where the program really begins. The above is all function definitions
//The way that the progam works is that we basically guess where the four corners are and then
//check to see how good that guess was. To see how good a guess was we "draw" circles from the four corner points
//with radiuses of the measured distances. If the guess was good then all four circles will intersect at a single point.
//The closer the circles are to intersecting at a single point the better the guess is.

//Once we've figured out how good our guess was we try a different guess. We keep the good guesses and throw away the bad guesses
//using a genetic algorithm

//Establish initial guesses for the corners
var initialGuess = {
    tl: {x: 0, y: 2500},
    tr: {x: 3600, y: 2500},
    bl: {x: 0, y: 0},
    br: {x: 3600, y: 0},
    fitness: 0
}


window.onload = function() {
    let output = document.getElementById('output');
    output.value = "";
}

const centerX = initialWidth/2;
const centerY = initialHeight/2;

calculateTensions(centerX, centerY, initialGuess);


//Un-comment this code to use the simulated measurements

// const randomMeasurementError = 6;
// const constantMeasurementError = 3;
// var measurements = [];
// measurements.push(takeSimulatedMeasurement(centerX,centerY,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX-800,centerY + 400,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX-800,centerY,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX-800,centerY - 400,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX,centerY + 400,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX,centerY - 400,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX + 800,centerY + 400,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX + 800,centerY,randomMeasurementError, constantMeasurementError));
// measurements.push(takeSimulatedMeasurement(centerX + 800,centerY - 400,randomMeasurementError, constantMeasurementError));


var measurements = [{bl:2220.79, br:2215.53, tr:2200.01, tl:2202.68},{bl:2005.23, br:2007.33, tr:2467.03, tl:2459.84},{bl:1240.99, br:2857.85, tr:3193.87, tl:1872.11},{bl:1334.59, br:2871.71, tr:3124.59, tl:1786.39},{bl:1407.65, br:2905.60, tr:3077.22, tl:1702.18},{bl:1484.94, br:2943.69, tr:3032.42, tl:1619.77},{bl:1564.23, br:2984.37, tr:2990.27, tl:1539.52},]
//Do projection and scaling
// measurements = scaleMeasurements(measurements, 0.9945);
measurements = projectMeasurements(measurements);

computeLinesFitness(measurements, initialGuess);


</script>

</body>
</html>