Added several sparge_ fields in the recipes databases. Added basic water mix calculator. Added fields on the water tab for water calculations.

Mon, 17 Dec 2018 22:24:32 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Mon, 17 Dec 2018 22:24:32 +0100
changeset 147
e6e5d007eb54
parent 146
2a6c00d325b2
child 148
c0f0bbfefd63

Added several sparge_ fields in the recipes databases. Added basic water mix calculator. Added fields on the water tab for water calculations.

www/import/from_brouwhulp.php file | annotate | diff | comparison | revisions
www/includes/db_recipes.php file | annotate | diff | comparison | revisions
www/includes/formulas.php 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/import/from_brouwhulp.php	Mon Dec 17 13:46:15 2018 +0100
+++ b/www/import/from_brouwhulp.php	Mon Dec 17 22:24:32 2018 +0100
@@ -853,6 +853,24 @@
 		if ($recipe->STYLE) {
 			$sql .= recipe_style($recipe);
 		}
+		if ($recipe->CALC_ACID) {
+			($recipe->CALC_ACID == "TRUE") ? $sql .= "', calc_acid='1" : $sql .= "', calc_acid='0";
+		}
+		if ($recipe->TARGET_PH) {
+			$sql .= "', mash_ph='" . floatval($recipe->TARGET_PH);
+		}
+		if ($recipe->SPARGE_ACID_TYPE) {
+			$sql .= "', sparge_acid_type='" . mysqli_real_escape_string($db, $recipe->SPARGE_ACID_TYPE);
+		}
+		if ($recipe->ACID_SPARGE_PERC) {
+			$sql .= "', sparge_acid_perc='" . floatval($recipe->ACID_SPARGE_PERC);
+		}
+		if ($recipe->LACTIC_SPARGE) {
+			$sql .= "', sparge_acid_amount='" . floatval($recipe->LACTIC_SPARGE);
+		}
+		if ($recipe->VOLUME_HLT) {
+			$sql .= "', sparge_volume='" . floatval($recipe->VOLUME_HLT);
+		}
 
 		/*
 		 * Put the fermentables in a json array
@@ -908,8 +926,8 @@
 		 * Put the mash in a json array
 		 */
 		if ($recipe->MASH) {
-			$sql .= "',mash_sparge_temp='" . floatval($recipe->MASH->SPARGE_TEMP);
-			$sql .= "',mash_ph='" . floatval($recipe->MASH->PH);
+			$sql .= "',sparge_temp='" . floatval($recipe->MASH->SPARGE_TEMP);
+			$sql .= "',sparge_ph='" . floatval($recipe->MASH->PH);
 			if ($recipe->MASH->NAME)
 				$sql .= "',mash_name='" . mysqli_real_escape_string($db, $recipe->MASH->NAME);
 
@@ -1029,6 +1047,25 @@
                         $rsql .= recipe_style($recipe);
                 }
 
+		if ($recipe->CALC_ACID) {
+			($recipe->CALC_ACID == "TRUE") ? $rsql .= "', calc_acid='1" : $rsql .= "', calc_acid='0";
+		}
+		if ($recipe->TARGET_PH) {
+			 $rsql .= "', mash_ph='" . floatval($recipe->TARGET_PH);
+		}
+		if ($recipe->SPARGE_ACID_TYPE) {
+			$rsql .= "', sparge_acid_type='" . mysqli_real_escape_string($db, $recipe->SPARGE_ACID_TYPE);
+		}
+		if ($recipe->ACID_SPARGE_PERC) {
+			$rsql .= "', sparge_acid_perc='" . floatval($recipe->ACID_SPARGE_PERC);
+		}
+		if ($recipe->LACTIC_SPARGE) {
+			$rsql .= "', sparge_acid_amount='" . floatval($recipe->LACTIC_SPARGE);
+		}
+		if ($recipe->VOLUME_HLT) {
+			$rsql .= "', sparge_volume='" . floatval($recipe->VOLUME_HLT);
+		}
+
                 /*
                  * Put the fermentables in a json array
                  */
