3pp-mirror/ahoy
1
0
Fork 0
mirror of https://github.com/lumapu/ahoy.git synced 2025-06-24 05:16:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

* improved api (now webApi)

Browse source 
* converted index to static page
This commit is contained in:
lumapu 2022-08-28 22:32:34 +02:00
parent 08d8658737
commit 440d386ec0
11 changed files with 266 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

65
tools/esp8266/html/api.js Normal file
View file

@ -0,0 +1,65 @@
function toggle(name, hide) {
var elm = document.getElementsByName(name)[0];
if(hide) {
if(!elm.classList.contains("hide"))
elm.classList.add("hide");
}
else
elm.classList.remove('hide');
}
function getAjax(url, ptr) {
var http = new XMLHttpRequest();
if(http != null) {
http.open("GET", url, true);
http.onreadystatechange = p;
http.send(null);
}
function p() {
if(http.readyState == 4)
ptr(JSON.parse(http.responseText));
}
}
function des(val) {
e = document.createElement('p');
e.classList.add("subdes");
e.innerHTML = val;
return e;
}
function lbl(id, val) {
e = document.createElement('label');
e.htmlFor = id;
e.innerHTML = val;
return e;
}
function inp(name, val, max=32, cl=["text"]) {
e = document.createElement('input');
e.classList.add(...cl);
e.name = name;
e.value = val;
e.maxLength = max;
return e;
}
function sel(name, opt, selId) {
e = document.createElement('select');
e.name = name;
for(it of opt) {
o = document.createElement('option');
o.value = it[0];
o.innerHTML = it[1];
if(it[0] == selId)
o.selected = true;
e.appendChild(o);
}
return e;
}
function div(cl) {
e = document.createElement('div');
e.classList.add(cl);
return e;
}

37
tools/esp8266/html/convert.py
View file

@ -7,30 +7,36 @@ def convert2Header(inFile, compress):
define = inFile.split(".")[0].upper()
define2 = inFile.split(".")[1].upper()
inFileVarName = inFile.replace(".", "_")
print(inFile + ", compress: " + str(compress))
if os.getcwd()[-4:] != "html":
print("ok")
outName = "html/" + "h/" + inFileVarName + ".h"
inFile = "html/" + inFile
else:
outName = "h/" + inFileVarName + ".h"
f = open(inFile, "r")
data = f.read().replace('\n', '')
data = f.read()
f.close()
if False == compress:
if fileType == "html":
if fileType == "html":
if False == compress:
data = data.replace('\n', '')
data = re.sub(r"\>\s+\<", '><', data) # whitespaces between xml tags
data = re.sub(r"(\s?\;|\}|\>|\{|\=)\s+", r'\1', data) # whitespaces inner javascript
length = len(data) # get unescaped length
data = re.sub(r"\"", '\\\"', data) # escape quotation marks
else:
data = re.sub(r"(\;|\}|\:|\{)\s+", r'\1', data) # whitespaces inner css
length = len(data) # get unescaped length
else:
data = re.sub(r"\>\s+\<", '><', data) # whitespaces between xml tags
data = re.sub(r"(\;|\}|\>|\{)\s+", r'\1', data) # whitespaces inner javascript
data = re.sub(r"(\r\n|\r|\n)(\s+|\s?)", '', data) # whitespaces inner javascript
length = len(data) # get unescaped length
if False == compress:
data = re.sub(r"\"", '\\\"', data) # escape quotation marks
elif fileType == "js":
#data = re.sub(r"(\r\n|\r|\n)(\s+|\s?)", '', data) # whitespaces inner javascript
#data = re.sub(r"\s?(\=|\!\=|\{|,)+\s?", r'\1', data) # whitespaces inner javascript
length = len(data) # get unescaped length
if False == compress:
data = re.sub(r"\"", '\\\"', data) # escape quotation marks
else:
data = data.replace('\n', '')
data = re.sub(r"(\;|\}|\:|\{)\s+", r'\1', data) # whitespaces inner css
length = len(data) # get unescaped length # get unescaped length
f = open(outName, "w")
f.write("#ifndef __{}_{}_H__\n".format(define, define2))
@ -52,8 +58,9 @@ def convert2Header(inFile, compress):
f.write("#endif /*__{}_{}_H__*/\n".format(define, define2))
f.close()
convert2Header("index.html", False)
convert2Header("index.html", True)
convert2Header("setup.html", True)
convert2Header("visualization.html", False)
convert2Header("update.html", False)
convert2Header("style.css", False)
convert2Header("style.css", True)
convert2Header("api.js", True)

