--- a/www/css/style.css Mon Jan 07 16:46:43 2019 +0100
+++ b/www/css/style.css Mon Jan 07 22:35:32 2019 +0100
@@ -8,12 +8,13 @@
}
-
-#MainPanel {
+#MainPanel,
+#fermenter {
width: 1278px;
height: 628px;
border: 2px solid #4297d7;
background: #252526;
+ float: left;
color: #eeeeee;
}
@@ -51,7 +52,8 @@
#fermenter_table {
- width: 720px;
+ width: 960px;
+ height: 200px;
background: #252526;
margin: 5px;
border: 2px solid;
@@ -60,26 +62,6 @@
}
-
-.temperature {
- display: inline-block;
- width: 64px;
- height: 20px;
- white-space: nowrap;
- color: #00eeee;
-}
-
-
-
-.NUM {
- font-family: "Arial Black", Gadget, sans-serif;
- color: #00eeee;
- padding: 2px;
- margin: 2px;
- background-color: #212121;
-}
-
-
.ebccolor {
float: left;
margin-left: 10px;
@@ -99,18 +81,19 @@
* || || || ||
* || || chiller|| ||
* || || || ||
- * || |=--------+| ||
- * || Air temp |+--------+| Beer temp ||
- * || || || ||
- * || || Temps || ||
- * || || digits || ||
- * |+-------------------++--------++-------------------+|
+ * || |+--------+| ||
+ * || Air temp | | Beer temp ||
+ * || | | ||
+ * || | | ||
+ * || | | ||
+ * |+-------------------+ +-------------------+|
* +----------------------------------------------------+
*/
#fermenter_thermometers {
- width: 720px;
- height: 295px;
+ width: 960px;
+ height: 390px;
+ float: left;
background-color: #252526;
margin: 5px;
border: 2px solid;
@@ -118,6 +101,203 @@
border-radius: 5px 5px 5px 5px;
}
+/*
+ * +----------panel_top------------+
+ * |+-------------++--------------+|
+ * || || powerled ||
+ * || selector |+--------------+|
+ * || |+--------------+|
+ * || || mode control ||
+ * |+-------------++--------------+|
+ * +-------------------------------+
+ * +---------panel_display---------+
+ * |+--------++---------++--------+|
+ * || disp 1 || disp 2 || disp 3 ||
+ * |+--------++---------++--------+|
+ * +-------------------------------+
+ * +---------panel_control---------+
+ * |+--------++---------++--------+|
+ * || led 1 || led 2 || led 3 ||
+ * |+--------++---------++--------+|
+ * |+--------++---------++--------+|
+ * || sw 1 || sw 2 || sw 3 ||
+ * |+--------++---------++--------+|
+ * +-------------------------------+
+ * +--------panel_buttons----------+
+ * | |
+ * +-------------------------------+
+ */
+#fermentor_panel_top {
+ width: 280px;
+ height: 200px;
+ float: right;
+ margin: 5px;
+ background-color: #252526;
+ border: 2px solid;
+ border-color: #59b4d4;
+ border-radius: 5px 5px 5px 5px;
+}
+
+#fermentor_selector {
+ width: 100px;
+ height: 198px;
+ float: left;
+}
+
+input.select {
+ margin-left: 10px;
+ margin-top: 13px;
+}
+
+#fermentor_alarmled {
+width: 50px;
+height: 30px;
+float: left;
+text-align: center;
+margin-top: 10px;
+margin-left: 20px;
+}
+
+#fermentor_powerled {
+width: 50px;
+height: 30px;
+float: left;
+text-align: center;
+margin-top: 10px;
+margin-left: 42px;
+}
+
+#fermentor_mode_control {
+width: 148px;
+height: 110px;
+float: left;
+margin-top: 10px;
+background-color: #ddd;
+}
+
+#fermentor_panel_display {
+ width: 280px;
+ height: 80px;
+ float: right;
+ margin: 5px;
+ background-color: #252526;
+ border: 2px solid;
+ border-color: #59b4d4;
+ border-radius: 5px 5px 5px 5px;
+ margin-bottom: 3px;
+}
+
+#fermentor_display1 {
+width: 93px;
+height: 76px;
+float: left;
+text-align: center;
+margin-top: 7px;
+}
+
+#fermentor_display2 {
+width: 93px;
+height: 76px;
+float: left;
+text-align: center;
+margin-top: 7px;
+}
+
+#fermentor_display3 {
+width: 93px;
+height: 76px;
+float: left;
+text-align: center;
+margin-top: 7px;
+}
+
+.dtemp {
+ font-weight: bold;
+ color: yellow;
+}
+
+.ltemp {
+ font-weight: bold;
+ color: green;
+}
+
+.htemp {
+ font-weight: bold;
+ color: red;
+}
+
+#fermentor_panel_control {
+ width: 280px;
+ height: 120px;
+ float: right;
+ margin: 5px;
+ background-color: #252526;
+ border: 2px solid;
+ border-color: #59b4d4;
+ border-radius: 5px 5px 5px 5px;
+ margin-bottom: 3px;
+}
+
+#fermentor_led1 {
+width: 93px;
+height: 30px;
+float: left;
+text-align: center;
+margin-top: 8px;
+}
+
+#fermentor_led2 {
+width: 93px;
+height: 30px;
+float: left;
+text-align: center;
+margin-top: 8px;
+}
+
+#fermentor_led3 {
+width: 93px;
+height: 30px;
+float: left;
+text-align: center;
+margin-top: 8px;
+}
+
+#fermentor_toggle1 {
+width: 93px;
+height: 70px;
+float: left;
+text-align: center;
+margin-top: 10px;
+}
+
+#fermentor_toggle2 {
+width: 93px;
+height: 70px;
+float: left;
+text-align: center;
+margin-top: 10px;
+}
+
+#fermentor_toggle3 {
+width: 93px;
+height: 70px;
+float: left;
+text-align: center;
+margin-top: 10px;
+}
+
+
+#fermentor_panel_buttons {
+ width: 280px;
+ height: 130px;
+ float: right;
+ margin: 5px;
+ background-color: #252526;
+ border: 2px solid;
+ border-color: #59b4d4;
+ border-radius: 5px 5px 5px 5px;
+ margin-bottom: 3px;
+}
#fermenter_tempdigits {
@@ -132,11 +312,11 @@
}
-/*
+
.LEDred_on {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #F40;
border-radius: 50%;
box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px;
@@ -144,8 +324,8 @@
.LEDred_off {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #820;
border-radius: 50%;
box-shadow: #400 0 0px 1px 1px;
@@ -153,8 +333,8 @@
.LEDyellow_on {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #FF0;
border-radius: 50%;
box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px;
@@ -162,8 +342,8 @@
.LEDyellow_off {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #A90;
border-radius: 50%;
box-shadow: #440 0 0px 1px 1px;
@@ -171,8 +351,8 @@
.LEDgreen_on {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #5E0;
border-radius: 50%;
box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px;
@@ -180,8 +360,8 @@
.LEDgreen_off {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #270;
border-radius: 50%;
box-shadow: #250 0 0px 1px 1px;
@@ -189,8 +369,8 @@
.LEDblue_on {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #4AF;
border-radius: 50%;
box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px;
@@ -198,13 +378,13 @@
.LEDblue_off {
margin: 5px auto;
- width: 12px;
- height: 12px;
+ width: 18px;
+ height: 18px;
background-color: #137;
border-radius: 50%;
box-shadow: #024 0 0px 1px 1px;
}
-*/
+
/*