moved templates
This commit is contained in:
Kristjan Komlosi
@@ -0,0 +1,44 @@
|
||||
// All code in this file is licensed under the ISC license, provided in LICENSE.txt
|
||||
$('#update').click(updateData);
|
||||
// jQuery event binder
|
||||
|
||||
function updateData () {
|
||||
const url = 'http://' + window.location.hostname + ':5000/data';
|
||||
$.ajax({ // spawn an AJAX request
|
||||
url: url,
|
||||
success: function (data, status) {
|
||||
console.log(data);
|
||||
graphSpectralData(data[0], 0);
|
||||
fillTableData(data);
|
||||
},
|
||||
timeout: 2500 // this should be a pretty sane timeout
|
||||
});
|
||||
}
|
||||
|
||||
function graphSpectralData (obj, dom) {
|
||||
// graph spectral data in obj into dom
|
||||
var graphPoints = [];
|
||||
var graphXTicks = [];
|
||||
|
||||
const specter = 'ABCDEFGHRISJTUVWKL';
|
||||
for (var i = 0; i < specter.length; i++) {
|
||||
graphPoints.push([i, obj[specter[i]]]);
|
||||
graphXTicks.push([i, specter[i]]);
|
||||
}
|
||||
const options = {
|
||||
grid: { color: 'white' },
|
||||
xaxis: { ticks: graphXTicks }
|
||||
};
|
||||
$.plot('#graph', [graphPoints], options);
|
||||
// flot expects an array of arrays (lines) of 2-element arrays (points)
|
||||
}
|
||||
|
||||
function fillTableData (obj) {
|
||||
// fill the obj data into HTML tables
|
||||
Object.keys(obj[0])
|
||||
.forEach((element) => { $('#' + element).text(obj[0][element]); });
|
||||
$('#lx').text(obj[1]);
|
||||
$('#uva').text(obj[2][0]);
|
||||
$('#uvb').text(obj[2][1]);
|
||||
$('#uvi').text(obj[2][2]);
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<link rel="stylesheet" href="lib/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
<title>TeraHz</title>
|
||||
<script src="lib/bootstrap.bundle.min.js"></script>
|
||||
<script src="lib/jquery-3.4.1.min.js"></script>
|
||||
<script src="lib/flot/jquery.flot.js"></script>
|
||||
<script src="frontend.js"></script>
|
||||
<script src="lib/flot/jquery.canvaswrapper.js"></script>
|
||||
<script src="lib/flot/jquery.colorhelpers.js"></script>
|
||||
<script src="lib/flot/jquery.flot.js"></script>
|
||||
<script src="lib/flot/jquery.flot.saturated.js"></script>
|
||||
<script src="lib/flot/jquery.flot.browser.js"></script>
|
||||
<script src="lib/flot/jquery.flot.drawSeries.js"></script>
|
||||
<script src="lib/flot/jquery.flot.uiConstants.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container text-center">
|
||||
<h1><img src="lib/logo-sq.png" height="64px">TeraHz</h1>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<button id="update" onclick="updateData()" class="btn btn-primary">Get data</button>
|
||||
<button id="download" class="btn btn-primary">Download</button>
|
||||
<button id="debug" class="btn btn-danger">DEBUG</button>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h4>Spectrogram</h4>
|
||||
<div id="graph" style="height:480px;width:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm">
|
||||
<h4>Visible+IR spectrum</h4>
|
||||
<table class="table table-dark table-sm" id="specter">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th>Band</th>
|
||||
<th>Wavelength [nm]</th>
|
||||
<th>Irradiance [μW/cm²]</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>A</td>
|
||||
<td>410 nm</td>
|
||||
<td id="A">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>B</td>
|
||||
<td>435 nm</td>
|
||||
<td id="B">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>C</td>
|
||||
<td>460 nm</td>
|
||||
<td id="C">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>D</td>
|
||||
<td>485 nm</td>
|
||||
<td id="D">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>E</td>
|
||||
<td>510 nm</td>
|
||||
<td id="E">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>F</td>
|
||||
<td>535 nm</td>
|
||||
<td id="F">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>G</td>
|
||||
<td>560 nm</td>
|
||||
<td id="G">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>H</td>
|
||||
<td>585 nm</td>
|
||||
<td id="H">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>R</td>
|
||||
<td>610 nm</td>
|
||||
<td id="R">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>I</td>
|
||||
<td>645 nm</td>
|
||||
<td id="I">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>S</td>
|
||||
<td>680 nm</td>
|
||||
<td id="S">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>J</td>
|
||||
<td>705 nm</td>
|
||||
<td id="J">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>T</td>
|
||||
<td>730 nm</td>
|
||||
<td id="T">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>U</td>
|
||||
<td>760 nm</td>
|
||||
<td id="U">---</td>
|
||||
</tr>
|
||||
<tr class="table-secondary">
|
||||
<td>V</td>
|
||||
<td>810 nm</td>
|
||||
<td id="V">---</td>
|
||||
</tr>
|
||||
<tr class="table-secondary">
|
||||
<td>W</td>
|
||||
<td>860 nm</td>
|
||||
<td id="W">---</td>
|
||||
</tr>
|
||||
<tr class="table-secondary">
|
||||
<td>K</td>
|
||||
<td>900 nm</td>
|
||||
<td id="K">---</td>
|
||||
</tr>
|
||||
<tr class="table-secondary">
|
||||
<td>L</td>
|
||||
<td>940 nm</td>
|
||||
<td id="L">---</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="col-sm">
|
||||
<h4>UV+Illuminance</h4>
|
||||
<table class="table-dark table table-sm" id="luxuv">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th>Parameter</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td>Illuminance [lx]</td>
|
||||
<td id="lx">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UVA irradiance [μW/cm²]</td>
|
||||
<td id="uva">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UVB irradiance [μW/cm²]</td>
|
||||
<td id="uvb">---</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UVA/UVB average [μW/cm²]</td>
|
||||
<td id="uvi">---</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
body {
|
||||
background: rgb(2,0,36);
|
||||
background: linear-gradient(138deg, rgba(2,0,36,1) 0%, rgba(5,5,209,1) 51%, rgba(0,212,255,1) 100%);
|
||||
color: white;
|
||||
}
|
||||
#A {
|
||||
background-color: #7e00db;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#B {
|
||||
background-color: #2300ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#C {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#D {
|
||||
background-color: #00eaff;
|
||||
}
|
||||
|
||||
#E {
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
#F {
|
||||
background-color: #70ff00;
|
||||
}
|
||||
|
||||
#G {
|
||||
background-color: #c3ff00;
|
||||
}
|
||||
|
||||
#H {
|
||||
background-color: #ffef00;
|
||||
}
|
||||
|
||||
#R {
|
||||
background-color: #ff9b00;
|
||||
}
|
||||
|
||||
#I, #S {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
#J {
|
||||
background-color: #f60000;
|
||||
}
|
||||
|
||||
#T {
|
||||
background-color: #c80000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#U {
|
||||
background-color: #8d0000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table-secondary {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.flot-tick-label {
|
||||
fill: white;
|
||||
}
|
||||
Reference in New Issue
Block a user