Mercurial > mbsePi-apps / changeset

changeset

Redesigned the web interface, one single app is too slow. The main dashboard will be a shiny ajax driven page, the setup pages will be simple and php only. Keep It Simple, Stupid.

Fri, 25 Jul 2014 23:27:08 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Fri, 25 Jul 2014 23:27:08 +0200
changeset 134
f05601490415
parent 133
345307762220
child 135
0882292322b3

Redesigned the web interface, one single app is too slow. The main dashboard will be a shiny ajax driven page, the setup pages will be simple and php only. Keep It Simple, Stupid.

www-thermferm/css/style.css file | annotate | diff | comparison | revisions
www-thermferm/devices.php file | annotate | diff | comparison | revisions
www-thermferm/getbus.php file | annotate | diff | comparison | revisions
www-thermferm/getprofiles.php file | annotate | diff | comparison | revisions
www-thermferm/getunits.php file | annotate | diff | comparison | revisions
www-thermferm/global.php file | annotate | diff | comparison | revisions
www-thermferm/images/add.png file | annotate | diff | comparison | revisions
www-thermferm/images/close.png file | annotate | diff | comparison | revisions
www-thermferm/images/refresh.png file | annotate | diff | comparison | revisions
www-thermferm/images/search.png file | annotate | diff | comparison | revisions
www-thermferm/index.php file | annotate | diff | comparison | revisions
www-thermferm/js/index.js file | annotate | diff | comparison | revisions
www-thermferm/js/main.js file | annotate | diff | comparison | revisions
www-thermferm/js/maintenance_panel.js file | annotate | diff | comparison | revisions
www-thermferm/liveview.php file | annotate | diff | comparison | revisions
www-thermferm/maintenance.php file | annotate | diff | comparison | revisions
www-thermferm/maintenance_panel.php file | annotate | diff | comparison | revisions
www-thermferm/profiles.php file | annotate | diff | comparison | revisions
www-thermferm/units.php file | annotate | diff | comparison | revisions
www-thermferm/utilities.php file | annotate | diff | comparison | revisions 
--- a/www-thermferm/css/style.css	Thu Jul 24 23:14:20 2014 +0200
+++ b/www-thermferm/css/style.css	Fri Jul 25 23:27:08 2014 +0200
@@ -29,10 +29,6 @@
 }
 
 
-#header button.script-status {
-    margin:10px;
-}
-
 #jqxWidget {
     width: 980px;
     height: 510px;
@@ -40,9 +36,54 @@
 }
 
 #header {
-    width: 980px;
-    height: 80px;
+    width: 978px;
+    height: 78px;
+    float: left;
+    border: 1px solid #4297d7;
+    border-radius: 5px 5px 5px 5px;
+    background: #5c9ccc url(../jqwidgets/styles/images/redmond/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
+    color: #ffffff;
+    font-weight: bold;
+}
+
+#content {
+    width: 978px;
+    height: 428px;
+    float: left;
+    border: 1px solid;
+    border-color: #aaa;
+    border-radius: 5px 5px 5px 5px;
+}
+
+#errors {
+    height: 60px;
+    width: 978px;
     float: left;
+    color: #ff0000;
+}
+
+#etable {
+    height: 360px;
+    width: 978px;
+    float: left;
+}
+
+table.setup {
+    margin-left: auto;
+    margin-right: auto;
+    border-collapse: collapse;
+}
+
+tr.setup:nth-child(odd) {
+    background: #FFFFFF;
+}
+
+tr.setup:nth-child(even) {
+    background: #CCFFFF;
+}
+
+td.setup {
+    padding: 1px 3px 1px 3px;
 }
 
 #jqxTabs {
@@ -51,7 +92,6 @@
     float: left;
 }
 
-
 #fermentor {
     height: 382px;
     width: 968px;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/devices.php	Fri Jul 25 23:27:08 2014 +0200
