Mercurial > mbsePi-apps / changeset
changeset
Created control panel layout
Thu, 17 Jul 2014 21:19:22 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Thu, 17 Jul 2014 21:19:22 +0200
- changeset 113
- cf3f906ffe0d
- parent 112
- d82c5499285c
- child 114
- f50c17d68028
Created control panel layout
--- a/www-thermferm/css/style.css Wed Jul 16 13:42:14 2014 +0200 +++ b/www-thermferm/css/style.css Thu Jul 17 21:19:22 2014 +0200 @@ -93,15 +93,88 @@ float: left; } +#fermentor_panel { + width: 240px; + height: 270px; + float: left; + background-color: #f0f0f0; +} + +#fermentor_selector { + width: 160px; + height: 160px; + float: left; +} + +#fermentor_powerled { + width: 80px; + height: 160px; + float: left; +} + +#fermentor_display1 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_display2 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_display3 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_led1 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_led2 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_led3 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_toggle1 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_toggle2 { + width: 80px; + height: 40px; + float: left; +} + +#fermentor_toggle3 { + width: 80px; + height: 40px; + float: left; +} + #fermentor_control { width: 240px; - height: 300px; + height: 40px; float: right; } #fermentor_edit { width: 240px; - height: 50px; + height: 40px; float: right; }
--- a/www-thermferm/index.php Wed Jul 16 13:42:14 2014 +0200 +++ b/www-thermferm/index.php Thu Jul 17 21:19:22 2014 +0200 @@ -31,6 +31,7 @@ $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 .= ' <script type="text/javascript" src="js/Drinks.js"></script>'.PHP_EOL; $outstr .= ' </head>'.PHP_EOL; $outstr .= ' <body class="page">'.PHP_EOL; $outstr .= ' <div id="container" class="container_16">'.PHP_EOL; @@ -45,6 +46,8 @@ $outstr .= liveview(); $outstr .= ' </div> <!-- content -->'.PHP_EOL; $outstr .= ' </div> <!-- container -->'.PHP_EOL; +$outstr .= ' <!-- Load scripts after the body, so they don\'t block rendering of the page -->'.PHP_EOL; +//$outstr .= ' <script type="text/javascript" src="js/Drinks.js"></script>'.PHP_EOL; $outstr .= ' </body>'.PHP_EOL; $outstr .= '</html>'.PHP_EOL;
--- a/www-thermferm/liveview.php Wed Jul 16 13:42:14 2014 +0200 +++ b/www-thermferm/liveview.php Thu Jul 17 21:19:22 2014 +0200 @@ -26,7 +26,7 @@ -function showunit($unit) +function showunit($unit, $unr) { $outstr = ''; $air_state = $beer_state = 1; @@ -79,30 +79,60 @@ $outstr .= ' <div id="fermentor_pict">'.PHP_EOL; $outstr .= ' <img src="images/Fermenter_60l.gif">'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' <div id="fermentor_control">'.PHP_EOL; } if (strcmp($vals[0], "MODE") == 0) { - $outstr .= ' mode ' . $vals[1] . '<br>' .PHP_EOL; + $mode = $vals[1]; } if (strcmp($vals[0], "AIR_STATE") == 0) { $air_state = $vals[1]; } if (strcmp($vals[0], "AIR_TEMPERATURE") == 0) { if ($air_state == 0) - $outstr .= ' air temperature ' . $vals[1] . '<br>' .PHP_EOL; + $air_temperature = $vals[1]; else - $outstr .= ' air temperature N/A<br>' .PHP_EOL; + $air_temperature = "N/A"; } if (strcmp($vals[0], "BEER_STATE") == 0) { $beer_state = $vals[1]; } if (strcmp($vals[0], "BEER_TEMPERATURE") == 0) { if ($beer_state == 0) - $outstr .= ' beer temperature ' . $vals[1] . '<br>' .PHP_EOL; + $beer_temperature = $vals[1]; else - $outstr .= ' beer temperature N/A<br>' .PHP_EOL; + $beer_temperature = "N/A"; } } + $outstr .= ' <div id="fermentor_panel">'.PHP_EOL; + $outstr .= ' <div id="fermentor_selector">'.PHP_EOL; + $outstr .= ' Mode '.$mode.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_powerled">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_display1">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_display2">'.PHP_EOL; + $outstr .= ' Air<br>'.$air_temperature.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_display3">'.PHP_EOL; + $outstr .= ' Beer<br>'.$beer_temperature.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_led1">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_led2">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_led3">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_toggle1">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_toggle2">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_toggle3">'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' <div id="fermentor_control">'.PHP_EOL; +// $outstr .= ' mode ' . $mode . '<br>' .PHP_EOL; +// $outstr .= ' air temperature ' . $air_temperature . '<br>' .PHP_EOL; +// $outstr .= ' beer temperature ' . $beer_temperature . '<br>' .PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_edit">'.PHP_EOL; $outstr .= ' <button id="fermentor_setup" class="ui-state-default">Edit fermentor</button>'.PHP_EOL; @@ -142,7 +172,7 @@ if (strcmp($arr[$i], ".") == 0) break; $parts = explode(",", $arr[$i]); - $outstr .= showunit($parts[1]); + $outstr .= showunit($parts[1], $i); $i++; } }
