Mercurial > mbsePi-apps / changeset
changeset
Changed livescreen, now displays thermometers. The chart is loaded on request. This speeds up loading the application.
Mon, 26 Jun 2017 13:58:11 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Mon, 26 Jun 2017 13:58:11 +0200
- changeset 517
- 5fd12d9f3f84
- parent 516
- 65299c11774b
- child 518
- fd36bedab944
Changed livescreen, now displays thermometers. The chart is loaded on request. This speeds up loading the application.
--- a/www-thermferm/archives.php Sun Jun 25 13:02:06 2017 +0200 +++ b/www-thermferm/archives.php Mon Jun 26 13:58:11 2017 +0200 @@ -1,6 +1,6 @@ <?php /***************************************************************************** - * Copyright (C) 2015 + * Copyright (C) 2015-2017 * * Michiel Broek <mbroek at mbse dot eu> * @@ -50,6 +50,7 @@ global $my_style; $name = urldecode($_GET['name']); + $return = urldecode($_GET['return']); $answer = send_cmd('GLOBAL GET'); $arr = explode("\r\n", $answer); @@ -92,8 +93,13 @@ $outstr .= ' <div id="title">'.PHP_EOL; $outstr .= ' ThermFerm '.$version.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' <form action="archives.php" style="margin:30px; float:right">'.PHP_EOL; - $outstr .= ' <input type="submit" id="archives" value="Archives directory" />'.PHP_EOL; + if ("$return" == "archives") { + $outstr .= ' <form action="archives.php" style="margin:30px; float:right">'.PHP_EOL; + $outstr .= ' <input type="submit" id="archives" value="Archives directory" />'.PHP_EOL; + } else { + $outstr .= ' <form action="index.php" style="margin:30px; float:right">'.PHP_EOL; + $outstr .= ' <input type="submit" id="archives" value="Dashboard" />'.PHP_EOL; + } $outstr .= ' </form>'.PHP_EOL; $outstr .= ' </div> <!-- header -->'.PHP_EOL; $outstr .= ' <div id="content">'.PHP_EOL; @@ -303,7 +309,7 @@ $outstr .= ' <td class="setup">'.$f[2].'</td>'.PHP_EOL; $outstr .= ' <td class="setup">'.$f[3].'</td>'.PHP_EOL; $outstr .= ' <td class="setup"><a href="archives.php?action=dl&name='.$name.'">Download</a>'; - $outstr .= ' <a href="archives.php?action=view&name='.$name.'">View</a></td>'.PHP_EOL; + $outstr .= ' <a href="archives.php?action=view&return=archives&name='.$name.'">View</a></td>'.PHP_EOL; $outstr .= ' </tr>'.PHP_EOL; $j++; }
--- a/www-thermferm/css/style.css Sun Jun 25 13:02:06 2017 +0200 +++ b/www-thermferm/css/style.css Mon Jun 26 13:58:11 2017 +0200 @@ -221,6 +221,16 @@ margin-top: 13px; } +#fermentor_thermometers { + width: 720px; + height: 371px; + float: left; + background-color: #eee; + border: 2px solid; + border-color: #888; + border-radius: 5px 5px 5px 5px; +} + #fermentor_powerled { width: 38px; height: 30px;
--- a/www-thermferm/index.php Sun Jun 25 13:02:06 2017 +0200 +++ b/www-thermferm/index.php Mon Jun 26 13:58:11 2017 +0200 @@ -154,6 +154,7 @@ $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script>'.PHP_EOL; +$outstr .= ' <script type="text/javascript" src="jqwidgets/jqxgauge.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script>'.PHP_EOL;
--- 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;