74
tools/esp8266/html/index.html
View file

@ -1,44 +1,13 @@
<!doctype html>
<html>
<head>
<title>Index - {DEVICE}</title>
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
getAjax('/uptime', 'uptime');
getAjax('/cmdstat', 'cmds');
window.setInterval("getAjax('/uptime', 'uptime')", {JS_TS});
window.setInterval("getAjax('/cmdstat', 'cmds')", {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;
}
}
}
function getInverterInfo(data){
var http = null;
http = new XMLHttpRequest();
if(http != null) {
http.open("POST", "/api");
http.setRequestHeader("Accept", "application/json");
http.setRequestHeader("Content-Type", "application/json");
http.send(data);
}
}
</script>
<script type="text/javascript" src="api.js"></script>
</head>
<body>
<h1>AHOY - {DEVICE}</h1>
<h1>AHOY</h1>
<div id="content" class="content">
<p>
<a href="/visualization">Visualization</a><br/>
@ -46,7 +15,7 @@
<a href="/setup">Setup</a><br/>
</p>
<p><span class="des">Uptime: </span><span id="uptime"></span></p>
<p><span class="des">Statistics: </span><pre id="cmds"></pre></p>
<p><span class="des">Statistics: </span><pre id="stat"></pre></p>
<p>Every {TS}seconds the values are updated</p>
<div id="note">
@ -64,9 +33,40 @@
<div id="footer">
<p class="left">&copy 2022</p>
<p class="left"><a href="/update">Update Firmware</a></p>
<p class="right">AHOY :: {VERSION}</p>
<p class="right" id="version"></p>
<p class="right"><a href="/reboot">Reboot</a></p>
<p class="right">Git SHA: {BUILD}</p>
</div>
<script type="text/javascript">
function parseSys(obj) {
document.getElementById("version").innerHTML = "Git SHA: " + obj["build"] + " :: " + obj["version"];
var date = new Date(obj["ts_now"] * 1000);
var up = obj["ts_uptime"];
var days = parseInt(up / 86400) % 365;
var hrs = parseInt(up / 3600) % 24;
var min = parseInt(up / 60) % 60;
var sec = up % 60;
document.getElementById("uptime").innerHTML = days + " Days, "
+ ("0"+hrs).substr(-2) + ":"
+ ("0"+min).substr(-2) + ":"
+ ("0"+sec).substr(-2) + "; now: "
+ ("0"+date.getHours()).substr(-2) + ":"
+ ("0"+date.getMinutes()).substr(-2) + ":"
+ ("0"+date.getSeconds()).substr(-2);
}
function parseStat(obj) {
document.getElementById("stat").innerHTML = "RX success: " + obj["rx_success"]
+ "\nRX fail: " + obj["rx_fail"]
+ "\nFrames received: " + obj["frame_cnt"]
+ "\nTX Cnt: " + obj["tx_cnt"];
}
window.setInterval("getAjax('/api/system', parseSys)", 30000);
window.setInterval("getAjax('/api/system', parseStat)", 30000);
getAjax("/api/system", parseSys);
getAjax("/api/statistics", parseStat);
</script>
</body>
</html>

146
tools/esp8266/html/setup.html
View file

