topaLE
/
ahoy
mirror of https://github.com/lumapu/ahoy.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add files via upload

pull/1080/head
oberfritze 2 years ago
committed by GitHub
parent
d58bb8ce52
commit
3a52f91ea9
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 150 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      src/web/html/api.js
  2. 6
      src/web/html/style.css
  3. 107
      src/web/html/visualization.html

39
src/web/html/api.js
View File

@ -30,7 +30,7 @@ iconSuccess = [
"M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z" "M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
]; ];
/** /**
* GENERIC FUNCTIONS * GENERIC FUNCTIONS
*/ */
function ml(tagName, ...args) { function ml(tagName, ...args) {
@ -135,6 +135,32 @@ function toggle(id, cl="hide") {
e.classList.remove(cl); e.classList.remove(cl);
} }
function getCSV(url, ptr) {
var xhr = new XMLHttpRequest();
if(xhr != null) {
xhr.open("GET", url, true);
xhr.onreadystatechange = q;
try {
xhr.send();
} catch (error) {
console.log(error.message);
}
}
function q() {
if(xhr.readyState == 4) {
if(null != xhr.responseText) {
if(null != ptr) {
try {
ptr(xhr.responseText);
} catch (error) {
console.log(error.message);
}
}
}
}
}
}
function getAjax(url, ptr, method="GET", json=null) { function getAjax(url, ptr, method="GET", json=null) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
if(xhr != null) { if(xhr != null) {
@ -142,13 +168,22 @@ function getAjax(url, ptr, method="GET", json=null) {
xhr.onreadystatechange = p; xhr.onreadystatechange = p;
if("POST" == method) if("POST" == method)
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
try {
xhr.send(json); xhr.send(json);
} catch (error) {
console.log(error.message);
}
} }
function p() { function p() {
if(xhr.readyState == 4) { if(xhr.readyState == 4) {
if(null != xhr.responseText) { if(null != xhr.responseText) {
if(null != ptr) if(null != ptr) {
try {
ptr(JSON.parse(xhr.responseText)); ptr(JSON.parse(xhr.responseText));
} catch (error) {
console.log(error.message);
}
}
} }
} }
} }

6
src/web/html/style.css
View File

@ -636,3 +636,9 @@ div.hr {
margin-left: -5px; margin-left: -5px;
transform: translate(0,0px); transform: translate(0,0px);
} }
#powerchart {
min-width: 310px;
max-width: 800px;
height: 300px;
margin: 0 auto;
}

107
src/web/html/visualization.html
View File

@ -6,13 +6,29 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
<body> <body>
<!-- The following lines are commented out because there is no right to distribute this
chart lib reference functionally with the CC BY-NC-SA 4.0 license of the AHOY DTU.
This chart lib has a proprietary and commercial license model. See their web site for details.
Therefore these lines are prepared for private testing only! Choose another chart lib with matching
open source license in case you want to distribute the chart function with this project. -->
<!--
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
-->
{#HTML_NAV} {#HTML_NAV}
<div id="wrapper"> <div id="wrapper">
<div id="content"> <div id="content">
<div id="live"></div> <div id="live"></div>
<div id="powerchart"></div>
<p>Every <span id="refresh"></span> seconds the values are updated</p> <p>Every <span id="refresh"></span> seconds the values are updated</p>
</div> </div>
</div> </div>
<pre id="dyn_csv_url" style="display:none">empty</pre>
<pre id="csv" style="display:none">empty</pre>
<pre id="chart_title" style="display:none">empty</pre>
<pre id="yaxis_grid_power_title" style="display:none">empty</pre>
{#HTML_FOOTER} {#HTML_FOOTER}
<script type="text/javascript"> <script type="text/javascript">
var exeOnce = true; var exeOnce = true;
@ -21,6 +37,7 @@
var mNum = 0; var mNum = 0;
var names = ["Voltage", "Current", "Power", "Yield Day", "Yield Total", "Irradiation"]; var names = ["Voltage", "Current", "Power", "Yield Day", "Yield Total", "Irradiation"];
var total = Array(5).fill(0); var total = Array(5).fill(0);
var mychart;
function parseGeneric(obj) { function parseGeneric(obj) {
if(true == exeOnce){ if(true == exeOnce){
@ -31,7 +48,7 @@
} }
function numBig(val, unit, des) { function numBig(val, unit, des) {
return ml("div", {class: "col-6 col-sm-4 a-c"}, [ return ml("div", {class: "col-6 col-sm-4 col-md-3 a-c"}, [
ml("div", {class: "row"}, ml("div", {class: "row"},
ml("div", {class: "col"}, [ ml("div", {class: "col"}, [
ml("span", {class: "fs-5 fs-md-4"}, String(Math.round(val * 100) / 100)), ml("span", {class: "fs-5 fs-md-4"}, String(Math.round(val * 100) / 100)),
@ -106,10 +123,22 @@
ml("div", {class: "p-2 iv-bg"}, [ ml("div", {class: "p-2 iv-bg"}, [
ml("div", {class: "row"},[ ml("div", {class: "row"},[
numBig(obj.ch[0][2], "W", "AC Power"), numBig(obj.ch[0][2], "W", "AC Power"),
numBig(obj.ch[0][11], "W", "Max AC Power"),
numBig(obj.ch[0][7], "Wh", "Yield Day"), numBig(obj.ch[0][7], "Wh", "Yield Day"),
numBig(obj.ch[0][6], "kWh", "Yield Total") numBig(obj.ch[0][6], "kWh", "Yield Total")
]), ]),
ml("div", {class: "hr"}), ml("div", {class: "hr"}),
obj["grid_power"] ?
ml("div", {class: "row mt-2"},[
numMid(obj.ch[0][8], "W", "DC Power"),
numMid(obj.grid_power, "W", "Grid Power"),
numMid(obj.ch[0][0], "V", "Voltage"),
numMid(obj.ch[0][1], "A", "Current"),
numMid(obj.ch[0][3], "Hz", "Frequency"),
numMid(obj.ch[0][9], "%", "Efficiency"),
numMid(obj.ch[0][10], "var", "Reactive Power"),
numMid(obj.ch[0][4], "", "Power Factor")
]) :
ml("div", {class: "row mt-2"},[ ml("div", {class: "row mt-2"},[
numMid(obj.ch[0][8], "W", "DC Power"), numMid(obj.ch[0][8], "W", "DC Power"),
numMid(obj.ch[0][0], "V", "Voltage"), numMid(obj.ch[0][0], "V", "Voltage"),
@ -145,6 +174,7 @@
ml("div", {class: "p-2 ch-bg"}, [ ml("div", {class: "p-2 ch-bg"}, [
ml("div", {class: "row"}, [ ml("div", {class: "row"}, [
numCh(vals[2], units[2], "Power"), numCh(vals[2], units[2], "Power"),
numCh(vals[6], units[2], "Max Power"),
numCh(vals[5], units[5], "Irradiation"), numCh(vals[5], units[5], "Irradiation"),
numCh(vals[3], units[3], "Yield Day"), numCh(vals[3], units[3], "Yield Day"),
numCh(vals[4], units[4], "Yield Total"), numCh(vals[4], units[4], "Yield Total"),
@ -178,6 +208,7 @@
mNum++; mNum++;
var chn = []; var chn = [];
for(var i = 1; i < obj.ch.length; i++) { for(var i = 1; i < obj.ch.length; i++) {
var name = obj.ch_name[i]; var name = obj.ch_name[i];
if(name.length == 0) if(name.length == 0)
@ -185,6 +216,7 @@
if(obj.ch_max_pwr[i] > 0) // show channel only if max mod pwr if(obj.ch_max_pwr[i] > 0) // show channel only if max mod pwr
chn.push(ch(name, obj.ch[i])); chn.push(ch(name, obj.ch[i]));
} }
mIvHtml.push( mIvHtml.push(
ml("div", {}, [ ml("div", {}, [
ivHead(obj), ivHead(obj),
@ -208,6 +240,13 @@
} }
} }
function parseCSV(data) {
document.getElementById("csv").innerHTML = data;
// the following line may not be distributed functionally with this project. See comment above
// mychart.update({data: {csv: document.getElementById("csv").innerHTML}});
}
function parse(obj) { function parse(obj) {
if(null != obj) { if(null != obj) {
parseGeneric(obj["generic"]); parseGeneric(obj["generic"]);
@ -222,16 +261,76 @@
break; break;
} }
} }
document.getElementById("refresh").innerHTML = obj["refresh"];
if(true == exeOnce) { if(true == exeOnce) {
var r = document.querySelector(':root');
var rs = getComputedStyle(r);
document.getElementById("dyn_csv_url").innerHTML = document.baseURI.split ("\/live")[0] + "/get_chartdata/chartdata.csv";
document.getElementById("refresh").innerHTML = obj["refresh"];
if (obj["grid_power"]) {
document.getElementById("chart_title").innerHTML = "Solar and Grid Power during Daylight";
document.getElementById("yaxis_grid_power_title").innerHTML = "Grid Power in W";
} else {
document.getElementById("chart_title").innerHTML = "Solar Power during Daylight";
document.getElementById("yaxis_grid_power_title").innerHTML = "";
}
window.setInterval("getAjax('/api/live', parse)", obj["refresh"] * 1000); window.setInterval("getAjax('/api/live', parse)", obj["refresh"] * 1000);
exeOnce = false; exeOnce = false;
// This object may not be distributed functionally with this project. See comment above
/*
mychart = Highcharts.chart('powerchart', {
accessibility: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML,
enablePolling: false,
dataRefreshRate: 30
},
series: [{
yAxis: 0,
type: 'column',
}, {
yAxis: 1,
type: 'areaspline',
fillOpacity: 0.3
}],
yAxis: [{
title: {
text: 'AC Power in W'
}},
{
title: {
text: document.getElementById('yaxis_grid_power_title').innerHTML
},
opposite: true
} }
],
title: {
text: document.getElementById('chart_title').innerHTML
},
subtitle: {
text: 'Values averaged every 10 minutes'
},
legend: {
enabled: false
},
colors: [rs.getPropertyValue('--iv-head-bg'), '#ffa500']
});
*/
} }
else } else {
document.getElementById("refresh").innerHTML = "n/a"; document.getElementById("refresh").innerHTML = "n/a";
} }
getCSV(document.getElementById("dyn_csv_url").innerHTML, parseCSV)
}
getAjax("/api/live", parse); getAjax("/api/live", parse);
</script> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save