Added EBC color examples. Added simple progessbars for hop flavour and aroma contribution. We need something better. In the fermentables tab, above the grid display the malt color and OG estimates. Display supplier as well in the fermentables grid.

Thu, 13 Dec 2018 20:32:36 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Thu, 13 Dec 2018 20:32:36 +0100
changeset 139
eb1ac7487710
parent 138
59874681fc13
child 140
93c64d7ac79c

Added EBC color examples. Added simple progessbars for hop flavour and aroma contribution. We need something better. In the fermentables tab, above the grid display the malt color and OG estimates. Display supplier as well in the fermentables grid.

www/css/style.css file | annotate | diff | comparison | revisions
www/includes/global.inc.php file | annotate | diff | comparison | revisions
www/js/global.js file | annotate | diff | comparison | revisions
www/js/rec_edit.js file | annotate | diff | comparison | revisions
www/rec_edit.php file | annotate | diff | comparison | revisions
--- a/www/css/style.css	Tue Dec 11 15:01:37 2018 +0100
+++ b/www/css/style.css	Thu Dec 13 20:32:36 2018 +0100
@@ -80,6 +80,19 @@
 }
 
 
+.ebccolor {
+    float: left;
+    margin-left: 10px;
+    width: 75px;
+    height: 23px;
+    border:1px solid #59b4d4; 
+    border-radius:6px;
+    moz-border-radius:6px;
+    webkit-border-radius:6px;
+    background: #212121;
+}
+
+
 /*
  * +----------------------------------------------------_
  * |+-------------------++--------++-------------------+|
--- a/www/includes/global.inc.php	Tue Dec 11 15:01:37 2018 +0100
+++ b/www/includes/global.inc.php	Thu Dec 13 20:32:36 2018 +0100
@@ -141,6 +141,7 @@
   <script src="jqwidgets/jqxcalendar.js"></script>
   <script src="jqwidgets/jqxgauge.js"></script>
   <script src="jqwidgets/jqxdraw.js"></script>
+  <script src="jqwidgets/jqxprogressbar.js"></script>
   <script src="jqwidgets/globalization/globalize.js"></script>
   <script src="js/global.js"></script>
 <?php
--- a/www/js/global.js	Tue Dec 11 15:01:37 2018 +0100
+++ b/www/js/global.js	Thu Dec 13 20:32:36 2018 +0100
@@ -205,6 +205,83 @@
 
 
 
+function ebc_to_color(ebc) {
+	return srm_to_color(ebc_to_srm(ebc));
+}
+
+
+
+function srm_to_color(srm) {
+
+	i = Math.round(srm * 10);
+        if (i < 0) {
+		i = 0;
+	}
+	if (i > 299) {
+		i = 299;
+	}
+
+	/* Table copied from Brouwhulp/BrewBuddy */
+	var R = [ 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, // 0
+		  250, 250, 250, 250, 250, 249, 248, 247, 246, 245, 244, 243, 242, 241, 240, 239, 238, 237, 236, 235, // 2
+		  234, 233, 232, 231, 230, 229, 228, 227, 226, 225, 224, 223, 222, 221, 220, 219, 218, 217, 216, 215, // 4
+		  214, 213, 212, 211, 210, 209, 208, 207, 206, 205, 204, 203, 202, 201, 200, 200, 199, 199, 198, 198, // 6
+		  197, 197, 196, 196, 195, 195, 194, 194, 193, 193, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, // 8
+		  192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, 192, // 10
+		  192, 192, 192, 192, 192, 192, 192, 192, 191, 190, 189, 188, 187, 186, 185, 184, 183, 182, 181, 180, // 12
+		  179, 178, 177, 175, 174, 172, 171, 169, 168, 167, 195, 164, 162, 161, 159, 158, 157, 155, 154, 152, // 14
+		  151, 149, 148, 147, 145, 144, 142, 141, 139, 138, 137, 135, 134, 132, 131, 129, 128, 127, 125, 124, // 16
+		  122, 121, 119, 118, 117, 115, 114, 112, 111, 109, 108, 107, 105, 104, 102, 101,  99,  98,  97,  95, // 18
+		   94,  92,  91,  89,  88,  87,  85,  84,  82,  81,  79,  78,  77,  75,  74,  72,  71,  69,  68,  67, // 20
+		   65,  64,  62,  61,  59,  58,  57,  55,  54,  52,  51,  49,  48,  47,  45,  44,  43,  41,  39,  38, // 22
+		   37,  37,  36,  36,  35,  35,  34,  34,  33,  33,  32,  32,  31,  31,  30,  30,  29,  29,  28,  28, // 24
+		   27,  27,  26,  26,  25,  25,  24,  24,  23,  23,  22,  22,  21,  21,  20,  20,  19,  19,  18,  18, // 26
+		   17,  17,  16,  16,  15,  15,  14,  14,  13,  13,  12,  12,  11,  11,  10,  10,   9,   9,   8,   8 ];
+
+	var G = [ 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250, 250,
+		  250, 250, 250, 250, 250, 250, 249, 248, 247, 246, 245, 244, 242, 240, 238, 236, 234, 232, 230, 228,
+		  226, 224, 222, 220, 218, 216, 214, 212, 210, 208, 206, 204, 202, 200, 198, 196, 194, 192, 190, 188,
+		  186, 184, 182, 180, 178, 176, 174, 172, 170, 168, 166, 164, 162, 160, 158, 156, 154, 152, 150, 148,
+		  146, 144, 142, 141, 140, 139, 139, 138, 137, 136, 136, 135, 134, 133, 133, 132, 131, 130, 130, 129,
+		  128, 127, 127, 126, 125, 124, 124, 123, 122, 121, 121, 120, 119, 118, 118, 117, 116, 115, 115, 114,
+		  113, 112, 112, 111, 110, 109, 109, 108, 107, 106, 106, 105, 104, 103, 103, 102, 101, 100, 100,  99,
+		   98,  97,  97,  96,  95,  94,  94,  93,  92,  91,  91,  90,  89,  88,  88,  87,  86,  85,  85,  84,
+		   83,  82,  82,  81,  80,  79,  78,  77,  76,  75,  75,  74,  73,  72,  72,  71,  70,  69,  69,  68,
+		   67,  66,  66,  65,  64,  63,  63,  62,  61,  60,  60,  59,  58,  57,  57,  56,  55,  54,  54,  53,
+		   52,  51,  51,  50,  49,  48,  48,  47,  46,  45,  45,  44,  43,  42,  42,  41,  40,  39,  39,  38,
+		   37,  36,  36,  35,  34,  33,  33,  32,  31,  30,  30,  29,  28,  27,  27,  26,  25,  24,  24,  23,
+		   22,  22,  22,  21,  21,  21,  20,  20,  20,  19,  19,  19,  18,  18,  18,  17,  17,  17,  16,  16,
+		   16,  15,  15,  15,  14,  14,  14,  13,  13,  13,  12,  12,  12,  11,  11,  11,  10,  10,  10,   9,
+		    9,   9,   8,   8,   8,   7,   7,   7,   6,   6,   6,   5,   5,   5,   4,   4,   4,   3,   3,   3 ];
+
+	var B = [ 210, 204, 199, 193, 188, 182, 177, 171, 166, 160, 155, 149, 144, 138, 133, 127, 122, 116, 111, 105,
+		  100,  94,  89,  83,  78,  72,  67,  61,  56,  50,  45,  45,  45,  46,  46,  46,  46,  47,  47,  47,
+		   47,  48,  48,  48,  48,  49,  49,  49,  49,  50,  50,  50,  50,  51,  51,  51,  51,  52,  52,  52,
+		   52,  53,  53,  53,  53,  54,  54,  54,  54,  55,  55,  55,  55,  56,  56,  56,  56,  56,  56,  56,
+		   56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,
+		   56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,
+		   56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,  56,
+		   56,  56,  56,  55,  55,  55,  55,  54,  54,  54,  54,  53,  53,  53,  53,  52,  52,  52,  52,  51,
+		   51,  51,  51,  50,  50,  50,  50,  49,  49,  48,  47,  47,  46,  45,  45,  44,  43,  43,  42,  41,
+		   41,  40,  39,  39,  38,  37,  37,  36,  35,  34,  33,  32,  31,  29,  28,  27,  26,  25,  24,  23,
+		   21,  20,  19,  18,  17,  16,  15,  13,  12,  11,  10,   9,   8,   9,   9,  10,  10,  11,  11,  12,
+		   12,  13,  13,  14,  14,  15,  15,  16,  16,  17,  17,  18,  18,  19,  19,  20,  20,  21,  21,  22,
+		   21,  21,  21,  20,  20,  20,  19,  19,  19,  18,  18,  18,  17,  17,  17,  17,  16,  16,  15,  15,
+		   15,  14,  14,  14,  13,  13,  13,  12,  12,  12,  11,  11,  11,  10,  10,  10,   9,   9,   9,   8,
+		    8,   8,   7,   7,   7,   6,   6,   6,   5,   5,   5,   4,   4,   4,   3,   3,   3,   2,   2,   2 ];
+
+	var color = R[i] * 65536 + G[i] * 256 + B[i];
+	var result = color.toString(16).toUpperCase();
+	if (result.length < 6) {
+		result = '0' + result;
+	}
+	result = '#' + result;
+	console.log("color string: " + result);
+	return result;
+}
+
+
+
 function sg_to_plato(sg) {
 	if (sg > 0.5)
 		return 259 - 259 / sg;
--- a/www/js/rec_edit.js	Tue Dec 11 15:01:37 2018 +0100
+++ b/www/js/rec_edit.js	Thu Dec 13 20:32:36 2018 +0100
@@ -93,9 +93,16 @@
 		if (to_100 != my_100)
 			console.log("change to_100 to:"+my_100);
 		to_100 = my_100;
-		$('#est_og').val(estimate_sg(sugarsf, parseFloat($("#batch_size").jqxNumberInput('decimal'))));
+		var est_og = estimate_sg(sugarsf, parseFloat($("#batch_size").jqxNumberInput('decimal')));
+		$('#est_og').val(est_og);
+		$('#est_og2').val(est_og);
 		preboil_sg = estimate_sg(sugarsm, parseFloat($("#boil_size").jqxNumberInput('decimal')));
-		$('#est_color').val(kw_to_ebc($("#color_method").val(), colorw));
+		var color = kw_to_ebc($("#color_method").val(), colorw);
+		$('#est_color').val(color);
+		$('#est_color2').val(color);
+		var scolor = ebc_to_color(color);
+		document.getElementById("bcolor").style.background= scolor;
+		document.getElementById("bcolor2").style.background= scolor;
 	};
 
 	function hopFlavourContribution(bt, vol, use, amount) {
@@ -154,6 +161,8 @@
 		dataRecord.est_ibu = total_ibus;
 		$('#est_ibu').val(total_ibus);
 		$('#est_ibu2').val(total_ibus);
+		$("#hop_flavour").jqxProgressBar('val', hop_flavour * 10);
+		$("#hop_aroma").jqxProgressBar('val', hop_aroma * 10);
 	};
 
 	function calcSVG() {
@@ -335,8 +344,10 @@
 	$("#boil_size").jqxTooltip({ content: 'Het volume van het wort voor het koken.' });
 	$("#efficiency").jqxTooltip({ content: 'Het rendement van maischen en koken.' });
 	$("#est_og").jqxTooltip({ content: 'Het begin SG wat je wilt bereiken. De moutstort wordt automatisch herberekend.' });
+	$("#est_og2").jqxTooltip({ content: 'Het begin SG wat je wilt bereiken. De moutstort wordt automatisch herberekend.' });
 	$("#est_fg").jqxTooltip({ content: 'Het eind SG. Dit wordt automatisch berekend.' });
 	$("#est_color").jqxTooltip({ content: 'De kleur in EBC. Dit wordt automatisch berekend.' });
+	$("#est_color2").jqxTooltip({ content: 'De kleur in EBC. Dit wordt automatisch berekend.' });
 	$("#est_ibu").jqxTooltip({ content: 'De bitterheid in IBU. Dit wordt automatisch berekend.' });
 	$("#est_ibu2").jqxTooltip({ content: 'De bitterheid in IBU. Dit wordt automatisch berekend.' });
 	$("#est_abv").jqxTooltip({ content: 'Alcohol volume %. Dit wordt automatisch berekend.' });
@@ -432,12 +443,14 @@
 			$("#boil_time").val(dataRecord.boil_time);
 			$("#efficiency").val(dataRecord.efficiency);
 			$("#est_og").val(dataRecord.est_og);
+			$("#est_og2").val(dataRecord.est_og);
 			$("#st_og_min").val(dataRecord.st_og_min);
 			$("#st_og_max").val(dataRecord.st_og_max);
 			$("#est_fg").val(dataRecord.est_fg);
 			$("#st_fg_min").val(dataRecord.st_fg_min);
 			$("#st_fg_max").val(dataRecord.st_fg_max);
 			$("#est_color").val(dataRecord.est_color);
+			$("#est_color2").val(dataRecord.est_color);
 			$("#est_abv").val(dataRecord.est_abv);
 			$("#st_abv_min").val(dataRecord.st_abv_min);
 			$("#st_abv_max").val(dataRecord.st_abv_max);
@@ -660,7 +673,8 @@
 				{ text: 'Vergistbaar ingredi&euml;nt', editable: false, datafield: 'f_name',
 				  cellsrenderer:  function (row, columnfield, value, defaulthtml, columnproperties) {
 					var rowData = $("#fermentableGrid").jqxGrid('getrowdata', row);
-					return "<span style='margin: 3px; margin-top: 6px; float: "+columnproperties.cellsalign+"'>" +rowData.f_name + " (" + rowData.f_color + " EBC)</span>";
+					return "<span style='margin: 3px; margin-top: 6px; float: "+
+						columnproperties.cellsalign+"'>" +rowData.f_supplier+" / "+rowData.f_name+" ("+rowData.f_color+" EBC)</span>";
 				  }
 			       	},
 				{ text: 'Type', editable: false, align: 'center', cellsalign: 'center', width: 100, datafield: 'f_type' },
@@ -1543,6 +1557,7 @@
 	$("#boil_time").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 360, decimalDigits: 0, spinButtons: true });
 	$("#efficiency").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 40, max: 100, decimalDigits: 0, spinButtons: true, symbol: '%', symbolPosition: 'right'  });
 	$("#est_og").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 1.000, max: 1.200, decimalDigits: 3, spinButtons: true, spinButtonsStep: 0.001 });
