diff -r 65299c11774b -r 5fd12d9f3f84 www-thermferm/liveview.php
--- a/www-thermferm/liveview.php	Sun Jun 25 13:02:06 2017 +0200
+++ b/www-thermferm/liveview.php	Mon Jun 26 13:58:11 2017 +0200
@@ -1,6 +1,6 @@
 <?php
 /*****************************************************************************
- * Copyright (C) 2014-2015
+ * Copyright (C) 2014-2017
  *   
  * Michiel Broek <mbroek at mbse dot eu>
  *
@@ -107,131 +107,65 @@
 	$outstr .= '    <script type="text/javascript">'.PHP_EOL;
 	$outstr .= '     $(document).ready(function () {'.PHP_EOL;
 
-	$outstr .= '       function getExportServer'.$unr.'() {'.PHP_EOL;
-	$outstr .= '         return "http://www.jqwidgets.com/export_server/export.php";'.PHP_EOL;
-	$outstr .= '       }'.PHP_EOL;
-	$outstr .= '       var source'.$unr.' ='.PHP_EOL;
-	$outstr .= '       {'.PHP_EOL;
-	$outstr .= '          datatype: "json",'.PHP_EOL;
-	$outstr .= '          datafields: ['.PHP_EOL;
-	$outstr .= '             { name: "Date", type: "date", format: "yyyy-MM-dd HH:mm" },'.PHP_EOL;
-	$outstr .= '             { name: "Mode" },'.PHP_EOL;
-	$outstr .= '             { name: "Air", type: "float" },'.PHP_EOL;
-	$outstr .= '             { name: "Beer", type: "float" },'.PHP_EOL;
-	$outstr .= '             { name: "Target_lo", type: "float" },'.PHP_EOL;
-	$outstr .= '             { name: "Target_hi", type: "float" },'.PHP_EOL;
-	$outstr .= '             { name: "Heater", type: "int" },'.PHP_EOL;
-	$outstr .= '             { name: "Cooler", type: "int" },'.PHP_EOL;
-	$outstr .= '             { name: "HeatUse", type: "int" },'.PHP_EOL;
-	$outstr .= '             { name: "CoolUse", type: "int" },'.PHP_EOL;
-	$outstr .= '             { name: "Room", type: "float" }'.PHP_EOL;
-	$outstr .= '          ],'.PHP_EOL;
-	$outstr .= '          url: \'getlog.php?unit='.$unit.'\''.PHP_EOL;
-	$outstr .= '       };'.PHP_EOL;
-
-	$outstr .= '       var dataAdapter'.$unr.' = new $.jqx.dataAdapter(source'.$unr.','.PHP_EOL;
-	$outstr .= '       {'.PHP_EOL;
-	$outstr .= '          autoBind: true,'.PHP_EOL;
-	$outstr .= '          async: false,'.PHP_EOL;
-	$outstr .= '          downloadComplete: function () { },'.PHP_EOL;
-	$outstr .= '          loadComplete: function () { },'.PHP_EOL;
-	$outstr .= '          loadError: function () { }'.PHP_EOL;
-	$outstr .= '       });'.PHP_EOL;
+	if ("$air_state" == "OK") {
+	    $outstr .= '       $("#gaugeContainer_air'.$unr.'").jqxGauge({'.PHP_EOL;
+	    $outstr .= '         min: -5, max: 35, width: 275, height: 275,'.PHP_EOL;
+	    $outstr .= '         ranges: [{ startValue: -5, endValue:  0, style: { fill: \'#3399FF\', stroke: \'#3399FF\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
+	    $outstr .= '                  { startValue:  0, endValue: 16, style: { fill: \'#00CC33\', stroke: \'#00CC33\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
+	    $outstr .= '                  { startValue: 16, endValue: 24, style: { fill: \'#FCA76A\', stroke: \'#FCA76A\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
+	    $outstr .= '                  { startValue: 24, endValue: 35, style: { fill: \'#FC6A6A\', stroke: \'#FC6A6A\' }, endWidth: 10, startWidth: 10 }],'.PHP_EOL;
+	    $outstr .= '         ticksMinor: { interval: 1, size: \'5%\' },'.PHP_EOL;
+	    $outstr .= '         ticksMajor: { interval: 5, size: \'9%\' },'.PHP_EOL;
+	    $outstr .= '         labels: { interval: 5 },'.PHP_EOL;
+	    $outstr .= '         value: '.$air_temperature.','.PHP_EOL;
+	    $outstr .= '         colorScheme: \'scheme05\','.PHP_EOL;
+	    $outstr .= '         animationDuration: 5000,'.PHP_EOL;
+	    $outstr .= '         caption: { value: \'Air\', position: \'bottom\', offset: [0, 10] }'.PHP_EOL;
+	    $outstr .= '       });'.PHP_EOL;
+	}
 
-	$outstr .= '       var settings'.$unr.' = {'.PHP_EOL;
-	$outstr .= '         title: "'.$name.'",'.PHP_EOL;
-	$outstr .= '         description: "",'.PHP_EOL;
-	$outstr .= '         padding: { left: 5, top: 5, right: 5, bottom: 5 },'.PHP_EOL;
-	$outstr .= '         titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },'.PHP_EOL;
-	$outstr .= '         source: dataAdapter'.$unr.','.PHP_EOL;
-	$outstr .= '         xAxis:'.PHP_EOL;
-	$outstr .= '           {'.PHP_EOL;
-	$outstr .= '             dataField: \'Date\','.PHP_EOL;
-	$outstr .= '             type: \'date\','.PHP_EOL;
-	$outstr .= '             formatFunction: function (value) {'.PHP_EOL;
-	$outstr .= '                return value.getDate() + \'-\' + (value.getMonth() + 1) + \'-\' + value.getFullYear()'.PHP_EOL;
-	$outstr .= '             },'.PHP_EOL;
-	$outstr .= '             toolTipFormatFunction: function (value) {'.PHP_EOL;
-	$outstr .= '                var h = value.getHours();'.PHP_EOL;
-	$outstr .= '                var m = value.getMinutes();'.PHP_EOL;
-	$outstr .= '                return value.getDate() + \'-\' + (value.getMonth() + 1) + \'-\' + value.getFullYear()';
-	$outstr .= ' + \' \' + (h < 10 ? \'0\' + h : h) + \':\' + (m < 10 ? \'0\' + m : m);'.PHP_EOL;
-	$outstr .= '             },'.PHP_EOL;
-	$outstr .= '             textRotationAngle: 45,'.PHP_EOL;
-	$outstr .= '             showGridLines: false'.PHP_EOL;
-	$outstr .= '           },'.PHP_EOL;
-	$outstr .= '         colorScheme: \'scheme01\','.PHP_EOL;
-	$outstr .= '         seriesGroups:'.PHP_EOL;
-	$outstr .= '           [{'.PHP_EOL;
-	$outstr .= '             type: "line",'.PHP_EOL;
-	$outstr .= '             valueAxis:'.PHP_EOL;
-	$outstr .= '             {'.PHP_EOL;
-	$outstr .= '               minValue: 0,'.PHP_EOL;
-	$outstr .= '               maxValue: 100,'.PHP_EOL;
-	$outstr .= '               displayValueAxis: false,'.PHP_EOL;
-	$outstr .= '               description: "Heat/Cool %"'.PHP_EOL;
-	$outstr .= '             },'.PHP_EOL;
-	$outstr .= '             series: ['.PHP_EOL;
-	$outstr .= '               { dataField: "CoolUse", lineWidth: 1, displayText: "Cool %", opacity: 0.5 },'.PHP_EOL;
-	$outstr .= '               { dataField: "HeatUse", lineWidth: 1, displayText: "Heat %", opacity: 0.5 }'.PHP_EOL;
-	$outstr .= '             ]'.PHP_EOL;
-	$outstr .= '            },'.PHP_EOL;
-	$outstr .= '            {'.PHP_EOL;
-	$outstr .= '             type: "line",'.PHP_EOL;
-	$outstr .= '             valueAxis:'.PHP_EOL;
-	$outstr .= '             {'.PHP_EOL;
-	$outstr .= '               minValue: 0,'.PHP_EOL;
-	$outstr .= '               description: \'Degrees C\''.PHP_EOL;
-	$outstr .= '             },'.PHP_EOL;
-	$outstr .= '             series: ['.PHP_EOL;
-	$outstr .= '               { dataField: "Air", lineWidth: 1, displayText: "Air" },'.PHP_EOL;
-	$outstr .= '               { dataField: "Beer", lineWidth: 2, displayText: "Beer" },'.PHP_EOL;
-	$outstr .= '               { dataField: "Target_lo", lineWidth: 1, displayText: "Target Lo", opacity: 0.7 },'.PHP_EOL;
-	$outstr .= '               { dataField: "Target_hi", lineWidth: 1, displayText: "Target Hi", opacity: 0.7 },'.PHP_EOL;
-	$outstr .= '               { dataField: "Room", lineWidth: 1, displayText: "Room", opacity: 0.5 }'.PHP_EOL;
-	$outstr .= '             ]'.PHP_EOL;
-	$outstr .= '           }]'.PHP_EOL;
-	$outstr .= '       };'.PHP_EOL;
-	/* Direct draw for the first time */
-	$outstr .= '       $("#fermentor_chart_'.$unit.'").jqxChart(settings'.$unr.');'.PHP_EOL;
-	/* Regular updates of the chart */
-//	$outstr .= '       setInterval(function(){'.PHP_EOL;
-//	$outstr .= '         $("#fermentor_chart_'.$unit.'").jqxChart("update");'.PHP_EOL;
-//	$outstr .= '       }, 3000);'.PHP_EOL;
+	if ("$beer_state" == "OK") {
+	    $outstr .= '       $(\'#gaugeContainer_beer'.$unr.'\').jqxGauge({'.PHP_EOL;
+	    $outstr .= '         min: -5, max: 35, width: 275, height: 275,'.PHP_EOL;
+	    $outstr .= '         ranges: [{ startValue: -5, endValue:  0, style: { fill: \'#3399FF\', stroke: \'#3399FF\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
+	    $outstr .= '                  { startValue:  0, endValue: 16, style: { fill: \'#00CC33\', stroke: \'#00CC33\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
+	    $outstr .= '                  { startValue: 16, endValue: 24, style: { fill: \'#FCA76A\', stroke: \'#FCA76A\' }, endWidth: 10, startWidth: 10 },'.PHP_EOL;
+	    $outstr .= '                  { startValue: 24, endValue: 35, style: { fill: \'#FC6A6A\', stroke: \'#FC6A6A\' }, endWidth: 10, startWidth: 10 }],'.PHP_EOL;
+	    $outstr .= '         ticksMinor: { interval: 1, size: \'5%\' },'.PHP_EOL;
+	    $outstr .= '         ticksMajor: { interval: 5, size: \'9%\' },'.PHP_EOL;
+	    $outstr .= '         labels: { interval: 5 },'.PHP_EOL;
+	    $outstr .= '         value: '.$beer_temperature.','.PHP_EOL;
+	    $outstr .= '         colorScheme: \'scheme05\','.PHP_EOL;
+	    $outstr .= '         animationDuration: 5000,'.PHP_EOL;
+	    $outstr .= '         caption: { value: \'Beer\', position: \'bottom\', offset: [0, 10] }'.PHP_EOL;
+	    $outstr .= '       });'.PHP_EOL;
+	}
 