@@ -0,0 +1,88 @@
+<?php
+/*****************************************************************************
+ * Copyright (C) 2014
+ *   
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of ThermFerm
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * ThermFerm is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+require_once('utilities.php');
+
+
+$sock = open_socket();
+if ($sock == false) {
+    echo "";
+    return;
+}
+
+socket_write($sock, "LIST BUS", 4096);
+$answer = "";
+while (1) {
+    $line = socket_read($sock, 4096);
+    if ($line === '')
+	break;
+    $answer .= $line;
+}
+socket_close($sock);
+$arr = explode("\r\n", $answer);
+
+
+$outstr  = '<!DOCTYPE html>'.PHP_EOL;
+$outstr .= '<html>'.PHP_EOL;
+$outstr .= ' <head>'.PHP_EOL;
+$outstr .= '  <meta http-equiv="content-type" content="text/html; charset=utf-8" />'.PHP_EOL;
+$outstr .= '  <title>ThermFerm monitor</title>'.PHP_EOL;
+$outstr .= '  <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />'.PHP_EOL;
+$outstr .= ' </head>'.PHP_EOL;
+
+$outstr .= ' <body class="default">'.PHP_EOL;
+$outstr .= '  <div id="jqxWidget">'.PHP_EOL;
+$outstr .= '   <div id="header">'.PHP_EOL;
+$outstr .= '    <form action="maintenance.php" style="margin:30px; float:right">'.PHP_EOL;
+$outstr .= '     <input type="submit" class="jqx-button" value="Maintenance Panel" />'.PHP_EOL;
+$outstr .= '    </form>'.PHP_EOL;
+$outstr .= '   </div> <!-- header -->'.PHP_EOL;
+$outstr .= '   <div id="content">'.PHP_EOL;
+
+$outstr .= '    <div id="errors">'.PHP_EOL;
+$outstr .= '    </div> <!-- errors -->'.PHP_EOL;
+$outstr .= '    <div id="etable">'.PHP_EOL;
+
+$outstr .= '     <table class="setup">'.PHP_EOL;
+$outstr .= '      <tr style="background-color: #FFCC01;"><td class="setup">Address</td><td class="setup">Refcnt</td><td class="setup">Chip</td><td class="setup">Description</td></tr>'.PHP_EOL;
+
+if (startsWith($arr[0], "212")) {
+    $j = 1;
+    while (1) {
+	if (strcmp($arr[$j], ".") == 0)
+	    break;
+	$f = explode(",", $arr[$j]);
+	$outstr .= '      <tr class="setup"><td class="setup">'.$f[0].'</td><td class="setup">'.$f[1].'</td><td class="setup">'.$f[2].'</td><td class="setup">'.$f[3].'</td></tr>'.PHP_EOL;
+	$j++;
+    }
+}
+
+$outstr .= '     </table>'.PHP_EOL;
+$outstr .= '    </div> <!-- etable -->'.PHP_EOL;
+$outstr .= '   </div> <!-- content -->'.PHP_EOL;
+$outstr .= '  </div> <!-- jqxWidget -->'.PHP_EOL;
+$outstr .= ' </body>'.PHP_EOL;
+$outstr .= '</html>'.PHP_EOL;
+
+echo $outstr;
+
--- a/www-thermferm/getbus.php	Thu Jul 24 23:14:20 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,64 +0,0 @@
-<?php
-/*****************************************************************************
- * Copyright (C) 2014
- *   
- * Michiel Broek <mbroek at mbse dot eu>
- *
- * This file is part of ThermFerm
- *
- * This is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the
- * Free Software Foundation; either version 2, or (at your option) any
- * later version.
- *
- * ThermFerm is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with ThermFerm; see the file COPYING.  If not, write to the Free
- * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
- *****************************************************************************/
-
-require_once('utilities.php');
-
-
-$sock = open_socket();
-if ($sock == false) {
-    echo "";
-    return;
-}
-
-socket_write($sock, "LIST BUS", 4096);
-$answer = "";
-while (1) {
-    $line = socket_read($sock, 4096);
-    if ($line === '')
-	break;
-    $answer .= $line;
-}
-socket_close($sock);
-$arr = explode("\r\n", $answer);
-
-
-$row = '[';
-
-/* We don't use json_encode because it doesn't work for our purpose */
-if (startsWith($arr[0], "212")) {
-    $j = 1;
-    while (1) {
-	if (strcmp($arr[$j], ".") == 0)
-		break;
-	if ($j > 1)
-	    $row .= ',';
-	$f = explode(",", $arr[$j]);
-	$row .= '{"Address":"'.$f[0].'","Refcnt":"'.$f[1].'","Chip":"'.$f[2].'","Description":"'.$f[3].'"}';
-	$j++;
-    }
-}
-
-$row .= ']';
-echo $row;
-
-?>
--- a/www-thermferm/getprofiles.php	Thu Jul 24 23:14:20 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,90 +0,0 @@
-<?php
-/*****************************************************************************
- * Copyright (C) 2014
- *   
- * Michiel Broek <mbroek at mbse dot eu>
- *
- * This file is part of ThermFerm
- *
- * This is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the
- * Free Software Foundation; either version 2, or (at your option) any
- * later version.
- *
- * ThermFerm is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with ThermFerm; see the file COPYING.  If not, write to the Free
- * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
- *****************************************************************************/
-
-require_once('utilities.php');
-
-
-
-if (isset($_GET['update'])) {
-    /*
-     * Build the update command
-     */
-    $update_cmd = "PROFILE ".$_GET['UUID'].",".$_GET['Name'];
-
-    $sock = open_socket();
-    if ($sock != false) {
-    	/*
-    	 * Send command and absorb the result.
-    	 */
-    	socket_write($sock, $update_cmd, 4096);
-    	while (1) {
-	    $line = socket_read($sock, 4096);
-	    if ($line === '')
-	    	break;
-    	}
-    	socket_close($sock);
-    }
-}
-
-
-
-/*
- * Get current profiles
- */
-$sock = open_socket();
-if ($sock == false) {
-    echo "";
-    return;
-}
-
-socket_write($sock, "LIST PROFILES", 4096);
-$answer = "";
-while (1) {
-    $line = socket_read($sock, 4096);
-    if ($line === '')
-	break;
-    $answer .= $line;
-}
-socket_close($sock);
-$arr = explode("\r\n", $answer);
-$row = '[';
-
-
-/* We don't use json_encode because it doesn't work for our purpose */
-if (startsWith($arr[0], "212")) {
-    $j = 1;
-    while (1) {
-	if (strcmp($arr[$j], ".") == 0)
-		break;
-	if ($j > 1)
-	    $row .= ',';
-	$f = explode(",", $arr[$j]);
-	$row .= '{"UUID":"'.$f[0].'","Name":"'.$f[1].'","Steps":"'.$f[2].'"}';
-	$j++;
-    }
-}
-
-$row .= ']';
-echo $row;
-
-?>
--- a/www-thermferm/getunits.php	Thu Jul 24 23:14:20 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,64 +0,0 @@
-<?php
-/*****************************************************************************
- * Copyright (C) 2014
- *   
- * Michiel Broek <mbroek at mbse dot eu>
- *
- * This file is part of ThermFerm
- *
- * This is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the
- * Free Software Foundation; either version 2, or (at your option) any
- * later version.
- *
- * ThermFerm is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with ThermFerm; see the file COPYING.  If not, write to the Free
- * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
- *****************************************************************************/
-
-require_once('utilities.php');
-
-
-$sock = open_socket();
-if ($sock == false) {
-    echo "";
-    return;
-}
-
-socket_write($sock, "LIST", 4096);
-$answer = "";
-while (1) {
-    $line = socket_read($sock, 4096);
-    if ($line === '')
-	break;
-    $answer .= $line;
-}
-socket_close($sock);
-$arr = explode("\r\n", $answer);
-
-
-$row = '[';
-
-/* We don't use json_encode because it doesn't work for our purpose */
-if (startsWith($arr[0], "212")) {
-    $j = 1;
-    while (1) {
-	if (strcmp($arr[$j], ".") == 0)
-		break;
-	if ($j > 1)
-	    $row .= ',';
-	$f = explode(",", $arr[$j]);
-	$row .= '{"UUID":"'.$f[0].'","Name":"'.$f[1].'","Mode":"'.$f[2].'"}';
-	$j++;
-    }
-}
-
-$row .= ']';
-echo $row;
-
-?>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/global.php	Fri Jul 25 23:27:08 2014 +0200
@@ -0,0 +1,53 @@
+<?php
+/*****************************************************************************
+ * Copyright (C) 2014
+ *   
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of ThermFerm
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * ThermFerm is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+
+$outstr  = '<!DOCTYPE html>'.PHP_EOL;
+$outstr .= '<html>'.PHP_EOL;
+$outstr .= ' <head>'.PHP_EOL;
+$outstr .= '  <meta http-equiv="content-type" content="text/html; charset=utf-8" />'.PHP_EOL;
+$outstr .= '  <title>ThermFerm monitor</title>'.PHP_EOL;
+$outstr .= '  <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />'.PHP_EOL;
+$outstr .= ' </head>'.PHP_EOL;
+
+$outstr .= ' <body class="default">'.PHP_EOL;
+$outstr .= '  <div id="jqxWidget">'.PHP_EOL;
+$outstr .= '   <div id="header">'.PHP_EOL;
+$outstr .= '    <form action="maintenance.php" style="margin:30px; float:right">'.PHP_EOL;
+$outstr .= '     <input type="submit" class="jqx-button" value="Maintenance Panel" />'.PHP_EOL;
+$outstr .= '    </form>'.PHP_EOL;
+$outstr .= '   </div> <!-- header -->'.PHP_EOL;
+$outstr .= '   <div id="content">'.PHP_EOL;
+$outstr .= '    <div id="errors">'.PHP_EOL;
+$outstr .= '    </div> <!-- errors -->'.PHP_EOL;
+$outstr .= '    <div id="etable">'.PHP_EOL;
+
+$outstr .= '    </div> <!-- etable -->'.PHP_EOL;
+$outstr .= '   </div> <!-- content -->'.PHP_EOL;
+$outstr .= '   </div> <!-- content -->'.PHP_EOL;
+$outstr .= '  </div> <!-- jqxWidget -->'.PHP_EOL;
+$outstr .= ' </body>'.PHP_EOL;
+$outstr .= '</html>'.PHP_EOL;
+
+echo $outstr;
+
Binary file www-thermferm/images/add.png has changed
Binary file www-thermferm/images/close.png has changed
Binary file www-thermferm/images/refresh.png has changed
Binary file www-thermferm/images/search.png has changed
--- a/www-thermferm/index.php	Thu Jul 24 23:14:20 2014 +0200
+++ b/www-thermferm/index.php	Fri Jul 25 23:27:08 2014 +0200
@@ -27,7 +27,6 @@
 $my_style = 'ui-redmond';
 
 require_once('liveview.php');
-require_once('maintenance_panel.php');
 
 
 $outstr  = '<!DOCTYPE html>'.PHP_EOL;
@@ -48,24 +47,19 @@
 $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" src="jqwidgets/jqxscrollbar.js"></script>'.PHP_EOL;
-$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>'.PHP_EOL;
-$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>'.PHP_EOL;
-$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>'.PHP_EOL;
-$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script>'.PHP_EOL;
 $outstr .= ' </head>'.PHP_EOL;
 
 $outstr .= ' <body class="default">'.PHP_EOL;
 $outstr .= '  <div id="jqxWidget">'.PHP_EOL;
 $outstr .= '   <div id="header">'.PHP_EOL;
-$outstr .= '    <button class="script-status ui-state-error">Status</button>'.PHP_EOL;
-$outstr .= '    <input type="button" id="maintenance" value="Maintenance panel" />'.PHP_EOL;
+$outstr .= '    <form action="maintenance.php" style="margin:30px; float:right">'.PHP_EOL;
+$outstr .= '     <input type="submit" id="maintenance" value="Maintenance panel" />'.PHP_EOL;
+$outstr .= '    </form>'.PHP_EOL;
 $outstr .= '   </div> <!-- header -->'.PHP_EOL;
 $outstr .= liveview();
-$outstr .= maintenance_panel();
 
 /* Create the tabs */
