Four-Point Method for Gantry Squaring

Toggle class name on click in jQuery

HTML

Check the pinned messages of the
<a href="https://discord.com/channels/648972213734604807/1328487657923412098"
target="_blank" rel="nofollow noreferrer"
  >discussion</a
>
on Discord for up-to-date instructions.
<hr />

<h3>Compute gantry deviation from square:</h3>
<table>
  <thead>
    <tr>
      <th>Step</th>
      <th>Point</th>
      <th>X coord</th>
      <th>Y coord</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>3</th>
      <th>Front Left</th>
      <td><input id="flx" size="8" /></td>
      <td><input id="fly" size="8" /></td>
    </tr>
    <tr>
      <th>3</th>
      <th>Rear Right</th>
      <td><input id="brx" size="8" /></td>
      <td><input id="bry" size="8" /></td>
    </tr>
    <tr>
      <th>4</th>
      <th>Front Right</th>
      <td><input id="frx" size="8" /></td>
      <td><input id="fry" size="8" /></td>
    </tr>
    <tr>
      <th>4</th>
      <th>Rear Left</th>
      <td><input id="blx" size="8" /></td>
      <td><input id="bly" size="8" /></td>
    </tr>
  </tbody>
</table>

<p>
  <em
    >&#8220;Front&#8221; (&#8220;rear&#8221;) refers to the side of the PNC
    closest to (furthest from) the operator. &#8220;Left&#8221; and
    &#8220;right&#8221; are relative to the operator facing the front of the
    PNC.</em
  >
</p>

<p>
  The gantry is currently turned
  <span class="highlight"
    ><span id="ang">???</span> degrees <span class="dir">???</span></span
  >
  away from square.
</p>

<hr />
<h3>Compute dual axis offset (grblHAL $171):</h3>
<p></p>
<table>
  <tr>
    <th>Distance between Y ballscrews</th>
    <td><input id="g" size="12" /></td>
  </tr>
</table>

<p></p>
<fieldset id="home_dir">
  <legend><b>What is the Y homing direction?</b></legend>
  <input type="radio" name="home_dir" id="backward" value="backward" />
  <label for="backward">Backward (away from operator)</label>
  <br />
  <input type="radio" name="home_dir" id="forward" value="forward" />
  <label for="forward">Forward (towards...

CSS

span.highlight {
  border: 1px solid red;
  padding: 0px 0.3em;
  display: inline-block;
}
input {
  text-align: right;
}

JavaScript

$(document).ready(function () {
  var recompute = function () {
    // run anytime the value changes

    var flx = Number($("#flx").val() || "nan")
    var fly = Number($("#fly").val() || "nan")
    var brx = Number($("#brx").val() || "nan")
    var bry = Number($("#bry").val() || "nan")
    var frx = Number($("#frx").val() || "nan")
    var fry = Number($("#fry").val() || "nan")
    var blx = Number($("#blx").val() || "nan")
    var bly = Number($("#bly").val() || "nan")
    var g = Number($("#g").val() || "nan")

    var tan = NaN
    if (Number.isFinite(flx + fly + brx + bry + frx + fry + blx + bly)) {
      var a = Math.abs(brx - flx)
      var b = Math.abs(bry - fly)
      var c = Math.abs(blx - frx)
      var d = Math.abs(bly - fry)
      tan = (0.5 * (a * a + b * b - c * c - d * d)) / (a * b + c * d)
      $("#ang").html(((180 / Math.PI) * Math.abs(Math.atan(tan))).toFixed(6))
      $("span.dir").html(tan > 0 ? "clockwise" : "counter-clockwise")
    } else {
      $("#ang, span.dir").html("???")
    }

    if (
      Number.isFinite(tan + g) &&
      (g > 0) &&
      $("#home_dir :checked").length == 1 &&
      $("#y1_side :checked").length == 1
    ) {
      var offset = tan * g
      var dst = offset
      if ($("#home_dir :checked").val() == "backward") dst = -dst
      if ($("#y1_side :checked").val() == "right") dst = -dst
      $("#dao").html(dst.toFixed(10 - Math.log10(g)))
    } else {
      $("#dao").html("???")
    }
  }
  $("input").on("input", recompute)
  recompute()
})