Airbear/data/index.html

65 lines
5.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>SPEEDUINO DASHBOARD</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=1400, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> <!-- Attempt to load from CDN -->
<script>window.Chart || document.write('<script src="js/libs/chart.umd.min.js">\x3C/script>')</script> <!-- Fallback to local files if not possible -->
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script> <!-- Attempt to load from CDN -->
<script>window.RadialGauge || document.write('<script src="js/libs/gauge.min.js">\x3C/script>')</script> <!-- Fallback to local files if not possible -->
<script src="https://cdn.jsdelivr.net/npm/luxon@1.27.0"></script>
<script>luxon.DateTime || document.write('<script src="js/libs/luxon.min.js">\x3C/script>')</script> <!-- Fallback to local files if not possible -->
<!-- <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script> -->
<script src="js/libs/chartjs-adaptor-luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0"></script>
<script>window.ChartStreaming || document.write('<script src="js/libs/chartjs-plugin-streaming.min.js">\x3C/script>')</script> <!-- Fallback to local files if not possible -->
</head>
<body onLoad="updateGauges()">
<!-- <canvas id="gauge1" class="gauge" style="background-size: 100%; background-image: url('https://colby.id.au/assets/files/background-894d31f864780b66a107b61871b56b90.svg')"></canvas>-->
<div class="gauge-cluster">
<div id="all-gauges" class="gauge-container">
<canvas id="gauge1" class="gauge gauge-primary"></canvas>
<div class="gauge-container-small">
<div class="gauge-row-left"> <canvas id="gauge2" class="gauge gauge-reverse gauge-linear"></canvas> <div class="gauge-text"><span id="gauge2-value" class="gauge-value">0</span> <span id="gauge2-label" class="gauge-label">TPS</span></div> </div>
<div class="gauge-row-left"> <canvas id="gauge3" class="gauge gauge-reverse gauge-linear"></canvas> <div class="gauge-text"><span id="gauge3-value" class="gauge-value">0</span> <span id="gauge3-label" class="gauge-label">CLT</span></div> </div>
<div class="gauge-row-left"> <canvas id="gauge4" class="gauge gauge-reverse gauge-linear"></canvas> <div class="gauge-text"><span id="gauge4-value" class="gauge-value">0</span> <span id="gauge4-label" class="gauge-label">IAT</span></div> </div>
<div class="gauge-row-right"> <canvas id="gauge5" class="gauge gauge-linear"></canvas> <div class="gauge-text-right"><span id="gauge5-value" class="gauge-value gauge-value-right">0</span> <span id="gauge5-label" class="gauge-label">PW</span></div> </div>
<div class="gauge-row-right"> <canvas id="gauge6" class="gauge gauge-linear"></canvas> <div class="gauge-text-right"><span id="gauge6-value" class="gauge-value gauge-value-right">0</span> <span id="gauge6-label" class="gauge-label">MAP</span></div> </div>
<div class="gauge-row-right"> <canvas id="gauge7" class="gauge gauge-linear"></canvas> <div class="gauge-text-right"><span id="gauge7-value" class="gauge-value gauge-value-right">0</span> <span id="gauge7-label" class="gauge-label">AFR</span></div> </div>
</div>
<!--
<canvas id="gauge5" class="gauge"></canvas>
<canvas id="gauge6"></canvas>
<canvas id="gauge7"></canvas>
<canvas id="gauge8"></canvas>
<canvas id="gauge9"></canvas>
<canvas id="gauge10"></canvas>
<canvas id="gauge11"></canvas>
<canvas id="gauge12"></canvas>
<canvas id="gauge13"></canvas>
<canvas id="gauge14"></canvas>
<canvas id="gauge15"></canvas>
<canvas id="gauge16"></canvas>
-->
</div>
</div>
<button id="config-button" onclick="location.href='/config'"><svg fill="#111" width="32px" height="32px" viewBox="0 0 512 512"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg></button>
<!--<div class="networkSpeed"><canvas id="liveChart" width="240" height="120"></canvas><span id="readSpeed" ></span></div>-->
<script src="js/live-line.js"></script>
<script src="js/gauges.js"></script>
<script src="js/sse.js"></script>
<script>if (window.module) module = window.module;</script>
</body>
</html>