# HG changeset patch
# User Michiel Broek <mbroek@mbse.eu>
# Date 1414947605 -3600
# Node ID e88d182657ca282e51630e0841efd743998e373f
# Parent  e07b08283d966428e8f420d0a129d66f9d4baec9
Added print and save as png buttons

diff -r e07b08283d96 -r e88d182657ca www-thermferm/css/style.css
--- a/www-thermferm/css/style.css	Sun Nov 02 13:47:57 2014 +0100
+++ b/www-thermferm/css/style.css	Sun Nov 02 18:00:05 2014 +0100
@@ -194,6 +194,9 @@
  *  || switch1  || switch2  || switch3  ||
  *  |+----------++----------++----------+|
  *  +------------------------------------+
+ *  +----------pannel_buttons------------+
+ *  |                                    |
+ *  +------------------------------------+
  */
 
 #fermentor_panel_top {
@@ -204,7 +207,7 @@
     border: 2px solid;
     border-color: #888;
     border-radius: 5px 5px 5px 5px;
-    margin-bottom: 5px;
+    margin-bottom: 3px;
 }
 
 #fermentor_selector {
@@ -244,7 +247,7 @@
     border: 2px solid;
     border-color: #888;
     border-radius: 5px 5px 5px 5px;
-    margin-bottom: 5px;
+    margin-bottom: 3px;
 }
 
 #fermentor_display1 {
@@ -273,12 +276,13 @@
 
 #fermentor_panel_control {
     width: 236px;
-    height: 120px;
+    height: 100px;
     float: right;
     background-color: #eee;
     border: 2px solid;
     border-color: #888;
     border-radius: 5px 5px 5px 5px;
+    margin-bottom: 3px;
 }
 
 #fermentor_led1 {
@@ -286,7 +290,7 @@
     height: 30px;
     float: left;
     text-align: center;
-    margin-top: 10px;
+    margin-top: 8px;
 }
 
 #fermentor_led2 {
@@ -294,7 +298,7 @@
     height: 30px;
     float: left;
     text-align: center;
-    margin-top: 10px;
+    margin-top: 8px;
 }
 
 #fermentor_led3 {
@@ -302,7 +306,7 @@
     height: 30px;
     float: left;
     text-align: center;
-    margin-top: 10px;
+    margin-top: 8px;
 }
 
 .dtemp {
@@ -313,7 +317,7 @@
 
 #fermentor_toggle1 {
     width: 79px;
-    height: 90px;
+    height: 70px;
     float: left;
     text-align: center;
     margin-top: 10px;
@@ -321,7 +325,7 @@
 
 #fermentor_toggle2 {
     width: 78px;
-    height: 90px;
+    height: 70px;
     float: left;
     text-align: center;
     margin-top: 10px;
@@ -329,12 +333,22 @@
 
 #fermentor_toggle3 {
     width: 79px;
-    height: 90px;
+    height: 70px;
     float: left;
     text-align: center;
     margin-top: 10px;
 }
 
+#fermentor_panel_buttons {
+    width: 236px;
+    height: 30px;
+    float: right;
+    background-color: #eee;
+    border: 2px solid;
+    border-color: #888;
+    border-radius: 5px 5px 5px 5px;
+}
+
 #menu {
     width: 600px;
     height: 300px;
@@ -387,7 +401,6 @@
     box-shadow: #400 0 0px 1px 1px;
 }
 
-
 .LEDyellow_on {
     margin: 5px auto;
     width: 12px;
diff -r e07b08283d96 -r e88d182657ca www-thermferm/liveview.php
--- a/www-thermferm/liveview.php	Sun Nov 02 13:47:57 2014 +0100
+++ b/www-thermferm/liveview.php	Sun Nov 02 18:00:05 2014 +0100
@@ -26,11 +26,11 @@
 
 
 
-function showunit($unit, $unr)
+function showunit($unit, $unr, $name)
 {
     global $my_style;
 
-    $outstr = '    <!--  showunit(' . $unit . ', ' . $unr . ')  -->' . PHP_EOL;
+    $outstr = '    <!--  showunit(' . $unit . ', ' . $unr . ', ' . $name . ')  -->' . PHP_EOL;
     $air_state = $beer_state = 1;
     $answer = send_cmd("UNIT GET ".$unit);
     $arr = explode("\r\n", $answer);
@@ -103,6 +103,9 @@
 	$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;
@@ -130,10 +133,10 @@
 	$outstr .= '       });'.PHP_EOL;
 
 	$outstr .= '       var settings'.$unr.' = {'.PHP_EOL;
-	$outstr .= '         title: "Fermentation history",'.PHP_EOL;
+	$outstr .= '         title: "'.$name.' fermentation history",'.PHP_EOL;
 	$outstr .= '         description: "",'.PHP_EOL;
 	$outstr .= '         padding: { left: 5, top: 5, right: 5, bottom: 5 },'.PHP_EOL;
-	$outstr .= '         titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },'.PHP_EOL;
+	$outstr .= '         titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },'.PHP_EOL;
 	$outstr .= '         source: dataAdapter'.$unr.','.PHP_EOL;
 	$outstr .= '         categoryAxis:'.PHP_EOL;
 	$outstr .= '           {'.PHP_EOL;
@@ -182,6 +185,31 @@
 //	$outstr .= '         $("#fermentor_chart_'.$unit.'").jqxChart("update");'.PHP_EOL;
 //	$outstr .= '       }, 3000);'.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: 100, 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 .= '       $("#pngButton_'.$unr.'").jqxButton({ width: 100, height: 25, theme: "ui-redmond" });'.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;
@@ -381,6 +409,13 @@
 	$outstr .= '      </div>'.PHP_EOL;
 	$outstr .= '     </div> <!-- fermentor_panel_control -->'.PHP_EOL;
 
+	$outstr .= '     <div id="fermentor_panel_buttons">'.PHP_EOL;
+	$outstr .= '     <div style="margin-top: 2px; margin-left: 10px;">'.PHP_EOL;
+	$outstr .= '      <input style="float: left;" id="print_'.$unr.'" type="button" value="Print Graph" />'.PHP_EOL;
+	$outstr .= '      <input style="float: left; margin-left: 15px;" id="pngButton_'.$unr.'" type="button" value="Save Graph" />'.PHP_EOL;
+	$outstr .= '     </div>'.PHP_EOL;
+	$outstr .= '     </div> <!-- fermentor_panel_buttons -->'.PHP_EOL;
+
 	$outstr .= '    </div> <!-- fermentor -->'.PHP_EOL;
     }
 
@@ -417,7 +452,7 @@
 		if (strcmp($arr[$i], ".") == 0)
 		    break;
 		$parts = explode(",", $arr[$i]);
-		$outstr .= showunit($parts[0], $i);
+		$outstr .= showunit($parts[0], $i, $parts[1]);
 		$i++;
 	    }
 	}