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>