Sun, 02 Nov 2014 18:00:05 +0100
Added print and save as png buttons
www-thermferm/css/style.css | file | annotate | diff | comparison | revisions | |
www-thermferm/liveview.php | file | annotate | diff | comparison | revisions |
--- 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;
--- 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++; } }