Skip to content

Commit

Permalink
enhance data pages (#2088)
Browse files Browse the repository at this point in the history 
* enhance data pages

* add checkbox to show relative values

* remove static entries, they get overwritten by dynamic oes

---------

Co-authored-by: CaCO3 <[email protected]>
  • Loading branch information
@caco3
caco3 and CaCO3 authored Feb 26, 2023
1 parent 9a9aa68 commit 53ff190
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 77 deletions.
20 changes: 12 additions & 8 deletions sd-card/html/data.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
body {
height: 100%;
margin: 2px;
font-family: Arial, Helvetica, sans-serif;
}

.box {
Expand Down Expand Up @@ -33,19 +34,22 @@
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
</head>
<body>
<h3>Todays Data</h3>
<h4>Last part of Todays Data</h4>
<div class="box">
<div class="row header">
<button onClick="reload();">Reload</button>
<button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button>
<button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button>
<button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button>
<button onClick="reload();">Refresh</button>
<button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</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>
</div>
<div class="row content" id="data"><br><br><br><b>Loading Data file, please wait...</b></div>
<div class="row footer">
<button onClick="reload();">Reload</button>
<button onClick="window.open(getDomainname() + '/datafileact');">Show full data</button>
<button onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show older data files</button>
<button onClick="window.location.href = 'graph.html?v=$COMMIT_HASH'">Show graph</button>
<button onClick="reload();">Refresh</button>
<button onClick="window.open(getDomainname() + '/datafileact');">Show Full File</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>
<p></p>
</div>
</div>
</body>
Expand Down
6 changes: 0 additions & 6 deletions sd-card/html/edit_config_param.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,9 +462,6 @@ <h4><input type="checkbox" id="Category_Analog_enabled" value="1" onclick = 'Up
<br>
<b>Postprocessing Individual Parameters:
<select id="Numbers_value1" onchange="numberChanged()">
<option value="0" selected>default</option>
<option value="1" >NT</option>
<option value="2" >HT</option>
</select></b>
</td>
</tr>
Expand Down Expand Up @@ -786,9 +783,6 @@ <h4>
<br>
<b>Postprocessing Individual Parameters:
<select id="NumbersInfluxDB_value1" onchange="numberInfluxDBChanged()">
<option value="0" selected>default</option>
<option value="1" >NT</option>
<option value="2" >HT</option>
</select></b>
</td>
</tr>
Expand Down
173 changes: 110 additions & 63 deletions sd-card/html/graph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,85 +5,132 @@
<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="readconfigparam.js?v=$COMMIT_HASH"></script>

<style>
textarea {
width: 600px;
height: 300px;
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>

<script>
function run() {
var el = document.getElementById('cnsl');
el && eval(el.value);
datefile = document.getElementById("datafiles").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>
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
<script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
</head>
<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="numbers" onchange="run();"></select>
<select id="datatype" onchange="run();">
<option value="3">Value</option>
<option value="4">PreValue</option>
<option value="5">Change-Rate</option>
<option value="6">Change-Absolut</option>
</select>

<input type="checkbox" id="showRrelativeValues" onclick = 'run();' unchecked ><label for="showRrelativeValues">Show relative values</label>
<button onclick="run();">Refresh</button>
&nbsp;&nbsp;|&nbsp;&nbsp;
<button onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show data</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>

<script>
Expand Down
1 change: 1 addition & 0 deletions sd-card/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ <h2>An ESP32 all inclusive neural network recognition system for meter digitaliz
<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('data.html?v=$COMMIT_HASH');">Data Viewer</a></li>
<li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li>
</ul>
</li>

Expand Down

0 comments on commit 53ff190

Please sign in to comment.