Tue, 22 Jul 2014 17:56:56 +0200
Initial setup to draw charts
www-thermferm/css/style.css | file | annotate | diff | comparison | revisions | |
www-thermferm/images/Fermenter_60l.gif | file | annotate | diff | comparison | revisions | |
www-thermferm/index.php | file | annotate | diff | comparison | revisions | |
www-thermferm/liveview.php | file | annotate | diff | comparison | revisions |
--- a/www-thermferm/css/style.css Mon Jul 21 22:19:24 2014 +0200 +++ b/www-thermferm/css/style.css Tue Jul 22 17:56:56 2014 +0200 @@ -68,7 +68,7 @@ #fermentor_panel { width: 240px; - height: 382px; + height: 380px; float: left; background-color: #f0f0f0; } @@ -123,31 +123,25 @@ #fermentor_toggle1 { width: 80px; - height: 40px; + height: 90px; float: left; } #fermentor_toggle2 { width: 80px; - height: 40px; + height: 90px; float: left; } #fermentor_toggle3 { width: 80px; - height: 40px; + height: 90px; float: left; } #fermentor_control { width: 240px; height: 40px; - float: right; + float: left; } -#fermentor_edit { - width: 240px; - height: 40px; - float: right; -} -
--- a/www-thermferm/index.php Mon Jul 21 22:19:24 2014 +0200 +++ b/www-thermferm/index.php Tue Jul 22 17:56:56 2014 +0200 @@ -44,13 +44,15 @@ $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>'.PHP_EOL; $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/jqxdraw.js"></script>'.PHP_EOL; +$outstr .= ' <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript">'.PHP_EOL; $outstr .= ' function addEventListeners() {'.PHP_EOL; $outstr .= ' $("#maintenance").mousedown(function () {'.PHP_EOL; $outstr .= ' $("#maintenance_window").jqxWindow(\'open\');'.PHP_EOL; $outstr .= ' });'.PHP_EOL; - $outstr .= ' }'.PHP_EOL; $outstr .= ' function createMaintenance() {'.PHP_EOL; @@ -60,21 +62,12 @@ $outstr .= ' resizable: false, isModal: true, modalOpacity: 0.5, '.PHP_EOL; $outstr .= ' okButton: $("#maintenance_ok"), cancelButton: $("#maintenance_cancel"),'.PHP_EOL; $outstr .= ' initContent: function () {'.PHP_EOL; -$outstr .= ' $("#maintenance_ok").jqxButton({ width: \'65px\', height: \'25\', theme: \''.$my_style.'\' });'.PHP_EOL; -$outstr .= ' $("#maintenance_cancel").jqxButton({ width: \'65px\', height: \'25\', theme: \''.$my_style.'\' });'.PHP_EOL; -//$outstr .= ' $("#ok").focus();'.PHP_EOL; +$outstr .= ' $("#maintenance_ok").jqxButton({ width: 65, height: 25, theme: \''.$my_style.'\' });'.PHP_EOL; +$outstr .= ' $("#maintenance_cancel").jqxButton({ width: 65, height: 25, theme: \''.$my_style.'\' });'.PHP_EOL; $outstr .= ' }'.PHP_EOL; $outstr .= ' });'.PHP_EOL; -$outstr .= ' $("#maintenance").jqxButton({ width: \'150\', height: \'25\', theme: \''.$my_style.'\'});'.PHP_EOL; +$outstr .= ' $("#maintenance").jqxButton({ width: 150, height: 25, theme: \''.$my_style.'\'});'.PHP_EOL; $outstr .= ' }'.PHP_EOL; - -$outstr .= ' $(document).ready(function () {'.PHP_EOL; -$outstr .= ' // Create jqxTabs.'.PHP_EOL; -$outstr .= ' $(\'#jqxTabs\').jqxTabs({ width: \'978\', height: 428, position: \'top\', theme: \''.$my_style.'\'});'.PHP_EOL; -$outstr .= ' addEventListeners();'.PHP_EOL; -$outstr .= ' createMaintenance();'.PHP_EOL; -$outstr .= ' });'.PHP_EOL; - $outstr .= ' </script>'.PHP_EOL; $outstr .= ' </head>'.PHP_EOL; $outstr .= ' <body class="default">'.PHP_EOL; @@ -97,6 +90,16 @@ $outstr .= ' </div>'.PHP_EOL; $outstr .= ' </div> <!-- maintenance_window -->'.PHP_EOL; +/* Create the tabs */ +$outstr .= ' <script type="text/javascript">'.PHP_EOL; +$outstr .= ' $(document).ready(function () {'.PHP_EOL; +$outstr .= ' // Create jqxTabs.'.PHP_EOL; +$outstr .= ' $("#jqxTabs").jqxTabs({ width: 978, height: 428, position: \'top\', theme: \''.$my_style.'\'});'.PHP_EOL; +$outstr .= ' addEventListeners();'.PHP_EOL; +$outstr .= ' createMaintenance();'.PHP_EOL; +$outstr .= ' });'.PHP_EOL; +$outstr .= ' </script>'.PHP_EOL; + $outstr .= ' </div> <!-- jqxWidget -->'.PHP_EOL; $outstr .= ' </body>'.PHP_EOL; $outstr .= '</html>'.PHP_EOL;
--- a/www-thermferm/liveview.php Mon Jul 21 22:19:24 2014 +0200 +++ b/www-thermferm/liveview.php Tue Jul 22 17:56:56 2014 +0200 @@ -68,14 +68,64 @@ $outstr .= ' <script type="text/javascript">'.PHP_EOL; $outstr .= ' $(document).ready(function () {'.PHP_EOL; + + $outstr .= ' var sampleData'.$unr.' = ['.PHP_EOL; + $outstr .= ' { Date:\'2014-07-15 20:44\',Mode:\'NONE\',Air:20.625,Beer:\'23.687\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-15 21:00\',Mode:\'NONE\',Air:20.250,Beer:\'23.437\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-15 22:00\',Mode:\'NONE\',Air:20.375,Beer:\'22.812\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-15 23:00\',Mode:\'NONE\',Air:20.500,Beer:\'22.437\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 00:00\',Mode:\'NONE\',Air:20.437,Beer:\'22.250\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 01:00\',Mode:\'NONE\',Air:20.375,Beer:\'22.000\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 02:00\',Mode:\'NONE\',Air:20.312,Beer:\'21.750\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 03:00\',Mode:\'NONE\',Air:20.375,Beer:\'21.687\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 04:00\',Mode:\'NONE\',Air:20.312,Beer:\'21.562\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 05:00\',Mode:\'NONE\',Air:20.187,Beer:\'21.500\' },'.PHP_EOL; + $outstr .= ' { Date:\'2014-07-16 06:00\',Mode:\'NONE\',Air:20.125,Beer:\'21.500\' }'.PHP_EOL; + $outstr .= ' ];'.PHP_EOL; + + $outstr .= ' var settings'.$unr.' = {'.PHP_EOL; + $outstr .= ' title: "Fermentation temperature '.$unr.'",'.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 .= ' enabled: true,'.PHP_EOL; + $outstr .= ' source: sampleData'.$unr.','.PHP_EOL; + $outstr .= ' categoryAxis:'.PHP_EOL; + $outstr .= ' {'.PHP_EOL; + $outstr .= ' dataField: \'Date\','.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 .= ' columnsGapPercent: 30,'.PHP_EOL; + $outstr .= ' seriesGapPercent: 0,'.PHP_EOL; + $outstr .= ' valueAxis:'.PHP_EOL; + $outstr .= ' {'.PHP_EOL; +// $outstr .= ' minValue: 0,'.PHP_EOL; +// $outstr .= ' maxValue: 35,'.PHP_EOL; +// $outstr .= ' unitInterval: 5,'.PHP_EOL; + $outstr .= ' description: \'Degrees C\''.PHP_EOL; + $outstr .= ' },'.PHP_EOL; + $outstr .= ' series: ['.PHP_EOL; + $outstr .= ' { dataField: \'Air\', displayText: \'Air\' },'.PHP_EOL; + $outstr .= ' { dataField: \'Beer\', displayText: \'Beer\' }'.PHP_EOL; + $outstr .= ' ]'.PHP_EOL; + $outstr .= ' }]'.PHP_EOL; + $outstr .= ' };'.PHP_EOL; + $outstr .= ' $("#fermentor_chart_'.$unr.'").jqxChart(settings'.$unr.');'.PHP_EOL; + + $outstr .= ' var initChart'.$unr.' = function() {'.PHP_EOL; + $outstr .= ' $("#fermentor_chart_'.$unr.'").jqxChart(\'refresh\');'.PHP_EOL; + $outstr .= ' }'.PHP_EOL; + $outstr .= ' $("#fermentor_setup_'.$unr.'").jqxButton({ width: \'150\', height: \'25\', theme: \''.$my_style.'\'});'.PHP_EOL; - $outstr .= ' $("#fermentor_history_'.$unr.'").jqxButton({ width: \'150\', height: \'25\', theme: \''.$my_style.'\'});'.PHP_EOL; $outstr .= ' });'.PHP_EOL; $outstr .= ' </script>'.PHP_EOL; $outstr .= ' <div id="fermentor">'.PHP_EOL; - $outstr .= ' <div id="fermentor_pict">'.PHP_EOL; - $outstr .= ' <img src="images/Fermenter_60l.gif">'.PHP_EOL; - $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_chart_'.$unr.'" style="width:600px; height:377px; float:left"></div>'.PHP_EOL; $set_temperature = "N/A"; $air_temperature = "N/A"; @@ -161,13 +211,10 @@ $outstr .= ' Fan'.PHP_EOL; $outstr .= ' </form>'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' <div id="fermentor_control">'.PHP_EOL; - $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' <div id="fermentor_edit">'.PHP_EOL; - $outstr .= ' <button id="fermentor_setup_'.$unr.'">Edit fermentor</button>'.PHP_EOL; - $outstr .= ' <button id="fermentor_history_'.$unr.'">History</button>'.PHP_EOL; - $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_control">'.PHP_EOL; + $outstr .= ' <button id="fermentor_setup_'.$unr.'">Edit fermentor</button>'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' </div> <!-- fermentor_panel -->'.PHP_EOL; $outstr .= ' </div> <!-- fermentor -->'.PHP_EOL; }