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
Revision 23:fd5a5a9f30bc, committed 2015-10-16
- Comitter:
- Bobty
- Date:
- Fri Oct 16 09:07:04 2015 +0000
- Parent:
- 22:14b4060dd027
- Commit message:
- Added index.html file to project for completeness
Changed in this revision
index.html | Show annotated file Show diff for this revision Revisions of this file |
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/index.html Fri Oct 16 09:07:04 2015 +0000 @@ -0,0 +1,342 @@ +<!DOCTYPE html> +<html> + +<head> + <title>Gas Use Monitor</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> + <script type="text/javascript"> + + var pathToServer = "./"; + + 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(pathToServer+"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(dataRec.n.lastIndexOf("_") + 1); + 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(dataRec.n.lastIndexOf("_") + 1); + var elem = document.getElementById("pumpValues"); + var para = document.createElement("p"); + para.className = "label"; + var node = document.createTextNode(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(pathToServer + "setgascount?newVal=" + newVal, setValCallback, "json", "POST") + } + + function setValCallback(resp) { + console.log("setGasValue returned " + resp) + updateCurData(); + } + + function showLog() { + document.getElementById("logtext").style.display = "block"; + callAjax(pathToServer+"log.txt", getLogTextCallback); + } + + function showUpload() { + document.getElementById("fileuploadform").style.display = "block"; + } + + function getLogTextCallback(resp) { + var elem = document.getElementById("logtext"); + elem.innerHTML = resp; + } + + $(document).ready(function() { + $('#UploadNow').click(function() { + var formData = new FormData($('form')[0]); + $.ajax({ + url: pathToServer + 'upload', //Server script to process data + type: 'POST', + xhr: function() { // Custom XMLHttpRequest + var myXhr = $.ajaxSettings.xhr(); + if (myXhr.upload) { // Check if upload property exists + myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload + } + return myXhr; + }, + //Ajax events + // beforeSend: beforeSendHandler, + success: completeHandler, + error: errorHandler, + // Form data + data: formData, + //Options to tell jQuery not to process data or worry about content-type. + cache: false, + contentType: false, + processData: false + }); + }); + + function progressHandlingFunction(e) { + if (e.lengthComputable) { + $('progress').attr({ + value: e.loaded, + max: e.total + }); + } + } + + function completeHandler(e) { + alert("Completed file upload"); + } + + function errorHandler(jqXHR, textStatus, errorThrown) { + alert("Error uploading file " + textStatus + " " + errorThrown); + } + }); + </script> + <style> + body { + font-family: Helvetica; + line-height: 1rem; + font-size: 12pt; + } + + .layout { + display: table; + width: 360px; + margin: 0 auto 0 auto; + } + + .pageheading { + background-color: #00344c; + display: block; + min-height: 60px; + text-align: center; + } + + .headingtxt { + height: 100%; + padding: 10px; + padding-top: 20px; + color: White; + vertical-align: middle; + text-align: center; + } + + .label, + .value, + #gasnewval { + width: 100%; + text-align: center; + } + + #gasadjust, + #setgasnewval { + text-align: center; + padding: 10px; + border: 10px; + margin: 5%; + width: 90%; + background-color: grey; + color: White; + } + + .label { + color: grey; + margin: 0.6em 0 0.6em 0; + } + + .value { + font-size: 110%; + font-weight: bold; + color: green; + margin: 0.6em 0 0.6em 0; + } + + .datacell { + display: block; + width: 116px; + min-height: 180px; + margin: 0; + border: solid lightgrey 2px; + float: left; + } + + #gasnewval { + display: none; + font-size: 120%; + } + + #setgasnewval { + display: none; + } + + #logtext { + display: none; + margin: 0; + border: solid lightgrey 2px; + padding: 5px; + width: 346px; + height: 100%; + min-height: 200px; + } + #fileuploadform { + display: none; + border: solid lightgrey 2px; + padding: 5px; + width: 346px; + } + #setupbtns { + display: block; + position: relative; + top:-40px; + left:270px; + height: 0px; + text-align: left; + } + .setupbtn { + display: block; + position: relative; + padding-top: 3px; + } + .setupbtn button { + width: 80px; + } + </style> +</head> + +<body onload="dataRefresh();"> + <div class="layout"> + <div class="pageheading"> + <div class="headingtxt"> + Gas Use Monitor + </div> + <div id="setupbtns"> + <div id="showlog" class="setupbtn"><button href="#" onclick="showLog();">Log</button></div> + <div id="showupload" class="setupbtn"><button href="#" onclick="showUpload();">Upload</button></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> + <div class="layout" id="fileuploadform"> + <form enctype="multipart/form-data"> + <input name="file" type="file" /> + <input type="button" value="Upload" id="UploadNow" /> + </form> + <progress></progress> + </div> +</body> + +</html>