date for graph is now selectable

This commit is contained in:
Ralf D. Müller
2022-10-16 14:22:38 +00:00
parent 3ca93b49ca
commit 5724f37ea6
2 changed files with 49 additions and 28 deletions

View File

@@ -4,7 +4,8 @@
### Added ### Added
- Addes PreValue to `/json` ([#1154](https://github.com/jomjol/AI-on-the-edge-device/issues/1154)) - added `/graph.html` to fetch measurements from the debug log and display them as a graph. Activate debug logging for this feature to work.
- Added PreValue to `/json` ([#1154](https://github.com/jomjol/AI-on-the-edge-device/issues/1154))
### Changed ### Changed

View File

@@ -1,29 +1,47 @@
<html> <html>
<head> <head>
<script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script> <script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
<style> <style>
textarea { textarea {
width: 600px; width: 600px;
height: 300px; height: 300px;
} }
</style> </style>
<script> <script>
function run() { function run() {
var el = document.getElementById('cnsl'); var el = document.getElementById('cnsl');
el && eval(el.value); el && eval(el.value);
}
</script>
</head>
<body>
<div id='chart'></div>
<select id="selector" onchange="document.location.href=document.location.href.split('#')[0]+'#'+this.value;run();"></select>
<button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button>
<div id='editor' hidden='true'>
<textarea id="cnsl">
var hash = window.location.hash;
console.log (hash);
var d = new Date();
var options="<option>Please Select...</option>";
for (var i=0; i<27; i++) {
var currentDate = new Date(d-i*60*60*24*1000);
var option = currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()
options += "<option>"+option+"</option>\n";
} }
</script> document.getElementById("selector").innerHTML = options;
</head>
<body> var dateString = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
<div id='chart'></div> if (hash!="") {
<button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button> dateString = hash.substring(1);
<div id='editor' hidden='true'> }
<textarea id="cnsl"> fetch('/fileserver/log/message/log_'+dateString+'.txt')
const d = new Date();
var date = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
fetch('/fileserver/log/message/log_'+date+'.txt')
.then(response => { .then(response => {
// handle the response // handle the response
if (response.status == 404) {
alert("no log data available for "+dateString);
}
response.text() response.text()
.then( result => { .then( result => {
var lines = result.split("\n"); var lines = result.split("\n");
@@ -40,19 +58,21 @@ fetch('/fileserver/log/message/log_'+date+'.txt')
var value = line.split(" ")[6]; var value = line.split(" ")[6];
var time = line.split(" ")[0]; var time = line.split(" ")[0];
console.log("> "+time+" "+value+"\n"); console.log("> "+time+" "+value+"\n");
if (value<1000) {
trace.x.push(timex); trace.x.push(timex);
timex += 1; timex += 1;
trace.y.push(value); trace.y.push(value);
} }
} }
}
console.log(trace); console.log(trace);
var data = [trace]; var data = [trace];
Plotly.newPlot('chart', data); Plotly.newPlot('chart', data);
}); });
}) }).catch((error) => {
.catch(error => {
// handle the error // handle the error
out.value = "error"; console.log(error);
alert("test");
}); });
</textarea><br /> </textarea><br />
<button onclick="run();">run</button> <button onclick="run();">run</button>