-$outstr .= '   <script type="text/javascript" src="js/main.js"></script>'.PHP_EOL;
+$outstr .= '   <script type="text/javascript" src="js/index.js"></script>'.PHP_EOL;
 $outstr .= '  </div> <!-- jqxWidget -->'.PHP_EOL;
 $outstr .= ' </body>'.PHP_EOL;
 $outstr .= '</html>'.PHP_EOL;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/js/index.js	Fri Jul 25 23:27:08 2014 +0200
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Copyright (C) 2014
+ *   
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of ThermFerm
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * ThermFerm is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+
+$(document).ready(function () {
+    // Create jqxTabs.
+    $("#jqxTabs").jqxTabs({ width: 978, height: 428, position: 'top', theme: 'ui-redmond'});
+    $("#maintenance").jqxButton({ width: 150, height: 25, theme: 'ui-redmond' });
+});
+
--- a/www-thermferm/js/main.js	Thu Jul 24 23:14:20 2014 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Copyright (C) 2014
- *   
- * Michiel Broek <mbroek at mbse dot eu>
- *
- * This file is part of ThermFerm
- *
- * This is free software; you can redistribute it and/or modify it
- * under the terms of the GNU General Public License as published by the
- * Free Software Foundation; either version 2, or (at your option) any
- * later version.
- *
- * ThermFerm is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with ThermFerm; see the file COPYING.  If not, write to the Free
- * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
- *****************************************************************************/
-
-
-function addEventListeners() {
-    $("#maintenance").mousedown(function () {
-	$("#maintenance_window").jqxWindow('open');
-    });
-}
-
-function createMaintenance() {
-    $("#maintenance_window").jqxWindow({
-	height: 400, width: 800, autoOpen: false, theme: 'ui-redmond', 
-	position: { x:100, y:50 }, 
-	resizable: false, isModal: true, modalOpacity: 0.5, 
-	okButton: $("#maintenance_ok"), 
-	initContent: function () {
-	    $("#maintenance_ok").jqxButton({ width: 70, height: 25, theme: 'ui-redmond' });
-	}
-    });
-    $("#maintenance").jqxButton({ width: 150, height: 25, theme: 'ui-redmond' });
-}
-
-$(document).ready(function () {
-    // Create jqxTabs.
-    $("#jqxTabs").jqxTabs({ width: 978, height: 428, position: 'top', theme: 'ui-redmond'});
-    addEventListeners();
-    createMaintenance();
-});
-
--- a/www-thermferm/js/maintenance_panel.js	Thu Jul 24 23:14:20 2014 +0200
+++ b/www-thermferm/js/maintenance_panel.js	Fri Jul 25 23:27:08 2014 +0200
@@ -62,7 +62,40 @@
             { name: 'Name', type: 'string' },
             { name: 'Steps', type: 'int' }
         ],