-	$outstr .= '       $("#print_'.$unr.'").click(function () {'.PHP_EOL;
-	$outstr .= '         var content = $("#fermentor_chart_'.$unit.'")[0].outerHTML;'.PHP_EOL;
-	$outstr .= '         var newWindow = window.open("", "", "width=750, height=400"),'.PHP_EOL;
-	$outstr .= '         document = newWindow.document.open(),'.PHP_EOL;
-	$outstr .= '         pageContent ='.PHP_EOL;
-	$outstr .= '         \'<!DOCTYPE html>\' +'.PHP_EOL;
-	$outstr .= '         \'<html>\' +'.PHP_EOL;
-	$outstr .= '         \'<head>\' +'.PHP_EOL;
-	$outstr .= '         \'<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />\' +'.PHP_EOL;
-	$outstr .= '         \'<meta charset="utf-8" />\' +'.PHP_EOL;
-	$outstr .= '         \'<title>jQWidgets Chart</title>\' +'.PHP_EOL;
-	$outstr .= '         \'</head>\' +'.PHP_EOL;
-	$outstr .= '         \'<body>\' + content + \'</body></html>\';'.PHP_EOL;
-	$outstr .= '         document.write(pageContent);'.PHP_EOL;
-	$outstr .= '         document.close();'.PHP_EOL;
-	$outstr .= '         newWindow.print();'.PHP_EOL;
-	$outstr .= '       });'.PHP_EOL;
-	$outstr .= '       $("#print_'.$unr.'").jqxButton({ width: 70, height: 25, theme: "ui-redmond" });'.PHP_EOL;
-
-	$outstr .= '       $("#pngButton_'.$unr.'").click(function () {'.PHP_EOL;
-			      	// call the export server to create a PNG image
-	$outstr .= '       	$("#fermentor_chart_'.$unit.'").jqxChart("saveAsPNG", "Chart_'.$name.'.png", getExportServer'.$unr.'());'.PHP_EOL;
-	$outstr .= '       });'.PHP_EOL;
-	$outstr .= '       $("#pdfButton_'.$unr.'").click(function () {'.PHP_EOL;
-	$outstr .= '            $("#fermentor_chart_'.$unit.'").jqxChart("saveAsPDF", "Chart_'.$name.'.pdf", getExportServer'.$unr.'());'.PHP_EOL;
-	$outstr .= '       });'.PHP_EOL;
-	$outstr .= '       $("#pngButton_'.$unr.'").jqxButton({ width: 70, height: 25, theme: "ui-redmond" });'.PHP_EOL;
-	$outstr .= '       $("#pdfButton_'.$unr.'").jqxButton({ width: 70, height: 25, theme: "ui-redmond" });'.PHP_EOL;
+	if ("$chiller_state" == "OK") {
+	    $outstr .= '       $(\'#gaugeContainer_chiller'.$unr.'\').jqxLinearGauge({'.PHP_EOL;
+	    $outstr .= '         min: -20, max: 25, width: 100, height: 275,'.PHP_EOL;
+	    $outstr .= '         ranges: [{ startValue: -20, endValue:  0, style: { fill: \'#3399FF\', stroke: \'#3399FF\' }},'.PHP_EOL;
+	    $outstr .= '                  { startValue:   1, endValue: 25, style: { fill: \'#FC6A6A\', stroke: \'#FC6A6A\' }}],'.PHP_EOL;
+	    $outstr .= '         ticksMinor: { interval: 1, size: \'5%\' },'.PHP_EOL;
+	    $outstr .= '         ticksMajor: { interval: 5, size: \'9%\' },'.PHP_EOL;
+	    $outstr .= '         labels: { interval: 5, position: \'far\' },'.PHP_EOL;
+	    $outstr .= '         value: 0,'.PHP_EOL;
+	    $outstr .= '         ticksPosition: \'far\','.PHP_EOL;
+	    $outstr .= '         colorScheme: \'scheme04\','.PHP_EOL;
+	    $outstr .= '         animationDuration: 1200'.PHP_EOL;
+	    $outstr .= '       });'.PHP_EOL;
+	}
 
 	$outstr .= '       setInterval(function(){'.PHP_EOL;
 	$outstr .= '         $.getJSON("getstate.php?uuid='.$unit.'", function(data) {'.PHP_EOL;
