diff -r 59048cd5f00d -r 50545c3e36c6 www/index.php
--- a/www/index.php	Fri Aug 10 21:22:09 2018 +0200
+++ b/www/index.php	Sat Aug 11 16:36:45 2018 +0200
@@ -20,13 +20,19 @@
   <script src="jqwidgets/jqxexpander.js"></script>
   <script src="jqwidgets/jqxsplitter.js"></script>
   <script src="jqwidgets/jqxdata.js"></script>
+  <script src="jqwidgets/jqxcheckbox.js"></script>
+  <script src="jqwidgets/jqxradiobutton.js"></script>
+  <script src="jqwidgets/jqxchart.core.js"></script>
+  <script src="jqwidgets/jqxgauge.js"></script>
+  <script src="jqwidgets/jqxdraw.js"></script>
+  <script src="jqwidgets/jqxtooltip.js"></script>
   <script>
   $(document).ready(function () {
     /*
      * Different right panel pages
      */
     var refreshIntervalId = 0;
-    var aFermenter = '<div class="fermenterContainer">Fermenter scherm  </div>';
+    $("#fermentor_thermometers").hide();
     $("#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%" });
     /*
@@ -59,12 +65,17 @@
         clearInterval(refreshIntervalId);
 	refreshIntervalId = 0;
       }
+      $("#fermentor_thermometers").hide();
+      $("#gaugeContainer_air").hide();
+      $("#gaugeContainer_beer").hide();
+      $("#gaugeContainer_chiller").hide();
       /*
        * Process the selected id from the left panel tree and show the correct page in the right panel.
        */
       var estr = event.args.element.id;
       if (estr == "Root") {
-        $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>");
+	$("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>");
+
       } else if (estr.indexOf("node-", 0) == 0) {
 	// Load and show a node.
 	// The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7
@@ -139,8 +150,138 @@
 	}, 30000);
 
       } else if (estr.indexOf("fermenter-", 0) == 0) {
-        var uuid = estr.substr(10);
-        $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>");
+	// Load and show a fermenter.
+	// The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7
+        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] }
+	};
+	$("#fermentor_thermometers").show();
+	$("#gaugeContainer_air").show();
+	$("#gaugeContainer_air").jqxGauge( gaugeoptions );
+	$("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} );
+	$("#gaugeContainer_beer").show();
+	$("#gaugeContainer_beer").jqxGauge( gaugeoptions );
+	$("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} );
+	$("#gaugeContainer_chiller").show();
+	$("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions );
+	var uuid = estr.substr(10);
+	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 });
+	    }
+	  }
+	});
+	// Get the data immediatly and then at regular intervals to refresh.
+	dataAdapter.dataBind();
+	refreshIntervalId = setInterval(function(){
+	  dataAdapter.dataBind();
+	}, 10000);
+
       } else if (event.args.element.id == "Nodes") {
         $("#ContentPanel").html("<div></div");
       } else {
@@ -195,7 +336,13 @@
       </ul>
      </div> <!-- jqxTree -->
     </div> <!-- tree panel -->
-    <div id="ContentPanel">
+    <div id="RightPanel">
+     <div id="ContentPanel"></div>
+     <div id='fermentor_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>
     </div>
    </div> <!--- splitter -->
   </div> <!-- jqxWidget -->