-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.h
15 lines (14 loc) · 16.9 KB
/
index.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html><html><head></head><body bgcolor=#202020><style type="text/css">.label{padding: 3px;border: 1px solid black;background-color: #c0c0c0c0;font: bold 15px Arial, sans-serif;}.fan{transform-origin: 162.4px 174.7px; display: inline-block; animation: spin 1s linear infinite;}.cylinderpump{animation: on 1s alternate infinite;}.compressor{animation: on 1s alternate infinite;}.hppump{animation: on 1s alternate infinite;}.waterBufferCold{animation: flow 0.5s linear reverse infinite;}.waterBufferHot{animation: flow 0.5s linear infinite;}.waterCHcold{animation: flow 0.5s linear reverse infinite;}.waterCHhot{animation: flow 0.5s linear reverse infinite;}.waterDHWcold{animation: flow 0.5s linear reverse infinite;}.waterDHWhot{animation: flow 0.5s linear infinite;}.waterHPcold{animation: flow 0.5s linear infinite;}.waterHPhot{animation: flow 0.5s linear reverse infinite;}@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes on{from{stroke: #000000; stroke-width: 0.5px;}to{stroke: #00ff00; stroke-width: 1px;}}@keyframes flow{from{stroke-dashoffset: 0px;}to{stroke-dashoffset: 6.4px;}}</style><div class="systemdiagram" style="position:absolute;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="600" viewBox="0 0 264.6 158.8"><defs><linearGradient id="a"><stop offset="0" stop-color="#f30000"/><stop offset="1" stop-color="#a800bc"/></linearGradient><linearGradient id="c" x1="48.8" x2="48.9" y1="190.6" y2="279.9" gradientUnits="userSpaceOnUse" xlink:href="#a"/><linearGradient id="d" x1="46" x2="46" y1="-248.4" y2="-262.1" gradientUnits="userSpaceOnUse" xlink:href="#a"/><marker id="e" orient="auto" overflow="visible" refX="0" refY="0"><path fill="red" fill-rule="evenodd" stroke="red" stroke-width=".4pt" d="M2 0a2 2 0 11-4 0 2 2 0 014 0z"/></marker><marker id="b" orient="auto" overflow="visible" refX="0" refY="0"><path fill="red" fill-rule="evenodd" stroke="red" stroke-width=".4pt" d="M2 0a2 2 0 11-4 0 2 2 0 014 0z"/></marker></defs><g transform="translate(0 -138.2)"><g fill="#fff" stroke-linejoin="round"><path stroke="#000" stroke-width=".5" d="M11.2 150.3h47v25.6h-47z"/><path stroke="#969696" stroke-width=".3" d="M12.7 152h1.6v22.3h-1.6zM15.4 152H17v22.3h-1.6zM18 152h1.6v22.3H18zM20.6 152h1.6v22.3h-1.6zM23.3 152h1.6v22.3h-1.6zM25.9 152h1.6v22.3h-1.6zM28.6 152h1.6v22.3h-1.6zM31.2 152h1.6v22.3h-1.6zM33.9 152h1.6v22.3h-1.6zM36.5 152h1.6v22.3h-1.6zM39.2 152h1.6v22.3h-1.6zM41.8 152h1.6v22.3h-1.6zM44.5 152h1.6v22.3h-1.6zM47.1 152h1.6v22.3h-1.6zM49.8 152h1.6v22.3h-1.6zM52.4 152H54v22.3h-1.6zM55 152h1.6v22.3H55z"/></g><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width=".26458" d="M241.1 216.1c-.4 0-.7.4-.7.8v15a1.7 1.7 0 00-.9 1.4 1.7 1.7 0 001.7 1.7 1.7 1.7 0 001.7-1.7 1.7 1.7 0 00-.9-1.5v-15c0-.3-.3-.7-.8-.7z"/><path fill="none" stroke="red" stroke-width=".5" marker-start="url(#b)" d="M162.3 199.1V188" transform="translate(79 34.2)"/><g><circle class="cylinderpump" cx="98.9" cy="200.2" r="4.5" fill="#fff" stroke="#000" stroke-width=".3" stroke-linejoin="round" transform="translate(-78.7 67.1)"/><path fill="#000001" d="M15.7 267.3l3.3-1.9 3.3-2v7.8l-3.3-2z"/></g><g fill="url(#c)"><g stroke="#000" stroke-linejoin="round" stroke-width=".4" transform="matrix(1.24895 0 0 1.23639 -7.4 -45)"><rect width="30" height="56.4" x="30.3" y="190.8" ry="2.9"/><rect width="30.2" height="15.5" x="30.2" y="-263.1" fill="url(#d)" ry="3.7" transform="scale(1 -1)"/></g><path fill="#fffffe" stroke="#000" stroke-linejoin="round" stroke-width=".26458" d="M36.5 227.6c-.4 0-.8.3-.8.7v15a1.7 1.7 0 00-.8 1.5 1.7 1.7 0 001.6 1.6 1.7 1.7 0 001.7-1.6 1.7 1.7 0 00-.9-1.5v-15c0-.4-.3-.7-.7-.7z"/><path fill="none" stroke="red" stroke-width=".5" marker-start="url(#e)" d="M162.3 199.1V188" transform="translate(-125.7 45.6)"/><path fill="none" stroke="#000" stroke-linejoin="round" stroke-width="1.1" d="M72.9 220.8H41.7l13.3-3.3-13.2-3.4 13.2-3.3-13.2-3.2h30.7"/><path stroke="#000" stroke-width="1.1" d="M35 267.4H24.6M35 273.7H24.6M73.2 267.4H62.6M73.2 273.7H62.6"/></g><path fill="none" stroke="#b40000" stroke-linejoin="round" stroke-width="1.1" d="M15.7 267.3h-7v-80.6H65V173h-7"/><path fill="none" stroke="#008" stroke-linejoin="round" stroke-width="1.1" d="M10.7 173H3.3v100.7h21.2"/><path fill="none" stroke="#008" stroke-width="1.1" d="M73.2 273.7h27.5v-45"/><path fill="none" stroke="#008" stroke-width="1.1" d="M72.9 220.8h27.8v8"/><rect width="62.1" height="62.7" x="149.5" y="210.4" fill="#ede8ca" stroke="#000" stroke-linejoin="round" stroke-width=".6" ry="2.7"/><rect width="29.4" height="29.4" x="179.5" y="213.1" fill="#646464" stroke="#000" stroke-linejoin="round" stroke-width=".6" ry="1.3"/><rect width="11.5" height="24.9" x="157.4" y="237.8" fill="#969664" stroke="#000" stroke-linejoin="round" stroke-width=".5" ry="1.1"/><path fill="none" stroke="#000" stroke-width="1.1" d="M143.1 228.8h23.6v11.5M159.7 259.7v8h-16.6"/><g><circle class="hppump" cx="98.9" cy="200.2" r="4.5" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width=".3" transform="rotate(180 128.2 214.5)"/><path fill="#000001" d="M162 228.8l-3.3 2-3.3 1.8V225l3.3 2z"/></g><path fill="none" stroke="#000" stroke-width="1.1" d="M179.5 225h-5.8v17.5H169"/><path fill="none" stroke="#008" stroke-width="1.1" d="M143.1 228.8h-42.4"/><path fill="#646464" stroke="#000" stroke-linejoin="round" stroke-width=".5" d="M188.5 250.1a1 1 0 00-1 1.1v6.5a7 7 0 00-2.7 5.5 7 7 0 007.1 7 7 7 0 007-7 7 7 0 00-2.5-5.5v-6.5c0-.6-.5-1-1.1-1z" class="compressor"/><path fill="none" stroke="#000" stroke-width="1.1" d="M204 242.5v10.8h-7.6M191.9 250.1v-3.8h-11.5v12.4h-11.8"/><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width=".18426" d="M207.8 243.9c-.3 0-.6.2-.6.5v10.4a1.2 1.2 0 00-.5 1 1.2 1.2 0 001.1 1.2 1.2 1.2 0 001.2-1.2 1.2 1.2 0 00-.6-1v-10.4c0-.3-.3-.5-.6-.5z"/><path fill="none" stroke="red" stroke-width=".5" marker-start="url(#b)" d="M162.3 199.1V188" transform="matrix(.69641 0 0 .69641 94.8 117.2)"/><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width=".18426" d="M182.9 247.7c-.3 0-.5.2-.5.5v10.5a1.2 1.2 0 00-.6 1 1.2 1.2 0 001.1 1.1 1.2 1.2 0 001.2-1.1 1.2 1.2 0 00-.6-1v-10.5c0-.3-.2-.5-.5-.5z"/><path fill="none" stroke="red" stroke-width=".5" marker-start="url(#b)" d="M162.3 199.1V188" transform="matrix(.69641 0 0 .69641 70 121)"/><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width=".18426" d="M145.7 214.2c-.3 0-.5.3-.5.6v10.4a1.2 1.2 0 00-.6 1 1.2 1.2 0 001.1 1.1 1.2 1.2 0 001.2-1.1 1.2 1.2 0 00-.6-1v-10.4c0-.3-.2-.6-.5-.6z"/><path fill="none" stroke="red" stroke-width=".5" marker-start="url(#b)" d="M162.3 199.1V188" transform="matrix(.69641 0 0 .69641 32.7 87.5)"/><path fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width=".18426" d="M145.7 251.8c-.3 0-.5.2-.5.5v10.5a1.2 1.2 0 00-.6 1 1.2 1.2 0 001.1 1.1 1.2 1.2 0 001.2-1.1 1.2 1.2 0 00-.6-1v-10.5c0-.3-.2-.5-.5-.5z"/><path fill="none" stroke="red" stroke-width=".5" marker-start="url(#b)" d="M162.3 199.1V188" transform="matrix(.69641 0 0 .69641 32.7 125)"/><g transform="translate(31.8 53)"><circle cx="162.4" cy="174.7" r="12" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".5"/><path class="fan" d="M162.4 174.7l4-11.3c-3.1-1-6-1-8.6.4zM162.4 174.7l-11.3-4c-1 3.2-1 6 .3 8.7z"/><g><path class="fan" d="M162.4 174.7l-4 11.4c3.1 1 6 1 8.6-.4zM162.4 174.7l11.3 4c1-3 1-6-.3-8.6z"/></g></g><path fill="none" stroke="#0032c8" stroke-dasharray="3.2 3.2" stroke-width="1.1" d="M73.2 273.7h27.5v-45" class="waterBufferCold"/><path fill="none" stroke="#0032c8" stroke-dasharray="3.2 3.2" stroke-width="1.1" d="M72.9 220.8h27.8v8" class="waterDHWcold"/><path fill="none" stroke="#0032c8" stroke-dasharray="3.2 3.2" stroke-width="1.1" d="M143.1 228.8h-42.4" class="waterHPcold"/><path fill="none" stroke="#b40000" stroke-width="1.1" d="M143.1 267.7h-32.5M73.2 267.4h37.7M72.5 207.6h37.8v60"/><path fill="none" stroke="red" stroke-dasharray="3.2 3.2" stroke-width="1.1" d="M143.1 267.7h-32.5" class="waterHPhot"/><path fill="none" stroke="red" stroke-dasharray="3.2 3.2" stroke-width="1.1" d="M73.2 267.4h37.7" class="waterBufferHot"/><path fill="none" stroke="#f00000" stroke-dasharray="3.2 3.2" stroke-width="1.1" d="M72.5 207.6h37.8v60" class="waterDHWhot"/><path fill="#fff" stroke="#000" stroke-width=".3" d="M84 211v-6.8L72.5 211v-6.9zM84.4 270.8v-6.9l-11.3 6.9v-6.9z"/><path fill="none" stroke="#f00000" stroke-dasharray="3.2 3.2" stroke-linejoin="round" stroke-width="1.1" d="M15.7 267.3h-7v-80.6H65V173h-7" class="waterCHhot"/><path fill="none" stroke="#0032c8" stroke-dasharray="3.2 3.2" stroke-linejoin="round" stroke-width="1.1" d="M10.7 173H3.3v100.7h21.2" class="waterCHcold"/></g></svg></div><div class="label" style="position:absolute; top:380px; left:160px;"><span id="CylTemp">-</span> °C</div><div class="label" style="position:absolute; top:340px; left:930px;"><span id="OAT">-</span> °C</div><div class="label" style="position:absolute; top:310px; left:500px;"><span id="CircWaterReturn">-</span> °C</div><div class="label" style="position:absolute; top:455px; left:500px;"><span id="CircWaterFlow">-</span> °C</div><div class="label" style="position:absolute; top:455px; left:714.5px; width:30px; text-align:center;"><span id="CompFreq">-</span><br>Hz</div><div class="label" style="position:absolute; top:333px; left:698px; width:80px; text-align:center;"><span id="FanSpeed">-</span> rpm</div><div class="label" style="position:absolute; top:300px; left:580px; width:80px; text-align:center;"><span id="PumpSpeed">-</span> rpm</div><div class="label" style="position:absolute; top:425px; left:805px;"><span id="SucTemp">-</span> °C</div><div class="label" style="position:absolute; top:470px; left:645px; width:40px; text-align:right"><span id="DischTemp">-</span> °C</div><div class="label" style="position:absolute; top:480px; left:780px;"><span id="PowerCons">-</span> Watts</div><div class="card" style="position:absolute; top:600px; background-color:#000000; color:#ffffff; padding:5px;"> <h1>Heating Monitor</h1><br>Cylinder Temperature: <span id="CylTemp_">-</span> °C<br>Heatpump power setting: <span id="Power">-</span><br>Central heating demand: <span id="CH">-</span><br>Hot water demand: <span id="DHW">-</span><br>Outdoor Air Temperature: <span id="OAT_">-</span> °C<br>Frost protection: <span id="Frost">-</span><br>Defrost mode: <span id="Defrost">-</span><br>Low Tariff Mode: <span id="LowTariff">-</span><br>Night Mode: <span id="Night">-</span><br>Fan Status: <span id="Fan">-</span><br>Pump Status: <span id="Pump">-</span><br>Compressor Status: <span id="Compressor">-</span><br>Compressor Overrun: <span id="CompOverrun">-</span><br>Water Return Temperature: <span id="CircWaterReturn_">-</span> °C<br>Compressor Operating Frequency: <span id="CompFreq_">-</span> Hz<br>Refrigerant Discharge Temperature: <span id="DischTemp_">-</span> °C<br>Power Consumption: <span id="PowerCons_">-</span> W<br>Fan Speed: <span id="FanSpeed_">-</span> rpm<br>Defrost Temperature: <span id="DefTemp">-</span> °C<br>Pump Speed: <span id="PumpSpeed_">-</span> rpm<br>Refrigerant Suction Temperature: <span id="SucTemp_">-</span> °C<br>Water Flow Temperature: <span id="CircWaterFlow_">-</span> °C<br><br><br><a href="./readdata">Raw readings</a></div><script>setInterval(function(){getdata();}, 2000);function getdata(){var xhttp=new XMLHttpRequest(); xhttp.onreadystatechange=function(){if (this.readyState==4 && this.status==200){var x=(new Date()).getTime(); var points=10; result=this.responseText; dataarray=result.split("#"); document.getElementById("CylTemp").innerHTML=dataarray[0]; document.getElementById("CylTemp_").innerHTML=dataarray[0]; document.getElementById("Power").innerHTML=dataarray[1]; document.getElementById("CH").innerHTML=dataarray[2]; if (dataarray[2]==1){document.getElementsByClassName("cylinderpump")[0].style.animationPlayState='running';document.getElementsByClassName("waterCHcold")[0].style.animationPlayState='running';document.getElementsByClassName("waterCHhot")[0].style.animationPlayState='running';}else{document.getElementsByClassName("cylinderpump")[0].style.animation='none';document.getElementsByClassName("cylinderpump")[0].offsetHeight;document.getElementsByClassName("cylinderpump")[0].style.animation=null; document.getElementsByClassName("cylinderpump")[0].style.animationPlayState='paused';document.getElementsByClassName("waterCHcold")[0].style.animationPlayState='paused';document.getElementsByClassName("waterCHhot")[0].style.animationPlayState='paused';}document.getElementById("DHW").innerHTML=dataarray[3]; document.getElementById("OAT").innerHTML=dataarray[4]*0.5; document.getElementById("OAT_").innerHTML=dataarray[4]*0.5; document.getElementById("Frost").innerHTML=dataarray[5]; document.getElementById("Defrost").innerHTML=dataarray[6]; document.getElementById("LowTariff").innerHTML=dataarray[7]; document.getElementById("Night").innerHTML=dataarray[8]; document.getElementById("Fan").innerHTML=dataarray[9]; if (dataarray[9]==1){document.getElementsByClassName("fan")[0].style.animationPlayState='running';document.getElementsByClassName("fan")[1].style.animationPlayState='running';}else{document.getElementsByClassName("fan")[0].style.animationPlayState='paused';document.getElementsByClassName("fan")[1].style.animationPlayState='paused';}document.getElementById("Pump").innerHTML=dataarray[10]; if (dataarray[10]==1){document.getElementsByClassName("hppump")[0].style.animationPlayState='running';document.getElementsByClassName("waterHPcold")[0].style.animationPlayState='running';document.getElementsByClassName("waterHPhot")[0].style.animationPlayState='running';if (dataarray[2]==1){document.getElementsByClassName("waterBufferCold")[0].style.animationPlayState='running';document.getElementsByClassName("waterBufferHot")[0].style.animationPlayState='running';}else{document.getElementsByClassName("waterBufferCold")[0].style.animationPlayState='paused';document.getElementsByClassName("waterBufferHot")[0].style.animationPlayState='paused';}if (dataarray[3]==1){document.getElementsByClassName("waterDHWcold")[0].style.animationPlayState='running';document.getElementsByClassName("waterDHWhot")[0].style.animationPlayState='running';}else{document.getElementsByClassName("waterDHWcold")[0].style.animationPlayState='paused';document.getElementsByClassName("waterDHWhot")[0].style.animationPlayState='paused';}}else{document.getElementsByClassName("hppump")[0].style.animation='none';document.getElementsByClassName("hppump")[0].offsetHeight;document.getElementsByClassName("hppump")[0].style.animation=null; document.getElementsByClassName("hppump")[0].style.animationPlayState='paused';document.getElementsByClassName("waterHPcold")[0].style.animationPlayState='paused';document.getElementsByClassName("waterHPhot")[0].style.animationPlayState='paused';document.getElementsByClassName("waterBufferCold")[0].style.animationPlayState='paused';document.getElementsByClassName("waterBufferHot")[0].style.animationPlayState='paused';document.getElementsByClassName("waterDHWcold")[0].style.animationPlayState='paused';document.getElementsByClassName("waterDHWhot")[0].style.animationPlayState='paused';}document.getElementById("Compressor").innerHTML=dataarray[11]; document.getElementById("CompOverrun").innerHTML=dataarray[12]; if (dataarray[11]==1){document.getElementsByClassName("compressor")[0].style.animationPlayState='running'}else{document.getElementsByClassName("compressor")[0].style.animation='none';document.getElementsByClassName("compressor")[0].offsetHeight;document.getElementsByClassName("compressor")[0].style.animation=null; document.getElementsByClassName("compressor")[0].style.animationPlayState='paused';}document.getElementById("CircWaterReturn").innerHTML=dataarray[13]; document.getElementById("CircWaterReturn_").innerHTML=dataarray[13]; document.getElementById("CompFreq").innerHTML=dataarray[14]; document.getElementById("CompFreq_").innerHTML=dataarray[14]; document.getElementById("DischTemp").innerHTML=dataarray[15]; document.getElementById("DischTemp_").innerHTML=dataarray[15]; document.getElementById("PowerCons").innerHTML=dataarray[16]*100; document.getElementById("PowerCons_").innerHTML=dataarray[16]*100; document.getElementById("FanSpeed").innerHTML=dataarray[17]*10; document.getElementById("FanSpeed_").innerHTML=dataarray[17]*10; document.getElementById("DefTemp").innerHTML=dataarray[18]; document.getElementById("PumpSpeed").innerHTML=dataarray[19]*100; document.getElementById("PumpSpeed_").innerHTML=dataarray[19]*100; document.getElementById("SucTemp").innerHTML=dataarray[20]; document.getElementById("SucTemp_").innerHTML=dataarray[20]; document.getElementById("CircWaterFlow").innerHTML=dataarray[21]; document.getElementById("CircWaterFlow_").innerHTML=dataarray[21];}}; xhttp.open("GET", "./readdata?_"+new Date().getTime(), true); xhttp.send();}</script></body></html>
)=====";
const char REDIRECT_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=index.html" />
</head>
<body>
<p>Please follow <a href="index.html">this link</a>.</p>
</body>
</html>
)=====";