+	id: 'UUID',
         url: 'getprofiles.php',
+	insertrow: function (rowid, commit) {
+	    var data = "insert=true&amp;" + $.param({Name: rowid});
+	    $.ajax({
+		dataType: 'json',
+		url: 'getprofiles.php',
+		data: data,
+		cache: false,
+		success: function (data, status, xhr) {
+		    // insert command is executed.
+		    commit(true);
+		},
+		error: function(jqXHR, textStatus, errorThrown) {
+		    commit(false);
+		}
+	    });
+	},
+        deleterow: function (rowid, commit) {
+            var data = "delete=true&amp;" + $.param({UUID: rowid});
+            $.ajax({
+                dataType: 'json',
+                url: 'getprofiles.php',
+                data: data,
+                cache: false,
+                success: function (data, status, xhr) {
+                    // insert command is executed.
+                    commit(true);
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    commit(false);
+                }
+            });
+        },
 	updaterow: function (rowid, rowdata, commit) {
 	    // synchronize with the server - send update command
 	    var data = "update=true&UUID=" + rowdata.UUID + "&Name=" + rowdata.Name;
@@ -89,12 +122,67 @@
         theme: theme,
         columnsresize: true,
 	editable: true,
+	showstatusbar: true,
+	renderstatusbar: function (statusbar) {
+	    // appends buttons to the status bar.
+	    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
+	    var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
+	    var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
+	    var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
+	    container.append(addButton);
+	    container.append(deleteButton);
+	    container.append(reloadButton);
+	    statusbar.append(container);
+	    addButton.jqxButton({  width: 60, height: 20 });
+	    deleteButton.jqxButton({  width: 65, height: 20 });
+	    reloadButton.jqxButton({  width: 65, height: 20 });
+	    // add new row.
+	    addButton.click(function (event) {
+		/*
+		 * Ask a new profile name using a popup window.
+		 * Send "ADD PROFILE name" to the server using the getprofiles.php script.
+		 * Refresh the data
+		 */
+		$("#jqxwindow_addprofile").jqxWindow('open');
+		$("#jqxgrid_profiles").jqxGrid({ source: dataAdapter_profiles });
+	    });
+	    // delete selected row.
+	    deleteButton.click(function (event) {
+		var selectedrowindex = $("#jqxgrid_profiles").jqxGrid('getselectedrowindex');
+		var rowscount = $("#jqxgrid_profiles").jqxGrid('getdatainformation').rowscount;
+		var id = $("#jqxgrid_profiles").jqxGrid('getrowid', selectedrowindex);
+		$("#jqxgrid_profiles").jqxGrid('deleterow', id);
+	    });
+	    // reload grid data.
+	    reloadButton.click(function (event) {
+		$("#jqxgrid_profiles").jqxGrid({ source: dataAdapter_profiles });
+	    });
+	},
         columns: [
             { text: 'UUID', editable: false, datafield: 'UUID', width: 280 },
             { text: 'Name', datafield: 'Name', minwidth: 120 },
             { text: 'Steps', editable: false, datafield: 'Steps', width: 50 }
         ]
     });