@@ -1083,8 +1120,8 @@
                  * Put the mash in a json array
                  */
                 if ($recipe->MASH) {
-                        $rsql .= "',mash_sparge_temp='" . floatval($recipe->MASH->SPARGE_TEMP);
-                        $rsql .= "',mash_ph='" . floatval($recipe->MASH->PH);
+                        $rsql .= "',sparge_temp='" . floatval($recipe->MASH->SPARGE_TEMP);
+                        $rsql .= "',sparge_ph='" . floatval($recipe->MASH->PH);
                         if ($recipe->MASH->NAME)
                                 $rsql .= "',mash_name='" . mysqli_real_escape_string($db, $recipe->MASH->NAME);
 
--- a/www/includes/db_recipes.php	Mon Dec 17 13:46:15 2018 +0100
+++ b/www/includes/db_recipes.php	Mon Dec 17 22:24:32 2018 +0100
@@ -59,9 +59,15 @@
 	$sql .= "', color_method='" . $_POST['color_method'];
 	$sql .= "', est_ibu='" . $_POST['est_ibu'];
 	$sql .= "', ibu_method='" . $_POST['ibu_method'];
-	$sql .= "', mash_sparge_temp='" . $_POST['mash_sparge_temp'];
+	$sql .= "', sparge_temp='" . $_POST['sparge_temp'];
+	$sql .= "', sparge_ph='" . $_POST['sparge_ph'];
+	$sql .= "', sparge_volume='" . $_POST['sparge_volume'];
+	$sql .= "', sparge_acid_type='" . $_POST['sparge_acid_type'];
+	$sql .= "', sparge_acid_perc='" . $_POST['sparge_acid_perc'];
+	$sql .= "', sparge_acid_amount='" . $_POST['sparge_acid_amount'];
 	$sql .= "', mash_ph='" . $_POST['mash_ph'];
 	$sql .= "', mash_name='" . $_POST['mash_name'];
+	$sql .= "', calc_acid='" . $_POST['calc_acid'];
 	syslog(LOG_NOTICE, $sql);
 
 	if (isset($_POST['fermentables'])) {
@@ -213,10 +219,16 @@
 		$recipes .= ',"color_method":"' . $row['color_method'];
 		$recipes .= '","est_ibu":' . floatval($row['est_ibu']);
 		$recipes .= ',"ibu_method":"' . $row['ibu_method'];
-		$recipes .= '","mash_sparge_temp":' . $row['mash_sparge_temp'];
+		$recipes .= '","sparge_temp":' . $row['sparge_temp'];
+		$recipes .= ',"sparge_ph":' . $row['sparge_ph'];
+		$recipes .= ',"sparge_volume":' . $row['sparge_volume'];
+		$recipes .= ',"sparge_acid_type":"' . $row['sparge_acid_type'];
+		$recipes .= '","sparge_acid_perc":' . $row['sparge_acid_perc'];
+		$recipes .= ',"sparge_acid_amount":' . $row['sparge_acid_amount'];
 		$recipes .= ',"mash_ph":' . $row['mash_ph'];
 		$recipes .= ',"mash_name":"' . $row['mash_name'];
-		$recipes .= '","fermentables":' . $row['json_fermentables'];
+		$recipes .= '","calc_acid":' . $row['calc_acid'];
+		$recipes .= ',"fermentables":' . $row['json_fermentables'];
 		$recipes .= ',"hops":' . $row['json_hops'];
 		$recipes .= ',"miscs":' . $row['json_miscs'];
 		$recipes .= ',"yeasts":' . $row['json_yeasts'];
--- a/www/includes/formulas.php	Mon Dec 17 13:46:15 2018 +0100
+++ b/www/includes/formulas.php	Mon Dec 17 22:24:32 2018 +0100
@@ -643,40 +643,6 @@
         Cl2 := W2.Sulfate.Value / MMSO4;
 
 
-procedure MixWater(W1, W2, Wr: TWater);
-
-  function Mix(V1, V2, C1, C2: double): double;
-  begin
-    if (V1 + V2) > 0 then
-      Result := (V1 * C1 + V2 * C2) / (V1 + V2)
-    else
-      Result := 0;
-  end;
-
-var
-  vol1, vol2: double;
-  phnew: double;
-begin
-  vol1 := W1.Amount.Value;
-  vol2 := W2.Amount.Value;
-  if (vol1 + vol2) > 0 then
-  begin
-    Wr.Amount.Value := vol1 + vol2;
-    Wr.Calcium.Value := Mix(vol1, vol2, W1.Calcium.Value, W2.Calcium.Value);
-    Wr.Magnesium.Value := Mix(vol1, vol2, W1.Magnesium.Value, W2.Magnesium.Value);
-    Wr.Sodium.Value := Mix(vol1, vol2, W1.Sodium.Value, W2.Sodium.Value);
-    Wr.Bicarbonate.Value := Mix(vol1, vol2, W1.Bicarbonate.Value, W2.Bicarbonate.Value);
-    Wr.Sulfate.Value := Mix(vol1, vol2, W1.Sulfate.Value, W2.Sulfate.Value);
-    Wr.Chloride.Value := Mix(vol1, vol2, W1.Chloride.Value, W2.Chloride.Value);
-    pHnew := -log10((power(10, -W1.pHWater.Value) * vol1 +
-      power(10, -W2.pHWater.Value) * vol2) / (vol1 + vol2));
-    Wr.pHwater.Value := pHnew;
-  end;
-end;
-
-
-
-
 procedure TRecipe.CalcWaterBalance;
 var
   i: integer;
--- a/www/js/rec_edit.js	Mon Dec 17 13:46:15 2018 +0100
+++ b/www/js/rec_edit.js	Mon Dec 17 22:24:32 2018 +0100
@@ -174,6 +174,44 @@
 		}
 	}
 
