# HG changeset patch # User Michiel Broek # Date 1547047166 -3600 # Node ID 3dbe1d2265ed9b426f50639dd5c11f068622cfe0 # Parent a810539dc2186ea4b57faa527599b2967911b0ce Removed the setpoints and temperatures from the right display panel. Added the current temperatures in text to the gauges as caption. Adjusted the gauge caption font display. Only send commands to the mqtt server just before we fetch fresh data. Added new target temperature settings in the right display box. diff -r a810539dc218 -r 3dbe1d2265ed www/css/style.css --- a/www/css/style.css Tue Jan 08 21:54:19 2019 +0100 +++ b/www/css/style.css Wed Jan 09 16:19:26 2019 +0100 @@ -111,9 +111,9 @@ * |+-------------++--------------+| * +-------------------------------+ * +---------panel_display---------+ - * |+--------++---------++--------+| - * || disp 1 || disp 2 || disp 3 || - * |+--------++---------++--------+| + * |+-------------++--------------+| + * || display 1 || display 2 || + * |+-------------++--------------+| * +-------------------------------+ * +---------panel_control---------+ * |+--------++---------++--------+| @@ -163,17 +163,10 @@ margin-left: 42px; } -#fermenter_mode_control { -width: 148px; -height: 110px; -float: left; -margin-top: 10px; -background-color: #ddd; -} #fermenter_panel_display { width: 280px; - height: 80px; + height: 70px; float: right; margin: 5px; background-color: #252526; @@ -182,45 +175,13 @@ border-radius: 5px 5px 5px 5px; margin-bottom: 3px; } - -#fermenter_display1 { -width: 93px; -height: 76px; -float: left; -text-align: center; -margin-top: 7px; -} - -#fermenter_display2 { -width: 93px; -height: 76px; -float: left; -text-align: center; -margin-top: 7px; +#fermenter_display { + width: 140px; + height: 70px; + float: left; + text-align: center; } -#fermenter_display3 { -width: 93px; -height: 76px; -float: left; -text-align: center; -margin-top: 7px; -} - -.dtemp { - font-weight: bold; - color: yellow; -} - -.ltemp { - font-weight: bold; - color: green; -} - -.htemp { - font-weight: bold; - color: red; -} #fermenter_panel_control { width: 280px; diff -r a810539dc218 -r 3dbe1d2265ed www/jqwidgets/styles/jqx.ui-mbse.css --- a/www/jqwidgets/styles/jqx.ui-mbse.css Tue Jan 08 21:54:19 2019 +0100 +++ b/www/jqwidgets/styles/jqx.ui-mbse.css Wed Jan 09 16:19:26 2019 +0100 @@ -254,3 +254,12 @@ margin-left: -4px; margin-right: 4px; } +.jqx-gauge-caption +{ + fill: #2226FF; + color: #2229FF; + font-size: 15px; + font-family: Verdana; + font-weight:bold; +} + diff -r a810539dc218 -r 3dbe1d2265ed www/js/mon_fermenter.js --- a/www/js/mon_fermenter.js Tue Jan 08 21:54:19 2019 +0100 +++ b/www/js/mon_fermenter.js Wed Jan 09 16:19:26 2019 +0100 @@ -23,12 +23,13 @@ $(document).ready(function () { - var bname = ''; - var bcode = ''; + var record = {}; + var newBase = false; + var newProduct = false; + var newSwitch = false; + var newProfile = false; var yl = 12; // Normal yeast temp range var yh = 24; - var bstage = ''; - var bmode = ''; var gaugeoptions = { min: 0, max: 40, width: 375, height: 375, @@ -57,6 +58,12 @@ animationDuration: 1200, caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] } }; + $("#gaugeContainer_air").jqxGauge( gaugeoptions ); + $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air: 00.000' }} ); + $("#gaugeContainer_beer").jqxGauge( gaugeoptions ); + $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer: 00.000' }} ); + $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions ); + var switchoptions = { height: 68, width: 35, @@ -64,26 +71,34 @@ thumbSize:'50%', orientation: 'vertical' }; - - srcMode = [ "OFF", "NONE", "FRIDGE", "BEER", "PROFILE" ]; - srcStage = [ "PRIMARY", "SECONDARY", "TERTIARY", "CARBONATION" ]; - $("#gaugeContainer_air").jqxGauge( gaugeoptions ); - $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} ); - $("#gaugeContainer_beer").jqxGauge( gaugeoptions ); - $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} ); - $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions ); $("#fermenter_toggle1").jqxSwitchButton( switchoptions ); $("#fermenter_toggle2").jqxSwitchButton( switchoptions ); $("#fermenter_toggle3").jqxSwitchButton( switchoptions ); + srcMode = [ "OFF", "NONE", "FRIDGE", "BEER", "PROFILE" ]; + srcStage = [ "PRIMARY", "SECONDARY", "TERTIARY", "CARBONATION" ]; $("#info_mode").jqxDropDownList({ theme: theme, source: srcMode, width: 100, height: 23, dropDownHeight: 156 }); $("#info_stage").jqxDropDownList({ theme: theme, source: srcStage, width: 150, height: 23, dropDownHeight: 125 }); - function sendBase(stage, mode) { + var targetoptions = { + inputMode: 'simple', + spinMode: 'simple', + theme: theme, + width: 70, + height: 23, + min:0, max: 40, + decimalDigits: 1, + spinButtons: true, + spinButtonsStep: 0.1 + }; + $("#target_lo").jqxNumberInput( targetoptions ); + $("#target_hi").jqxNumberInput( targetoptions ); - console.log("sendBase("+stage+", "+mode+")"); - var data = 'node=rpi01&alias=unit0&payload={"stage":"' + stage; - data += '","mode":"' + mode + '","setpoint":{"low":17.8,"high":18.2}}'; + function sendBase(stage, mode, tlo, thi) { + + console.log("sendBase("+stage+", "+mode+", "+tlo+", "+thi+")"); + var data = 'node=rpi01&alias=unit0&payload={"stage":"'+stage; + data += '","mode":"'+mode+'","setpoint":{"low":'+tlo+',"high":'+thi+'}}'; $.ajax({ url: "cmd_fermenter.php", data: data, @@ -143,17 +158,22 @@ var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { - var record = dataAdapter.records[0]; + record = dataAdapter.records[0]; var oline = (record.online) ? "On-line" : "Off-line"; $("#info_uuid").html(record.uuid); $("#info_system").html(record.node + "/" + record.alias + " " + oline); $("#info_beer").html(record.beercode + " - " + record.beername); - bcode = record.beercode; - bname = record.beername; - bstage = record.stage; - bmode = record.mode; $("#info_mode").jqxDropDownList('selectItem', record.mode); $("#info_stage").jqxDropDownList('selectItem', record.stage); + $("#target_lo").val(record.setpoint_low); + $("#target_hi").val(record.setpoint_high); + if (record.online && ((record.mode == "FRIDGE") || (record.mode == "BEER"))) { + $("#target_lo").jqxNumberInput({ readOnly: false, Width: 70, spinButtons: true }); + $("#target_hi").jqxNumberInput({ readOnly: false, Width: 70, spinButtons: true }); + } else { + $("#target_lo").jqxNumberInput({ readOnly: true, Width: 50, spinButtons: false }); + $("#target_hi").jqxNumberInput({ readOnly: true, Width: 50, spinButtons: false }); + } if (record.online && (record.mode != "OFF")) { $("#fermenter_powerled").html('
Power'); @@ -166,11 +186,6 @@ $("#fermenter_alarmled").html('
Alarm'); } - $("#target_lo").html(record.setpoint_low.toFixed(1)); - $("#target_hi").html(record.setpoint_high.toFixed(1)); - $("#load_air").html(record.air_temperature.toFixed(3)); - $("#load_beer").html(record.beer_temperature.toFixed(3)); - if (record.online && (record.heater_state != "0")) { $("#fermenter_led1").html('
Heat'); } else { @@ -199,12 +214,14 @@ $("#fermenter_toggle3").val( (record.fan_state != "0") ); } + $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air: '+record.air_temperature.toFixed(3) }}); $('#gaugeContainer_air').jqxGauge({ value: record.air_temperature }); if (record.online && (record.air_state == "OK")) { $("#gaugeContainer_air").jqxGauge({ disabled: false }); } else { $("#gaugeContainer_air").jqxGauge({ disabled: true }); } + $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer: '+record.beer_temperature.toFixed(3) }}); $('#gaugeContainer_beer').jqxGauge({ value: record.beer_temperature }); if (record.online && (record.beer_state == "OK")) { $("#gaugeContainer_beer").jqxGauge({ disabled: false }); @@ -222,22 +239,46 @@ // Get the data immediatly and then at regular intervals to refresh. dataAdapter.dataBind(); - setInterval(function(){ + setInterval(function() { + if (newBase) { + sendBase(record.stage, record.mode, record.setpoint_low, record.setpoint_high); + newBase = false; + } dataAdapter.dataBind(); }, 10000); $('#info_mode').on('change', function (event) { - sendBase(bstage, args.item.value); + record.mode = args.item.value; + newBase = true; }); $('#info_stage').on('change', function (event) { - sendBase(args.item.value, bmode); + record.stage = args.item.value; + newBase = 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; + $("#target_hi").val(record.setpoint_high); + } + newBase = true; + }); + $('#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; + $("#target_lo").val(record.setpoint_low); + } + newBase = true; }); // The chart button. $("#FLog").jqxButton({ template: "info", width: '150px', theme: theme }); $("#FLog").click(function () { - var url="log_fermentation.php?code=" + bcode + "&name=" + bname; + var url="log_fermentation.php?code=" + record.beercode + "&name=" + record.beername; window.open(url); }); }); diff -r a810539dc218 -r 3dbe1d2265ed www/mon_fermenter.php --- a/www/mon_fermenter.php Tue Jan 08 21:54:19 2019 +0100 +++ b/www/mon_fermenter.php Wed Jan 09 16:19:26 2019 +0100 @@ -25,7 +25,7 @@ -
+
@@ -34,15 +34,13 @@
-
-
-
Sp +
+
+
°C laag
-
-
Air -
-
-
Beer +
+
+
°C hoog