Mon, 21 Jul 2014 17:16:08 +0200
Added maintenance window with only two buttons yet
--- a/www-thermferm/css/style.css Sun Jul 20 23:09:50 2014 +0200 +++ b/www-thermferm/css/style.css Mon Jul 21 17:16:08 2014 +0200 @@ -36,53 +36,39 @@ #jqxWidget { width: 980px; height: 510px; -// background: #ddd; float: left; } #header { width: 980px; - height: 60px; -// background: #222; -// margin: 5px; + height: 80px; float: left; } #jqxTabs { width: 980px; - height: 460px; + height: 440px; float: left; } #fermentor { - border: 5px solid; - border-color: #FFCC01; - border-radius: 15px 15px 15px 15px; - height: 393px; - width: 958px; + height: 382px; + width: 968px; background: #fff; margin: 5px; float: left; } -#fermentor_head { - margin-bottom: 1px; - padding: 3px 10px 8px; - background-color: #FFCC01; - color: #666666; - font-weight: bold; -} - #fermentor_pict { width: 220px; - height: 350px; + height: 382px; float: left; } #fermentor_panel { width: 240px; - height: 350px; + height: 382px; float: left; background-color: #f0f0f0; }
--- a/www-thermferm/index.php Sun Jul 20 23:09:50 2014 +0200 +++ b/www-thermferm/index.php Mon Jul 21 17:16:08 2014 +0200 @@ -24,7 +24,7 @@ /* * Look for the style names in the jqwidgets/styles directory. */ -$my_style = 'fresh'; +$my_style = 'ui-redmond'; require_once('liveview.php'); @@ -39,27 +39,65 @@ $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/jqxwindow.js"></script>'.PHP_EOL; $outstr .= ' <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script>'.PHP_EOL; $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">'.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; +$outstr .= ' $("#maintenance_window").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: $("#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 .= ' }'.PHP_EOL; +$outstr .= ' });'.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: 448, position: \'top\', theme: \''.$my_style.'\'});'.PHP_EOL; -$outstr .= ' $("#maintenance").jqxButton({ width: \'150\', height: \'25\', theme: \''.$my_style.'\'});'.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; $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 .= ' <button id="maintenance">Maintenance panel</button>'.PHP_EOL; +$outstr .= ' <input type="button" id="maintenance" value="Maintenance panel" />'.PHP_EOL; $outstr .= ' </div> <!-- header -->'.PHP_EOL; $outstr .= liveview(); + +/* The maintenance popup window */ +$outstr .= ' <div id="maintenance_window">'.PHP_EOL; +$outstr .= ' <div id="maintenance_header">'.PHP_EOL; +$outstr .= ' Maintenance panel'.PHP_EOL; +$outstr .= ' </div>'.PHP_EOL; +$outstr .= ' <div id="maintenance_content">'.PHP_EOL; +$outstr .= ' Maintenancecontent'.PHP_EOL; +$outstr .= ' <input type="button" id="maintenance_ok" value="OK" style="margin-right: 10px" />'.PHP_EOL; +$outstr .= ' <input type="button" id="maintenance_cancel" value="Cancel" />'.PHP_EOL; +$outstr .= ' </div>'.PHP_EOL; +$outstr .= ' </div> <!-- maintenance_window -->'.PHP_EOL; + $outstr .= ' </div> <!-- jqxWidget -->'.PHP_EOL; -$outstr .= ' <!-- Load scripts after the body, so they don\'t block rendering of the page -->'.PHP_EOL; $outstr .= ' </body>'.PHP_EOL; $outstr .= '</html>'.PHP_EOL;
--- a/www-thermferm/liveview.php Sun Jul 20 23:09:50 2014 +0200 +++ b/www-thermferm/liveview.php Mon Jul 21 17:16:08 2014 +0200 @@ -73,6 +73,9 @@ $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; $set_temperature = "N/A"; $air_temperature = "N/A"; @@ -80,18 +83,6 @@ foreach($arr as $l) { $vals = explode(",", $l); - if (strcmp($vals[0], "NAME") == 0) { - /* - * The name is allways first, so when we have it - * emit the formatting. - */ - $outstr .= ' <div id="fermentor_head">'.PHP_EOL; - $outstr .= ' ' . $vals[1] .PHP_EOL; - $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' <div id="fermentor_pict">'.PHP_EOL; - $outstr .= ' <img src="images/Fermenter_60l.gif">'.PHP_EOL; - $outstr .= ' </div>'.PHP_EOL; - } if (strcmp($vals[0], "MODE") == 0) { $mode = $vals[1]; }