+
+	function calcWater() {
+
+		console.log("calcWater()");
+		var rows = $('#waterGrid').jqxGrid('getrows');
+		var liters = 0;
+		var calcium = 0;
+		var magnesium = 0;
+		var sodium = 0;
+		var total_alkalinity = 0;
+		var chloride = 0;
+		var sulfate = 0;
+		var ph = 0;
+		for (var i = 0; i < rows.length; i++) {
+			var row = rows[i];
+			liters += row.w_amount;
+			calcium += row.w_amount * row.w_calcium;
+			magnesium += row.w_amount * row.w_magnesium;
+			sodium += row.w_amount * row.w_sodium;
+			total_alkalinity += row.w_amount * row.w_total_alkalinity;
+			chloride += row.w_amount * row.w_chloride;
+			sulfate += row.w_amount * row.w_sulfate;
+			ph += Math.pow(10, -row.w_ph) * row.w_amount;
+		}
+		$('#wg_volume').val(liters);
+		calcium = Math.round(calcium / liters * 10) / 10;
+		$('#wg_calcium').val(calcium);
+		$('#wg_magnesium').val(Math.round(magnesium / liters * 10) / 10);
+		$('#wg_sodium').val(Math.round(sodium / liters * 10) / 10);
+		$('#wg_total_alkalinity').val(Math.round(total_alkalinity / liters * 10) / 10);
+		$('#wg_chloride').val(Math.round(chloride / liters * 10) / 10);
+		sulfate = Math.round(sulfate / liters * 10) / 10;
+		$('#wg_sulfate').val(sulfate);
+		// Note: brouwhulp has the malts included here in the result.
+		ph = Math.round(-Math.log10(ph / liters) * 10) / 10;
+		$('#wg_ph').val(ph);
+	}
+
 	function calcFermentablesFromOG(OG) {
 
 		console.log("calcFermentablesFromOG("+OG+")");
@@ -259,6 +297,10 @@
 			calcABV();                                      // and ABV
 			calcIBUs();                                     // and the IBU's.
 		});
