forked from Simnation/Main
227 lines
11 KiB
HTML
227 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css"/>
|
|
<link rel="stylesheet" id="theme" href=""/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
|
|
<script type="text/javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://kit.fontawesome.com/dca78979b0.js" crossorigin="anonymous"></script>
|
|
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
|
<script src="lidar.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div id="hud">
|
|
<p id='range-hud'>WAIT</</p>
|
|
<p id='speed-hud'>TESTING</p>
|
|
</div>
|
|
<div id="laser-gun">
|
|
<img src="textures/screen.png" style="position: absolute; top: 34%; right: 18%; width: 408px; height: 103px; transform-origin: center; offset-anchor: center; z-index: 2; opacity: 0.15;">
|
|
<img src="textures/grid.png" style="position: absolute; top: 32%; right: 17%; width: 403px; height: 103px; offset-anchor: center; z-index: 1; opacity: 0.5; margin: 6px;">
|
|
<div id="self-test-container">
|
|
<p style="font-size: 30px;">SELF TEST IN PROGRESS</p>
|
|
<p id="self-test-progress" style="line-height: 1.5;">[___________________]</p>
|
|
<p id="self-test-timer">00:00</p>
|
|
</div>
|
|
<div id="lidar-home" style="display: none;">
|
|
<div id="left">
|
|
<img id="arrowup" src="textures/arrow.png" style="width: 47px; grid-area: 1 / 1 / auto / auto; margin: 0px -6px;">
|
|
<img id="arrowdown" src="textures/arrow.png" style="width: 47px; grid-area: 1 / 1 / auto / auto; margin: 24px -10px -15px; transform: rotate(180deg);">
|
|
<p id="speed">---</p>
|
|
<p id="unit">mph</p>
|
|
</div>
|
|
<div id="vertical-div"></div>
|
|
<div id="right">
|
|
<p id="range">----ft</p>
|
|
<p id="timer"></p>
|
|
<img id="lock" src="textures/lock.png" style="width: 135px; float: right; grid-row: 1 / auto; position: absolute; bottom: -28%; right: -16%;">
|
|
<img id="battery" src="textures/battery4.png" style="width: 163px; float: right; bottom: -71%; right: -23%; position: absolute; margin: 0px;">
|
|
</div>
|
|
</div>
|
|
<div id="history-container">
|
|
<p id="counter" style="text-align: center; width: 20%; margin-top: 2%";></p>
|
|
<p id="history-header" style="font-size: 1.9em; text-align: center; margin-top: -7.3%;">Recalled Events</p>
|
|
<p id="timestamp" style="line-height: 1.7; margin-left: 3%;"></p>
|
|
<p id="clock" style="line-height: 1; margin-left: 3%;"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="print-result-dialog-container" class="centered-container" style="z-index: 11;">
|
|
<div id="print-result-dialog">
|
|
<div class='dialog-body'>
|
|
<div class="bg-primary fixedhd dialog-header">
|
|
<button id="print-dialog-close" class="btn btn-danger print-view-close-btn"><i class="fas fa-sign-out-alt"></i></button>
|
|
</div>
|
|
<p id="dialog-msg" class="center" style="text-shadow: unset;margin-bottom: 0px;">Uploaded Successfully</p>
|
|
<p id="url-display-imgur" class="center" style="text-shadow: unset; margin-bottom: 0px; margin-top: 10px;"></p>
|
|
<p id="url-display-discord" class="center" style="margin-bottom: 15px; text-shadow: unset;"></p>
|
|
<button id="copy-button" class="btn btn-success dialog-button">Copy to Clipboard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="view-record-container" class="centered-container" style="z-index: 10;">
|
|
<div id="view-record">
|
|
<div class="bg-primary fixedhd print-view-header">
|
|
<button id="print-view-close" class="btn btn-danger mt-3 mr-5 btn-lg print-view-close-btn"><i class="fas fa-sign-out-alt"></i></button>
|
|
<button id="print-view-print" class="btn btn-light mt-3 mr-5 btn-lg print-view-print-btn" style="float: left;"><i class="fa-sharp fa-solid fa-print"></i></button>
|
|
</div>
|
|
<center><img style="height: 45px;margin-bottom: 20px;" src="textures/prolaser-logo-black.png" ></center>
|
|
<p style="text-align: center;margin-bottom: 2px;font-weight:bold; text-shadow: unset;">SPEED EVENT RECORD</p>
|
|
<hr>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th class="left" style="padding-left: 5px; font-size: 11pt;" colspan="6">Instrument Details</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="left" style="background: unset; min-width: 130px;">Device:</th>
|
|
<td class="left" style="width: 625px;">ProLaser 4</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="left no-background">Serial:</th>
|
|
<td id="serial" class="left"></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="left no-background">User:</th>
|
|
<td id="playerName" class="left"></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="left" style="background: unset;">Self Test Performed:</th>
|
|
<td id="self-test-time" class="left"></td>
|
|
<th class="center" style="min-width: 75px;">EEPROM</th>
|
|
<th class="center" style="min-width: 75px;">TIMER</th>
|
|
<th class="center" style="min-width: 75px;">CHECKSUM</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
|
|
</td>
|
|
<td>
|
|
|
|
</td>
|
|
<td class="center testResult"></td>
|
|
<td class="center testResult"></td>
|
|
<td class="center testResult"></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="left no-background">Wavelength:</th>
|
|
<td id="playerName" class="left">904nm +/- 10nm</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="left no-background">Speed Accurancy:</th>
|
|
<td id="playerName" class="left">+/- 1mph</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="left no-background">Range Accurancy:</th>
|
|
<td id="playerName" class="left">+/-6”</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<table style="margin-top:25px; width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<th class="left" style="padding-left: 5px; font-size: 11pt;" colspan="5">Lidar Records</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="center small-font-size">RID</th>
|
|
<th class="center small-font-size">Date/Time</th>
|
|
<th class="center small-font-size">Est. Speed</th>
|
|
<th class="center small-font-size">Est. Distance</th>
|
|
<th class="center small-font-size">Est. Location</th>
|
|
</tr>
|
|
<tr>
|
|
<td id="recID" class="small-font-size"></td>
|
|
<td id="recDate" class="small-font-size"></td>
|
|
<td id="recSpeed" class="small-font-size"></td>
|
|
<td id="recRange" class="small-font-size"></td>
|
|
<td id="recStreet" class="small-font-size" style="min-width:200px"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table style="margin-top:25px;width:100%;">
|
|
<tbody>
|
|
<tr>
|
|
<th style="text-align: left; padding-left: 5px; font-size: 11pt;" colspan="1">Estimated Geolocation</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id='print-map' style="margin-top: 20px; width: 400px; height: 275px;"></div>
|
|
<div class="footer-container">
|
|
<hr>
|
|
<div class="footer">
|
|
<p class="left" style="padding-left:0; text-shadow: unset;">Luxart Engineering Inc.</p>
|
|
<p class="center" style="text-shadow: unset;">1 / 1</p>
|
|
<p id='print-footer-date' class="right" style="text-shadow: unset;"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="tablet-container" class="centered-container">
|
|
<div id="tablet">
|
|
<div id="loading-dialog-container" class="centered-container">
|
|
<div id="loading-dialog">
|
|
<p id="loading-header" style="text-shadow: unset;margin: 18px 0 10px 18px;font-size: 20px;font-weight: bolder;">Please Wait..</p>
|
|
<p id="loading-message" style="text-shadow: unset;margin: 0 0 0 18px;font-size: 15px;"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Processing Records..</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary fixedhd" style="background-color: rgb(24 24 24) !important; margin: -1px;">
|
|
<div class="map-controls-container" >
|
|
<div class="map-controls">
|
|
<p class="map-controls-label" style="grid-column: 1/3;">Map Markers:</p>
|
|
<p class="map-controls-label">Legend:</p>
|
|
<div class="btn-group d-flex" style="justify-content: right; margin-right: 5px;" role="group">
|
|
<input type="radio" class="btn-check" name="btn-group-page" id="btn-this-page" autocomplete="off" checked>
|
|
<label class="btn btn-outline-primary rounded-start" for="btn-this-page" style="min-width: 88px">This Page</label>
|
|
<input type="radio" class="btn-check" name="btn-group-page" id="btn-all-pages" autocomplete="off">
|
|
<label class="btn btn-outline-primary" style="min-width: 88px" for="btn-all-pages">All</label>
|
|
</div>
|
|
<div class="btn-group d-flex" style="justify-content: left; margin-left: 5px;" role="group">
|
|
<input type="radio" class="btn-check" name="btn-group-player" id="btn-own" autocomplete="off">
|
|
<label class="btn btn-outline-primary rounded-start" for="btn-own" style="min-width: 88px">Own</label>
|
|
<input type="radio" class="btn-check" name="btn-group-player" id="btn-all-players" autocomplete="off" checked>
|
|
<label class="btn btn-outline-primary" style="min-width: 88px" for="btn-all-players">All Players</label>
|
|
</div>
|
|
<div class="btn-group d-flex" role="group">
|
|
<input type="radio" class="btn-check" name="btn-group-legend" id="btn-legend-off" autocomplete="off">
|
|
<label class="btn btn-outline-primary rounded-start" for="btn-legend-off">Off</label>
|
|
<input type="radio" class="btn-check" name="btn-group-legend" id="btn-legend-on" autocomplete="off" checked>
|
|
<label class="btn btn-outline-primary" for="btn-legend-on">On</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button id="tablet-close" class="btn btn-danger mt-3 mr-5 btn-lg"><i class="fa-sharp fa-solid fa-xmark"></i></button>
|
|
<button id="toggle-theme" class="btn mt-3 mr-5 btn-lg" style="color: white;"><i class="fa-solid fa-circle-half-stroke"><span id="theme-text"> D</span></i></button>
|
|
<p id="date-time"></p>
|
|
<img style="margin: 15px; height: 30px;" src="textures/prolaser-logo.png" >
|
|
</div>
|
|
<div id="clock-table-container">
|
|
<table id="clock-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th class="rid">Record<br>ID</th>
|
|
<th class="timestamp">Timestamp</th>
|
|
<th class="speed">Speed<br>(mph)</th>
|
|
<th class="distance">Distance<br>(feet)</th>
|
|
<th class="player">User</th>
|
|
<th class="street">Street</th>
|
|
<th class="mapping">Map</th>
|
|
<th class="print">Print</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="map"><span class="loading">loading tiles...</span></div>
|
|
<p id="tablet-version"></p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|