Removed LCD display from UI and replaced with displaying temperatures

Author: elcojacobs

beer-panel.php

@@ -17,21 +17,14 @@
  */
 ?>
 <div id="top-bar" class="ui-widget ui-widget-header ui-corner-all">
-	<div id="lcd" class="lcddisplay">
-        <span class="lcd-text">
-            <span class="lcd-line" id="lcd-line-0">Live LCD waiting</span>
-            <span class="lcd-line" id="lcd-line-1">for update from</span>
-            <span class="lcd-line" id="lcd-line-2">script...</span>
-            <span class="lcd-line" id="lcd-line-3"></span>
-        </span>
-	</div>
 	<div id="logo-container">
 		<img src="brewpi_logo.png">
 		<div id=beer-name-container>
 			<span>Fermenting: </span><a href='#' id="beer-name"><?php echo urldecode($beerName);?></a>
 			<span class="data-logging-state"></span>
 		</div>
 	</div>
+	<div class="temperatures-container"></div>
 	<button class="script-status ui-state-error"></button>
 	<button id="maintenance" class="ui-state-default">Maintenance panel</button>
 </div>

css/style.css

@@ -142,55 +142,31 @@ button#maintenance{
 	margin: 5px;
 }
 
-/* LCD display styling */
-@font-face {
-    font-family: '5x8LCDHD44780UA02Regular';
-    src: url('../font/5x8_lcd_hd44780u_a02-webfont.eot');
-    src: url('../font/5x8_lcd_hd44780u_a02-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../font/5x8_lcd_hd44780u_a02-webfont.woff') format('woff'),
-         url('../font/5x8_lcd_hd44780u_a02-webfont.ttf') format('truetype'),
-         url('../font/5x8_lcd_hd44780u_a02-webfont.svg#5x8LCDHD44780UA02Regular') format('svg');
-    font-weight: normal;
-    font-style: normal;
+.temperatures-container{
+	width: 400px; 
+  	height: 90px;
+  	float: left;
+  	margin: 5px 10px;
+	-moz-column-width: 180px;
+	-webkit-column-width: 180px;
+	column-width: 190px;
+}
+
+.temperatures-container .temperature-name{
+	width: 120px;
+	float: left;
+	clear: left;
+	font-size: 14px;
+	padding: 3px 0px;
+	color: #333;
 }
-
-
-.lcddisplay {
-	width: 280px;
-	height: 90px;
+.temperatures-container .temperature-value{
+	width: 40px;
+	text-align: right;
 	float: left;
-	margin: 5px;
-	background: #000000; /* Old browsers */
-	background: -moz-linear-gradient(top, #000000 2%, #2b2b2b 11%, #212121 54%, #212121 92%, #000000 100%); /* FF3.6+ */
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#000000), color-stop(11%,#2b2b2b), color-stop(54%,#212121), color-stop(92%,#212121), color-stop(100%,#000000)); /* Chrome,Safari4+ */
-	background: -webkit-linear-gradient(top, #000000 2%,#2b2b2b 11%,#212121 54%,#212121 92%,#000000 100%); /* Chrome10+,Safari5.1+ */
-	background: -o-linear-gradient(top, #000000 2%,#2b2b2b 11%,#212121 54%,#212121 92%,#000000 100%); /* Opera11.10+ */
-	background: -ms-linear-gradient(top, #000000 2%,#2b2b2b 11%,#212121 54%,#212121 92%,#000000 100%); /* IE10+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
-	background: linear-gradient(top, #000000 2%,#2b2b2b 11%,#212121 54%,#212121 92%,#000000 100%); /* W3C */
-	-webkit-box-shadow: inset 1px 1px 5px #333333;
-	-moz-box-shadow: inset 1px 1px 5px #333333;
-	box-shadow: inset 1px 1px 5px #333333;
-	border: 2px solid #333;
-	-webkit-border-radius: 2px;
-	-moz-border-radius: 2px;
-	border-radius: 2px;
-}
-
-.lcddisplay .lcd-text{
-	float:left;
-	margin: 5px 16px;
-}
-
-.lcd-line{
-	float:left;
-	clear:left;
+	padding-top: 3px;
 	font-size: 16px;
-	font-weight: normal;
-	font-style: normal;
-	font-family: '5x8LCDHD44780UA02Regular', monospace;
-	color: #FFFF00;
-	white-space: pre;
+	color: white;
 }
 
 .ui-dialog,
@@ -604,11 +580,9 @@ button#maintenance{
 
 #logo-container{
 	float: left;
-	clear: none;
 	display: block;
-	margin-left: 4px;
 	margin-top: 10px;
-	width: 450px;
+	width: 300px;
 	text-align: center;
 }
 

js/beer-chart.js

@@ -67,12 +67,7 @@ var STATES = [
     { name: "STATE_OFF", color:colorIdle, text: "Off" },
     { name: "DOOR_OPEN", color:"#eee", text: "Door Open", doorOpen:true },
     { name: "HEATING", color:colorHeat, text: "Heating" },
-    { name: "COOLING", color:colorCool, text: "Cooling" },
-    { name: "WAITING_TO_COOL", color:colorWaitingCool, text: "Waiting to Cool", waiting:true  },
-    { name: "WAITING_TO_HEAT", color:colorWaitingHeat, text: "Waiting to Heat", waiting:true  },
-    { name: "WAITING_FOR_PEAK_DETECT", color:colorWaitingPeakDetect, text: "Waiting for Peak", waiting:true },
-    { name: "COOLING_MIN_TIME", color:colorCoolingMinTime, text: "Cooling Min Time", extending:true },
-    { name: "HEATING_MIN_TIME", color:colorHeatingMinTime, text: "Heating Min Time", extending:true }
+    { name: "COOLING", color:colorCool, text: "Cooling" }
 ];
 
 

js/main.js

@@ -172,33 +172,64 @@ function startScript(){
 	$.get('start_script.php');
 }
 
-function refreshLcd(){
+function refreshTemperatures(){
 	"use strict";
     $.ajax({
         type: "POST",
         dataType:"json",
         cache: false,
         contentType:"application/x-www-form-urlencoded; charset=utf-8",
         url: 'socketmessage.php',
-        data: {messageType: "lcd", message: ""}
+        data: {messageType: "getTemperatures", message: ""}
         })
-        .done( function(lcdText){
-            var $lcdText = $('#lcd .lcd-text');
-            for (var i = lcdText.length - 1; i >= 0; i--) {
-                $lcdText.find('#lcd-line-' + i).html(lcdText[i]);
+        .done( function(temperatures){
+            $(".temperatures-container").empty();
+            const displayOrder = ['BeerSet', 'BeerTemp', 'FridgeSet', 'FridgeTemp', 'Log1Temp', 'Log2Temp', 'Log3Temp', 'State']
+            const stateNames = ["Idle", "Off", "Door Open", "Heating", "Cooling"];
+            const displayName = {
+                BeerSet: 'Beer Setting',
+                BeerTemp: 'Beer Temp',
+                FridgeSet: 'Fridge Setting',
+                FridgeTemp: 'Fridge Temp',
+                Log1Temp: 'Log 1 Temp',
+                Log2Temp: 'Log 2 Temp',
+                Log3Temp: 'Log 3 Temp',
+                State: 'State'
             }
+            for (var key of displayOrder) {
+                console.log(key);
+                if (temperatures.hasOwnProperty(key)) {
+                    var value = temperatures[key];
+                    console.log(value);
+
+                    if(!isNaN(parseFloat(value))){ 
+                        var $temperatureName=$('<div />').text(displayName[key]);
+                        $temperatureName.addClass('temperature-name');
+                        //temperatureNameSpan.addClass(displayName[key]);
+                        var $temperatureValue=$('<div />')
+                        if(key === 'State'){
+                            $temperatureValue=$('<div />').text(stateNames[value]);
+                        } else{
+                            $temperatureValue.text(value.toFixed(2));
+                        }
+                        $temperatureValue.addClass('temperature-value');
+                        $temperatureValue.addClass('key');
+                        var $temperatureDiv = $("<div />");
+                        $temperatureDiv.append($temperatureName);
+                        $temperatureDiv.append($temperatureValue);
+                        $(".temperatures-container").append($temperatureDiv);
+                    }
+                }
+            }
+            
             updateScriptStatus(true);
         })
         .fail(function() {
-            var $lcdText = $('#lcd .lcd-text');
-            $lcdText.find('#lcd-line-0').html("Cannot receive");
-            $lcdText.find('#lcd-line-1').html("LCD text from");
-            $lcdText.find('#lcd-line-2').html("Python script");
-            $lcdText.find('#lcd-line-3').html(" ");
+            
             updateScriptStatus(false);
         })
         .always(function() {
-            window.setTimeout(refreshLcd,5000);
+            window.setTimeout(refreshTemperatures,5000);
         }
     );
 }
@@ -422,6 +453,6 @@ $(document).ready(function(){
 	receiveControlConstants();
 	receiveControlSettings();
 	receiveControlVariables();
-	refreshLcd(); //will call refreshLcd and alternate between the two
+	refreshTemperatures();
 });
 

socketmessage.php

@@ -94,11 +94,6 @@ function writeToSocket($sock, $msg){
 				echo 0;
 			}
 			break;
-		case "lcd":
-			writeToSocket($sock, "lcd");
-			$lcdText = readFromSocket($sock);
-			echo str_replace(chr(0xB0), "°", $lcdText); // replace degree sign with &Deg
-			break;
 		default:
 			// just pass the command to the socket and read the answer if needed
 			writeToSocket($sock, $messageType);