+		$('#mash_ph').on('change', function (event) {
+			$("#tgt_mash_ph").val(parseFloat(event.args.value));
+			calcWater();
+		});
 	};
 
 	$("#styleSelect").jqxDropDownList({
@@ -378,9 +420,15 @@
 			{ name: 'est_ibu', type: 'float' },
 			{ name: 'ibu_method', type: 'string' },
 			{ name: 'est_carb', type: 'float' },
-			{ name: 'mash_sparge_temp', type: 'float' },
+			{ name: 'sparge_temp', type: 'float' },
+			{ name: 'sparge_ph', type: 'float' },
+			{ name: 'sparge_volume', type: 'float' },
+			{ name: 'sparge_acid_type', type: 'string' },
+			{ name: 'sparge_acid_perc', type: 'float' },
+			{ name: 'sparge_acid_amount', type: 'float' },
 			{ name: 'mash_ph', type: 'float' },
 			{ name: 'mash_name', type: 'string' },
+			{ name: 'calc_acid', type: 'bool' },
 			{ name: 'fermentables', type: 'array' },
 			{ name: 'hops', type: 'string' },
 			{ name: 'miscs', type: 'string' },
@@ -434,7 +482,14 @@
 			$("#st_carb_max").val(dataRecord.st_carb_max);
 			$("#mash_name").val(dataRecord.mash_name);
 			$("#mash_ph").val(dataRecord.mash_ph);
-			$("#mash_sparge_temp").val(dataRecord.mash_sparge_temp);
+			$("#tgt_mash_ph").val(dataRecord.mash_ph);
+			$("#sparge_temp").val(dataRecord.sparge_temp);
+			$("#sparge_ph").val(dataRecord.sparge_ph);
+			$("#sparge_volume").val(dataRecord.sparge_volume);
+			$("#sparge_acid_type").val(dataRecord.sparge_acid_type);
+			$("#sparge_acid_perc").val(dataRecord.sparge_acid_perc);
+			$("#sparge_acid_amount").val(dataRecord.sparge_acid_amount);
+			$("#calc_acid").val(dataRecord.calc_acid);
 			editFermentable(dataRecord);
 			editHop(dataRecord);
 			editMisc(dataRecord);
@@ -999,6 +1054,15 @@
 					var row = records[i];
 					row.m_weight = row.m_amount * 1000;
 					data.push(row);
+					// Initial set water agent values.
+					if (row.m_name == 'CaCl2')
+						$("#wa_cacl2").val(row.m_weight);
+					if (row.m_name == 'CaSO4')
+						$("#wa_caso4").val(row.m_weight);
+					if (row.m_name == 'MgSO4')
+						$("#wa_mgso4").val(row.m_weight);
+					if (row.m_name == 'NaCl')
+						$("#wa_nacl").val(row.m_weight);
 				}
 				return data;
 			},
@@ -1421,9 +1485,11 @@
 						var id = $("#waterGrid").jqxGrid('getrowid', selectedrowindex);
 						var commit = $("#waterGrid").jqxGrid('deleterow', id);
 					}
+					calcWater();
 				});
 			},
 			ready: function() {
+				calcWater();
 				$('#jqxTabs').jqxTabs('next');
 			},
 			columns: [
@@ -1447,7 +1513,13 @@
 				{ text: 'pH', editable: false, datafield: 'w_ph', width: 80, align: 'right', cellsalign: 'right', cellsformat: 'f1' }
 			]
 		});