-	$outstr .= '           $("#load_air_'.$unr.'").html(data.air_temperature);'.PHP_EOL;
-	$outstr .= '           $("#load_beer_'.$unr.'").html(data.beer_temperature);'.PHP_EOL;
+	if ("$air_state" == "OK") {
+	    $outstr .= '           $("#load_air_'.$unr.'").html(data.air_temperature);'.PHP_EOL;
+	    $outstr .= '           $("#gaugeContainer_air'.$unr.'").jqxGauge(\'value\', data.air_temperature);'.PHP_EOL;
+	}
+	if ("$beer_state" == "OK") {
+	    $outstr .= '           $("#load_beer_'.$unr.'").html(data.beer_temperature);'.PHP_EOL;
+	    $outstr .= '           $("#gaugeContainer_beer'.$unr.'").jqxGauge(\'value\', data.beer_temperature);'.PHP_EOL;
+	}
 	$outstr .= '           $("#load_target_lo_'.$unr.'").html(data.target_temperature_lo);'.PHP_EOL;
 	$outstr .= '           $("#load_target_hi_'.$unr.'").html(data.target_temperature_hi);'.PHP_EOL;
 	$outstr .= '           $("#load_select_'.$unr.'").html(data.mode);'.PHP_EOL;
@@ -260,14 +194,22 @@
 	    $outstr .= '       $("#load_sw2_'.$unr.'").jqxTooltip({ content: "Manual control heater.", theme: "'.$my_style.'" });'.PHP_EOL;
 	if (($mode == "NONE") && ($fan== "yes"))
 	    $outstr .= '       $("#load_sw3_'.$unr.'").jqxTooltip({ content: "Manual control fan.", theme: "'.$my_style.'" });'.PHP_EOL;
