# HG changeset patch
# User Michiel Broek <mbroek@mbse.eu>
# Date 1406726789 -7200
# Node ID ab90da2da45d645077ea4c889c3dd548ea418c0c
# Parent  f019ea6a9d3160f0d35ac628bd3213f08d720c93
Improved dashboard panel style, added (ugly) led's

diff -r f019ea6a9d31 -r ab90da2da45d www-thermferm/css/style.css
--- 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;
-}
-
diff -r f019ea6a9d31 -r ab90da2da45d www-thermferm/images/led_green_off.png
Binary file www-thermferm/images/led_green_off.png has changed
diff -r f019ea6a9d31 -r ab90da2da45d www-thermferm/images/led_green_on.png
Binary file www-thermferm/images/led_green_on.png has changed
diff -r f019ea6a9d31 -r ab90da2da45d www-thermferm/images/led_red_on.png
Binary file www-thermferm/images/led_red_on.png has changed
diff -r f019ea6a9d31 -r ab90da2da45d www-thermferm/images/led_yellow_on.png
Binary file www-thermferm/images/led_yellow_on.png has changed
diff -r f019ea6a9d31 -r ab90da2da45d www-thermferm/liveview.php
--- 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;
     }