@ -4,49 +4,7 @@
<title>Setup</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
function toggle(name, hide) {
var elm = document.getElementsByName(name)[0];
if(hide) {
if(!elm.classList.contains("hide"))
elm.classList.add("hide");
}
else
elm.classList.remove('hide');
}
function load() {
document.querySelectorAll('input[name^="inv"][name$="Addr"]').forEach(elm => {
elm.addEventListener("keyup", (e) => {
serial = elm.value.substring(0,4);
iv = elm.name.substring(3,4);
max = 0;
for(i=0;i<4;i++) {
toggle("inv"+iv+"ModPwr"+i, true);
toggle("inv"+iv+"ModName"+i, true);
}
toggle("lbl"+iv+"ModPwr", true);
toggle("lbl"+iv+"ModName", true);
if(serial == "1161") max = 4;
else if(serial == "1141") max = 2;
else if(serial == "1121") max = 1;
for(i=0;i<max;i++) {
toggle("inv"+iv+"ModPwr"+i, false);
toggle("inv"+iv+"ModName"+i, false);
}
if(max != 0) {
toggle("lbl"+iv+"ModPwr", false);
toggle("lbl"+iv+"ModName", false);
}
});
evt = document.createEvent("HTMLEvents");
evt.initEvent("keyup", false, true);
elm.dispatchEvent(evt);
});
}
</script>
<script type="text/javascript" src="api.js"></script>
</head>
<body onload="load()">
<h1>Setup</h1>
@ -60,7 +18,7 @@
<label for="device">Device Name</label>
<input type="text" name="device" class="text"/>
</fieldset>
<button type="button" class="s_collapsible">WiFi</button>
<div class="s_content">
<fieldset>
@ -141,7 +99,6 @@
</form>
</div>
</div>
<div id="footer">
<p class="left"><a href="/">Home</a></p>
<p class="left"><a href="/update">Update Firmware</a></p>
@ -149,14 +106,45 @@
<p class="right"><a href="/factory">Factory Reset</a></p>
<p class="right"><a href="/reboot">Reboot</a></p>
</div>
<script type="text/javascript">
for(it of document.getElementsByClassName("s_collapsible")) {
it.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
content.style.display = (content.style.display === "block") ? "none" : "block";
function load() {
document.querySelectorAll('input[name^="inv"][name$="Addr"]').forEach(elm => {
elm.addEventListener("keyup", (e) => {
serial = elm.value.substring(0,4);
iv = elm.name.substring(3,4);
max = 0;
for(i=0;i<4;i++) {
toggle("inv"+iv+"ModPwr"+i, true);
toggle("inv"+iv+"ModName"+i, true);
}
toggle("lbl"+iv+"ModPwr", true);
toggle("lbl"+iv+"ModName", true);
if(serial == "1161") max = 4;
else if(serial == "1141") max = 2;
else if(serial == "1121") max = 1;
for(i=0;i<max;i++) {
toggle("inv"+iv+"ModPwr"+i, false);
toggle("inv"+iv+"ModName"+i, false);
}
if(max != 0) {
toggle("lbl"+iv+"ModPwr", false);
toggle("lbl"+iv+"ModName", false);
}
});
evt = document.createEvent("HTMLEvents");
evt.initEvent("keyup", false, true);
elm.dispatchEvent(evt);
});
for(it of document.getElementsByClassName("s_collapsible")) {
it.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
content.style.display = (content.style.display === "block") ? "none" : "block";
});
}
}
var highestId = 0;
@ -167,62 +155,6 @@
ivHtml(JSON.parse('{"name":"","serial":"","channels":4,"ch_max_power":[0,0,0,0],"ch_name":["","","",""],"power_limit":1500,"power_limit_option":65535}'), highestId + 1);
});
function getAjax(url, ptr) {
var http = new XMLHttpRequest();
if(http != null) {
http.open("GET", url, true);
http.onreadystatechange = p;
http.send(null);
}
function p() {
if(http.readyState == 4)
ptr(JSON.parse(http.responseText));
}
}
function des(val) {
e = document.createElement('p');
e.classList.add("subdes");
e.innerHTML = val;
return e;
}
function lbl(id, val) {
e = document.createElement('label');
e.htmlFor = id;
e.innerHTML = val;
return e;
}
function inp(name, val, max=32, cl=["text"]) {
e = document.createElement('input');
e.classList.add(...cl);
e.name = name;
e.value = val;
e.maxLength = max;
return e;
}
function sel(name, opt, selId) {
e = document.createElement('select');
e.name = name;
for(it of opt) {
o = document.createElement('option');
o.value = it[0];
o.innerHTML = it[1];
if(it[0] == selId)
o.selected = true;
e.appendChild(o);
}
return e;
}
function div(cl) {
e = document.createElement('div');
e.classList.add(cl);
return e;
}
function ivHtml(obj, id) {
highestId = id;
if(highestId == (maxInv - 1))