-	}; // editWater = function (data) {
+		$("#waterGrid").on('cellendedit', function (event) {
+			var args = event.args;
+			console.log("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (args.rowindex) + ", Value: " + args.value);
+			$("#waterGrid").jqxGrid('setcellvalue', args.rowindex, args.datafield, args.value);
+			calcWater();
+		});
+	};
 
 	// inline mash editor
         var editMash = function (data) {
@@ -1583,6 +1655,8 @@
 	var srcColor = [ "Morey", "Mosher", "Daniels" ];
 	//var srcIBU = [ "Tinseth", "Rager", "Garetz", "Daniels", "Mosher", "Noonan" ];
 	var srcIBU = [ "Tinseth", "Rager", "Daniels" ];	// Only these are supported at this time.
+	var srcDeAcid = [ "NaHCO3", "Na2CO3", "CaCO3", "Ca(OH)2" ];
+	var srcAcid = [ "Melkzuur", "Zoutzuur", "Fosforzuur", "Zwavelzuur" ];
 	$("#name").jqxInput({ theme: theme, width: 640, height: 23 });
 	$("#notes").jqxInput({ theme: theme, width: 960, height: 200 });
 	$("#st_name").jqxInput({ theme: theme, width: 250, height: 23 });
@@ -1627,11 +1701,53 @@
 
 	$("#mash_name").jqxInput({ theme: theme, width: 320, height: 23 });
 	$("#mash_ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 4, max: 8, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 });
+	$("#tgt_mash_ph").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 100, height: 23, decimalDigits: 1, readOnly: true });
 	$("#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 });
 
+	// Water treatment
+	$("#wg_volume").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_calcium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_magnesium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_sodium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_total_alkalinity").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_chloride").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_sulfate").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wg_ph").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+
+	$("#wb_calcium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wb_magnesium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wb_sodium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wb_total_alkalinity").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wb_chloride").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wb_sulfate").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#wb_ph").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+
+	$("#pr_calcium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#pr_magnesium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#pr_sodium").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#pr_total_alkalinity").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#pr_chloride").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#pr_sulfate").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+	$("#pr_ph").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 74, height: 23, decimalDigits: 1, readOnly: true });
+
+	$("#wa_cacl2").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 0, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1, symbol: ' gr', symbolPosition: 'right' });
+	$("#wa_caso4").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 0, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1, symbol: ' gr', symbolPosition: 'right' });
+	$("#wa_mgso4").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 0, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1, symbol: ' gr', symbolPosition: 'right' });
+	$("#wa_nacl").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, min: 0, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1, symbol: ' gr', symbolPosition: 'right' });
+
+	$("#calc_acid").jqxCheckBox({ theme: theme, width: 120, height: 23 });
+	$("#wa_ph_up").jqxDropDownList({ theme: theme, source: srcDeAcid, width: 125, height: 23, dropDownHeight: 128 });
+	$("#wa_ph_up").val('NaHCO3');
+	$("#wa_ph_down").jqxDropDownList({ theme: theme, source: srcAcid, width: 125, height: 23, dropDownHeight: 128 })
+	$("#wa_ph_down").val('Melkzuur');
+
+	$("#sparge_volume").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 });
+	$("#sparge_ph").jqxNumberInput({ inputMode: 'simple', spinMode: 'simple', theme: theme, width: 100, height: 23, decimalDigits: 1, spinButtons: true, spinButtonsStep: 0.1 });
+	$("#sparge_acid_amount").jqxNumberInput({ inputMode: 'simple', theme: theme, width: 100, height: 23, decimalDigits: 5, readOnly: true });
+
 	// Tabs inside the popup window.
 	$('#jqxTabs').jqxTabs({
 		theme: theme,
@@ -1720,7 +1836,13 @@
 			est_carb: parseFloat($("#est_carb").jqxNumberInput('decimal')),
 			mash_name: $("#mash_name").val(),
 			mash_ph: parseFloat($("#mash_ph").jqxNumberInput('decimal')),
-			mash_sparge_temp: parseFloat($("#mash_sparge_temp").jqxNumberInput('decimal')),
+			sparge_temp: parseFloat($("#sparge_temp").jqxNumberInput('decimal')),
+			sparge_ph: parseFloat($("#sparge_ph").jqxNumberInput('decimal')),
+			sparge_volume: parseFloat($("#sparge_volume").jqxNumberInput('decimal')),
+			sparge_acid_type: $("#sparge_acid_type").val(),
+			sparge_acid_perc: parseFloat($("#sparge_acid_perc").jqxNumberInput('decimal')),
+			sparge_acid_amount: parseFloat($("#sparge_acid_amount").jqxNumberInput('decimal')),
+			calc_acid: $("#calc_acid").val(),
 			fermentables: fermentablerow,
 			hops: hoprow,
 			miscs: miscrow,
--- a/www/rec_edit.php	Mon Dec 17 13:46:15 2018 +0100
+++ b/www/rec_edit.php	Mon Dec 17 22:24:32 2018 +0100
@@ -102,7 +102,7 @@
 
      <div> <!-- tab vergistbaar -->
       <div style="overflow: hidden;">
-       <table>
+       <table style="width: 100%;">
         <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>
@@ -121,7 +121,7 @@
 
      <div> <!-- tab hoppen -->
       <div style="overflow: hidden;">
-       <table>
+       <table style="width: 100%;">
         <tr> 
 	 <td style="vertical-align: top; float: right; padding: 3px;">Bitterheid IBU:</td>
 	 <td style="padding: 3px;"><div id="est_ibu2"></div></td>
@@ -140,7 +140,7 @@
 
      <div> <!-- tab misc -->
       <div style="overflow: hidden;">
-       <table>
+       <table style="width: 100%;">
         <tr>
          <td align="right" style="vertical-align: top;">Diversen:</td>
          <td align="left" colspan="3"><div id="miscGrid">Graat</div></td>
@@ -151,7 +151,7 @@
 
      <div> <!-- tab gisten -->
       <div style="overflow: hidden;">
-       <table>
+       <table style="width: 100%;">
         <tr>
          <td align="right" style="vertical-align: top;">Gisten:</td>
          <td align="left" colspan="3"><div id="yeastGrid">Graat</div></td>
@@ -162,27 +162,35 @@
 
      <div> <!-- tab water -->
       <div style="overflow: hidden;">
-       <table>
+       <table style="width: 100%;">
         <tr>
-         <td style="vertical-align: top; padding: 3px;float: right:">Water:</td>
-	 <td style="padding: 3px; float: left;"><div id="waterGrid"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Bitterheidsindex:</td>
+         <td style="padding: 3px;"><div id="tgt_bu"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Richtgetal Cl/SO4:</td>
+         <td style="padding: 3px;"><div id="tgt_cl_so4"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Doel maisch pH:</td>
+         <td style="padding: 3px;"><div id="tgt_mash_ph"></div></td>
+        </tr>
+        <tr>
+         <td align="right" style="vertical-align: top;">Water:</td>
+	 <td align="left" colspan="5"><div id="waterGrid"></div></td>
 	</tr>
         <tr>
          <td></td>
-         <td>
+         <td align="left" colspan="5">
           <div id='water_totals'>
  	   <table style="width: 100%;">
             <caption>Water overzicht</caption>
     	    <tr>
 	     <td></td>
-             <td style="width: 80px; padding: 3px;">Volume</td>
-             <td style="width: 80px; padding: 3px;">Ca</td>
-             <td style="width: 80px; padding: 3px;">Mg</td>
-             <td style="width: 80px; padding: 3px;">Na</td>
-             <td style="width: 80px; padding: 3px;">CaCO3</td>
-             <td style="width: 80px; padding: 3px;">Cl</td>
-	     <td style="width: 80px; padding: 3px;">SO4</td>
-             <td style="width: 80px; padding: 3px;">pH</td>
+             <td style="width: 77px; padding: 3px;">Volume</td>
+             <td style="width: 77px; padding: 3px;">Ca</td>
+             <td style="width: 77px; padding: 3px;">Mg</td>
+             <td style="width: 77px; padding: 3px;">Na</td>
+             <td style="width: 77px; padding: 3px;">CaCO3</td>
+             <td style="width: 77px; padding: 3px;">Cl</td>
+	     <td style="width: 77px; padding: 3px;">SO4</td>
+             <td style="width: 77px; padding: 3px;">pH</td>
  	    </tr>
             <tr>
 	     <td style="vertical-align: top; padding: 3px; float: left;">Gemengd water:</td>
@@ -204,11 +212,58 @@
              <td><div id="wb_total_alkalinity"></div></td>
              <td><div id="wb_chloride"></div></td>
 	     <td><div id="wb_sulfate"></div></td>
+             <td><div id="wb_ph"></div></td>
+	    </tr>
+            <tr>
+             <td style="vertical-align: top; padding: 3px; float: left;">Doel waterprofiel:</td>
              <td><div></div></td>
+             <td><div id="pr_calcium"></div></td>
+             <td><div id="pr_magnesium"></div></td>
+             <td><div id="pr_sodium"></div></td>
+             <td><div id="pr_total_alkalinity"></div></td>
+             <td><div id="pr_chloride"></div></td>
+             <td><div id="pr_sulfate"></div></td>
+             <td><div id="pr_ph"></div></td>
             </tr>
            </table>
 	  </div>
          </td>
+	</tr>
+        <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Calciumchloride (CaCl2):</td>
+         <td style="padding: 3px;"><div id="wa_cacl2"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Automatisch pH aanpassen:</td>
+         <td style="padding: 3px;"><div id="calc_acid"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Spoelwater volume:</td>
+         <td style="padding: 3px;"><div id="sparge_volume"></div></td>
+        </tr>
+        <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Gips (CaSO4):</td>
+         <td style="padding: 3px;"><div id="wa_caso4"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Ontzuren met:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="wa_ph_up"></div><div style="float: left; margin-left: 15px;" id="wa_phup_ml"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Spoelwater bron:</td>
+         <td style="padding: 3px;"><div id="sparge_source"></div></td>
+        </tr>
+        <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Epsom zout (MgSO4):</td>
+         <td style="padding: 3px;"><div id="wa_mgso4"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Aanzuren met:</td>
+         <td style="padding: 3px;"><div style="float: left;" id="wa_ph_down"></div><div style="float: left; margin-left: 15px;" id="wa_phdn_ml"></div><div style="float: left; margin-left: 15px;" id="wa_lacticp"></div></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Spoelwater pH:</td>
+         <td style="padding: 3px;"><div id="sparge_ph"></div></td>
+        </tr>
+        <tr>
+         <td style="vertical-align: top; float: right; padding: 3px;">Keukenzout (NaCl):</td>
+	 <td style="padding: 3px;"><div id="wa_nacl"></div></td>
+         <td colspan="2"></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Aanzuren met:</td>
+         <td style="padding: 3px;"><div id="sparge_acid_type"></div></td>
+	</tr>
+        <tr>
+         <td colspan="4"></td>
+         <td style="vertical-align: top; float: right; padding: 3px;">Aanzuren hoeveelheid:</td>
+         <td style="padding: 3px;"><div id="sparge_acid_amount"></div></td>
         </tr>
        </table>
       </div>
@@ -216,7 +271,7 @@
 
      <div> <!-- tab maischen -->
       <div style="overflow: hidden;">
-       <table>
+       <table style="width: 100%;">
 	<tr>
          <td style="vertical-align: top; float: right; padding: 3px;">Maischchema:</td>
 	 <td align="left" style="vertical-align: top; padding: 3px;"><input id="mash_name" /></td>

mercurial