Mercurial > mbsePi-apps / changeset

changeset

Initial setup to draw charts

Tue, 22 Jul 2014 17:56:56 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Tue, 22 Jul 2014 17:56:56 +0200
changeset 121
03306c3bfd60
parent 120
466c5cee0463
child 122
e57043423e72

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;
-}
-
Binary file www-thermferm/images/Fermenter_60l.gif has changed
--- 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;
     }

Mercurial Repository: mbsePi-apps

mercurial