Wed, 30 Jul 2014 15:26:29 +0200
Improved dashboard panel style, added (ugly) led's
--- a/www-thermferm/css/style.css Tue Jul 29 21:33:38 2014 +0200 +++ b/www-thermferm/css/style.css Wed Jul 30 15:26:29 2014 +0200 @@ -143,82 +143,145 @@ float: left; } -#fermentor_panel { - width: 240px; - height: 377px; +/* + * +-------------panel_top--------------+ + * |+----------------------++----------+| + * || || || + * || selector || powerled || + * || || || + * |+----------------------++----------+| + * +------------------------------------+ + * +-----------panel_display------------+ + * |+----------++----------++----------+| + * || display1 || display2 || display3 || + * |+----------++----------++----------+| + * +------------------------------------+ + * +-----------panel_control------------+ + * |+----------++----------++----------+| + * || led1 || led2 || led3 || + * |+----------++----------++----------+| + * |+----------++----------++----------+| + * || switch1 || switch2 || switch3 || + * |+----------++----------++----------+| + * +------------------------------------+ + */ + +#fermentor_panel_top { + width: 236px; + height: 143px; float: right; - background-color: #f0f0f0; + background-color: #bbb; + border: 2px solid; + border-color: #888; + border-radius: 5px 5px 5px 5px; + margin-bottom: 5px; } #fermentor_selector { - width: 160px; - height: 160px; + width: 158px; + height: 156px; float: left; } #fermentor_powerled { - width: 80px; - height: 160px; + width: 78px; + height: 56px; float: left; + text-align: center; + margin-top: 10px; +} + + +#fermentor_panel_display { + width: 236px; + height: 50px; + float: right; + background-color: #bbb; + border: 2px solid; + border-color: #888; + border-radius: 5px 5px 5px 5px; + margin-bottom: 5px; } #fermentor_display1 { - width: 80px; - height: 40px; + width: 79px; + height: 46px; float: left; + text-align: center; + margin-top: 7px; } #fermentor_display2 { - width: 80px; - height: 40px; + width: 78px; + height: 46px; float: left; + text-align: center; + margin-top: 7px; } #fermentor_display3 { - width: 80px; - height: 40px; + width: 79px; + height: 46px; float: left; + text-align: center; + margin-top: 7px; +} + +#fermentor_panel_control { + width: 236px; + height: 136px; + float: right; + background-color: #bbb; + border: 2px solid; + border-color: #888; + border-radius: 5px 5px 5px 5px; } #fermentor_led1 { - width: 80px; - height: 40px; + width: 79px; + height: 30px; float: left; + text-align: center; + margin-top: 10px; } #fermentor_led2 { - width: 80px; - height: 40px; + width: 78px; + height: 30px; float: left; + text-align: center; + margin-top: 10px; } #fermentor_led3 { - width: 80px; - height: 40px; + width: 79px; + height: 30px; float: left; + text-align: center; + margin-top: 10px; } #fermentor_toggle1 { - width: 80px; + width: 79px; height: 90px; float: left; + text-align: center; + margin-top: 10px; } #fermentor_toggle2 { - width: 80px; + width: 78px; height: 90px; float: left; + text-align: center; + margin-top: 10px; } #fermentor_toggle3 { - width: 80px; + width: 79px; height: 90px; float: left; + text-align: center; + margin-top: 10px; } -#fermentor_control { - width: 240px; - height: 40px; - float: left; -} -
--- a/www-thermferm/liveview.php Tue Jul 29 21:33:38 2014 +0200 +++ b/www-thermferm/liveview.php Wed Jul 30 15:26:29 2014 +0200 @@ -132,11 +132,14 @@ $set_temperature = "N/A"; $air_temperature = "N/A"; $beer_temperature = "N/A"; + $power_led = $cooler_led = $heater_led = $fan_led = "off"; foreach($arr as $l) { $vals = explode(",", $l); if (strcmp($vals[0], "MODE") == 0) { $mode = $vals[1]; + if (strcmp($mode, "OFF")) + $power_led = "on"; } if (strcmp($vals[0], "AIR_STATE") == 0) { $air_state = $vals[1]; @@ -151,7 +154,7 @@ $beer_temperature = $vals[1]; } } - $outstr .= ' <div id="fermentor_panel">'.PHP_EOL; + $outstr .= ' <div id="fermentor_panel_top">'.PHP_EOL; $outstr .= ' <div id="fermentor_selector">'.PHP_EOL; $outstr .= ' Mode '.$mode.PHP_EOL; $outstr .= ' <form>'.PHP_EOL; @@ -168,8 +171,11 @@ $outstr .= ' </form>'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_powerled">'.PHP_EOL; - $outstr .= ' PwrLED'.PHP_EOL; + $outstr .= ' <img src="images/led_green_'.$power_led.'.png"><br>Pwr'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' </div> <!-- fermentor_panel_top -->'.PHP_EOL; + + $outstr .= ' <div id="fermentor_panel_display">'.PHP_EOL; $outstr .= ' <div id="fermentor_display1">'.PHP_EOL; $outstr .= ' '.$set_temperature.'<br>Set'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; @@ -179,41 +185,42 @@ $outstr .= ' <div id="fermentor_display3">'.PHP_EOL; $outstr .= ' '.$beer_temperature.'<br>Beer'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; + $outstr .= ' </div> <!-- fermentor_panel_display -->'.PHP_EOL; + + $outstr .= ' <div id="fermentor_panel_control">'.PHP_EOL; $outstr .= ' <div id="fermentor_led1">'.PHP_EOL; - $outstr .= ' CoolLED'.PHP_EOL; + $outstr .= ' <img src="images/led_green_'.$cooler_led.'.png"><br>Cool'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_led2">'.PHP_EOL; - $outstr .= ' HeatLED'.PHP_EOL; + $outstr .= ' <img src="images/led_green_'.$heater_led.'.png"><br>Heat'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_led3">'.PHP_EOL; - $outstr .= ' FanLED'.PHP_EOL; + $outstr .= ' <img src="images/led_green_'.$fan_led.'.png"><br>Fan'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_toggle1">'.PHP_EOL; $outstr .= ' <form>'.PHP_EOL; strcmp($mode, "NONE") ? $se = " disabled" : $se = ""; $ch = " checked"; $outstr .= ' <input type="radio" name="cooler'.$unr.'" value="OFF"'.$se.$ch.'>Off<br>'.PHP_EOL; - $outstr .= ' <input type="radio" name="cooler'.$unr.'" value="ON"'.$se.'>On<br>'.PHP_EOL; - $outstr .= ' Cooler'.PHP_EOL; + $outstr .= ' <input type="radio" name="cooler'.$unr.'" value="ON"'.$se.'>On'.PHP_EOL; $outstr .= ' </form>'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_toggle2">'.PHP_EOL; $outstr .= ' <form>'.PHP_EOL; strcmp($mode, "NONE") ? $se = " disabled" : $se = ""; $outstr .= ' <input type="radio" name="heater'.$unr.'" value="OFF"'.$se.$ch.'>Off<br>'.PHP_EOL; - $outstr .= ' <input type="radio" name="heater'.$unr.'" value="ON"'.$se.'>On<br>'.PHP_EOL; - $outstr .= ' Heater'.PHP_EOL; + $outstr .= ' <input type="radio" name="heater'.$unr.'" value="ON"'.$se.'>On'.PHP_EOL; $outstr .= ' </form>'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_toggle3">'.PHP_EOL; $outstr .= ' <form>'.PHP_EOL; strcmp($mode, "NONE") ? $se = " disabled" : $se = ""; $outstr .= ' <input type="radio" name="fan'.$unr.'" value="OFF"'.$se.$ch.'>Off<br>'.PHP_EOL; - $outstr .= ' <input type="radio" name="fan'.$unr.'" value="ON"'.$se.'>On<br>'.PHP_EOL; - $outstr .= ' Fan'.PHP_EOL; + $outstr .= ' <input type="radio" name="fan'.$unr.'" value="ON"'.$se.'>On'.PHP_EOL; $outstr .= ' </form>'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; - $outstr .= ' </div> <!-- fermentor_panel -->'.PHP_EOL; + $outstr .= ' </div> <!-- fermentor_panel_control -->'.PHP_EOL; + $outstr .= ' </div> <!-- fermentor -->'.PHP_EOL; }