diff -r 3dbe1d2265ed -r 4c25db9e8102 www/js/mon_fermenter.js
--- a/www/js/mon_fermenter.js	Wed Jan 09 16:19:26 2019 +0100
+++ b/www/js/mon_fermenter.js	Thu Jan 10 20:22:06 2019 +0100
@@ -31,6 +31,33 @@
 	var	yl = 12;	// Normal yeast temp range
 	var	yh = 24;
 
+	var productSource = {
+		datatype: "json",
+		cache: false,
+		datafields: [
+			{ name: 'code', type: 'string' },
+			{ name: 'name', type: 'string' },
+			{ name: 'stage', type: 'string' },
+		],
+		id: 'code',
+		url: "includes/db_product.php?select=ferment"
+	};
+	var productlist = new $.jqx.dataAdapter(productSource);
+	$("#select_beer").jqxDropDownList({
+		placeHolder: "Kies bier:",
+		theme: theme,
+		source: productlist,
+		displayMember: "code",
+		width: 150,
+		height: 23,
+		dropDownWidth: 500,
+		autoDropDownHeight: true,
+		renderer: function (index, label, value) {
+			var datarecord = productlist.records[index];
+			return datarecord.code + " - " + datarecord.name;
+		}
+	});
+
 	var gaugeoptions = {
 		min: 0, max: 40, width: 375, height: 375,
 		ranges: [{ startValue:  0, endValue: yl, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 },
@@ -97,14 +124,50 @@
 	function sendBase(stage, mode, tlo, thi) {
 
 		console.log("sendBase("+stage+", "+mode+", "+tlo+", "+thi+")");
-		var data  = 'node=rpi01&alias=unit0&payload={"stage":"'+stage;
+		var data  = 'node='+record.node+'&alias='+record.alias+'&payload={"stage":"'+stage;
 		    data += '","mode":"'+mode+'","setpoint":{"low":'+tlo+',"high":'+thi+'}}';
 		$.ajax({
 			url: "cmd_fermenter.php",
 			data: data,
 			type: "POST",
 			success: function(data) {
-				//do something after something is recieved from php
+				//do something after something is received from php
+			},
+			error: function(jqXHR, textStatus, errorThrown) {
+				console.log("sendBase() error");
+			}
+		});
+	}
+
+	function sendSwitch(sw1, sw2, sw3, sw4) {
+
+		console.log("sendSwitch("+sw1+", "+sw2+", "+sw3+", "+sw4+")");
+		var data  = 'node='+record.node+'&alias='+record.alias+'&payload=';
+		    data += '{"heater":{"state":'+sw1+'},"cooler":{"state":'+sw2+'},"fan":{"state":'+sw3+'},"light":{"state":'+sw4+'}}';
+		$.ajax({
+			url: "cmd_fermenter.php",
+			data: data,
+			type: "POST",
+			success: function(data) {
+				//do something after something is received from php
+			},
+			error: function(jqXHR, textStatus, errorThrown) {
+				console.log("sendBase() error");
+			}
+		});
+	}
+
+	function sendProduct(code, name) {
+
+		console.log("sendProduct("+code+", "+name+")");
+		var data  = 'node='+record.node+'&alias='+record.alias+'&payload=';
+		    data += '{"product":{"code":"'+code+'","name":"'+name+'"}}';
+		$.ajax({
+			url: "cmd_fermenter.php",
+			data: data,
+			type: "POST",
+			success: function(data) {
+				//do something after something is received from php
 			},
 			error: function(jqXHR, textStatus, errorThrown) {
 				console.log("sendBase() error");
@@ -165,6 +228,11 @@
 			$("#info_beer").html(record.beercode + " - " + record.beername);
 			$("#info_mode").jqxDropDownList('selectItem', record.mode);
 			$("#info_stage").jqxDropDownList('selectItem', record.stage);
+			$("#info_profile").html(record.profile_name);
+			if (record.profile_name == "")
+				$("#info_mode").jqxDropDownList('disableItem', "PROFILE");
+			else
+				$("#info_mode").jqxDropDownList('enableItem', "PROFILE");
 			$("#target_lo").val(record.setpoint_low);
 			$("#target_hi").val(record.setpoint_high);
 			if (record.online && ((record.mode == "FRIDGE") || (record.mode == "BEER"))) {
@@ -177,8 +245,11 @@
 
 			if (record.online && (record.mode != "OFF")) {
 				$("#fermenter_powerled").html('<div class="LEDblue_on"></div>Power');
+				$("#select_beer").jqxDropDownList({ disabled: true });
+				$("#select_beer").jqxDropDownList('clearSelection');
 			} else {
 				$("#fermenter_powerled").html('<div class="LEDblue_off"></div>Power');
+				$("#select_beer").jqxDropDownList({ disabled: false });
 			}
 			if (record.online && (record.alarm != "0")) {
 				$("#fermenter_alarmled").html('<div class="LEDred_on"></div>Alarm');
@@ -240,26 +311,55 @@
 	// Get the data immediatly and then at regular intervals to refresh.
 	dataAdapter.dataBind();
 	setInterval(function() {
+		var skip = false;
 		if (newBase) {
 			sendBase(record.stage, record.mode, record.setpoint_low, record.setpoint_high);
 			newBase = false;
+			skip = true;
 		}
-		dataAdapter.dataBind();
+		if (newSwitch) {
+			sendSwitch(record.heater_state, record.cooler_state, record.fan_state, record.light_state);
+			newSwitch = false;
+			skip = true;
+		}
+		if (newProduct) {
+			sendProduct(record.code, record.name);
+			newProduct = false;
+			skip = true;
+		}
+
+		if (! skip) {
+			// Only if we didn't send a command so that a command can be processed.
+			dataAdapter.dataBind();
+		}
 	}, 10000);
 
 	$('#info_mode').on('change', function (event) {
 		record.mode = args.item.value;
+		$("#fermenter_toggle1").val(0);
+		$("#fermenter_toggle2").val(0);
+		$("#fermenter_toggle3").val(0);
 		newBase = true;
 	});
-	$('#info_stage').on('change', function (event) {
+	$('#info_stage').on('select', function (event) {
 		record.stage = args.item.value;
 		newBase = true;
 	});
+	$("#select_beer").on('select', function (event) {
+		if (event.args) {
+			var index = event.args.index;
+			var datarecord = productlist.records[index];
+			record.code = datarecord.code;
+			record.name = datarecord.name;
+			newProduct = true;
+		}
+	});
+
 	$('#target_lo').on('change', function (event) {
 		record.setpoint_low = parseFloat(event.args.value);
 		// Keep the high target above the low.
-		if (record.setpoint_low > (record.setpoint_high - 0.2)) {
-			record.setpoint_high = record.setpoint_low + 0.2;
+		if (record.setpoint_low > record.setpoint_high) {
+			record.setpoint_high = record.setpoint_low;
 			$("#target_hi").val(record.setpoint_high);
 		}
 		newBase = true;
@@ -267,13 +367,54 @@
 	$('#target_hi').on('change', function (event) {
 		record.setpoint_high = parseFloat(event.args.value);
 		// Keep the low target below the high.
-		if (record.setpoint_high < (record.setpoint_low + 0.2)) {
-			record.setpoint_low = record.setpoint_high - 0.2;
+		if (record.setpoint_high < record.setpoint_low) {
+			record.setpoint_low = record.setpoint_high;
 			$("#target_lo").val(record.setpoint_low);
 		}
 		newBase = true;
 	});
 
+	$("#fermenter_toggle1").on('checked', function (event) {
+		if (record.mode == "NONE") {
+			record.heater_state = 0;
+			newSwitch = true;
+		}
+	});
+	$("#fermenter_toggle1").on('unchecked', function (event) {
+		if (record.mode == "NONE") {
+			record.heater_state = 100;
+			record.cooler_state = 0;
+			$("#fermenter_toggle2").val(0);
+			newSwitch = true;
+		}
+	});
+	$("#fermenter_toggle2").on('checked', function (event) {
+		if (record.mode == "NONE") {
+			record.cooler_state = 0;
+			newSwitch = true;
+		}
+	});
+	$("#fermenter_toggle2").on('unchecked', function (event) {
+		if (record.mode == "NONE") {
+			record.cooler_state = 100;
+			record.heater_state = 0;
+			$("#fermenter_toggle1").val(0);
+			newSwitch = true;
+		}
+	});
+	$("#fermenter_toggle3").on('checked', function (event) {
+		if (record.mode == "NONE") {
+			record.fan_state = 0;
+			newSwitch = true;
+		}
+	});
+	$("#fermenter_toggle3").on('unchecked', function (event) {
+		if (record.mode == "NONE") {
+			record.fan_state = 100;
+			newSwitch = true;
+		}
+	});
+
 
 	// The chart button.
    	$("#FLog").jqxButton({ template: "info", width: '150px', theme: theme });