Added usage plots and ADC reading for Vcc

web/application.js

@@ -1,46 +1,132 @@
 var nextVersion;
-var im, em, vm, am;
-$(function() {
-    im = $("#im");
-    if(im && im.gaugeMeter) {
-        im.gaugeMeter({
-            percent: 0,
-            text: "-",
-            append: "W"
-        });
-    }
-    
-    em = $("#em");
-    if(em && em.gaugeMeter) {
-        em.gaugeMeter({
-            percent: 0,
-            text: "-",
-            append: "W"
-        });
-    }
-    
-    vm = $("#vm");
-    if(vm && vm.gaugeMeter) {
-        vm.gaugeMeter({
-            percent: 0,
-            text: "-",
-            append: "V"
-        });
-    }
-    
-    am = $("#am");
-    if(am && am.gaugeMeter) {
-        am.gaugeMeter({
-            percent: 0,
-            text: "-",
-            append: "A"
-        });
-    }
+var im, em;
 
-    var meters = $('.SimpleMeter');
+// Day plot
+var ep;
+var ea;
+var eo = {
+    title: 'Last 24 hours',
+    curveType: 'function',
+    legend: { position: 'none' },
+    vAxis: {
+        viewWindowMode: 'maximized'
+    }
+};
+
+// Month plot
+var mp;
+var ma;
+var mo = {
+    title: 'Last month',
+    curveType: 'function',
+    legend: { position: 'none' },
+    vAxis: {
+        viewWindowMode: 'maximized'
+    }
+};
+
+// Voltage plot
+var vp;
+var va;
+var vo = {
+    title: 'Phase voltage',
+    titleTextStyle: {
+        fontSize: 14
+    },
+    bar: { groupWidth: '90%' },
+    vAxis: {
+        minValue: 200,
+        maxValue: 260,
+        ticks: [
+            { v: 207, f: '-10%'},
+            { v: 230, f: '230V'},
+            { v: 253, f: '+10%'}
+        ]
+    },
+    legend: { position: 'none' },
+    tooltip: { trigger: 'none'},
+    enableInteractivity: false,
+};
+
+// Amperage plot
+var ap;
+var aa;
+var ao = {
+    title: 'Phase current',
+    titleTextStyle: {
+        fontSize: 14
+    },
+    bar: { groupWidth: '90%' },
+    vAxis: {
+        minValue: 0,
+        maxValue: 100,
+        ticks: [
+            { v: 25, f: '25%'},
+            { v: 50, f: '50%'},
+            { v: 75, f: '75%'},
+            { v: 100, f: '100%'}
+        ]
+    },
+    legend: { position: 'none' },
+    tooltip: { trigger: 'none'},
+    enableInteractivity: false,
+};
+
+// Import plot
+var ip;
+var ia;
+var io = {
+    legend: 'none',
+    pieHole: 0.6,
+    pieSliceText: 'none',
+    pieStartAngle: 216,
+    slices: {
+        0: { color: 'green' },
+        1: { color: '#eee' },
+        2: { color: 'transparent' }
+    },
+    legend: { position: 'none' },
+    tooltip: { trigger: 'none'},
+    enableInteractivity: false,
+    chartArea: {
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%'
+    }
+};
+
+// Export plot
+var xp;
+var xa;
+var xo = {
+    legend: 'none',
+    pieHole: 0.6,
+    pieSliceText: 'none',
+    pieStartAngle: 216,
+    slices: {
+        0: { color: 'green' },
+        1: { color: '#eee' },
+        2: { color: 'transparent' }
+    },
+    legend: { position: 'none' },
+    tooltip: { trigger: 'none'},
+    enableInteractivity: false,
+    chartArea: {
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%'
+    }
+};
+
+$(function() {
+    var meters = $('.plot1');
 
     if(meters.length > 0) {
-        fetch();
+        // Chart
+        google.charts.load('current', {'packages':['corechart']});
+        google.charts.setOnLoadCallback(setupChart);
     }
 
     // For mqtt
@@ -97,6 +183,9 @@ $(function() {
         var fileName = $(this).val();
         $(this).next('.custom-file-label').html(fileName);
     })
+    $('.upload-form').on('submit', function(i, form) {
+        $('#loading-indicator').show();
+    });
 
     // For NTP
     $('#n').on('change', function() {
@@ -135,8 +224,9 @@ $(function() {
     }
 
     // Check for software upgrade
-    var swv = $('#swVersion')
-    if(meters.length > 0 && swv.length == 1 && swv.text() != "SNAPSHOT") {
+    var swv = $('#swVersion');
+    var fwl = $('#fwLink');
+    if((meters.length > 0 || fwl.length > 0) && swv.length == 1) {
         var v = swv.text().substring(1).split('.');
         var v_major = parseInt(v[0]);
         var v_minor = parseInt(v[1]);
@@ -145,48 +235,66 @@ $(function() {
             url: swv.data('url'),
             dataType: 'json'
         }).done(function(releases) {
-            releases.reverse();
-            var me;
-            var next_patch;
-            var next_minor;
-            var next_major;
-            $.each(releases, function(i, release) {
-                var ver2 = release.tag_name;
-                var v2 = ver2.substring(1).split('.');
-                var v2_major = parseInt(v2[0]);
-                var v2_minor = parseInt(v2[1]);
-                var v2_patch = parseInt(v2[2]);
+            if(!swv.text().match("^v\d{1,2}\.\d{1,2}\.\d{1,2}$")) {
+                nextVersion = releases[0];
+            } else {
+                releases.reverse();
+                var next_patch;
+                var next_minor;
+                var next_major;
+                $.each(releases, function(i, release) {
+                    var ver2 = release.tag_name;
+                    var v2 = ver2.substring(1).split('.');
+                    var v2_major = parseInt(v2[0]);
+                    var v2_minor = parseInt(v2[1]);
+                    var v2_patch = parseInt(v2[2]);
 
-                if(v2_major == v_major) {
-                    if(v2_minor == v_minor) {
-                        if(v2_patch > v_patch) {
-                            next_patch = release;
+                    if(v2_major == v_major) {
+                        if(v2_minor == v_minor) {
+                            if(v2_patch > v_patch) {
+                                next_patch = release;
+                            }
+                        } else if(v2_minor == v_minor+1) {
+                            next_minor = release;
                         }
-                    } else if(v2_minor == v_minor+1) {
-                        next_minor = release;
-                    }
-                } else if(v2_major == v_major+1) {
-                    if(next_major) {
-                        var mv = next_major.tag_name.substring(1).split('.');
-                        var mv_major = parseInt(mv[0]);
-                        var mv_minor = parseInt(mv[1]);
-                        var mv_patch = parseInt(mv[2]);
-                        if(v2_minor == mv_minor) {
+                    } else if(v2_major == v_major+1) {
+                        if(next_major) {
+                            var mv = next_major.tag_name.substring(1).split('.');
+                            var mv_major = parseInt(mv[0]);
+                            var mv_minor = parseInt(mv[1]);
+                            var mv_patch = parseInt(mv[2]);
+                            if(v2_minor == mv_minor) {
+                                next_major = release;
+                            }
+                        } else {
                             next_major = release;
                         }
-                    } else {
-                        next_major = release;
                     }
+                });
+                if(next_minor) {
+                    nextVersion = next_minor;
+                } else if(next_major) {
+                    nextVersion = next_major;
+                } else if(next_patch) {
+                    nextVersion = next_patch;
                 }
-            });
-            if(next_minor) {
-                nextVersion = next_minor;
-            } else if(next_major) {
-                nextVersion = next_major;
-            } else if(next_patch) {
-                nextVersion = next_patch;
+                                
             }
             if(nextVersion) {
+                if(fwl.length > 0) {
+                    var chipset = fwl.data('chipset').toLowerCase();
+                    $.each(releases, function(i, release) {
+                        if(release.tag_name == nextVersion.tag_name) {
+                            $.each(release.assets, function(i, asset) {
+                                if(asset.name.includes(chipset) && !asset.name.includes("partitions")) {
+                                    fwl.prop('href', asset.browser_download_url);
+                                    $('#fwDownload').show();
+                                    return false;
+                                }
+                            });
+                        }
+                    });
+                };
                 $('#newVersionTag').text(nextVersion.tag_name);
                 $('#newVersionUrl').prop('href', nextVersion.html_url);
                 $('#newVersion').removeClass('d-none');
@@ -201,6 +309,97 @@ $(function() {
     }
 });
 
+var resizeTO;
+$( window ).resize(function() {
+    if(resizeTO) clearTimeout(resizeTO);
+    resizeTO = setTimeout(function() {
+        $(this).trigger('resizeEnd');
+    }, 250);
+});
+
+$(window).on('resizeEnd', function() {
+    redraw();
+});
+
+var zeropad = function(num) {
+    num = num.toString();
+    while (num.length < 2) num = "0" + num;
+    return num;
+}
+
+var setupChart = function() {
+    ep = new google.visualization.LineChart(document.getElementById('ep'));
+    mp = new google.visualization.LineChart(document.getElementById('mp'));
+    vp = new google.visualization.ColumnChart(document.getElementById('vp'));
+    ap = new google.visualization.ColumnChart(document.getElementById('ap'));
+    ip = new google.visualization.PieChart(document.getElementById('ip'));
+    xp = new google.visualization.PieChart(document.getElementById('xp'));
+    fetch();
+    drawEnergy();
+};
+
+var redraw = function() {
+    ep.draw(ea, eo);
+    mp.draw(ma, mo);
+    vp.draw(va, vo);
+    ap.draw(aa, ao);
+    ip.draw(ia, io);
+    xp.draw(xa, xo);
+};
+
+var drawEnergy = function() {
+    $.ajax({
+        url: '/dayplot.json',
+        timeout: 30000,
+        dataType: 'json',
+    }).done(function(json) {
+        data = [['Hour','Value']];
+        var r = 1;
+        var hour = moment.utc().hours();
+        var offset = moment().utcOffset()/60;
+        var min = 0;
+        for(var i = hour; i<24; i++) {
+            var val = json["h"+zeropad(i)];
+            data[r++] = [zeropad((i+offset)%24), val];
+            Math.min(0, val);
+        };
+        for(var i = 0; i < hour; i++) {
+            var val = json["h"+zeropad(i)];
+            data[r++] = [zeropad((i+offset)%24), val];
+            Math.min(0, val);
+        };
+        ea = google.visualization.arrayToDataTable(data);
+        if(min == 0)
+            eo.vAxis.minValue = 0;
+        ep.draw(ea, eo);
+    });
+    $.ajax({
+        url: '/monthplot.json',
+        timeout: 30000,
+        dataType: 'json',
+    }).done(function(json) {
+        data = [['Day','Value']];
+        var r = 1;
+        var day = moment().date();
+        var start = moment().subtract(1, 'months').endOf('month').date();
+        var min = 0;
+        for(var i = day; i<=start; i++) {
+            var val = json["d"+zeropad(i)];
+            data[r++] = [zeropad((i)), val];
+            Math.min(0, val);
+        }
+        for(var i = 1; i < day; i++) {
+            var val = json["d"+zeropad(i)];
+            data[r++] = [zeropad((i)), val];
+            Math.min(0, val);
+        }
+        ma = google.visualization.arrayToDataTable(data);
+        if(min == 0)
+            mo.vAxis.minValue = 0;
+        mp.draw(ma, mo);
+    });
+};
+
 var setStatus = function(id, sid) {
     var item = $('#'+id);
     item.removeClass('d-none');
@@ -220,6 +419,26 @@ var setStatus = function(id, sid) {
     item.addClass('badge badge-' + status);
 };
 
+var voltcol = function(pct) {
+    if(pct > 85) return '#d90000';
+    else if(pct > 75) return'#e32100';
+    else if(pct > 70) return '#ffb800';
+    else if(pct > 65) return '#dcd800';
+    else if(pct > 35) return '#32d900';
+    else if(pct > 25) return '#dcd800';
+    else if(pct > 20) return '#ffb800';
+    else if(pct > 15) return'#e32100';
+    else return '#d90000';
+};
+
+var ampcol = function(pct) {
+    if(pct > 85) return '#d90000';
+    else if(pct > 75) return'#e32100';
+    else if(pct > 70) return '#ffb800';
+    else if(pct > 65) return '#dcd800';
+    else return '#32d900';
+};
+
 var interval = 5000;
 var fetch = function() {
     $.ajax({
@@ -231,8 +450,7 @@ var fetch = function() {
             $(".SimpleMeter").hide();
             im.show();
             em.show();
-            vm.show();
-            am.show();
+
         }
 
         for(var id in json) {
@@ -265,7 +483,7 @@ var fetch = function() {
         setStatus("mqtt", json.mm);
 
 
-        if(im && im.gaugeMeter) {
+        if(ip) {
             var v = parseInt(json.i);
             var pct = (v*100)/parseInt(json.im);
             var append = "W";
@@ -273,14 +491,20 @@ var fetch = function() {
                 v = (v/1000).toFixed(1);
                 append = "kW";
             }
-            im.gaugeMeter({
-                percent: pct,
-                text: v,
-                append: append
-            });
+            $('.ipo').html(v);
+            $('.ipoa').html(append);
+            var arr = [
+                ['Slice', 'Value'],
+                ['', (pct*2.88)],
+                ['', ((100-pct)*2.88)],
+                ['', 72],
+            ];
+            io.slices[0].color = ampcol(pct);
+            ia = google.visualization.arrayToDataTable(arr);
+            ip.draw(ia, io);
         }
 
-        if(em && em.gaugeMeter && json.om) {
+        if(xp) {
             var v = parseInt(json.e);
             var pct = (v*100)/(parseInt(json.om)*1000);
             var append = "W";
@@ -288,52 +512,78 @@ var fetch = function() {
                 v = (v/1000).toFixed(1);
                 append = "kW";
             }
-            em.gaugeMeter({
-                percent: pct,
-                text: v,
-                append: append
-            });
+            $('.epo').html(v);
+            $('.epoa').html(append);
+            var arr = [
+                ['Slice', 'Value'],
+                ['', (pct*2.88)],
+                ['', ((100-pct)*2.88)],
+                ['', 72],
+            ];
+            xo.slices[0].color = ampcol(pct);
+            xa = google.visualization.arrayToDataTable(arr);
+            xp.draw(xa, xo);
         }
 
-        if(vm && vm.gaugeMeter) {
+        if(vp) {
             var c = 0;
             var t = 0;
+            var r = 1;
+            var arr = [['Phase', 'Voltage', { role: 'style' }, { role: 'annotation' }]];
             if(json.u1) {
-                t += parseFloat(json.u1);
+                var u1 = parseFloat(json.u1);
+                t += u1;
                 c++;
+                var pct = (Math.max(parseFloat(json.u1)-195.5, 1)*100/69);
+                arr[r++] = ['L1', u1, voltcol(pct), u1 + "V"];
             }
             if(json.u2) {
-                t += parseFloat(json.u2);
+                var u2 = parseFloat(json.u2);
+                t += u2;
                 c++;
+                var pct = (Math.max(parseFloat(json.u2)-195.5, 1)*100/69);
+                arr[r++] = ['L2', u2, voltcol(pct), u2 + "V"];
             }
             if(json.u3) {
-                t += parseFloat(json.u3);
+                var u3 = parseFloat(json.u3);
+                t += u3;
                 c++;
+                var pct = (Math.max(parseFloat(json.u3)-195.5, 1)*100/69);
+                arr[r++] = ['L3', u3, voltcol(pct), u3 + "V"];
             }
             v = t/c;
-            var pct = (Math.max(v-207, 1)*100/46);
-            vm.gaugeMeter({
-                percent: pct,
-                text: v.toFixed(1)
-            });
+            if(v > 0) {
+                va = google.visualization.arrayToDataTable(arr);
+                vp.draw(va, vo);
+            }
         }
 
-        if(am && am.gaugeMeter && json.mf) {
+        if(ap && json.mf) {
             var a = 0;
+            var r = 1;
+            var arr = [['Phase', 'Amperage', { role: 'style' }, { role: 'annotation' }]];
             if(json.i1) {
-                a = Math.max(a, parseFloat(json.i1));
+                var i1 = parseFloat(json.i1);
+                a = Math.max(a, i1);
+                var pct = (parseFloat(json.i1)/parseInt(json.mf))*100;
+                arr[r++] = ['L1', pct, ampcol(pct), i1 + "A"];
             }
             if(json.i2) {
-                a = Math.max(a, parseFloat(json.i2));
+                var i2 = parseFloat(json.i2);
+                a = Math.max(a, i2);
+                var pct = (parseFloat(json.i2)/parseInt(json.mf))*100;
+                arr[r++] = ['L2', pct, ampcol(pct), i2 + "A"];
             }
             if(json.i3) {
-                a = Math.max(a, parseFloat(json.i3));
+                var i3 = parseFloat(json.i3);
+                a = Math.max(a, i3);
+                var pct = (parseFloat(json.i3)/parseInt(json.mf))*100;
+                arr[r++] = ['L3', pct, ampcol(pct), i3 + "A"];
+            }
+            if(a > 0) {
+                aa = google.visualization.arrayToDataTable(arr);
+                ap.draw(aa, ao);
             }
-            var pct = (a*100)/parseInt(json.mf);
-            am.gaugeMeter({
-                percent: pct,
-                text: a.toFixed(1)
-            });
         }
 
         if(json.me) {
@@ -363,6 +613,7 @@ var fetch = function() {
 var upgrade = function() {
     if(nextVersion) {
         if(confirm("Are you sure you want to perform upgrade to " + nextVersion.tag_name + "?")) {
+            $('#loading-indicator').show();
             window.location.href="/upgrade?version=" + nextVersion.tag_name;
         }
     }