Code: Select all
<style type="text/css">
#boxmain {
background: #ffffff;
border-color: #7c0202;
border-radius: 2vw;
border-style: solid;
border-width: 0.5vw;
color: #000000;
text-align: center;
width: 95vw;
height: calc(100vh - 130px);
margin: 0 auto auto auto;
text-align: center;
}
#SolarToNet-flow, #SolarToHome-flow, #NetToHome-flow {
stroke-dasharray: 1;
stroke-dashoffset: 10;
}
@keyframes flow {
100% {
stroke-dashoffset: 0;
}
}
</style>
<div id="boxmain">
<svg width="100%" height="100%" version="1.1" viewBox="0 0 60 40" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><text id="textActualSolarToHome" x="34" y="25" fill="#4d4d4d" font-family="Arial" font-size="1.1px" stroke-linecap="round" stroke-width=".38" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="34" y="25">ActualSolarToHome</tspan></text><g fill="none"><path id="SolarToHome" d="m31 17c0 8 3 11 12 11" stroke="#ffd000" stroke-width=".6"/><path id="SolarToHome-flow" d="m31 17c0 8 3 11 12 11" stroke="#f00" stroke-linecap="round" stroke-width=".2"/><path id="SolarToNet" d="m29 17c0 8-3 11-12 11" stroke="#ffd000" stroke-width=".6"/><path id="SolarToNet-flow" d="m29 17c-0.011 8-3 11-12 11" stroke="#f00" stroke-linecap="round" stroke-width=".2"/></g><g fill="#f0f"><path id="NetToHome" d="m17 30h26" stroke="#77eaea" stroke-width=".6"/><path id="NetToHome-flow" d="m17 30h26" stroke="#f00" stroke-linecap="round" stroke-width=".2"/><path d="m50 22v-5" stroke="#4d4d4d" stroke-width=".6"/></g><path id="pathIconHome" d="m50 27v-1.4h0.8v1.4h1v-1.9h0.6l-2-2.1-2 2.1h0.6v1.9z" stroke-width=".22"/><path id="pathIconSolar" d="m30 4v0.71l0.71-0.36-0.71-0.35m-0.2 1.2-0.49 0.49 0.75 0.25-0.26-0.74m-1.7 0.69 0.35 0.71 0.36-0.71h-0.71m1.6-1.9h-1.6v1.6c0.11 0.034 0.23 0.05 0.35 0.05 0.72 2e-3 1.3-0.58 1.3-1.3-2e-3 -0.12-0.02-0.24-0.054-0.35m1.4 4v-1.2h-0.6l1-1.8v1.2h0.6z" stroke-width=".2"/><path id="pathIconNet" d="m9.1 24-0.45-0.18 0.32-0.51h2.1l0.32 0.51-0.45 0.18-0.18-0.29h-1.5l-0.18 0.29m2.6 0.51h-1.1l-0.2-0.6h-0.66l-0.2 0.6h-1.1l-0.32 0.51 0.45 0.18 0.18-0.29h2.7l0.18 0.29 0.45-0.18-0.32-0.51m-0.22 2.8h-0.52l-0.061-0.18-0.88-1-0.88 1-0.058 0.18h-0.52l0.73-2.2h0.52l-0.091 0.27 0.3 0.35 0.29-0.35-0.089-0.27h0.52l0.73 2.2m-1.6-1.4-0.23-0.27-0.3 0.9 0.53-0.63m0.83 0.62-0.3-0.9-0.23 0.27z" stroke-width=".23"/><g fill="#333333" font-family="Arial" font-size="1.6px" stroke-linecap="round" stroke-width=".38" text-anchor="middle"><text id="textDaySolar" x="30" y="10" text-align="center" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="30" y="10">DaySolar</tspan></text><text id="textDayGas" x="50" y="10" text-align="center" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="50" y="10">DayGas</tspan></text><text id="textActualSolar" x="30" y="13" text-align="center" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="30" y="13">ActualSolar</tspan></text><text id="textActualNet" x="10" y="35" text-align="center" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="10" y="35">ActualNet</tspan></text></g><text id="textDayNetDeliv" x="10" y="29" fill="#ba88ff" font-family="Arial" font-size="1.6px" stroke-linecap="round" stroke-width=".38" text-align="center" text-anchor="middle" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="10" y="29">DayNetDeliv</tspan></text><g fill="#4d4d4d" font-family="Arial" stroke-linecap="round" stroke-width=".38"><text id="textActualNetToHome" x="30" y="32" font-size="1.1px" text-align="center" text-anchor="middle" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="10" y="32">ActualNetToHome</tspan></text><text id="textActualSolarToNet" x="26" y="25" font-size="1.1px" text-align="end" text-anchor="end" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="26" y="25">ActualSolarToNet</tspan></text></g><text id="textHomeToday" x="50" y="29" fill="#333333" font-family="Arial" font-size="1.6px" stroke-linecap="round" stroke-width=".38" text-align="center" text-anchor="middle" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="50" y="29">HomeToday</tspan></text><text id="textHomeActual" x="50" y="32" fill="#333333" font-family="Arial" font-size="1.6px" stroke-linecap="round" stroke-width=".38" text-align="center" text-anchor="middle" style="font-variant-caps:normal;font-variant-east-asian:normal;font-variant-ligatures:normal;font-variant-numeric:normal" xml:space="preserve"><tspan x="50" y="32">HomeActual</tspan></text><g fill="none" stroke-linecap="round" stroke-width=".3"><rect id="rectSolar" x="23" y="3" width="14" height="14" ry="2" stroke="#ffd000"/><rect id="rectHome" x="43" y="22" width="14" height="14" ry="2" stroke="#ff7bff"/><rect id="rectNet" x="3" y="22" width="14" height="14" ry="2" stroke="#00c6da"/><rect id="rectGas" x="43" y="3" width="14" height="14" ry="2" stroke="#0ff"/></g><path id="pathIconGas" d="m51 5.8c-0.053-0.067-0.12-0.12-0.18-0.18-0.15-0.13-0.33-0.23-0.47-0.37-0.34-0.32-0.42-0.86-0.2-1.3-0.22 0.051-0.41 0.17-0.57 0.29-0.59 0.46-0.82 1.3-0.55 2 0.0092 0.022 0.018 0.044 0.018 0.073 0 0.049-0.034 0.093-0.08 0.11-0.053 0.022-0.11 0.0089-0.15-0.027-0.014-0.011-0.023-0.022-0.032-0.038-0.26-0.32-0.3-0.77-0.13-1.1-0.38 0.3-0.59 0.81-0.56 1.3 0.014 0.11 0.027 0.22 0.066 0.33 0.032 0.13 0.094 0.27 0.16 0.38 0.25 0.38 0.67 0.66 1.1 0.72 0.49 0.06 1-0.027 1.4-0.36 0.42-0.37 0.56-0.96 0.35-1.5l-0.03-0.058c-0.048-0.1-0.18-0.28-0.18-0.28m-0.72 1.4c-0.064 0.053-0.17 0.11-0.25 0.13-0.26 0.089-0.51-0.036-0.66-0.18 0.27-0.062 0.43-0.26 0.48-0.46 0.039-0.18-0.034-0.32-0.064-0.5-0.027-0.16-0.023-0.3 0.039-0.46 0.043 0.084 0.089 0.17 0.14 0.24 0.18 0.22 0.45 0.32 0.51 0.62 0.0092 0.031 0.014 0.062 0.014 0.096 0.0067 0.18-0.075 0.38-0.21 0.5z" stroke-width=".23"/></svg>
</div>
<script type="text/javascript" charset="utf-8">
// ---------------------------------------------------------------------------------------------------------------------------
// Start of customizable parameters
// ---------------------------------------------------------------------------------------------------------------------------
let idP1Meter = 1; // Change this value to be your ID for the Electricity Meter (P1)
let idGas = 11; // Change this value to be your ID for the Gas meter. Set to -1 when not used.
let idSolar = 1; // Change this value to be your ID for your Solar Power. Set to -1 when not used.
let sLocales = 'nl-NL'; // Update your locales. For more information see: https://www.w3schools.com/jsref/jsref_tolocalestring.asp
// ---------------------------------------------------------------------------------------------------------------------------
// End of customizable parameters
// ---------------------------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------------
// Version history
// ---------------------------------------------------------------------------------------------------------------------------
// v1.1 2024-05-xx
// - Changed deprecated api url and corrected it to "/json.htm?type=command¶m=getdevices&rid="
// - idGas en idSolar can be set to -1 when not used.
//
// v1.0 2024-05-18
// - First version.
// ---------------------------------------------------------------------------------------------------------------------------
function updatePower() {
let fDayNetUsage, fDayNetDeliv, fDaySolar, fDayHomeUsage,
fActualNetUsage, fActualNetDeliv, fActualSolar, fActualHomeUsage,
fActualNetToHome, fActualSolarToNet, fActualSolarToHome,
fDayGasUsage;
let getPower = $.getJSON('/json.htm?type=command¶m=getdevices&rid=' + idP1Meter, function(data){
fDayNetUsage = parseFloat(data["result"][0]["CounterToday"].slice(0, -4).replace(',','.'));
fDayNetDeliv = parseFloat(data["result"][0]["CounterDelivToday"].slice(0, -4).replace(',','.'));
//fActualNetUsage = parseFloat(data["result"][0]["Usage"].slice(0, -5).replace(',','.'));
fActualNetDeliv = parseFloat(data["result"][0]["UsageDeliv"].slice(0, -5).replace(',','.'));
console.log('fDayNetUsage: ' + parseFloat(data["result"][0]["CounterToday"].slice(0, -4).replace(',','.')));
console.log('fDayNetDeliv: ' + parseFloat(data["result"][0]["CounterDelivToday"].slice(0, -4).replace(',','.')));
//console.log('Usage: ' + parseFloat(data["result"][0]["Usage"].slice(0, -5).replace(',','.')));
console.log('fActualNetDeliv: ' + parseFloat(data["result"][0]["UsageDeliv"].slice(0, -5).replace(',','.')));
});
let getPower2 = $.getJSON('/json.htm?type=command¶m=getdevices&rid=' + 161, function(data){
fActualNetUsage = parseFloat(data["result"][0]["Data"].slice(0, -5).replace(',','.'));
console.log('fActualNetUsage: ' + parseFloat(data["result"][0]["Data"].slice(0, -5).replace(',','.')));
});
let getPower3 = $.getJSON('/json.htm?type=command¶m=getdevices&rid=' + 162, function(data){
fActualSolar = parseFloat(data["result"][0]["Data"].slice(0, -5).replace(',','.'));
console.log('fActualSolar: ' + parseFloat(data["result"][0]["Data"].slice(0, -5).replace(',','.')));
});
let getSolar = $.getJSON('/json.htm?type=command¶m=getdevices&rid=' + idSolar, function(data){
fDaySolar = parseFloat(data["result"][0]["CounterDelivToday"].slice(0, -4).replace(',','.'));
console.log('fDaySolar: ' + parseFloat(data["result"][0]["CounterDelivToday"].slice(0, -4).replace(',','.')));
//fActualSolar = parseFloat(data["result"][0]["UsageDeliv"].slice(0, -5).replace(',','.'));
});
function GetAnim(fPower) {
let fSec = 5 - fPower / 2000;
fSec = (fSec<0.5) ? 0.5 : fSec;
return 'flow '+fSec.toFixed(1)+'s linear infinite';
}
function UpdateScreen() {
// Home usage: Calculated
fDayHomeUsage = fDayNetUsage + fDaySolar - fDayNetDeliv;
fActualHomeUsage = fActualNetUsage //+ fActualSolar - fActualNetDeliv;
let fSolarBigger = fActualSolar - fActualNetUsage
if (fSolarBigger >0) {
fActualNetToHome = 0
fActualSolarToNet = fActualSolar - fActualNetUsage
fActualSolarToHome = fActualNetUsage
} else {
fActualNetToHome = fActualNetUsage - fActualSolar
fActualSolarToNet = 0
fActualSolarToHome = fActualSolar
}
// if (fActualNetUsage>0) {
// fActualNetToHome = fActualNetUsage;
// fActualSolarToNet = 0;
// fActualSolarToHome = fActualSolar;
// } else {
// fActualNetToHome = 0;
// fActualSolarToNet = fActualNetDeliv;
// fActualSolarToHome = fActualSolar - fActualNetDeliv;
// }
//Update Page
document.getElementById("textDaySolar").textContent = fDaySolar.toLocaleString(sLocales) + ' kWh';
document.getElementById("textActualSolar").textContent = fActualSolar.toLocaleString(sLocales) + ' Watt';
document.getElementById("textHomeToday").textContent = fDayHomeUsage.toLocaleString(sLocales) + ' kWh';
document.getElementById("textHomeActual").textContent = fActualHomeUsage.toLocaleString(sLocales) + ' Watt';
let fMoreSolar = fDayNetDeliv - fDayNetUsage
let fMoreNet = fDayNetUsage - fDayNetDeliv
if (fMoreSolar >0){
document.getElementById("textDayNetDeliv").textContent = '⇦ ' + fMoreSolar.toLocaleString(sLocales) + ' kWh';
} else {
document.getElementById("textDayNetDeliv").textContent = fMoreNet.toLocaleString(sLocales) + ' kWh ⇦';
}
//document.getElementById("textDayNetDeliv").textContent = '⇦ ' + fDayNetDeliv.toLocaleString(sLocales) + ' kWh';
//document.getElementById("textDayNetUsage").textContent = '⇨ ' + fDayNetUsage.toLocaleString(sLocales) + ' kWh';
//if (fActualNetUsage>0) {
if (fSolarBigger >0) {
document.getElementById("textActualNet").textContent = '⇦ ' + fActualSolarToNet.toLocaleString(sLocales) + ' Watt ⇨';
} else {
document.getElementById("textActualNet").textContent = fActualNetToHome.toLocaleString(sLocales) + ' Watt ⇨';
}
document.getElementById("textActualNetToHome").textContent = fActualNetToHome.toLocaleString(sLocales) + ' Watt';
if (fActualNetToHome==0) {
document.getElementById('NetToHome-flow').style.display = 'none';
} else {
document.getElementById('NetToHome-flow').style.display = '';
document.getElementById('NetToHome-flow').style.animation = GetAnim(fActualNetToHome);
}
document.getElementById("textActualSolarToNet").textContent = fActualSolarToNet.toLocaleString(sLocales) + ' Watt';
if (fActualSolarToNet==0) {
document.getElementById('SolarToNet-flow').style.display = 'none';
} else {
document.getElementById('SolarToNet-flow').style.display = '';
document.getElementById('SolarToNet-flow').style.animation = GetAnim(fActualSolarToNet);
}
document.getElementById("textActualSolarToHome").textContent = fActualSolarToHome.toLocaleString(sLocales) + ' Watt';
if (fActualSolarToHome==0) {
document.getElementById('SolarToHome-flow').style.display = 'none';
} else {
document.getElementById('SolarToHome-flow').style.display = '';
document.getElementById('SolarToHome-flow').style.animation = GetAnim(fActualSolarToHome);
}
}
// Update Net/Solar
if (idSolar>-1) {
$.when(getPower, getSolar, getPower2, getPower3).done(UpdateScreen);
} else {
fDaySolar = 0;
fActualSolar = 0;
$.when(getPower).done(UpdateScreen);
}
// Update Gas
if (idGas>-1) {
$.getJSON('/json.htm?type=command¶m=getdevices&rid=' + idGas, function(data){
fDayGasUsage = parseFloat(data["result"][0]["CounterToday"].slice(0, -3).replace(',','.'));
document.getElementById("textDayGas").textContent = fDayGasUsage.toLocaleString(sLocales) + ' m3';
});
}
}
$(document).ready( function() {
if (idGas==-1) { $('#groupGas').hide(); }
if (idSolar==-1) { $('#groupSolar').hide(); }
updatePower();
setInterval(function(){ updatePower(); }, 5000);
});
</script>