-	$outstr .= '       $("#print_'.$unr.'").jqxTooltip({ content: "Print the current graph.", theme: "'.$my_style.'" });'.PHP_EOL;
-	$outstr .= '       $("#pngButton_'.$unr.'").jqxTooltip({ content: "Save the current graph as png image.", theme: "'.$my_style.'" });'.PHP_EOL;
-	$outstr .= '       $("#pdfButton_'.$unr.'").jqxTooltip({ content: "Save the current graph as PDF file.", theme: "'.$my_style.'" });'.PHP_EOL;
-
+	
 	$outstr .= '     });'.PHP_EOL;
 	$outstr .= '    </script>'.PHP_EOL;
+
 	$outstr .= '    <div id="fermentor">'.PHP_EOL;
-	$outstr .= '     <div id="fermentor_chart_'.$unit.'" style="width:720px; height:377px; float:left"></div>'.PHP_EOL;
+	$outstr .= '     <div id="fermentor_thermometers">'.PHP_EOL;
+	if ("$air_state" == "OK") {
+	    $outstr .= '       <div id="gaugeContainer_air'.$unr.'" style="float: left; margin-top: 10px; margin-left: 10px;"></div>'.PHP_EOL;
+	}
+	if ("$beer_state" == "OK") {
+	    $outstr .= '       <div id="gaugeContainer_beer'.$unr.'" style="float: left; margin-top: 10px; margin-left: 10px;"></div>'.PHP_EOL;
+	}
+	if ("$chiller_state" == "OK") {
+	    $outstr .= '       <div id="gaugeContainer_chiller'.$unr.'" style="float: left; margin-top: 10px; margin-left: 10px;"></div>'.PHP_EOL;
+	}
+	$outstr .= '     </div>'.PHP_EOL;
 
 	$outstr .= '     <div id="fermentor_panel_top">'.PHP_EOL;
 	$outstr .= '      <div id="fermentor_selector">'.PHP_EOL;
