Tue, 12 Aug 2014 21:26:26 +0200
Changed CSS colors for the LED's. Removed the old LED's.
www-thermferm/css/style.css | file | annotate | diff | comparison | revisions | |
www-thermferm/getstate.php | file | annotate | diff | comparison | revisions | |
www-thermferm/images/led_green_off.png | file | annotate | diff | comparison | revisions | |
www-thermferm/images/led_green_on.png | file | annotate | diff | comparison | revisions | |
www-thermferm/images/led_red_on.png | file | annotate | diff | comparison | revisions | |
www-thermferm/images/led_yellow_on.png | file | annotate | diff | comparison | revisions | |
www-thermferm/liveview.php | file | annotate | diff | comparison | revisions |
--- a/www-thermferm/css/style.css Tue Aug 12 17:54:48 2014 +0200 +++ b/www-thermferm/css/style.css Tue Aug 12 21:26:26 2014 +0200 @@ -195,7 +195,7 @@ width: 236px; height: 156px; float: right; - background-color: #bbb; + background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; @@ -217,8 +217,9 @@ width: 38px; height: 36px; float: left; + text-align: center; margin-top: 10px; - margin-left: 110px; + margin-left: 90px; } #fermentor_mode_control { @@ -234,7 +235,7 @@ width: 236px; height: 50px; float: right; - background-color: #bbb; + background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; @@ -269,7 +270,7 @@ width: 236px; height: 136px; float: right; - background-color: #bbb; + background-color: #eee; border: 2px solid; border-color: #888; border-radius: 5px 5px 5px 5px; @@ -363,39 +364,77 @@ float: right; } -.led-red { +.LEDred_on { + margin: 5px auto; + width: 12px; + height: 12px; + background-color: #F40; + border-radius: 50%; + box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px; +} + +.LEDred_off { margin: 5px auto; width: 12px; height: 12px; - background-color: #940; + background-color: #820; border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #f00 0 2px 12px; + box-shadow: #400 0 0px 1px 1px; } -.led-yellow { + +.LEDyellow_on { + margin: 5px auto; + width: 12px; + height: 12px; + background-color: #FF0; + border-radius: 50%; + box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px; +} + +.LEDyellow_off { margin: 5px auto; width: 12px; height: 12px; background-color: #A90; border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px; + box-shadow: #440 0 0px 1px 1px; } -.led-green { +.LEDgreen_on { + margin: 5px auto; + width: 12px; + height: 12px; + background-color: #5E0; + border-radius: 50%; + box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px; +} + +.LEDgreen_off { margin: 5px auto; width: 12px; height: 12px; - background-color: #690; + background-color: #270; border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; + box-shadow: #250 0 0px 1px 1px; } -.led-blue { +.LEDblue_on { margin: 5px auto; width: 12px; height: 12px; - background-color: #4AB; + background-color: #4AF; border-radius: 50%; - box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 12px; + box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px; } +.LEDblue_off { + margin: 5px auto; + width: 12px; + height: 12px; + background-color: #137; + border-radius: 50%; + box-shadow: #024 0 0px 1px 1px; + /* , inset #006 0 -1px 9px, #06F 0 2px 12px; */ +} +
--- a/www-thermferm/getstate.php Tue Aug 12 17:54:48 2014 +0200 +++ b/www-thermferm/getstate.php Tue Aug 12 21:26:26 2014 +0200 @@ -58,11 +58,11 @@ if ($f[0] == "MODE") $mode = $f[1]; if ($f[0] == "COOLER_STATE") - $led1 = $f[1] ? '<img src="images/led_green_on.png">' : '<img src="images/led_green_off.png">'; + $led1 = $f[1] ? '<div class="LEDgreen_on"></div>' : '<div class="LEDgreen_off"></div>'; if ($f[0] == "HEATER_STATE") - $led2 = $f[1] ? '<img src="images/led_green_on.png">' : '<img src="images/led_green_off.png">'; + $led2 = $f[1] ? '<div class="LEDgreen_on"></div>' : '<div class="LEDgreen_off"></div>'; if ($f[0] == "FAN_STATE") - $led3 = $f[1] ? '<img src="images/led_green_on.png">' : '<img src="images/led_green_off.png">'; + $led3 = $f[1] ? '<div class="LEDgreen_on"></div>' : '<div class="LEDgreen_off"></div>'; if (($f[0] == "BEER_SET") && ($mode == "BEER")) $target_temperature = $f[1]; if (($f[0] == "FRIDGE_SET") && ($mode == "FRIDGE"))
--- a/www-thermferm/liveview.php Tue Aug 12 17:54:48 2014 +0200 +++ b/www-thermferm/liveview.php Tue Aug 12 21:26:26 2014 +0200 @@ -199,7 +199,8 @@ $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_powerled">'.PHP_EOL; - $outstr .= ' <img src="images/led_green_'.$power_led.'.png"><br>Pwr'.PHP_EOL; + $outstr .= ' <div class="LEDblue_'.$power_led.'"></div>Pwr'.PHP_EOL; + //$outstr .= ' <img src="images/led_green_'.$power_led.'.png"><br>Pwr'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_mode_control">'.PHP_EOL; @@ -303,18 +304,17 @@ if ($cooler_state == "100") $cooler_led = "on"; $outstr .= ' <div id="fermentor_led1">'.PHP_EOL; - $outstr .= ' <div id="load_led1_'.$unr.'"><img src="images/led_green_'.$cooler_led.'.png"></div>Cool'.PHP_EOL; + $outstr .= ' <div id="load_led1_'.$unr.'"><div class="LEDgreen_'.$cooler_led.'"></div></div>Cool'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; if ($heater_state == "100") $heater_led = "on"; $outstr .= ' <div id="fermentor_led2">'.PHP_EOL; - $outstr .= ' <div id="load_led2_'.$unr.'"><img src="images/led_green_'.$heater_led.'.png"></div>Heat'.PHP_EOL; + $outstr .= ' <div id="load_led2_'.$unr.'"><div class="LEDgreen_'.$heater_led.'"></div></div>Heat'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; if ($fan_state == "100") $fan_led = "on"; $outstr .= ' <div id="fermentor_led3">'.PHP_EOL; -// $outstr .= ' <div id="load_led3_'.$unr.'"><img src="images/led_green_'.$fan_led.'.png"></div>Fan'.PHP_EOL; - $outstr .= ' <div class="led-green"></div>Fan'.PHP_EOL; + $outstr .= ' <div id="load_led3_'.$unr.'"><div class="LEDgreen_'.$fan_led.'"></div></div>Fan'.PHP_EOL; $outstr .= ' </div>'.PHP_EOL; $outstr .= ' <div id="fermentor_toggle1">'.PHP_EOL;