mirror of
https://github.com/lumapu/ahoy.git
synced 2025-05-10 07:26:38 +02:00
* built visualization as xhr
* converted /update to xhr * started web serial console /serial * /save does not work yet - not debugged
This commit is contained in:
lumapu
parent
47c782e3f6
commit
8ae78842a8
16 changed files with 307 additions and 392 deletions
|
|
@ -16,8 +16,10 @@ function getAjax(url, ptr) {
|
|||
http.send(null);
|
||||
}
|
||||
function p() {
|
||||
if(http.readyState == 4)
|
||||
ptr(JSON.parse(http.responseText));
|
||||
if(http.readyState == 4) {
|
||||
if(null != http.responseText)
|
||||
ptr(JSON.parse(http.responseText));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,6 +62,13 @@ function sel(name, opt, selId) {
|
|||
|
||||
function div(cl) {
|
||||
e = document.createElement('div');
|
||||
e.classList.add(cl);
|
||||
e.classList.add(...cl);
|
||||
return e;
|
||||
}
|
||||
|
||||
function span(val, cl) {
|
||||
e = document.createElement('span');
|
||||
e.innerHTML = val;
|
||||
e.classList.add(...cl);
|
||||
return e;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,8 @@ def convert2Header(inFile, compress):
|
|||
|
||||
convert2Header("index.html", True)
|
||||
convert2Header("setup.html", True)
|
||||
convert2Header("visualization.html", False)
|
||||
convert2Header("update.html", False)
|
||||
convert2Header("visualization.html", True)
|
||||
convert2Header("update.html", True)
|
||||
convert2Header("serial.html", True)
|
||||
convert2Header("style.css", True)
|
||||
convert2Header("api.js", True)
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@
|
|||
<h1>AHOY</h1>
|
||||
<div id="content" class="content">
|
||||
<p>
|
||||
<a href="/visualization">Visualization</a><br/>
|
||||
<a href="/live">Visualization</a><br/>
|
||||
<br/>
|
||||
<a href="/setup">Setup</a><br/>
|
||||
<a href="/serial">Serial Console</a><br/>
|
||||
</p>
|
||||
<p><span class="des">Uptime: </span><span id="uptime"></span></p>
|
||||
<p><span class="des">ESP-Time: </span><span id="date"></span></p>
|
||||
|
|
@ -80,8 +81,10 @@
|
|||
html += "producing\n";
|
||||
|
||||
if(false == i["is_avail"]) {
|
||||
var date = new Date(i["ts_last_success"] * 1000);
|
||||
html += "-> last successful transmission: " + date.toLocaleString('de-DE', {timeZone: 'UTC'});
|
||||
if(i["ts_last_success"] > 0) {
|
||||
var date = new Date(i["ts_last_success"] * 1000);
|
||||
html += "-> last successful transmission: " + date.toLocaleString('de-DE', {timeZone: 'UTC'});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -100,13 +103,19 @@
|
|||
}
|
||||
|
||||
function parse(obj) {
|
||||
parseSys(obj["system"]);
|
||||
parseStat(obj["statistics"]);
|
||||
parseIv(obj["inverter"]);
|
||||
parseWarnInfo(obj["warnings"], obj["infos"]);
|
||||
document.getElementById("refresh").innerHTML = obj["refresh_interval"];
|
||||
if(false == intervalSet)
|
||||
window.setInterval("getAjax('/api/index', parse)", obj["refresh_interval"] * 1000);
|
||||
if(null != obj) {
|
||||
parseSys(obj["system"]);
|
||||
parseStat(obj["statistics"]);
|
||||
parseIv(obj["inverter"]);
|
||||
parseWarnInfo(obj["warnings"], obj["infos"]);
|
||||
document.getElementById("refresh").innerHTML = obj["refresh_interval"];
|
||||
if(false == intervalSet) {
|
||||
window.setInterval("getAjax('/api/index', parse)", obj["refresh_interval"] * 1000);
|
||||
intervalSet = true;
|
||||
}
|
||||
}
|
||||
else
|
||||
document.getElementById("refresh").innerHTML = "n/a";
|
||||
}
|
||||
|
||||
getAjax("/api/index", parse);
|
||||
|
|
|
|||
50
tools/esp8266/html/serial.html
Normal file
50
tools/esp8266/html/serial.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Serial Console</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Serial Console</h1>
|
||||
<div id="content" class="content">
|
||||
<textarea rows="20" cols="90" id="serial" readonly></textarea>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="right" id="version"></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function parseSys(obj) {
|
||||
document.getElementById("version").innerHTML = "Git SHA: " + obj["build"] + " :: " + obj["version"];
|
||||
}
|
||||
var con = document.getElementById("serial");
|
||||
if (!!window.EventSource) {
|
||||
var source = new EventSource('/events');
|
||||
|
||||
source.addEventListener('open', function(e) {
|
||||
//console.log("Events Connected");
|
||||
}, false);
|
||||
|
||||
source.addEventListener('error', function(e) {
|
||||
if (e.target.readyState != EventSource.OPEN) {
|
||||
//console.log("Events Disconnected");
|
||||
}
|
||||
}, false);
|
||||
|
||||
source.addEventListener('serial', function(e) {
|
||||
//var ascii = "";
|
||||
//for(i = 0; i < e.data.length; i++)
|
||||
// ascii += e.data.charCodeAt(i).toString(16) + " ";
|
||||
//console.log(ascii);
|
||||
con.value += e.data.replace(/\<rn\>/g, '\r\n');
|
||||
con.scrollTop = con.scrollHeight;
|
||||
}, false);
|
||||
}
|
||||
|
||||
getAjax("/api/system", parseSys);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -262,13 +262,15 @@
|
|||
}
|
||||
|
||||
function parse(root) {
|
||||
parseSys(root["system"]);
|
||||
parseIv(root["inverter"]);
|
||||
parseMqtt(root["mqtt"]);
|
||||
parseNtp(root["ntp"]);
|
||||
parsePinout(root["pinout"]);
|
||||
parseRadio(root["radio"]);
|
||||
parseSerial(root["serial"]);
|
||||
if(null != root) {
|
||||
parseSys(root["system"]);
|
||||
parseIv(root["inverter"]);
|
||||
parseMqtt(root["mqtt"]);
|
||||
parseNtp(root["ntp"]);
|
||||
parsePinout(root["pinout"]);
|
||||
parseRadio(root["radio"]);
|
||||
parseSerial(root["serial"]);
|
||||
}
|
||||
}
|
||||
|
||||
getAjax("/api/setup", parse);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>Update</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{#HEAD}
|
||||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Update</h1>
|
||||
|
|
@ -13,13 +13,21 @@
|
|||
Make sure that you have noted all or settings before starting an update. New versions maybe changed their memory layout which remains in default settings.
|
||||
</div>
|
||||
<br/><br/>
|
||||
{#CONTENT}
|
||||
<form method="POST" action="/update" enctype="multipart/form-data" accept-charset="utf-8">
|
||||
<input type="file" name="update"><input type="submit" value="Update">
|
||||
</form>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="{#IP}/">Home</a></p>
|
||||
<p class="right">AHOY :: {#VERSION}</p>
|
||||
<p class="right"><a href="/reboot">Reboot</a></p>
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="right" id="version"></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function parseSys(obj) {
|
||||
document.getElementById("version").innerHTML = "Git SHA: " + obj["build"] + " :: " + obj["version"];
|
||||
}
|
||||
|
||||
getAjax("/api/system", parseSys);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,116 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Index - {DEVICE}</title>
|
||||
<title>Live</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<script type="text/javascript">
|
||||
getAjax('/livedata', 'livedata');
|
||||
window.setInterval("getAjax('/livedata', 'livedata')", {JS_TS});
|
||||
|
||||
function getAjax(url, resid) {
|
||||
var http = null;
|
||||
http = new XMLHttpRequest();
|
||||
if(http != null) {
|
||||
http.open("GET", url, true);
|
||||
http.onreadystatechange = print;
|
||||
http.send(null);
|
||||
}
|
||||
|
||||
function print() {
|
||||
if(http.readyState == 4) {
|
||||
document.getElementById(resid).innerHTML = http.responseText;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
</style>
|
||||
<script type="text/javascript" src="api.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>AHOY - {DEVICE}</h1>
|
||||
<h1>AHOY</h1>
|
||||
<div id="content" class="content">
|
||||
<div id="livedata"></div>
|
||||
<p>Every {TS}seconds the values are updated</p>
|
||||
<div id="live"></div>
|
||||
<p>Every <span id="refresh"></span> seconds the values are updated</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p class="left">© 2022</p>
|
||||
<p class="left"><a href="/">Home</a></p>
|
||||
<p class="right">AHOY :: {VERSION}</p>
|
||||
<p class="right" id="version"></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var intervalSet = false;
|
||||
function parseSys(obj) {
|
||||
document.getElementById("version").innerHTML = "Git SHA: " + obj["build"] + " :: " + obj["version"];
|
||||
}
|
||||
|
||||
function parseIv(obj, root) {
|
||||
var ivHtml = [];
|
||||
|
||||
var tDiv = div(["ch-all", "iv"]);
|
||||
tDiv.appendChild(span("Total", ["head"]));
|
||||
var total = new Array(root.ch0_fld_names.length).fill(0);
|
||||
if(obj.length > 1)
|
||||
ivHtml.push(tDiv);
|
||||
|
||||
for(var iv of obj) {
|
||||
main = div(["iv"]);
|
||||
var ch0 = div(["ch-iv"]);
|
||||
var ctrl = (iv["power_limit_active"]) ? "" : " (not controlled)";
|
||||
ch0.appendChild(span(iv["name"] + " Limit " + iv["power_limit_read"] + "%" + ctrl + " | last Alarm: " + iv["last_alarm"], ["head"]));
|
||||
|
||||
for(var j = 0; j < root.ch0_fld_names.length; j++) {
|
||||
var val = Math.round(iv["ch"][0][j] * 100) / 100;
|
||||
if(val > 0) {
|
||||
var sub = div(["subgrp"]);
|
||||
sub.appendChild(span(val + " " + span(root["ch0_fld_units"][j], ["unit"]).innerHTML, ["value"]));
|
||||
sub.appendChild(span(root["ch0_fld_names"][j], ["info"]));
|
||||
ch0.appendChild(sub);
|
||||
|
||||
switch(j) {
|
||||
case 2: total[j] += val; break;
|
||||
case 6: total[j] += val; break;
|
||||
case 7: total[j] += val; break;
|
||||
case 8: total[j] += val; break;
|
||||
case 10: total[j] += val; break;
|
||||
}
|
||||
}
|
||||
}
|
||||
main.appendChild(ch0);
|
||||
|
||||
|
||||
for(var i = 1; i < 5; i++) {
|
||||
var ch = div(["ch"]);
|
||||
ch.appendChild(span(("" == iv["ch_names"][i]) ? ("CHANNEL " + i) : iv["ch_names"][i], ["head"]));
|
||||
|
||||
for(var j = 0; j < root.fld_names.length; j++) {
|
||||
var val = Math.round(iv["ch"][i][j] * 100) / 100;
|
||||
if(val > 0) {
|
||||
ch.appendChild(span(val + " " + span(root["fld_units"][j], ["unit"]).innerHTML, ["value"]));
|
||||
ch.appendChild(span(root["fld_names"][j], ["info"]));
|
||||
}
|
||||
}
|
||||
main.appendChild(ch);
|
||||
}
|
||||
|
||||
var ts = div(["ts"]);
|
||||
var date = new Date(iv["ts_last_success"] * 1000);
|
||||
ts.innerHTML = "Last received data requested at: " + date.toLocaleString('de-DE', {timeZone: 'UTC'});
|
||||
main.appendChild(ts);
|
||||
ivHtml.push(main);
|
||||
}
|
||||
|
||||
// total
|
||||
if(obj.length > 1) {
|
||||
for(var j = 0; j < root.ch0_fld_names.length; j++) {
|
||||
var val = total[j];
|
||||
if(val > 0) {
|
||||
var sub = div(["subgrp"]);
|
||||
sub.appendChild(span(val + " " + span(root["ch0_fld_units"][j], ["unit"]).innerHTML, ["value"]));
|
||||
sub.appendChild(span(root["ch0_fld_names"][j], ["info"]));
|
||||
tDiv.appendChild(sub);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("live").replaceChildren(...ivHtml);
|
||||
}
|
||||
|
||||
function parse(obj) {
|
||||
if(null != obj) {
|
||||
parseSys(obj["system"]);
|
||||
parseIv(obj["inverter"], obj);
|
||||
document.getElementById("refresh").innerHTML = obj["refresh_interval"];
|
||||
if(false == intervalSet) {
|
||||
window.setInterval("getAjax('/api/live', parse)", obj["refresh_interval"] * 1000);
|
||||
intervalSet = true;
|
||||
}
|
||||
}
|
||||
else
|
||||
document.getElementById("refresh").innerHTML = "n/a";
|
||||
}
|
||||
|
||||
getAjax("/api/live", parse);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue