Rob Dobson
Monitor for central heating system (e.g. 2zones+hw) Supports up to 15 temp probes (DS18B20/DS18S20) 3 valve monitors Gas pulse meter recording Use stand-alone or with nodeEnergyServer See http://robdobson.com/2015/09/central-heating-monitor
Dependencies: EthernetInterfacePlusHostname NTPClient Onewire RdWebServer SDFileSystem-RTOS mbed-rtos mbed-src
public/index.html
- Committer:
- Bobty
- Date:
- 2015-10-16
- Revision:
- 23:fd5a5a9f30bc
- Parent:
- 14:3c3aa4fd7e1a
File content as of revision 23:fd5a5a9f30bc:
<!DOCTYPE html>
<html>
<head>
<title>Gas Use Monitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
function callAjax(url, callback, contentType, usePost)
{
var xmlhttp;
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
callback(xmlhttp.responseText);
}
}
if (typeof usePost !== "undefined")
{
xmlhttp.open("POST", url, true);
}
else
{
xmlhttp.open("GET", url, true);
}
if (typeof contentType !== "undefined")
{
if (contentType === "json")
{
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
}
}
xmlhttp.send();
}
function ajaxCallback()
{
}
function dataRefresh()
{
updateCurData();
setTimeout(function(){ dataRefresh();}, 10000);
}
function updateCurData()
{
callAjax("./getcurdata", curDataCallback, "json");
}
function curDataCallback(resp)
{
console.log("Response " + resp);
var respObj = JSON.parse(resp);
// Handle elements
if ("e" in respObj)
{
// Remove temperature and pump elements
var elem = document.getElementById("tempValues");
while (elem.firstChild)
{
elem.removeChild(elem.firstChild);
}
var elem = document.getElementById("pumpValues");
while (elem.firstChild)
{
elem.removeChild(elem.firstChild);
}
// Extract data from ajax json block and show
var i;
for (i = 0; i < respObj.e.length; i++)
{
dataRec = respObj.e[i];
if ("n" in dataRec)
{
if (dataRec.n === "gasCount")
{
var elem = document.getElementById("gasCountValue");
elem.innerHTML = "" + dataRec.v;
}
else if (dataRec.n.indexOf("temp_") > -1)
{
var tempStr = dataRec.n.slice(5);
var elem = document.getElementById("tempValues");
var para = document.createElement("p");
para.className = "label";
var node = document.createTextNode(tempStr);
para.appendChild(node);
elem.appendChild(para);
para = document.createElement("p");
para.className = "value";
node = document.createTextNode("" + dataRec.v);
para.appendChild(node);
elem.appendChild(para);
}
else if (dataRec.n.indexOf("pump_") > -1)
{
var pumpStr = dataRec.n.slice(5);
var elem = document.getElementById("pumpValues");
var para = document.createElement("p");
para.className = "label";
var node = document.createTextNode("Pump " + pumpStr);
para.appendChild(node);
elem.appendChild(para);
para = document.createElement("p");
para.className = "value";
node = document.createTextNode(dataRec.bv ? "On" : "Off");
para.appendChild(node);
elem.appendChild(para);
}
}
}
}
if ("bt" in respObj)
{
var elem = document.getElementById("lastUpdateTime");
ud = new Date(respObj.bt * 1000);
elem.innerHTML = "" + ud.getFullYear() + "/" + padZero(ud.getMonth()+1,2) + "/" + padZero(ud.getDate(),2) + " " + padZero(ud.getHours(),2) + ":" + padZero(ud.getMinutes(),2) + ":" + padZero(ud.getSeconds(),2);
}
}
function padZero(val, zeroes)
{
return("00000000" + val).slice(-zeroes);
}
function dispGasNewVal()
{
document.getElementById("gasadjust").style.display = "none";
document.getElementById("gasnewval").style.display = "block";
document.getElementById("setgasnewval").style.display = "block";
}
function setGasNewVal()
{
document.getElementById("gasadjust").style.display = "block";
document.getElementById("gasnewval").style.display = "none";
document.getElementById("setgasnewval").style.display = "none";
var elem = document.getElementById("gasnewval");
var newVal = elem.value;
callAjax("./setgascount?newVal=" + newVal, setValCallback, "json", "POST")
}
function setValCallback(resp)
{
console.log("setGasValue returned " + resp)
updateCurData();
}
function showLog()
{
document.getElementById("logtext").style.display = "block";
callAjax("log.txt", getLogTextCallback);
}
function getLogTextCallback(resp)
{
var elem = document.getElementById("logtext");
elem.innerHTML = resp;
}
</script>
<style>
body {
font-family: Helvetica;
line-height: 1.7rem;
font-size:12pt;
}
.layout { display:table; width: 100%; max-width: 800px; margin: 0 auto 0 auto; }
.pg-hd { background-color: #00344c; display: block; }
.hd-txt { padding: 10px; color: White; vertical-align: middle; text-align:center; }
.hd-com
{
float: right;
height:0;
width:0;
}
.hd-ico
{
position: relative;
top: -37px;
left: -60px;
}
.hd-com div
{
}
.hd-com div a
{
background: transparent url('gear-gr.png') no-repeat;
padding: 40px 60px 20px 13px;
color: white;
}
.hd-com div a.text
{
left: -20px;
}
.lk-hd
{
color: #fff;
background-color: #8898aB !important;
display: table-cell;
width: 20%;
border-bottom: 1px solid #666;
text-align:center;
vertical-align: middle;
border-right: 1px solid #666;
}
.lk-hd:last-child
{
border-right: none !important;
}
.lk-5x
{
color: #315D96;
background-color: #e6ebf0 !important;
background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #E6E8EC), color-stop(0.5, #E6E8EC), color-stop(1, #98a0b0)) !important;
background: -moz-linear-gradient(top, #E6E8EC 0%, #E6E8EC 50%, #98a0b0 100%) !important;
background: linear-gradient(to bottom, #E6E8EC 0%, #E6E8EC 50%, #98a0b0 100%) !important;
display: table-cell;
width: 20%;
border-bottom: 1px solid #666;
text-align:center;
vertical-align: middle;
border-right: 1px solid #666;
}
.lk-5x:last-child
{
border-right: none !important;
}
.lk-5x a
{
color: #315D96;
font-weight: bold;
}
.up-ico a, .st-ico a, .dn-ico a
{
display: block;
vertical-align: middle;
text-decoration:none;
padding: 25px 0 25px 0;
font-size: 150%;
}
.hd-lin
{
display: block;
vertical-align: middle;
text-decoration:none;
font-size: 150%;
font-weight: bold;
padding: 30px 0 30px 0;
}
.un-pad {
padding: 2px;
}
.label, .value, #gasnewval {
width: 100%; text-align: center;
}
#gasadjust, #setgasnewval {
text-align: center;
padding: 10px;
border: 10px;
margin: 5%;
width: 90%;
}
.label {
color: grey;
margin: 0.6em 0 0.6em 0;
}
.value {
font-size: 180%;
font-weight: bold;
color: green;
margin: 0.6em 0 0.6em 0;
}
.datacell {
display:block; width: 100%; max-width: 200px; margin: 0; border: solid lightgrey 2px; padding: 5px;
float: left;
}
#gasnewval {
display: none;
font-size: 200%;
}
#setgasnewval {
display: none;
}
#logtext {
display: none;
margin: 0; border: solid lightgrey 2px; padding: 5px;
width: 100%;
height: 100%;
min-height: 300px;
}
</style>
</head>
<body onload="dataRefresh();">
<div class="layout">
<div class="pg-hd">
<div class="hd-txt">
<h1>Gas Use Monitor</h1>
</div>
<div class="hd-com"><div class="hd-ico">
<div id="showlog"><a href="#" onclick="showLog();">Log</a></div>
</div></div>
</div>
</div>
<div class="layout">
<div class="datacell">
<p class="label">Update time</p>
<p class="value" id="lastUpdateTime"></p>
<p class="label">Gas Count</p>
<p class="value" id="gasCountValue"></p>
<button id="gasadjust" href="#" onclick="dispGasNewVal();">Change</button>
<input id="gasnewval" type="text" name="newGasCountValue" />
<button id="setgasnewval" type="button" href="#" onclick="setGasNewVal();">Set New Value</button>
</div>
<div class="datacell" id="tempValues">
</div>
<div class="datacell" id="pumpValues">
</div>
</div>
<div class="layout">
<textarea id="logtext">
</textarea>
</div>
</body>
</html>