+    $("#jqxwindow_addprofile").jqxWindow({ 
+	theme: theme,
+	resizable: false, 
+	isModal: true,
+	modalOpacity: 0.5,
+	autoOpen: false, 
+	width: 210,
+	height: 180,
+	cancelButton: $("#profile_cancelButton"),
+	initContent: function () {
+	    $("#profile_addButton").jqxButton({ width: 70, height: 25, theme: theme });
+	    $("#profile_cancelButton").jqxButton({ width: 70, height: 25, theme: theme });
+	    $("#profile_addButton").click(function () {
+		var id = $("#profile_inputField").val();
+		$("#jqxgrid_profiles").jqxGrid('insertrow', id);
+		$("#jqxwindow_addprofile").jqxWindow('hide');
+	    });
+	}
+    });
 
     /*
      * Units
--- a/www-thermferm/liveview.php	Thu Jul 24 23:14:20 2014 +0200
+++ b/www-thermferm/liveview.php	Fri Jul 25 23:27:08 2014 +0200
@@ -213,47 +213,7 @@
 	$outstr .= '        Fan'.PHP_EOL;
 	$outstr .= '       </form>'.PHP_EOL;
 	$outstr .= '      </div>'.PHP_EOL;
-	$outstr .= '      <div id="fermentor_control">'.PHP_EOL;
-	$outstr .= '       <input type="button" id="fermentor_setup_'.$unr.'" value="Edit fermentor" />'.PHP_EOL;
-	$outstr .= '      </div>'.PHP_EOL;
 	$outstr .= '     </div> <!-- fermentor_panel -->'.PHP_EOL;
-
-	/* Fermentor maintenance window */
-        $outstr .= '     <script type="text/javascript">'.PHP_EOL;
-	$outstr .= '      function addEventListeners'.$unr.'() {'.PHP_EOL;
-	$outstr .= '        $("#fermentor_setup_'.$unr.'").mousedown(function () {'.PHP_EOL;
-	$outstr .= '          $("#fermmaint_window'.$unr.'").jqxWindow(\'open\');'.PHP_EOL;
-	$outstr .= '        });'.PHP_EOL;
-	$outstr .= '      }'.PHP_EOL;
-	$outstr .= '      function createMaintenance'.$unr.'() {'.PHP_EOL;
-	$outstr .= '        $("#fermmaint_window'.$unr.'").jqxWindow({'.PHP_EOL;
-	$outstr .= '          height: 400, width: 800, autoOpen: false, theme: \''.$my_style.'\', '.PHP_EOL;
-	$outstr .= '          position: { x:100, y:50 }, '.PHP_EOL;
-	$outstr .= '          resizable: false, isModal: true, modalOpacity: 0.5, '.PHP_EOL;
-	$outstr .= '          okButton: $("#fermmaint_ok'.$unr.'"), cancelButton: $("#fermmaint_cancel'.$unr.'"),'.PHP_EOL;
-	$outstr .= '          initContent: function () {'.PHP_EOL;
-	$outstr .= '            $("#fermmaint_ok'.$unr.'").jqxButton({ width: 65, height: 25, theme: \''.$my_style.'\' });'.PHP_EOL;
-	$outstr .= '            $("#fermmaint_cancel'.$unr.'").jqxButton({ width: 65, height: 25, theme: \''.$my_style.'\' });'.PHP_EOL;
-	$outstr .= '          }'.PHP_EOL;
-	$outstr .= '        });'.PHP_EOL;
-	$outstr .= '        $("#fermentor_setup_'.$unr.'").jqxButton({ width: 150, height: 25, theme: \''.$my_style.'\'});'.PHP_EOL;
-	$outstr .= '      }'.PHP_EOL;
-	$outstr .= '      $(document).ready(function () {'.PHP_EOL;
-	$outstr .= '        addEventListeners'.$unr.'();'.PHP_EOL;
-	$outstr .= '        createMaintenance'.$unr.'();'.PHP_EOL;
-	$outstr .= '      });'.PHP_EOL;
-	$outstr .= '     </script>'.PHP_EOL;
-	$outstr .= '     <div id="fermmaint_window'.$unr.'">'.PHP_EOL;
-	$outstr .= '      <div id="fermmaint_header'.$unr.'">'.PHP_EOL;
-	$outstr .= '       Fermentor Unit '.$unr.' Maintenance'.PHP_EOL;
-	$outstr .= '      </div>'.PHP_EOL;
-	$outstr .= '      <div id="fermmaint_content'.$unr.'">'.PHP_EOL;
-	$outstr .= '       Content'.PHP_EOL;
-	$outstr .= '       <input type="button" id="fermmaint_ok'.$unr.'" value="OK" style="margin-right: 10px" />'.PHP_EOL;
-	$outstr .= '       <input type="button" id="fermmaint_cancel'.$unr.'" value="Cancel" />'.PHP_EOL;
-	$outstr .= '      </div>'.PHP_EOL;
-	$outstr .= '     </div> <!-- fermmaint_window -->'.PHP_EOL;
- 
 	$outstr .= '    </div> <!-- fermentor -->'.PHP_EOL;
     }
 