+	$("#est_og2").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 100, height: 23, decimalDigits: 3, readOnly: true });
 	$("#st_og_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
 	$("#st_og_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 3, readOnly: true });
 
@@ -1554,12 +1569,13 @@
 	$("#st_abv_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
 	$("#st_abv_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 1, readOnly: true });
 
-	$("#est_color").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#est_color").jqxNumberInput({ inputMode: 'simple', theme: theme, symbol: ' EBC', symbolPosition: 'right', width: 100, height: 23, decimalDigits: 0, readOnly: true });
+	$("#est_color2").jqxNumberInput({ inputMode: 'simple', theme: theme, symbol: ' EBC', symbolPosition: 'right', width: 100, height: 23, decimalDigits: 0, readOnly: true });
 	$("#st_color_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#st_color_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#color_method").jqxDropDownList({ theme: theme, source: srcColor, width: 125, height: 23, dropDownHeight: 95 });
 
-	$("#est_ibu").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
+	$("#est_ibu").jqxNumberInput({ inputMode: 'simple', theme: theme, symbol: ' IBU', symbolPosition: 'right', width: 100, height: 23, decimalDigits: 0, readOnly: true });
 	$("#est_ibu2").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#st_ibu_min").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
 	$("#st_ibu_max").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 50, height: 23, decimalDigits: 0, readOnly: true });
@@ -1573,6 +1589,8 @@
 	$("#mash_ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 8, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 });
 	$("#mash_sparge_temp").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 70, max: 98, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.5 });
 	// Hop flavour and aroma gauges
+	$("#hop_flavour").jqxProgressBar({ width: 300, height: 23, theme: theme, showText: true });
+	$("#hop_aroma").jqxProgressBar({ width: 300, height: 23, theme: theme, showText: true });
 
 	// Tabs inside the popup window.
 	$('#jqxTabs').jqxTabs({
--- a/www/rec_edit.php	Tue Dec 11 15:01:37 2018 +0100
+++ b/www/rec_edit.php	Thu Dec 13 20:32:36 2018 +0100
@@ -75,15 +75,15 @@
          <td style="padding: 3px;"><div style="float: left;" id="est_abv"></div><div style="float: left; margin-left: 15px;" id="st_abv_min"></div><div style="float: left; margin-left: 5px;" id="st_abv_max"></div></td>
 	</tr>
         <tr>
-         <td style="vertical-align: top; float: right; padding: 3px;">Kleur EBC:</td>
-         <td style="padding: 3px;"><div style="float: left;" id="est_color"></div><div style="float: left; margin-left: 15px;" id="st_color_min"></div><div style="float: left; margin-left: 5px;" id="st_color_max"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Kleur:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="est_color"></div><div style="float: left; margin-left: 15px;" id="st_color_min"></div><div style="float: left; margin-left: 5px;" id="st_color_max"></div><div id="bcolor" class='ebccolor'> </div></td>
          <td style="vertical-align: top; float: right; padding: 3px;">Kleur methode:</td>
 	 <td style="padding: 3px;"><div style="float: left;" id="color_method"></div></td>
          <td style="vertical-align: top; float: right; padding: 3px;">Koolzuur vol:</td>
          <td style="padding: 3px;"><div style="float: left;" id="est_carb"></div><div style="float: left; margin-left: 15px;" id="st_carb_min"></div><div style="float: left; margin-left: 5px;" id="st_carb_max"></div></td>
 	</tr>
         <tr>
-         <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid IBU:</td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid:</td>
          <td style="padding: 3px;"><div style="float: left;" id="est_ibu"></div><div style="float: left; margin-left: 15px;" id="st_ibu_min"></div><div style="float: left; margin-left: 5px;" id="st_ibu_max"></div></td>
          <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid methode:</td>
          <td style="padding: 3px;"><div style="float: left;" id="ibu_method"></div></td>
@@ -104,8 +104,16 @@
       <div style="overflow: hidden;">
        <table>
         <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Kleur:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="est_color2"></div><div id="bcolor2" class='ebccolor'> </div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Begin SG:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="est_og2"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="ding3"></div></td>
+        </tr>
+        <tr>
          <td align="right" style="vertical-align: top;">Ingredi&euml;nten:</td>
-         <td align="left" colspan="3"><div id="fermentableGrid"></div></td>
+         <td align="left" colspan="5"><div id="fermentableGrid"></div></td>
         </tr>
        </table>
       </div>
@@ -116,7 +124,7 @@
        <table>
         <tr> 
 	 <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid IBU:</td>
-         <td style="padding: 3px;"><div id="est_ibu2"></div></td>
+	 <td style="padding: 3px;"><div id="est_ibu2"></div></td>
          <td style="vertical-align: top; float: right; padding: 3px;">Smaak bijdrage:</td>
          <td style="padding: 3px;"><div id="hop_flavour"></div></td>
          <td style="vertical-align: top; float: right; padding: 3px;">Aroma bijdrage:</td>

mercurial