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-31 21:59:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

Enhance UI (#1243)

Browse Source 
* Temporarily disable data file writing as it can cause crashs, see https://github.com/jomjol/AI-on-the-edge-device/issues/1225

* removed edit function in graph as we don't need that in a release

* .

* improve log viewer

* replaced logfile enable/disable with enum to select log level. At least errors always will be logged (as before)

* .

* .

* colorize log

* scroll down

* improve log reload
This commit is contained in:
CaCO3
2022-10-30 20:44:13 +01:00
committed by GitHub
parent ff726485ba
commit d2b93a7110
7 changed files with 176 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -745,7 +745,7 @@ textarea {
<td colspan="3" style="padding-left: 20px;">
<h4><input type="checkbox" id="Category_GPIO_enabled" value="1" onclick='UpdateAfterCategoryCheck()' unchecked >
<label for=Category_GPIO_enabled>GPIO Settings
<span class="GPIO_Item" > - Enabling GPIO handler, disable by default integrated flash light. Please enable it with GPIO4 (internal flash LED) settings or GPIO12 (external LED).</span></label>
<span class="GPIO_Item" > - Enabling GPIO handler, disable by default integrated flash light.<br>Please enable it with GPIO4 (internal flash LED) settings or GPIO12 (external LED).</span></label>
</h4>
</td>
</tr>
@@ -1249,18 +1249,20 @@ textarea {
<tr>
<td class="indent1">
<input type="checkbox" id="Debug_Logfile_enabled" value="1" onclick = 'InvertEnableItem("Debug", "Logfile")' unchecked >
<label for=Debug_Logfile_enabled><class id="Debug_Logfile_text" style="color:black;">Logfile</class></label>
<label for=Debug_Logfile_enabled><class id="Debug_Logfile_text" style="color:black;">Logfile Log Level</class></label>
</td>
<td>
<select id="Debug_Logfile_value1">
<option value="true" selected>true</option>
<option value="false" >false</option>
<option value="1" selected>ERROR</option> <!-- matches esp_log_level_t -->
<option value="2">WARNING</option>
<option value="3">INFO</option>
<option value="4">DEBUG</option>
</select>
</td>
<td class="description">
Turn on/off the extended logging
Set the level of the logging to the SD-Card.<br><b>Warning:</b> DEBUG or INFO might damage the SD-Card if enabled longterm due to excessive writes to the SD-Card!
</td>
</tr>
</tr>
<tr>
<td class="indent1">
<input type="checkbox" id="Debug_LogfileRetentionInDays_enabled" value="1" onclick = 'InvertEnableItem("Debug", "LogfileRetentionInDays")' unchecked >
@@ -1431,7 +1433,7 @@ function WriteParameter(_param, _category, _cat, _name, _optional, _number = -1)
}
if (!_isFound)
{
_zw_txt = "In the selectd field the value '" + textToFind + "' in the parameter '";
_zw_txt = "In the selected field the value '" + textToFind + "' in the parameter '";
_zw_txt = _zw_txt + _cat + "' in the field '" + _name + "' is invalid.\nPLEASE CHECK BEFORE SAVING!";
alert(_zw_txt);
}
@@ -1472,7 +1474,7 @@ function WriteParameter(_param, _category, _cat, _name, _optional, _number = -1)
}
if (!_isFound)
{
_zw_txt = "In the selectd field the value '" + textToFind + "' in the section '";
_zw_txt = "In the selected field the value '" + textToFind + "' in the section '";
_zw_txt = _zw_txt + _cat + "' in the field '" + _name + "' is invalid.\nPLEASE CHECK BEFORE SAVING!";
alert(_zw_txt);
}

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

@@ -1,4 +1,3 @@
<html>
<head>
<script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
@@ -18,22 +17,21 @@
var el = document.getElementById('cnsl');
el && eval(el.value);
}
</script>
</head>
<body>
<div id='chart'></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>
<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>
<button onclick="document.getElementById('editor').hidden = false; this.hidden = true;" >Editor</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;
@@ -84,9 +82,9 @@ alert("test");
</textarea><br />
<button onclick="run();">run</button>
</div>
<script>
function WriteModelFiles()
<script>
function WriteModelFiles()
{
list_data = getDATAList();
@@ -127,9 +125,7 @@ function WriteModelFiles()
WriteModelFiles();
WriteNumbers();
run();
run();
</script>
</body>
</html>
</html>

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

@@ -68,7 +68,7 @@
<ul class="submenu">
<li><a href="#" onclick="loadPage('backup.html');">Backup/Restore</a></li>
<li><a href="#" onclick="loadPage('ota_page.html');">OTA Update</a></li>
<li><a href="#" onclick="loadPage('fileserver/log/message/?readonly=true');">Log Viewer</a></li>
<li><a href="#" onclick="loadPage('log.html');">Log Viewer</a></li>
<li><a href="#" onclick="loadPage('reboot_page.html');">Reboot</a></li>
<li><a href="#" onclick="loadPage('info.html');">Info</a></li>
</ul>

100
sd-card/html/log.html Normal file
View File

@@ -0,0 +1,100 @@
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 2px;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 auto;
}
#log {
font-family: 'Courier New', Courier, monospace;
font-size: small;
}
</style>
</head>
<body>
<div class="box">
<div class="row header">
<button onClick="reload();">Reload</button>
<button onClick="window.open('logfileact');">Show full log</button>
<button onClick="window.location.href = '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 onClick="reload();">Reload</button>
<button onClick="window.open('logfileact');">Show full log</button>
<button onClick="window.location.href = 'fileserver/log/message/'">Show older log files</button>
</div>
</div>
</body>
<script>
function reload() {
// document.getElementById('log').innerHTML += "<br><b>Reloading...<b><br><br>";
document.getElementById('log').innerHTML += "<b>Reloading...</b>";
window.scrollBy(0,document.body.scrollHeight);
funcRequest('log');
}
function processLogLine(line, index, arr) {
if (line.includes("&lt;WRN&gt;")) {
arr[index] = "<span style=\"color:#e83c00\">" + line + "</span>";
}
else if (line.includes("&lt;ERR&gt;")) {
arr[index] = "<span style=\"color:red\"><b>" + line + "</b></span>";
}
else if (line.includes("&lt;DBG&gt;")) {
arr[index] = "<span style=\"color:gray\">" + line + "</span>";
}
arr[index] += "<br>";
}
async function funcRequest(url){
await fetch(url)
.then((res) => {
if (!res.ok) {
document.getElementById("log").innerHTML = "HTTP error " + res.status;
}
return res.text();
})
.then((log) => {
log = log.replace(/</g, "&lt;").replace(/>/g, "&gt;");
logArr = log.split("\n");
logArr.forEach(processLogLine);
document.getElementById('log').innerHTML = "<br>" + logArr.join("\n") + "&nbsp;";
window.scrollBy(0,document.body.scrollHeight);
})
.catch((err) => {
document.getElementById("log").innerHTML = err;
});
}
funcRequest('log');
</script>
</html>