3pp-mirror/ahoy
1
0
Fork 0
mirror of https://github.com/lumapu/ahoy.git synced 2025-05-10 23:46:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

* built visualization as xhr

Browse source 
* converted /update to xhr
* started web serial console /serial
* /save does not work yet - not debugged
This commit is contained in:
lumapu 2022-09-07 23:09:47 +02:00
parent 47c782e3f6
commit 8ae78842a8
16 changed files with 307 additions and 392 deletions
Download patch file Download diff file Expand all files Collapse all files

127
tools/esp8266/html/visualization.html
View file

@ -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">&copy 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>