Added thermometers values block

Sat, 11 Aug 2018 19:16:51 +0200

author
Michiel Broek <mbroek@mbse.eu>
date
Sat, 11 Aug 2018 19:16:51 +0200
changeset 9
5b384299cc53
parent 8
50545c3e36c6
child 10
606b4af8f918

Added thermometers values block

www/css/style.css file | annotate | diff | comparison | revisions
www/index.php file | annotate | diff | comparison | revisions
--- a/www/css/style.css	Sat Aug 11 16:36:45 2018 +0200
+++ b/www/css/style.css	Sat Aug 11 19:16:51 2018 +0200
@@ -68,7 +68,40 @@
 }
 
 
-#fermentor_thermometers {
+.temperature {
+    display: inline-block;
+    font-size: 12pt;
+    width: 64px;
+    height: 20px;
+    white-space: nowrap;
+    color: #00eeee;
+}
+
+.NUM {
+    font-family: "Arial Black", Gadget, sans-serif;
+    color: #00eeee;
+    border-style: ridge;
+    padding: 2px;
+    margin: 2px;
+    background-color: #212121;
+}
+
+
+/*
+ * +----------------------------------------------------_
+ * |+-------------------++--------++-------------------+|
+ * ||                   ||        ||                   ||
+ * ||			|| chiller||                   ||
+ * ||                   ||        ||                   ||
+ * ||                   |=--------+|                   ||
+ * ||     Air temp      |+--------+|     Beer temp     ||
+ * ||                   ||        ||                   ||
+ * ||                   || Temps  ||                   ||
+ * ||                   || digits ||                   ||
+ * |+-------------------++--------++-------------------+|
+ * +----------------------------------------------------+
+ */
+#fermenter_thermometers {
     width: 720px;
     height: 295px;
     background-color: #252526;
@@ -78,6 +111,18 @@
     border-radius: 5px 5px 5px 5px;
 }
 
+#fermenter_tempdigits {
+    width: 145px;
+    height: 120px;
+    float: left;
+    margin-top: 170;
+    background-color: #252526;
+    border: 2px solid;
+    border-color: #888;
+    border-radius: 5px 5px 5px 5px;
+}
+
+
 
 .LEDred_on {
     margin: 5px auto;
--- a/www/index.php	Sat Aug 11 16:36:45 2018 +0200
+++ b/www/index.php	Sat Aug 11 19:16:51 2018 +0200
@@ -32,7 +32,7 @@
      * Different right panel pages
      */
     var refreshIntervalId = 0;
-    $("#fermentor_thermometers").hide();
+    $("#fermenter_thermometers").hide();
     $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] });
     $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" });
     /*
@@ -65,7 +65,7 @@
         clearInterval(refreshIntervalId);
 	refreshIntervalId = 0;
       }
-      $("#fermentor_thermometers").hide();
+      $("#fermenter_thermometers").hide();
       $("#gaugeContainer_air").hide();
       $("#gaugeContainer_beer").hide();
       $("#gaugeContainer_chiller").hide();
@@ -179,7 +179,7 @@
 	  animationDuration: 1200,
 	  caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] }
 	};
-	$("#fermentor_thermometers").show();
+	$("#fermenter_thermometers").show();
 	$("#gaugeContainer_air").show();
 	$("#gaugeContainer_air").jqxGauge( gaugeoptions );
 	$("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} );
@@ -274,6 +274,11 @@
 	    } else {
 	      $("#gaugeContainer_chiller").jqxGauge({ disabled: true });
 	    }
+	    html  = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high + "</span></div>";
+	    html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low + "</span></div>";
+	    html += "<div>Air <span class='temperature NUM'>" + record.air_temperature + "</span></div>";
+	    html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature + "</span></div>";
+	    $("#fermenter_tempdigits").html(html);
 	  }
 	});
 	// Get the data immediatly and then at regular intervals to refresh.
@@ -338,10 +343,11 @@
     </div> <!-- tree panel -->
     <div id="RightPanel">
      <div id="ContentPanel"></div>
-     <div id='fermentor_thermometers'>
+     <div id='fermenter_thermometers'>
       <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div>
       <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div>
       <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div>
+      <div id="fermenter_tempdigits"></div>
      </div>
     </div>
    </div> <!--- splitter -->

mercurial