This is an old revision of the document!


<HTML>

<style>.footer2 {

  position: fixed;
  left: 0px;
  bottom: 0;
  z-index: 2;
  width: 100%;
  background-color: lightgray;
  text-align: center;
  font-size: 75%;

}

@media (prefers-color-scheme: dark) {

  .footer {
      background-color: #444;
  }

}

.button {

  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  width: 100px;

}

.button1 {

  background-color: white;
  color: black;
  border: 2px solid #4CAF50;

}

.button_wide {

  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
  width: 150px;

}

.button_unconfirmed {

  background-color: white;
  color: black;
  border: 2px solid orange;

}

.button1:hover, .button_wide:hover {

  background-color: #4CAF50;
  /* Green */
  color: white;

}

.button_unconfirmed:hover {

  background-color: orange;
  /* background-color: #4CAF50; */
  /* Green */
  color: white;

}

.slider {

  1. webkit-appearance: none;

width: 25%;

  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;

}

.slider:hover {

  opacity: 1;

}

.slider::-webkit-slider-thumb {

  1. webkit-appearance: none;

appearance: none;

  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;

}

.slider::-moz-range-thumb {

  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;

}

</style>

<h1>Hancock GNSS IMU Alignment</h1>

  <table>
      <tr>
          <td>Floor mount</td>
          <td><button class="button button1" id="pos1">0,0,0</button></td>
          <td><button class="button button1" id="pos2">0,0,90</button></td>
          <td><button class="button button1" id="pos3">0,0,180</button></td>
          <td><button class="button button1" id="pos4">0,0,270</button></td>
          <td>Head Over Mount</td>
          <td><button class="button button_unconfirmed" id="pos14">-180,0,0</button></td>
          <td><button class="button button_unconfirmed" id="pos15">-180,0,90</button></td>
          <td><button class="button button_unconfirmed" id="pos16">-180,0,180</button></td>
          <td><button class="button button_unconfirmed" id="pos17">180,0,270</button></td>
      </tr>
      <tr>
          <td>Front Wall</td>
          <td><button class="button button1" id="pos5">-90,0,90</button></td>
          <td><button class="button button1" id="pos6">90,0,270</button></td>
          <td><button class="button button1" id="pos7">0,-90,0</button></td>
          <td><button class="button button_unconfirmed" id="pos18">0,90,180</button></td>
          <td>Rear Wall</td>
          <td><button class="button button_unconfirmed" id="pos30">-90,0,270</button></td>
          <td><button class="button button_unconfirmed" id="pos31">90,0,90</button></td>
          <td><button class="button button_unconfirmed" id="pos32">0,90,0</button></td>
          <td><button class="button button_unconfirmed" id="pos33">0,-90,180</button></td>
      </tr>
      <tr>
          <td>Left Side</td>
          <td><button class="button button1" id="pos8">90,0,0</button></td>
          <td><button class="button button1" id="pos9">-90,0,180</button></td>
          <td><button class="button button_unconfirmed" id="pos10">0,-90,90</button></td>
          <td><button class="button button_unconfirmed" id="pos20">0,90,270</button></td>
          <td>Right Side</td>
          <td><button class="button button1" id="pos11">-90,0,0</button></td>
          <td><button class="button button1" id="pos12">90,0,180</button></td>
          <td><button class="button button_unconfirmed" id="pos21">0,-90,270</button></td>
          <td><button class="button button_unconfirmed" id="pos22">0,90,90</button></td>
      </tr>
  </table>
  <br>
  <div class="slidecontainer">
      Roll: -180<input type="range" min="-180" max="180" value="0" step="5" class="slider" id="slider_roll">+180 Pitch: -90<input type="range" min="-90" max="90" value="0" step="5" class="slider" id="slider_pitch">+90 Yaw: 0<input type="range" min="0"
          max="360" value="0" step="5" class="slider" id="slider_yaw">360
  </div>
  <!-- <div class="slidecontainer">
      Roll: -180<input type="range" min="-180" max="180" value="0" step="5" class="slider" id="slider_roll">+180
  </div>
  <div class="slidecontainer">
      Pitch: -90<input type="range" min="-90" max="90" value="0" step="5" class="slider" id="slider_pitch">+90
  </div>
  <div class="slidecontainer">
      Yaw: 0<input type="range" min="0" max="360" value="0" step="5" class="slider" id="slider_yaw">360
  </div> -->
  <h3>
      Roll: <span id="value_roll">0</span>° Pitch: <span id="value_pitch">0</span>° Yaw: <span id="value_yaw">0</span>°
      <td><button class="button button_wide" id="view_reset">Reset View</button></td>
      <td><button class="button button_wide" id="rotate_switch">Start Autorotate</button></td>
  </h3>
  <canvas id="c" width="1000" height="1000" style="border:1px solid #000000;"></canvas>
  <div class="footer2">
      <p>
          Version: v0.0.2 - Disclaimer: This tool is a private project, not affiliated with NetModule AG. The project is provided under the MIT license.
      </p>
  </div>

<script type=“module” src=“/lib/exe/js/gnss-dr.js”></script>

</HTML>