@@ -314,5 +274,4 @@
 }
 
 
-
 ?>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/maintenance.php	Fri Jul 25 23:27:08 2014 +0200
@@ -0,0 +1,63 @@
+<?php
+/*****************************************************************************
+ * Copyright (C) 2014
+ *   
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of ThermFerm
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * ThermFerm is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+/*
+ * Look for the style names in the jqwidgets/styles directory.
+ */
+$my_style = 'ui-redmond';
+
+$outstr  = '<!DOCTYPE html>'.PHP_EOL;
+$outstr .= '<html>'.PHP_EOL;
+$outstr .= ' <head>'.PHP_EOL;
+$outstr .= '  <meta http-equiv="content-type" content="text/html; charset=utf-8" />'.PHP_EOL;
+$outstr .= '  <title>ThermFerm monitor</title>'.PHP_EOL;
+$outstr .= '  <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />'.PHP_EOL;
+$outstr .= '  <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" />'.PHP_EOL;
+$outstr .= '  <link type="text/css" href="jqwidgets/styles/jqx.'.$my_style.'.css" rel="stylesheet" />'.PHP_EOL;
+$outstr .= '  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>'.PHP_EOL;
+$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>'.PHP_EOL;
+$outstr .= '  <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>'.PHP_EOL;
+$outstr .= ' </head>'.PHP_EOL;
+
+$outstr .= ' <body class="default">'.PHP_EOL;
+$outstr .= '  <div id="jqxWidget">'.PHP_EOL;
+$outstr .= '   <div id="header">'.PHP_EOL;
+$outstr .= '    <form action="index.php" style="margin:30px; float:right">'.PHP_EOL;
+$outstr .= '     <input type="submit" class="jqx-button" value="Main Screen" />'.PHP_EOL;
+$outstr .= '    </form>'.PHP_EOL;
+$outstr .= '   </div> <!-- header -->'.PHP_EOL;
+$outstr .= '   <div id="content">'.PHP_EOL;
+$outstr .= '    Content'.PHP_EOL;
+$outstr .= '    <ul>'.PHP_EOL;
+$outstr .= '     <li><a href="global.php">Global Configuration</a></li>'.PHP_EOL;
+$outstr .= '     <li><a href="devices.php">1-Wire Bus Devices</a></li>'.PHP_EOL;
+$outstr .= '     <li><a href="profiles.php">Fermentation Profiles</a></li>'.PHP_EOL;
+$outstr .= '     <li><a href="units.php">Fermentation Units</a></li>'.PHP_EOL;
+$outstr .= '    </ul>'.PHP_EOL;
+$outstr .= '   </div> <!-- content -->'.PHP_EOL;
+$outstr .= '  </div> <!-- jqxWidget -->'.PHP_EOL;
+$outstr .= ' </body>'.PHP_EOL;
+$outstr .= '</html>'.PHP_EOL;
+
+echo $outstr;
+
--- a/www-thermferm/maintenance_panel.php	Thu Jul 24 23:14:20 2014 +0200
+++ b/www-thermferm/maintenance_panel.php	Fri Jul 25 23:27:08 2014 +0200
@@ -55,6 +55,21 @@
     $outstr .= '      </div>'.PHP_EOL;
     $outstr .= '      <div>'.PHP_EOL;
     $outstr .= '       <div id="jqxgrid_profiles" style="margin-left: 8px; margin-top: 6px;"></div>'.PHP_EOL;
