# HG changeset patch
# User Michiel Broek <mbroek@mbse.eu>
# Date 1534194050 -7200
# Node ID 522022b4fae4e4310bf40bffc31f0b12fd93885a
# Parent  ccbe79db80b8cd9f89655905e67601b2ea3b8d30
Added monitoring screens

diff -r ccbe79db80b8 -r 522022b4fae4 www/css/style.css
--- a/www/css/style.css	Mon Aug 13 19:49:42 2018 +0200
+++ b/www/css/style.css	Mon Aug 13 23:00:50 2018 +0200
@@ -44,9 +44,11 @@
     height: 628px;
     border: 2px solid #4297d7;
     background: #252526;
+    color: #eeeeee;
 }
 
 
+
 #header {
     width: 1278px;
     height: 38px;
@@ -71,6 +73,18 @@
 
 
 
+#node_table {
+    width: 600px;
+    background: #353536;
+    margin: 50px;
+    border: 2px solid;
+    font-size: 12pt;
+    border-color: #888;
+    border-radius: 5px 5px 5px 5px;
+}
+
+
+
 #fermenter_table {
     width: 720px;
     background: #252526;
diff -r ccbe79db80b8 -r 522022b4fae4 www/includes/global.inc.php
--- a/www/includes/global.inc.php	Mon Aug 13 19:49:42 2018 +0200
+++ b/www/includes/global.inc.php	Mon Aug 13 23:00:50 2018 +0200
@@ -77,6 +77,8 @@
   <script src="jqwidgets/jqxcheckbox.js"></script>
   <script src="jqwidgets/jqxdatetimeinput.js"></script>
   <script src="jqwidgets/jqxcalendar.js"></script>
+  <script src="jqwidgets/jqxgauge.js"></script>
+  <script src="jqwidgets/jqxdraw.js"></script>
   <script src="jqwidgets/globalization/globalize.js"></script>
   <script src="js/global.js"></script>
 <?php
@@ -100,7 +102,7 @@
 $mysqli = new mysqli(DBASE_HOST,DBASE_USER,DBASE_PASS,DBASE_NAME);
 $result = $mysqli->query("SELECT uuid,node,online,net_address FROM nodes");
 while($row = $result->fetch_array(MYSQLI_ASSOC)) {
-    echo '         <li><a href="mon_node.php?node='.$row['node'].'">'.$row['node'].'</a></li>'.PHP_EOL;
+    echo '         <li><a href="mon_node.php?uuid='.$row['uuid'].'">'.$row['node'].'</a></li>'.PHP_EOL;
 }
 mysqli_free_result($result);
 ?>
@@ -111,13 +113,12 @@
 <?php
 $result = $mysqli->query("SELECT uuid,node,alias,online,mode FROM fermenters");
 while($row = $result->fetch_array(MYSQLI_ASSOC)) {
-    echo '         <li><a href="mon_fermenter.php?node='.$row['node'].'&amp;alias='.$row['alias'].'">'.$row['node'].'/'.$row['alias'].'</a></li>'.PHP_EOL;
+    echo '         <li><a href="mon_fermenter.php?uuid='.$row['uuid'].'">'.$row['node'].'/'.$row['alias'].'</a></li>'.PHP_EOL;
 }
 mysqli_free_result($result);
 ?>
         </ul>
        </li>
-       <li><a href="monitor.php">Probeersel</a></li>
       </ul>
      </li>
      <li>Inventaris
