diff -r 59874681fc13 -r eb1ac7487710 www/js/rec_edit.js
--- 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ë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({