Changed CSS colors for the LED's. Removed the old LED's.

Tue, 12 Aug 2014 21:26:26 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Tue, 12 Aug 2014 21:26:26 +0200
changeset 225
b18b06c17a80
parent 224
3b72d4d3e389
child 226
d857032c6201

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"))
Binary file www-thermferm/images/led_green_off.png has changed
Binary file www-thermferm/images/led_green_on.png has changed
Binary file www-thermferm/images/led_red_on.png has changed
Binary file www-thermferm/images/led_yellow_on.png has changed
--- 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;

mercurial