diff -r ccbe79db80b8 -r 522022b4fae4 www/mon_brewer.php
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/mon_brewer.php	Mon Aug 13 23:00:50 2018 +0200
@@ -0,0 +1,12 @@
+<?php
+require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php');
+page_header('Hoofdmenu', NULL);
+?>
+
+   <div id="MainPanel">
+    <div id="ContentPanel"></div>
+   </div>
+
+<?php
+page_footer();
+?>
diff -r ccbe79db80b8 -r 522022b4fae4 www/mon_fermenter.php
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/mon_fermenter.php	Mon Aug 13 23:00:50 2018 +0200
@@ -0,0 +1,159 @@
+<?php
+require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php');
+page_header('Hoofdmenu', NULL);
+$uuid = $_GET["uuid"];
+?>
+   <script>
+  $(document).ready(function () {
+
+    var gaugeoptions = {
+	  min: -5, max: 35, width: 275, height: 275,
+	  ranges: [{ startValue: -5, endValue:  0, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 },
+	           { startValue:  0, endValue: 16, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 },
+	           { startValue: 16, endValue: 24, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 10, startWidth: 10 },
+	           { startValue: 24, endValue: 35, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 10, startWidth: 10 }],
+	  ticksMinor: { interval: 1, size: '5%' },
+	  ticksMajor: { interval: 5, size: '9%' },
+	  labels: { interval: 5 },
+	  style: { fill: '#eeeeee', stroke: '#666666' },
+	  value: 0,
+	  colorScheme: 'scheme05',
+	  animationDuration: 1200
+    };
+    var gaugeSmalloptions = {
+	  min: -20, max: 25, width: 150, height: 150,
+	  ranges: [{ startValue: -20, endValue:  0, startWidth: 5, endWidth: 5, style: { fill: '#3399FF', stroke: '#3399FF' }},
+	           { startValue:   0, endValue: 25, startWidth: 5, endWidth: 5, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }}],
+	  ticksMinor: { interval: 1, size: '5%' },
+	  ticksMajor: { interval: 5, size: '9%' },
+	  labels: { interval: 5 },
+	  style: { fill: '#eeeeee', stroke: '#666666' },
+	  value: 0,
+	  colorScheme: 'scheme05',
+	  animationDuration: 1200,
+	  caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] }
+    };
+
+    $("#gaugeContainer_air").jqxGauge( gaugeoptions );
+    $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} );
+    $("#gaugeContainer_beer").jqxGauge( gaugeoptions );
+    $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} );
+    $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions );
+
+    var uuid = "<?php echo $uuid; ?>";
+    var url = "getfermenter.php?uuid='" + uuid + "'";
+    var source = {
+	  datatype: "json",
+	  datafields: [
+	    { name: 'record', type: 'int' },
+	    { name: 'uuid', type: 'string' },
+	    { name: 'alias', type: 'string' },
+	    { name: 'node', type: 'string' },
+	    { name: 'online', type: 'bool' },
+	    { name: 'beercode', type: 'string' },
+	    { name: 'beername', type: 'string' },
+	    { name: 'air_address', type: 'string' },
+	    { name: 'air_state', type: 'string' },
+	    { name: 'air_temperature', type: 'float' },
+	    { name: 'beer_address', type: 'string' },
+	    { name: 'beer_state', type: 'string' },
+ 	    { name: 'beer_temperature', type: 'float' },
+	    { name: 'chiller_address', type: 'string' },
+	    { name: 'chiller_state', type: 'string' },
+	    { name: 'chiller_temperature', type: 'float' },
+	    { name: 'heater_address', type: 'string' },
+	    { name: 'heater_state', type: 'int' },
+	    { name: 'heater_usage', type: 'int' },
+	    { name: 'cooler_address', type: 'string' },
+	    { name: 'cooler_state', type: 'int' },
+	    { name: 'cooler_usage', type: 'int' },
+	    { name: 'fan_address', type: 'string' },
+	    { name: 'fan_state', type: 'int' },
+	    { name: 'fan_usage', type: 'int' },
+	    { name: 'light_address', type: 'string' },
+	    { name: 'light_state', type: 'int' },
+	    { name: 'light_usage', type: 'int' },
+	    { name: 'door_address', type: 'string' },
+	    { name: 'door_state', type: 'int' },
+	    { name: 'psu_address', type: 'string' },
+	    { name: 'psu_state', type: 'int' },
+	    { name: 'mode', type: 'string' },
+	    { name: 'alarm', type: 'int' },
+	    { name: 'setpoint_high', type: 'float' },
+	    { name: 'setpoint_low', type: 'float' },
+	    { name: 'profile_uuid', type: 'string' },
+	    { name: 'profile_name', type: 'string' },
+	    { name: 'profile_state', type: 'string' },
+	    { name: 'profile_precent', type: 'int' },
+	    { name: 'profile_inittemp_high', type: 'float' },
+	    { name: 'profile_inittemp_low', type: 'float' },
+	    { name: 'profile_steps', type: 'string' },
+	    { name: 'stage', type: 'string' }
+    	  ],
+    	  id: 'record',
+          url: url
+    };
+    var dataAdapter = new $.jqx.dataAdapter(source, {
+      loadComplete: function (records) {
+	var record = dataAdapter.records[0];
+	var oline = (record.online) ? "On-line" : "Off-line";
+	var html  = "<div id='fermenter_table'>";
+	    html += "<table style='width: 100%; padding: 10px;'>";
+	    html += "<tr><th colspan=2>Klimaatkast overzicht</th></tr>";
+	    html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>";
+	    html += "<tr><td>Systeem</td><td>" + record.node +  "/" + record.alias + " " + oline + "</td></tr>";
+	    html += "<tr><td>Bier</td><td>" + record.beercode + " - " + record.beername + "</td></tr>";
+	    html += "<tr><td>Werking</td><td>" + record.mode + "</td></tr>";
+	    html += "<tr><td>Fase</td><td>" + record.stage + "</td></tr>"
+	    html += "</<table>";
+	    html += "</div>";
+	$("#ContentPanel").html(html);
+
+	$('#gaugeContainer_air').jqxGauge({ value: record.air_temperature });
+	if (record.online && (record.air_state == "OK")) {
+	      $("#gaugeContainer_air").jqxGauge({ disabled: false });
+	} else {
+	      $("#gaugeContainer_air").jqxGauge({ disabled: true });
+	}
+	$('#gaugeContainer_beer').jqxGauge({ value: record.beer_temperature });
+	if (record.online && (record.beer_state == "OK")) {
+	  $("#gaugeContainer_beer").jqxGauge({ disabled: false });
+	} else {
+	  $("#gaugeContainer_beer").jqxGauge({ disabled: true });
+	}
+	$("#gaugeContainer_chiller").jqxGauge({ value: record.chiller_temperature });
+	if (record.online && (record.chiller_state == "OK")) {
+	  $("#gaugeContainer_chiller").jqxGauge({ disabled: false });
+	} else {
+	  $("#gaugeContainer_chiller").jqxGauge({ disabled: true });
+	}
+
+	html  = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high + "</span></div>";
+	html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low + "</span></div>";
+	html += "<div>Air <span class='temperature NUM'>" + record.air_temperature + "</span></div>";
+	html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature + "</span></div>";
+	$("#fermenter_tempdigits").html(html);  
+      }
+    });
+
+    // Get the data immediatly and then at regular intervals to refresh.
+    dataAdapter.dataBind();
+    setInterval(function(){
+      dataAdapter.dataBind();
+    }, 10000);
+
+  });
+   </script>
+   <div id="MainPanel">
+    <div id="ContentPanel"></div>
+    <div id='fermenter_thermometers'>
+      <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div>
+      <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div>
+      <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div>
+      <div id="fermenter_tempdigits"></div>
+     </div>
+   </div>
+
+<?php
+page_footer();
+?>
diff -r ccbe79db80b8 -r 522022b4fae4 www/mon_node.php
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/mon_node.php	Mon Aug 13 23:00:50 2018 +0200
@@ -0,0 +1,88 @@
+<?php
+require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php');
+page_header('Hoofdmenu', NULL);
+$uuid = $_GET["uuid"];
+?>
+   <script>
+   $(document).ready(function () {
+
+     var uuid = "<?php echo $uuid; ?>";
+     var url = "getnode.php?uuid='" + uuid + "'";
+     var source = {
+       datatype: "json",
+       datafields: [
+     	{ name: 'record', type: 'int' },
+	{ name: 'uuid', type: 'string' },
+	{ name: 'node', type: 'string' },
+	{ name: 'online', type: 'bool' },
+	{ name: 'group_id', type: 'string' },
+	{ name: 'hardwaremake', type: 'string' },
+	{ name: 'hardwaremodel', type: 'string' },
+	{ name: 'os', type: 'string' },
+	{ name: 'os_version', type: 'string' },
+	{ name: 'firmware', type: 'string' },
+	{ name: 'firstseen', type: 'string' },
+	{ name: 'lastseen', type: 'string' },
+	{ name: 'temperature', type: 'float' },
+	{ name: 'humidity', type: 'float' },
+	{ name: 'barometer', type: 'float' },
+	{ name: 'gps_latitude', type: 'float' },
+	{ name: 'gps_longitude', type: 'float' },
+	{ name: 'gps_altitude', type: 'float' },
+	{ name: 'net_address', type: 'string' },
+	{ name: 'net_ifname', type: 'string' },
+	{ name: 'net_rssi', type: 'int' }
+       ],
+       id: 'record',
+       url: url
+     };
+     var dataAdapter = new $.jqx.dataAdapter(source, {
+       loadComplete: function (records) {
+	 var record = dataAdapter.records[0];
+	 var html  = "<div id='node_table'>";
+	     html += "<table style='width: 100%; padding: 10px;'>";
+	     html += "<tr><th colspan=2>Systeem overzicht</th></tr>";
+	     html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>";
+	     html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>";
+	     html += "<tr><td>Online</td><td>" + record.online + "</td></tr>";
+	     html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>";
+	     html += "<tr><td>Eerst gezien</td><td>" + record.firstseen + "</td></tr>";
+	     html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</td></tr>";
+	     html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>";
+	     html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>";
+	     html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>";
+	     html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>";
+	     if (record.online) {
+	       html += "<tr><td>Temperatuur</td><td>" + record.temperature + "&deg;C</td></tr>";
+	       if (record.humidity > 0) {
+	         html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>";
+	       }
+	       if (record.barometer > 0) {
+	         html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>";
+	       }
+	       if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) {
+	         html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>";
+	       }
+	       html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>";
+	     }
+	     html += "</<table>";
+	     html += "</div>";
+	     $("#ContentPanel").html(html);
+       }
+     });
+
+     // Get the data immediatly and then at regular intervals to refresh.
+     dataAdapter.dataBind();
+     setInterval(function(){
+       dataAdapter.dataBind();
+     }, 30000);
+   });
+   </script>
+
+   <div id="MainPanel">
+    <div id="ContentPanel"></div>
+   </div>
+
+<?php
+page_footer();
+?>
diff -r ccbe79db80b8 -r 522022b4fae4 www/monitor.php
--- a/www/monitor.php	Mon Aug 13 19:49:42 2018 +0200
+++ b/www/monitor.php	Mon Aug 13 23:00:50 2018 +0200
@@ -36,15 +36,6 @@
     $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] });
     $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" });
     /*
-     * Build the nodes subtree
-     */
-    var nodeByID = $("#jqxTree").find("#Nodes")[0];
-    $.getJSON("getnodes.php", function(data) {
-      for( i = 0; i < data.length; i++ ) {
-	 $("#jqxTree").jqxTree("addTo", { id: 'node-' + data[i].uuid, label: data[i].node, icon: 'images/folder.png'  }, nodeByID);
-      }
-    });
-    /*
      * Build the fermenters subtree
      */
     var fermenterByID = $("#jqxTree").find("#Fermenters")[0];
