mirror of
https://github.com/UtilitechAS/amsreader-firmware.git
synced 2026-04-28 04:55:46 +00:00
2.0 development
This commit is contained in:
Gunnar Skjold
@@ -1,11 +1,29 @@
|
||||
var nextVersion;
|
||||
var im, em;
|
||||
|
||||
// Price plot
|
||||
var pp;
|
||||
var pa;
|
||||
var po = {
|
||||
title: 'Future energy price',
|
||||
titleTextStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
bar: { groupWidth: '90%' },
|
||||
legend: { position: 'none' },
|
||||
vAxis: {
|
||||
viewWindowMode: 'maximized'
|
||||
},
|
||||
tooltip: { trigger: 'none'},
|
||||
enableInteractivity: false,
|
||||
};
|
||||
var pl = null; // Last price
|
||||
|
||||
// Day plot
|
||||
var ep;
|
||||
var ea;
|
||||
var eo = {
|
||||
title: 'Last 24 hours',
|
||||
title: 'Energy use last 24 hours',
|
||||
titleTextStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
@@ -23,7 +41,7 @@ var eo = {
|
||||
var mp;
|
||||
var ma;
|
||||
var mo = {
|
||||
title: 'Last month',
|
||||
title: 'Energy use last month',
|
||||
titleTextStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
@@ -340,6 +358,7 @@ var zeropad = function(num) {
|
||||
}
|
||||
|
||||
var setupChart = function() {
|
||||
pp = new google.visualization.ColumnChart(document.getElementById('pp'));
|
||||
ep = new google.visualization.ColumnChart(document.getElementById('ep'));
|
||||
mp = new google.visualization.ColumnChart(document.getElementById('mp'));
|
||||
vp = new google.visualization.ColumnChart(document.getElementById('vp'));
|
||||
@@ -347,10 +366,14 @@ var setupChart = function() {
|
||||
ip = new google.visualization.PieChart(document.getElementById('ip'));
|
||||
xp = new google.visualization.PieChart(document.getElementById('xp'));
|
||||
fetch();
|
||||
drawEnergy();
|
||||
drawDay();
|
||||
drawMonth();
|
||||
};
|
||||
|
||||
var redraw = function() {
|
||||
if(pl != null) {
|
||||
pp.draw(pa, po);
|
||||
}
|
||||
ep.draw(ea, eo);
|
||||
mp.draw(ma, mo);
|
||||
vp.draw(va, vo);
|
||||
@@ -359,7 +382,41 @@ var redraw = function() {
|
||||
xp.draw(xa, xo);
|
||||
};
|
||||
|
||||
var drawEnergy = function() {
|
||||
var drawPrices = function() {
|
||||
$('#ppc').show();
|
||||
$.ajax({
|
||||
url: '/energyprice.json',
|
||||
timeout: 30000,
|
||||
dataType: 'json',
|
||||
}).done(function(json) {
|
||||
data = [['Hour',json.currency + '/kWh', { role: 'style' }, { role: 'annotation' }]];
|
||||
var r = 1;
|
||||
var hour = moment.utc().hours();
|
||||
var offset = moment().utcOffset()/60;
|
||||
var min = 0;
|
||||
var h = 0;
|
||||
var d = json["20"] == null ? 2 : 1;
|
||||
for(var i = hour; i<24; i++) {
|
||||
var val = json[zeropad(h++)];
|
||||
if(val == null) break;
|
||||
data[r++] = [zeropad((i+offset)%24), val, "color: #6f42c1;opacity: 0.9;", val == null ? "" : val.toFixed(d)];
|
||||
Math.min(0, val);
|
||||
};
|
||||
for(var i = 0; i < 24; i++) {
|
||||
var val = json[zeropad(h++)];
|
||||
if(val == null) break;
|
||||
data[r++] = [zeropad((i+offset)%24), val, "color: #6f42c1;opacity: 0.9;", val == null ? "" : val.toFixed(d)];
|
||||
Math.min(0, val);
|
||||
};
|
||||
pa = google.visualization.arrayToDataTable(data);
|
||||
po.vAxis.title = json.currency;
|
||||
if(min == 0)
|
||||
po.vAxis.minValue = 0;
|
||||
pp.draw(pa, po);
|
||||
});
|
||||
}
|
||||
|
||||
var drawDay = function() {
|
||||
$.ajax({
|
||||
url: '/dayplot.json',
|
||||
timeout: 30000,
|
||||
@@ -384,7 +441,12 @@ var drawEnergy = function() {
|
||||
if(min == 0)
|
||||
eo.vAxis.minValue = 0;
|
||||
ep.draw(ea, eo);
|
||||
|
||||
setTimeout(drawDay, (61-moment().minute())*60000);
|
||||
});
|
||||
};
|
||||
|
||||
var drawMonth = function() {
|
||||
$.ajax({
|
||||
url: '/monthplot.json',
|
||||
timeout: 30000,
|
||||
@@ -393,9 +455,9 @@ var drawEnergy = function() {
|
||||
data = [['Day','kWh', { role: 'style' }, { role: 'annotation' }]];
|
||||
var r = 1;
|
||||
var day = moment().date();
|
||||
var start = moment().subtract(1, 'months').endOf('month').date();
|
||||
var eom = moment().subtract(1, 'months').endOf('month').date();
|
||||
var min = 0;
|
||||
for(var i = day; i<=start; i++) {
|
||||
for(var i = day; i<=eom; i++) {
|
||||
var val = json["d"+zeropad(i)];
|
||||
data[r++] = [zeropad((i)), val, "color: #6f42c1;opacity: 0.9;", val.toFixed(0)];
|
||||
Math.min(0, val);
|
||||
@@ -409,6 +471,8 @@ var drawEnergy = function() {
|
||||
if(min == 0)
|
||||
mo.vAxis.minValue = 0;
|
||||
mp.draw(ma, mo);
|
||||
|
||||
setTimeout(drawMonth, (24-moment().hour())*60000);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -609,6 +673,12 @@ var fetch = function() {
|
||||
$('.jt').html("N/A");
|
||||
}
|
||||
setTimeout(fetch, interval);
|
||||
|
||||
var price = parseFloat(json.p);
|
||||
if(price && price != pl) {
|
||||
pl = price;
|
||||
drawPrices();
|
||||
}
|
||||
}).fail(function(x, text, error) {
|
||||
console.log("Failed request");
|
||||
console.log(text);
|
||||
|
||||
@@ -29,5 +29,6 @@
|
||||
"hm" : %d,
|
||||
"wm" : %d,
|
||||
"mm" : %d,
|
||||
"me" : %d
|
||||
"me" : %d,
|
||||
"p" : %s
|
||||
}
|
||||
39
web/energyprice.json
Normal file
39
web/energyprice.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"currency" : "%s",
|
||||
"00" : %s,
|
||||
"01" : %s,
|
||||
"02" : %s,
|
||||
"03" : %s,
|
||||
"04" : %s,
|
||||
"05" : %s,
|
||||
"06" : %s,
|
||||
"07" : %s,
|
||||
"08" : %s,
|
||||
"09" : %s,
|
||||
"10" : %s,
|
||||
"11" : %s,
|
||||
"12" : %s,
|
||||
"13" : %s,
|
||||
"14" : %s,
|
||||
"15" : %s,
|
||||
"16" : %s,
|
||||
"17" : %s,
|
||||
"18" : %s,
|
||||
"19" : %s,
|
||||
"20" : %s,
|
||||
"21" : %s,
|
||||
"22" : %s,
|
||||
"23" : %s,
|
||||
"24" : %s,
|
||||
"25" : %s,
|
||||
"26" : %s,
|
||||
"27" : %s,
|
||||
"28" : %s,
|
||||
"29" : %s,
|
||||
"30" : %s,
|
||||
"31" : %s,
|
||||
"32" : %s,
|
||||
"33" : %s,
|
||||
"34" : %s,
|
||||
"35" : %s
|
||||
}
|
||||
@@ -19,7 +19,7 @@
|
||||
<select name="ea" class="form-control">
|
||||
<optgroup label="Norway">
|
||||
<option value="10YNO-1--------2" {eaNo1}>NO1</option>
|
||||
<option value="10YNO-2--------T" {eaNo1}>NO2</option>
|
||||
<option value="10YNO-2--------T" {eaNo2}>NO2</option>
|
||||
<option value="10YNO-3--------J" {eaNo3}>NO3</option>
|
||||
<option value="10YNO-4--------9" {eaNo4}>NO4</option>
|
||||
<option value="10Y1001A1001A48H" {eaNo5}>NO5</option>
|
||||
|
||||
@@ -53,9 +53,6 @@
|
||||
<li class="nav-item">
|
||||
<a id="temp-link" class="nav-link" href="/temperature">Temp<span class="d-none d-sm-inline">erature</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a id="price-link" class="nav-link" href="/price"><span class="d-none d-sm-inline">Energy</span> Price</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle nav-link" href="#" role="button" id="config-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
|
||||
170
web/index.html
170
web/index.html
@@ -19,101 +19,97 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 mb-3">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center overlay-plot">
|
||||
<div id="ip" class="plot1"></div>
|
||||
<span class="plot-overlay">
|
||||
<span class="ipo">{P}</span>
|
||||
<span class="ipoa">W</span>
|
||||
<br/>
|
||||
<span class="pol">{ti}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row ric" style="display: {da};">
|
||||
<div class="col-12 text-right"><span class="jic">{tPI}</span> kWh</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 mb-3">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center overlay-plot">
|
||||
<div id="ip" class="plot1"></div>
|
||||
<span class="plot-overlay">
|
||||
<span class="ipo">{P}</span>
|
||||
<span class="ipoa">W</span>
|
||||
<br/>
|
||||
<span class="pol">{ti}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-6 mb-3" style="display: {de};">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center overlay-plot">
|
||||
<div id="xp" class="plot1"></div>
|
||||
<span class="plot-overlay">
|
||||
<span class="xpo">{PO}</span>
|
||||
<span class="xpoa">W</span>
|
||||
<br/>
|
||||
<span class="pol">Export</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row rec" style="display: {da};">
|
||||
<div class="col-12 text-right"><span class="jec">{tPO}</span> kWh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 mb-3" style="display: {dn};">
|
||||
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
||||
<h5 class="text-center">Reactive</h5>
|
||||
<div class="row rri">
|
||||
<div class="col-12 font-weight-bold">Instant</div>
|
||||
<div class="col-4">In</div>
|
||||
<div class="col-8 text-right"><span class="jri">{Q}</span> var</div>
|
||||
<div class="col-4">Out</div>
|
||||
<div class="col-8 text-right"><span class="jre">{QO}</span> var</div>
|
||||
</div>
|
||||
<div class="row rric">
|
||||
<div class="col-12 font-weight-bold">Total</div>
|
||||
<div class="col-4">In</div>
|
||||
<div class="col-8 text-right"><span class="jric">{tQI}</span> kvarh</div>
|
||||
<div class="col-4">Out</div>
|
||||
<div class="col-8 text-right"><span class="jrec">{tQO}</span> kvarh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3" style="display: {de};">
|
||||
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
||||
<div class="row rrec">
|
||||
<div class="col-sm-4 font-weight-bold">Instant reactive</div>
|
||||
<div class="col-4 col-sm-1">In</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jric">{tQI}</span> kvarh</div>
|
||||
<div class="col-4 col-sm-1">Out</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jrec">{tQO}</span> kvarh</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row ric" style="display: {da};">
|
||||
<div class="col-12 text-right"><span class="jic">{tPI}</span> kWh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 mb-3">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center">
|
||||
<div id="vp" class="plot2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 mb-3" style="display: {de};">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center overlay-plot">
|
||||
<div id="xp" class="plot1"></div>
|
||||
<span class="plot-overlay">
|
||||
<span class="xpo">{PO}</span>
|
||||
<span class="xpoa">W</span>
|
||||
<br/>
|
||||
<span class="pol">Export</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-6 mb-3">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center">
|
||||
<div id="ap" class="plot2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3" style="display: {de};">
|
||||
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
||||
<div class="row rrec">
|
||||
<div class="col-sm-4 font-weight-bold">Total reactive</div>
|
||||
<div class="col-4 col-sm-1">In</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jric">{tQI}</span> kvarh</div>
|
||||
<div class="col-4 col-sm-1">Out</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jrec">{tQO}</span> kvarh</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row rec" style="display: {da};">
|
||||
<div class="col-12 text-right"><span class="jec">{tPO}</span> kWh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 mb-3">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center">
|
||||
<div id="vp" class="plot2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 mb-3">
|
||||
<div class="bg-white rounded shadow p-3">
|
||||
<div class="text-center">
|
||||
<div id="ap" class="plot2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 mb-3" style="display: {dn};">
|
||||
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
||||
<h5 class="text-center">Reactive</h5>
|
||||
<div class="row rri">
|
||||
<div class="col-12 font-weight-bold">Instant</div>
|
||||
<div class="col-4">In</div>
|
||||
<div class="col-8 text-right"><span class="jri">{Q}</span> VAr</div>
|
||||
<div class="col-4">Out</div>
|
||||
<div class="col-8 text-right"><span class="jre">{QO}</span> VAr</div>
|
||||
</div>
|
||||
<div class="row rric">
|
||||
<div class="col-12 font-weight-bold">Total</div>
|
||||
<div class="col-4">In</div>
|
||||
<div class="col-8 text-right"><span class="jric">{tQI}</span> kVArh</div>
|
||||
<div class="col-4">Out</div>
|
||||
<div class="col-8 text-right"><span class="jrec">{tQO}</span> kVArh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-3" style="display: {de};">
|
||||
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
||||
<div class="row rrec">
|
||||
<div class="col-sm-4 font-weight-bold">Instant reactive</div>
|
||||
<div class="col-4 col-sm-1">In</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jri">{Q}</span> VAr</div>
|
||||
<div class="col-4 col-sm-1">Out</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jre">{QO}</span> VAr</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-3" style="display: {de};">
|
||||
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
||||
<div class="row rrec">
|
||||
<div class="col-sm-4 font-weight-bold">Total reactive</div>
|
||||
<div class="col-4 col-sm-1">In</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jric">{tQI}</span> kVArh</div>
|
||||
<div class="col-4 col-sm-1">Out</div>
|
||||
<div class="col-8 col-sm-3 text-right"><span class="jrec">{tQO}</span> kVArh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ppc" class="col-xl-12 mb-3" style="display: none;">
|
||||
<div class="bg-white rounded shadow" id="pp" style="width: 100%; height: 224px;"></div>
|
||||
</div>
|
||||
<div class="col-xl-12 mb-3">
|
||||
<div class="bg-white rounded shadow" id="ep" style="width: 100%; height: 224px;"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user