Temperature graph

src/web/AmsWebServer.cpp

@@ -247,7 +247,7 @@ void AmsWebServer::temperatureJson() {
 			conf == NULL || conf->common ? 1 : 0,
 			data->lastRead
 		);
-		delay(1);
+		delay(10);
 	}
 	char* pos = buf+strlen(buf);
 	snprintf(count == 0 ? pos : pos-1, 8, "]}");

web/application.js

@@ -18,6 +18,7 @@ var po = {
     enableInteractivity: false,
 };
 var pl = null; // Last price
+var tl = null; // Last temperature
 
 // Day plot
 var ep;
@@ -150,6 +151,25 @@ var xo = {
     }
 };
 
+// Temperature plot
+var td = false; // Disable temperature
+var tp;
+var ta;
+var to = {
+    title: 'Temperature sensors',
+    titleTextStyle: {
+        fontSize: 14
+    },
+    bar: { groupWidth: '90%' },
+    legend: { position: 'none' },
+    vAxis: {
+        title: '°C',
+        viewWindowMode: 'maximized'
+    },
+    tooltip: { trigger: 'none'},
+    enableInteractivity: false,
+};
+
 $(function() {
     var meters = $('.plot1');
 
@@ -364,6 +384,7 @@ var setupChart = function() {
     ap = new google.visualization.ColumnChart(document.getElementById('ap'));
     ip = new google.visualization.PieChart(document.getElementById('ip'));
     xp = new google.visualization.PieChart(document.getElementById('xp'));
+    tp = new google.visualization.ColumnChart(document.getElementById('tp'));
     fetch();
     drawDay();
     drawMonth();
@@ -379,6 +400,10 @@ var redraw = function() {
     ap.draw(aa, ao);
     ip.draw(ia, io);
     xp.draw(xa, xo);
+    tp.draw(ta, to);
+    if(tl != null) {
+        tp.draw(ta, to);
+    }
 };
 
 var drawPrices = function() {
@@ -475,6 +500,36 @@ var drawMonth = function() {
     });
 };
 
+var drawTemperature = function() {
+    if(td) return;
+
+    $.ajax({
+        url: '/temperature.json',
+        timeout: 30000,
+        dataType: 'json',
+    }).done(function(json) {
+        if(json.c > 1) {
+            $('#tpc').show();
+
+            var r = 1;
+            var min = 0;
+            data = [['Sensor','°C', { role: 'style' }, { role: 'annotation' }]];
+            $.each(json.s, function(i, o) {
+                var name = o.n ? o.n : o.a;
+                data[r++] = [name, o.v, "color: #6f42c1;opacity: 0.9;", o.v.toFixed(1)];
+                Math.min(0, o.v);
+            });
+            if(min == 0)
+                to.vAxis.minValue = 0;
+            ta = google.visualization.arrayToDataTable(data);
+            tp.draw(ta, to);
+            td = false;
+        } else {
+            td = true;
+        }
+    });
+};
+
 var setStatus = function(id, sid) {
     var item = $('#'+id);
     item.removeClass('d-none');
@@ -669,12 +724,16 @@ var fetch = function() {
             $('#ml').html(json.me);
         }
 
-        var temp = parseInt(json.t);
-        if(temp == -127) {
+        var temp = parseFloat(json.t);
+        if(temp == -127.0) {
             $('.jt').html("N/A");
             $('.rt').hide();
         } else {
             $('.rt').show();
+            if(tl != temp) {
+                drawTemperature();
+            }
+            tl = temp;
         }
 
         var vcc = parseFloat(json.v);

web/head32.html

@@ -50,9 +50,6 @@
         </a>
         <div class="navbar-nav-scroll">
             <ul class="navbar-nav bd-navbar-nav flex-row">
-                <li class="nav-item">
-                    <a id="temp-link" class="nav-link" href="/temperature">Temp<span class="d-none d-sm-inline">erature</span></a>
-                </li>
                 <li class="nav-item">
                     <div class="dropdown">
                         <a class="dropdown-toggle nav-link" href="#" role="button" id="config-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

web/head8266.html

@@ -50,9 +50,6 @@
         </a>
         <div class="navbar-nav-scroll">
             <ul class="navbar-nav bd-navbar-nav flex-row">
-                <li class="nav-item">
-                    <a id="temp-link" class="nav-link" href="/temperature">Temp<span class="d-none d-sm-inline">erature</span></a>
-                </li>
                 <li class="nav-item">
                     <div class="dropdown">
                         <a class="dropdown-toggle nav-link" href="#" role="button" id="config-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

web/index.html

@@ -119,6 +119,12 @@
     <div class="col-xl-12 mb-3">
         <div class="bg-white rounded shadow" id="mp" style="width: 100%; height: 224px;"></div>
     </div>
+    <div id="tpc" class="col-xl-12 mb-3" style="display: none;">
+        <div class="bg-white rounded shadow pb-3">
+            <div id="tp" style="width: 100%; height: 224px;"></div>
+            <a class="m-4" href="/temperature">Configuration</a>
+        </div>
+    </div>
     <div class="col-lg-3 col-sm-6 mb-3 d-none me me-1 me-2 me-3 me-4 me-5 me-6 me-7 me-8 me-9 me-10 me-11 me-12 me-13">
         <div class="d-none badge badge-danger me me-1 me-2 me-5 me-6 me-7 me-8 me-9 me-12">MQTT communication error (<span id="ml">-</span>)</div>
         <div class="d-none badge badge-danger me me-3">MQTT failed to connect</div>