@@ -76,79 +67,6 @@
       if (estr == "Root") {
 	$("#ContentPanel").html("<div style='margin: 10px;'><a href='index.php'>Hoofdmenu</a></div>");
 
-      } else if (estr.indexOf("node-", 0) == 0) {
-	// Load and show a node.
-	// The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7
-        var uuid = estr.substr(5);
-	var url = "getnode.php?uuid='" + uuid + "'";
-        var source = {
-          datatype: "json",
-          datafields: [
-            { name: 'record', type: 'int' },
-            { name: 'uuid', type: 'string' },
-            { name: 'node', type: 'string' },
-            { name: 'online', type: 'bool' },
-            { name: 'group_id', type: 'string' },
-            { name: 'hardwaremake', type: 'string' },
-            { name: 'hardwaremodel', type: 'string' },
-            { name: 'os', type: 'string' },
-            { name: 'os_version', type: 'string' },
-            { name: 'firmware', type: 'string' },
-            { name: 'firstseen', type: 'string' },
-            { name: 'lastseen', type: 'string' },
-            { name: 'temperature', type: 'float' },
-            { name: 'humidity', type: 'float' },
-            { name: 'barometer', type: 'float' },
-            { name: 'gps_latitude', type: 'float' },
-            { name: 'gps_longitude', type: 'float' },
-            { name: 'gps_altitude', type: 'float' },
-            { name: 'net_address', type: 'string' },
-            { name: 'net_ifname', type: 'string' },
-            { name: 'net_rssi', type: 'int' }
-          ],
-          id: 'record',
-          url: url
-        };
-	var dataAdapter = new $.jqx.dataAdapter(source, {
-	  loadComplete: function (records) {
-	    var record = dataAdapter.records[0];
-	    var html  = "<div style='background: #252526; margin: 50px;'>";
-	        html += "<table style='width: 100%; padding: 10px;'>";
-	        html += "<tr><th colspan=2>Systeem overzicht</th></tr>";
-                html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>";
-                html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>";
-	        html += "<tr><td>Online</td><td>" + record.online + "</td></tr>";
-		html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>";
-		html += "<tr><td>Eerst gezien</td><td>" + record.firstseen + "</td></tr>";
-		html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</td></tr>";
-	        html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>";
-		html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>";
-		html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>";
-		html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>";
-		if (record.online) {
-		  html += "<tr><td>Temperatuur</td><td>" + record.temperature + "&deg;C</td></tr>";
-		  if (record.humidity > 0) {
-		    html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>";
-		  }
-	          if (record.barometer > 0) {
-		    html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>";
-		  }
-		  if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) {
-		    html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>";
-		  }
-		  html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>";
-		}
-		html += "</<table>";
-	        html += "</div>";
-	    $("#ContentPanel").html(html);
-	  }
-	});
-	// Get the data immediatly and then at regular intervals to refresh.
-	dataAdapter.dataBind();
-	refreshIntervalId = setInterval(function(){
-          dataAdapter.dataBind();
-	}, 30000);
-
       } else if (estr.indexOf("fermenter-", 0) == 0) {
 	// Load and show a fermenter.
 	// The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7
@@ -310,32 +228,11 @@
         <img style='float: left; margin-right: 5px;' src='images/earth.png' />
         <span item-title="true">Root</span>
         <ul>
-         <li id="Nodes">
-          <img style='float: left; margin-right: 5px;' src='images/folder.png' />
-          <span item-title="true">Systemen</span>
-          <!-- Subtree nodes -->
-         </li>
          <li id="Fermenters">
           <img style='float: left; margin-right: 5px;' src='images/folder.png' />
           <span item-title="true">Klimaatkasten</span>
           <!-- Subtree fermenters -->
          </li>
-         <li id="Brewboards">
-          <img src='images/settings.png' />
-          <span item-title="true">Brouw apparatuur</span>
-         </li>
-         <li id="Prducing">
-          <img src='images/system.png' />
-          <span item-title="true">In productie</span>
-         </li>
-         <li id="Recipes">
-          <img style='float: left; margin-right: 5px;' src='images/beer.png' />
-          <span item-title="true">Recepten</span>
-         </li>
-         <li id="Settings">
-          <img style='float: left; margin-right: 5px;' src='images/setupIcon.png' />
-          <span item-title="true">Instellingen</span>
-         </li>
         </ul>
        </li>
       </ul>