+    $outstr .= '       <div id="jqxwindow_addprofile">'.PHP_EOL;
+    $outstr .= '        <div>'.PHP_EOL;
+    $outstr .= '         Add Profile</div>'.PHP_EOL;
+    $outstr .= '        <div style="overflow: hidden;">'.PHP_EOL;
+    $outstr .= '         <div>'.PHP_EOL;
+    $outstr .= '          Profile Name:</div>'.PHP_EOL;
+    $outstr .= '         <div style="margin-top:5px;">'.PHP_EOL;
+    $outstr .= '          <input id="profile_inputField" type="text" class="jqx-input" style="width: 200px; height: 23px;" />'.PHP_EOL;
+    $outstr .= '         </div>'.PHP_EOL;
+    $outstr .= '         <div>'.PHP_EOL;
+    $outstr .= '          <input type="button" style="margin-top: 15px; margin-left: 50px; float: left;" value="Add" id="profile_addButton" />'.PHP_EOL;
+    $outstr .= '          <input type="button" style="margin-left: 5px; margin-top: 15px; float: left;" value="Cancel" id="profile_cancelButton" />'.PHP_EOL;
+    $outstr .= '         </div>'.PHP_EOL;
+    $outstr .= '        </div>'.PHP_EOL;
+    $outstr .= '       </div>'.PHP_EOL;
     $outstr .= '      </div>'.PHP_EOL;
     $outstr .= '      <div>'.PHP_EOL;
     $outstr .= '       <div id="jqxgrid_units" style="margin-left: 8px; margin-top: 6px;"></div>'.PHP_EOL;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/profiles.php	Fri Jul 25 23:27:08 2014 +0200
