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 {
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 {
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>