Rob Dobson / RdGasUseMonitor

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

index.html

Committer:
Bobty
Date:
2015-10-16
Revision:
23:fd5a5a9f30bc

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 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>