@@ -0,0 +1,133 @@
+<?php
+/*****************************************************************************
+ * Copyright (C) 2014
+ *   
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of ThermFerm
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * ThermFerm is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+require_once('utilities.php');
+
+profile_admin();
+exit;
+
+
+function profile_admin() {
+    if (isset($_GET['action'])) {
+	switch ($_GET['action']) {
+	    default:		break;
+	}
+    } elseif (isset($_POST['action'])) {
+	switch ($_POST['action']) {
+	    default:		break;
+	}
+    } else {
+	profile_list();
+    }
+}
+
+
+
+function profile_add() {
+    $cmd = "ADD PROFILE ".$_GET['Name'];
+
+    $sock = open_socket();
+    if ($sock != false) {
+	/*
+	 * Send command and absorb the result.
+	 */
+	socket_write($sock, $update_cmd, 4096);
+	while (1) {
+	    $line = socket_read($sock, 4096);
+	    if ($line === '')
+		break;
+	}
+	socket_close($sock);
+    }
+}
+
+
+
+function profile_update() {
+    /*
+     * Build the update command
+     */
+    $update_cmd = "PROFILE ".$_GET['UUID'].",".$_GET['Name'];
+
+    $sock = open_socket();
+    if ($sock != false) {
+    	/*
+    	 * Send command and absorb the result.
+    	 */
+    	socket_write($sock, $update_cmd, 4096);
+    	while (1) {
+	    $line = socket_read($sock, 4096);
+	    if ($line === '')
+	    	break;
+    	}
+    	socket_close($sock);
+    }
+}
+
+
+
+function profile_list() {
+	
+    $sock = open_socket();
+    if ($sock == false) {
+    	echo "";
+    	return;
+    }
+
+    socket_write($sock, "LIST PROFILES", 4096);
+    $answer = "";
+    while (1) {
+    	$line = socket_read($sock, 4096);
+    	if ($line === '')
+	    break;
+    	$answer .= $line;
+    }
+    socket_close($sock);
+    $arr = explode("\r\n", $answer);
+
+    $outstr  = build_header();
+
+    $outstr .= '    <div id="errors">'.PHP_EOL;
+    $outstr .= '    </div> <!-- errors -->'.PHP_EOL;
+
+    $outstr .= '    <div id="etable">'.PHP_EOL;
+    $outstr .= '     <table class="setup">'.PHP_EOL;
+    $outstr .= '      <tr style="background-color: #FFCC01;"><td class="setup">UUID</td><td class="setup">Name</td><td class="setup">Steps</td><td class="setup">spare</td></tr>'.PHP_EOL;
+
+    if (startsWith($arr[0], "212")) {
+    	$j = 1;
+    	while (1) {
+	    if (strcmp($arr[$j], ".") == 0)
+	    	break;
+	    $f = explode(",", $arr[$j]);
+	    $outstr .= '      <tr class="setup"><td class="setup">'.$f[0].'</td><td class="setup">'.$f[1].'</td><td class="setup">'.$f[2].'</td><td class="setup">bla</td></tr>'.PHP_EOL;
+	    $j++;
+    	}
+    }
+
+    $outstr .= '     </table>'.PHP_EOL;
+    $outstr .= '    </div> <!-- etable -->'.PHP_EOL;
+    $outstr .= build_footer();
+    echo $outstr;
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www-thermferm/units.php	Fri Jul 25 23:27:08 2014 +0200
@@ -0,0 +1,69 @@
+<?php
+/*****************************************************************************
+ * Copyright (C) 2014
+ *   
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of ThermFerm
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * ThermFerm is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+require_once('utilities.php');
+
+
+$sock = open_socket();
+if ($sock == false) {
+    echo "";
+    return;
+}
+
+socket_write($sock, "LIST", 4096);
+$answer = "";
+while (1) {
+    $line = socket_read($sock, 4096);
+    if ($line === '')
+	break;
+    $answer .= $line;
+}
+socket_close($sock);
+$arr = explode("\r\n", $answer);
+
+
+$outstr  = build_header();
+$outstr .= '    <div id="errors">'.PHP_EOL;
+$outstr .= '    </div> <!-- errors -->'.PHP_EOL;
+$outstr .= '    <div id="etable">'.PHP_EOL;
+
+$outstr .= '     <table class="setup">'.PHP_EOL;
+$outstr .= '      <tr style="background-color: #FFCC01;"><td class="setup">UUID</td><td class="setup">Name</td><td class="setup">Mode</td></tr>'.PHP_EOL;
+
+if (startsWith($arr[0], "212")) {
+    $j = 1;
+    while (1) {
+	if (strcmp($arr[$j], ".") == 0)
+	    break;
+	$f = explode(",", $arr[$j]);
+	$outstr .= '      <tr class="setup"><td class="setup">'.$f[0].'</td><td class="setup">'.$f[1].'</td><td class="setup">'.$f[2].'</td></tr>'.PHP_EOL;
+	$j++;
+    }
+}
+
+$outstr .= '     </table>'.PHP_EOL;
+$outstr .= '    </div> <!-- etable -->'.PHP_EOL;
+$outstr .= build_footer();
+
+echo $outstr;
+
--- a/www-thermferm/utilities.php	Thu Jul 24 23:14:20 2014 +0200
+++ b/www-thermferm/utilities.php	Fri Jul 25 23:27:08 2014 +0200
@@ -45,3 +45,38 @@
 }
 
 
+
+function build_header()
+{
+    $outstr  = '<!DOCTYPE html>'.PHP_EOL;
+    $outstr .= '<html>'.PHP_EOL;
+    $outstr .= ' <head>'.PHP_EOL;
+    $outstr .= '  <meta http-equiv="content-type" content="text/html; charset=utf-8" />'.PHP_EOL;
+    $outstr .= '  <title>ThermFerm monitor</title>'.PHP_EOL;
+    $outstr .= '  <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />'.PHP_EOL;
+    $outstr .= ' </head>'.PHP_EOL;
+    $outstr .= ' <body class="default">'.PHP_EOL;
+    $outstr .= '  <div id="jqxWidget">'.PHP_EOL;
+    $outstr .= '   <div id="header">'.PHP_EOL;
+    $outstr .= '    <form action="maintenance.php" style="margin:30px; float:right">'.PHP_EOL;
+    $outstr .= '     <input type="submit" class="jqx-button" value="Maintenance Panel" />'.PHP_EOL;
+    $outstr .= '    </form>'.PHP_EOL;
+    $outstr .= '   </div> <!-- header -->'.PHP_EOL;
+    $outstr .= '   <div id="content">'.PHP_EOL;
+
+    return $outstr;
+}
+
+
+
+function build_footer()
+{
+    $outstr  = '   </div> <!-- content -->'.PHP_EOL;
+    $outstr .= '  </div> <!-- jqxWidget -->'.PHP_EOL;
+    $outstr .= ' </body>'.PHP_EOL;
+    $outstr .= '</html>'.PHP_EOL;
+
+    return $outstr;
+}
+
+

Mercurial Repository: mbsePi-apps

mercurial