Skip to content

Commit

Permalink
WebUI: Implement auto page refresh function for 'Overview' and 'Data …
Browse files Browse the repository at this point in the history 
…Graph' (#62)

* Remove leer.txt

* Disable console logging

* Switch menu position: Data <-> Settings

* Log Viewer: Rename button 'reload' to 'refresh'

* Implementent auto page refresh function

* Refresh overview img only when fully loaded + Show fallback img on error

* Activate caching for gif and svg files

* Overview: Add image loading spinner

* Overview: Add manual refresh button loading spinner
  • Loading branch information
@Slider0007
Slider0007 authored Aug 24, 2023
1 parent 9cff3e5 commit 3ab1eda
Show file tree
Hide file tree
Showing 15 changed files with 295 additions and 105 deletions.
6 changes: 4 additions & 2 deletions code/components/jomjol_fileserver_ota/server_help.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,10 @@ esp_err_t send_file(httpd_req_t *req, std::string filename)
endsWith(filename, ".jpg") ||
endsWith(filename, ".jpeg") ||
endsWith(filename, ".ico") ||
endsWith(filename, ".png")) {

endsWith(filename, ".gif") ||
endsWith(filename, ".svg") ||
endsWith(filename, ".png"))
{
if (filename == "/sdcard/html/setup.html") {
httpd_resp_set_hdr(req, "Clear-Site-Data", "\"*\"");
}
Expand Down
Empty file removed sd-card/demo/leer.txt
View file
Empty file.
Empty file removed sd-card/firmware/leer.txt
View file
Empty file.
8 changes: 4 additions & 4 deletions sd-card/html/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function LoadFwVersion() {
if (xhttp.status >= 200 && xhttp.status < 300) {
fwVersion = xhttp.responseText;
document.getElementById("Version").innerHTML = "Slider0007 Fork | " + fwVersion;
console.log(fwVersion);
//console.log(fwVersion);
compareVersions();
}
else {
Expand All @@ -104,7 +104,7 @@ function LoadWebUiVersion() {
xhttp.addEventListener('load', function(event) {
if (xhttp.status >= 200 && xhttp.status < 300) {
webUiVersion = xhttp.responseText;
console.log("Web UI Version: " + webUiVersion);
//console.log("Web UI Version: " + webUiVersion);
compareVersions();
}
else {
Expand All @@ -115,7 +115,7 @@ function LoadWebUiVersion() {

try {
url = _domainname + '/info?type=HTMLVersion';
console.log("url");
//console.log("url: " + url);
xhttp.open("GET", url, true);
xhttp.send();
}
Expand All @@ -134,7 +134,7 @@ function compareVersions() {
fWGitHash = arr[arr.length - 1].substring(0, 7);
arr = webUiVersion.split(" ");
webUiHash = arr[arr.length - 1].substring(0, 7);
console.log("FW Hash: " + fWGitHash + ", Web UI Hash: " + webUiHash);
//console.log("FW Hash: " + fWGitHash + ", Web UI Hash: " + webUiHash);

if (fWGitHash != webUiHash) {
firework.launch("The version of the web interface (" + webUiHash +
Expand Down
118 changes: 98 additions & 20 deletions sd-card/html/graph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,44 @@
vertical-align: middle;
}

input[type=number] {
width: 45px;
min-width: 45px;
max-width: 45px;
margin-right: 0px;
padding: 3px 5px;
display: inline-block;
border: 1px solid #ccc;
font-size: 16px;
vertical-align: middle;
}

.button {
padding: 5px 10px;
width: 160px;
font-size: 16px;
}

input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 1px solid red;
}

input:invalid {
background-color: rgba(255, 0, 0, 0.25);
border: 1px solid red;
}
</style>

<script>
function addZero(i)
{
if (i < 10) {
i = "0" + i;
}
return i;
}

function run() {
datefile = document.getElementById("datafiles").value;
numbername = document.getElementById("numbers").value;
Expand Down Expand Up @@ -159,7 +189,7 @@

var layout = {
showlegend: true,
colorway: ['green', 'black', 'blue', 'black'],
colorway: ['green', 'black', 'blue', 'magenta', 'cyan'],

yaxis: {title: 'Value'},
yaxis2: {
Expand All @@ -185,6 +215,13 @@

document.getElementById("chart").innerHTML = "";
Plotly.newPlot('chart', data, layout, {displayModeBar: true});

// Update refresh timestamp
var d = new Date();
var h = addZero(d.getHours());
var m = addZero(d.getMinutes());
var s = addZero(d.getSeconds());
$('#timestamp').html("Last Refresh: " + (h + ":" + m + ":" + s));
});
}).catch((error) => {
// handle the error
Expand All @@ -199,15 +236,25 @@

<body>
<h2>Data Graph</h2>
<div id='chart'><p>Loading...<br></p></div>
Number sequence:
<select id="numbers" onchange="run();"></select>
Day:
<select id="datafiles" onchange="run();"></select>
<input type="checkbox" id="showRelativeValues" onclick = 'run();' unchecked ><label for="showRelativeValues">Show relative values</label><br><br>
<button class="button" onclick="run();">Refresh</button>
<button class="button" onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show Data Viewer</button>
<button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
<div style="margin-top:20px;margin-bottom:0px;">
Number sequence: <select id="numbers" onchange="run();"></select>
Day: <select id="datafiles" onchange="run();"></select>
<input type="checkbox" id="showRelativeValues" onclick = 'run();' unchecked ><label for="showRelativeValues">Show relative values</label><br><br>
</div>
<div>
<input type="checkbox" id="AutoRefreshEnabled" value="1" onchange="AutoRefreshContent();">
<label for=AutoRefreshEnabled><class id="AutoRefreshEnabled" style="color:black;">Auto Refresh</class></label>
<input required type="number" style="margin-left: 18px;" name="AutoRefreshTime" id="AutoRefreshTime" size="13" min="1" step="1" value="60"
oninput="(!validity.rangeUnderflow||(value=1));" onchange="AutoRefreshContent();"> s
<output style="margin-left:48px" id="timestamp" >Last Refresh:</output>
</div>
<div style="margin-top:10px;margin-bottom:20px">
<button class="button" onclick="run();">Refresh</button>
<button class="button" onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show Data Viewer</button>
<button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
</div>
<div id='chart'><p>Loading graph...<br></p></div>


<script>
function WriteDataFiles()
Expand Down Expand Up @@ -248,18 +295,49 @@ <h2>Data Graph</h2>
}
}

WriteDataFiles();
WriteNumbers();

function Refresh() {
setTimeout (function() {
run();
Refresh();
}, 300000);
}
function AutoRefreshContent()
{
if (document.getElementById("AutoRefreshEnabled").checked == true) { // Activated -> Set timeout

if (autoRefreshTimeoutHandle) { // Clear actual timeout handle
clearTimeout(autoRefreshTimeoutHandle);
autoRefreshTimeoutHandle = null;
}

var autoRefreshTime = document.getElementById("AutoRefreshTime").value * 1000;

if (autoRefreshTime == null || autoRefreshTime == 0) { // If no value is set or value is zero, reset checkbox
document.getElementById("AutoRefreshEnabled").checked = false;
}
else {
autoRefreshTimeoutHandle = setTimeout(function() {
run();
AutoRefreshContent();
}, autoRefreshTime);
}
}
else { // Deactivated -> Reset running timeout
if (autoRefreshTimeoutHandle) {
clearTimeout(autoRefreshTimeoutHandle);
autoRefreshTimeout = null;
}
}
}


function init()
{
autoRefreshTimeoutHandle = null; // Init auto refresh handle
document.getElementById("AutoRefreshEnabled").checked = false; // Reset auto refresh checkbox at page init
WriteDataFiles();
WriteNumbers();
run();
}


init();

run();
Refresh();
</script>
</body>
</html>
Binary file added sd-card/html/img_loading.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sd-card/html/img_not_available.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 21 additions & 20 deletions sd-card/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
if (streamPopup) // Ensure that stream popup is closed because it's blocking web interface
streamPopup.close();

console.log("loadPage(" + page + ")");
//console.log("loadPage(" + page + ")");
document.cookie = "page="+page + "; path=/";
document.getElementById('maincontent').src = page;

Expand Down Expand Up @@ -81,24 +81,6 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
<div class="menu" onmouseover="resetMenu()">
<ul>
<li><a href="#" onclick="loadPage('overview.html?v=$COMMIT_HASH');">Overview</a></li>
<li><a>Settings <i class="arrow down"></i></a>
<ul class="submenu">
<li><a href="#" onclick="loadPage('set_fallbackvalue.html?v=$COMMIT_HASH');">Set "Fallback Value"</a></li>
<li><a href="#" onclick="loadPage('edit_config_param.html?v=$COMMIT_HASH');">Configuration</a></li>
<li><a>Alignment <i class="arrow right"></i></a>
<ul>
<li><a href="#" onclick="loadPage('edit_reference.html?v=$COMMIT_HASH');">Reference Image</a></li>
<li><a href="#" onclick="loadPage('edit_alignment.html?v=$COMMIT_HASH');">Alignment Marker</a></li>
</ul>
</li>
<li><a><strong>R</strong>egions <strong>O</strong>f <strong>I</strong>nterest <i class="arrow right"></i></a>
<ul>
<li><a href="#" onclick="loadPage('edit_digits.html?v=$COMMIT_HASH');">Digit ROI</a></li>
<li><a href="#" onclick="loadPage('edit_analog.html?v=$COMMIT_HASH');">Analog ROI</a></li>
</ul>
</li>
</ul>


<li><a>Data<i class="arrow down"></i></a>
<ul class="submenu">
Expand All @@ -109,6 +91,24 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
</ul>
</li>

<li><a>Settings <i class="arrow down"></i></a>
<ul class="submenu">
<li><a href="#" onclick="loadPage('set_fallbackvalue.html?v=$COMMIT_HASH');">Set "Fallback Value"</a></li>
<li><a href="#" onclick="loadPage('edit_config_param.html?v=$COMMIT_HASH');">Configuration</a></li>
<li><a>Alignment <i class="arrow right"></i></a>
<ul>
<li><a href="#" onclick="loadPage('edit_reference.html?v=$COMMIT_HASH');">Reference Image</a></li>
<li><a href="#" onclick="loadPage('edit_alignment.html?v=$COMMIT_HASH');">Alignment Marker</a></li>
</ul>
</li>
<li><a><strong>R</strong>egions <strong>O</strong>f <strong>I</strong>nterest <i class="arrow right"></i></a>
<ul>
<li><a href="#" onclick="loadPage('edit_digits.html?v=$COMMIT_HASH');">Digit ROI</a></li>
<li><a href="#" onclick="loadPage('edit_analog.html?v=$COMMIT_HASH');">Analog ROI</a></li>
</ul>
</li>
</ul>
</li>

<li><a>System <i class="arrow down"></i></a>
<ul class="submenu">
Expand All @@ -125,6 +125,7 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
<li><a href="#" onclick="loadPage('info.html?v=$COMMIT_HASH');">Info</a></li>
</ul>
</li>

<li><a>Manual Control <i class="arrow down"></i></a>
<ul class="submenu">
<li><a href="#" onclick="flow_start()">Start Round</a></li>
Expand All @@ -147,7 +148,7 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
if (getCookie("page") == "" || getCookie("page") == "reboot_page.html?v=$COMMIT_HASH") {
document.cookie = "page=overview.html?v=$COMMIT_HASH" + "; path=/";
}
console.log("Loading page: " + getCookie("page"));
//console.log("Loading page: " + getCookie("page"));
document.getElementById('maincontent').src = getCookie("page");


Expand Down
4 changes: 2 additions & 2 deletions sd-card/html/log.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@
<body>
<div class="box">
<div class="row header">
<button class="button" onClick="reload();">Reload</button>
<button class="button" onClick="reload();">Refresh</button>
<button class="button" onClick="window.open(getDomainname() + '/logfileact');">Show Full Log</button>
<button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/message/'">Show Older Log Files</button>
</div>
<div class="row content" id="log"><br><br><br><b>Loading logfile, please wait...</b></div>
<div class="row footer">
<button class="button" onClick="reload();">Reload</button>
<button class="button" onClick="reload();">Refresh</button>
<button class="button" onClick="window.open(getDomainname() + '/logfileact');">Show Full Log</button>
<button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/message/'">Show Older Log Files</button>
</div>
Expand Down
Loading

0 comments on commit 3ab1eda

Please sign in to comment.