Mirror/AI-on-the-edge-device
1
0
Fork 0
mirror of https://github.com/jomjol/AI-on-the-edge-device.git synced 2025-12-09 13:06:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

enhance data pages (#2088)

Browse Source 
* enhance data pages

* add checkbox to show relative values

* remove static entries, they get overwritten by dynamic oes

---------

Co-authored-by: CaCO3 <caco@ruinelli.ch>
This commit is contained in:
CaCO3
2023-02-26 23:08:39 +01:00
committed by GitHub
parent 9a9aa68a65
commit 53ff190860
4 changed files with 123 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
sd-card/html/data.html
View File

@@ -5,6 +5,7 @@
body { body {
height: 100%; height: 100%;
margin: 2px; margin: 2px;
font-family: Arial, Helvetica, sans-serif;
} }
.box { .box {
@@ -33,19 +34,22 @@
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
</head> </head>
<body> <body>
<h3>Todays Data</h3>
<h4>Last part of Todays Data</h4>
<div class="box"> <div class="box">
<div class="row header"> <div class="row header">
<button onClick="reload();">Reload</button> <button onClick="reload();">Refresh</button>
<button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button> <button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</button>
<button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button> <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
<button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button> <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show Graph</button>
</div> </div>
<div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div> <div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div>
<div class="row footer"> <div class="row footer">
<button onClick="reload();">Reload</button> <button onClick="reload();">Refresh</button>
<button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button> <button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</button>
<button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button> <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
<button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button> <button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show Graph</button>
<p></p>
</div> </div>
</div> </div>
</body> </body>

6
sd-card/html/edit_config_param.html
View File

@@ -462,9 +462,6 @@ textarea {
<br> <br>
<b>Postprocessing Individual Parameters: <b>Postprocessing Individual Parameters:
<select id="Numbers_value1" onchange="numberChanged()"> <select id="Numbers_value1" onchange="numberChanged()">
<option value="0" selected>default</option>
<option value="1" >NT</option>
<option value="2" >HT</option>
</select></b> </select></b>
</td> </td>
</tr> </tr>
@@ -786,9 +783,6 @@ textarea {
<br> <br>
<b>Postprocessing Individual Parameters: <b>Postprocessing Individual Parameters:
<select id="NumbersInfluxDB_value1" onchange="numberInfluxDBChanged()"> <select id="NumbersInfluxDB_value1" onchange="numberInfluxDBChanged()">
<option value="0" selected>default</option>
<option value="1" >NT</option>
<option value="2" >HT</option>
</select></b> </select></b>
</td> </td>
</tr> </tr>

173
sd-card/html/graph.html
View File

@@ -5,17 +5,115 @@
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>
<style> <style>
textarea { body {
width: 600px; font-family: Arial, Helvetica, sans-serif;
height: 300px;
} }
</style> </style>
<script> <script>
function run() { function run() {
var el = document.getElementById('cnsl'); datefile = document.getElementById("datafiles").value;
el && eval(el.value); numbername = document.getElementById("numbers").value;
showRrelativeValues = document.getElementById("showRrelativeValues").checked;
//alert("Auslesen: " + datefile + " " + numbername);
_domainname = getDomainname();
fetch(_domainname + '/fileserver/log/data/' + datefile)
.then(response => {
// handle the response
if (response.status == 404) {
firework.launch("No log data available for " + dateString, 'warning', 10000);
}
response.text()
.then( result => {
var lines = result.split("\n");
var traceValue = { x: [], y: [], type: 'scatter', line: {width: 6}, name: 'Value'};
var tracePreValue = { x: [], y: [], type: 'scatter', line: {width: 2}, name: 'Previous Value', visible: 'legendonly'};
var traceChangeRate = { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Rate'};
var traceChangeAbsolute = { x: [], y: [], type: 'bar', yaxis: 'y2', opacity: 0.2, name: 'Change Absolute', visible: 'legendonly'};
var timex = 1;
for (let line of lines) {
{
//console.log(line);
if (line.split(",")[1] == numbername)
{
var value = line.split(",")[3];
var preValue = line.split(",")[4];
var changeRate = line.split(",")[5];
var changeAbsolute = line.split(",")[6];
var time = line.split(",")[0];
//console.log("> "+time+" "+value+"\n");
traceValue.x.push(time);
traceValue.y.push(value);
tracePreValue.y.push(preValue);
traceChangeRate.y.push(changeRate);
traceChangeAbsolute.y.push(changeAbsolute);
}
}
}
//console.log(trace);
// Copy time to all traces
tracePreValue.x = traceValue.x;
traceChangeRate.x = traceValue.x;
traceChangeAbsolute.x = traceValue.x;
//console.log(traceValue.y);
var offsetValue = traceValue.y[0];
var offsetPreValue = tracePreValue.y[0];
if (showRrelativeValues) {
traceValue.y.forEach(function(part, index, arr) {
arr[index] = arr[index] - offsetValue;
});
tracePreValue.y.forEach(function(part, index, arr) {
arr[index] = arr[index] - offsetPreValue;
});
}
// console.log(traceValue.x)
var data = [traceValue, tracePreValue, traceChangeRate, traceChangeAbsolute];
var layout = {
showlegend: true,
colorway: ['green', 'black', 'blue', 'black'],
yaxis: {title: 'Value'},
yaxis2: {
title: 'Change',
overlaying: 'y',
side: 'right'
},
margin: {
l: 50,
r: 50,
b: 50,
t: 50,
pad: 4
},
legend: {
x: 0.2,
y: 0.9,
xanchor: 'right'
}
};
document.getElementById("chart").innerHTML = "";
Plotly.newPlot('chart', data, layout, {displayModeBar: true});
});
}).catch((error) => {
// handle the error
console.log(error);
});
} }
</script> </script>
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet"> <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
@@ -23,67 +121,16 @@
<script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
</head> </head>
<body> <body>
<div id='chart'></div> <h3>Data Graph</h3>
<div id='chart'><p>Loading...<br></p></div>
<select id="datafiles" onchange="run();"></select> <select id="datafiles" onchange="run();"></select>
<select id="numbers" onchange="run();"></select> <select id="numbers" onchange="run();"></select>
<select id="datatype" onchange="run();"> <input type="checkbox" id="showRrelativeValues" onclick = 'run();' unchecked ><label for="showRrelativeValues">Show relative values</label>
<option value="3">Value</option> <button onclick="run();">Refresh</button>
<option value="4">PreValue</option> &nbsp;&nbsp;|&nbsp;&nbsp;
<option value="5">Change-Rate</option> <button onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show data</button>
<option value="6">Change-Absolut</option>
</select>
<button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show data files</button> <button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show data files</button>
<!-- <button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</button> -->
<div id='editor' hidden='true'>
<textarea id="cnsl">
datefile = document.getElementById("datafiles").value;
numbername = document.getElementById("numbers").value;
datatype = document.getElementById("datatype").value;
//alert("Auslesen: " + datefile + " " + numbername);
_domainname = getDomainname();
fetch(_domainname + '/fileserver/log/data/' + datefile)
.then(response => {
// handle the response
if (response.status == 404) {
firework.launch("No log data available for " + dateString, 'warning', 10000);
}
response.text()
.then( result => {
var lines = result.split("\n");
var trace = {
x: [],
y: [],
type: 'scatter'
};
var timex = 1;
for (let line of lines) {
{
console.log(line);
if (line.split(",")[1] == numbername)
{
var value = line.split(",")[datatype];
var time = line.split(",")[0];
console.log("> "+time+" "+value+"\n");
trace.x.push(time);
// timex += 1;
trace.y.push(value);
}
}
}
console.log(trace);
var data = [trace];
Plotly.newPlot('chart', data);
});
}).catch((error) => {
// handle the error
console.log(error);
});
</textarea><br />
<button onclick="run();">run</button>
</div> </div>
<script> <script>

1
sd-card/html/index.html
View File

@@ -89,6 +89,7 @@
<li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li> <li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li>
<li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li> <li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li>
<li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Viewer</a></li> <li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Viewer</a></li>
<li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li>
</ul> </ul>
</li> </li>