@@ -450,10 +392,16 @@
 
 	$outstr .= '     <div id="fermentor_panel_buttons">'.PHP_EOL;
 	$outstr .= '     <div style="margin-top: 2px; margin-left: 5px;">'.PHP_EOL;
-	$outstr .= '      <input style="float: left;" id="print_'.$unr.'" type="button" value="Print" />'.PHP_EOL;
-	$outstr .= '      <input style="float: left; margin-left: 7px;" id="pngButton_'.$unr.'" type="button" value="as PNG" />'.PHP_EOL;
+	$outstr .= '      <form action="archives.php">'.PHP_EOL;
+	$outstr .= '       <input type="submit" id="maintenance" value="Graph" />'.PHP_EOL;
+	$outstr .= '       <input type="hidden" name="action" value="view">'.PHP_EOL;
+	$outstr .= '       <input type="hidden" name="return" value="index">'.PHP_EOL;
+	$outstr .= '       <input type="hidden" name="name" value="'.urlencode($name).'">'.PHP_EOL;
+	$outstr .= '      </form>'.PHP_EOL;
+//	$outstr .= '      <input style="float: left;" id="print_'.$unr.'" type="button" value="Grafiek" />'.PHP_EOL;
+/*	$outstr .= '      <input style="float: left; margin-left: 7px;" id="pngButton_'.$unr.'" type="button" value="as PNG" />'.PHP_EOL;
 	$outstr .= '      <input style="float: left; margin-left: 7px;" id="pdfButton_'.$unr.'" type="button" value="as PDF" />'.PHP_EOL;
-	$outstr .= '     </div>'.PHP_EOL;
+ */	$outstr .= '     </div>'.PHP_EOL;
 	$outstr .= '     </div> <!-- fermentor_panel_buttons -->'.PHP_EOL;
 
 	$outstr .= '    </div> <!-- fermentor -->'.PHP_EOL;