Wed, 09 Jan 2019 16:19:26 +0100
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.
--- 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;
--- 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; +} +
--- 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('<div class="LEDblue_on"></div>Power'); @@ -166,11 +186,6 @@ $("#fermenter_alarmled").html('<div class="LEDred_off"></div>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('<div class="LEDgreen_on"></div>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); }); });
--- 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 @@ </div> </div> <!-- End left side --> - <div style="float: right; width: 295px; background-color: #ddd;"> + <div style="float: right; width: 295px;"> <div id="fermenter_panel_top"> <div id="fermenter_selector"> </div> @@ -34,15 +34,13 @@ </div> <!-- fermenter_panel_top --> <div id="fermenter_panel_display"> - <div id="fermenter_display1"> - <div id="target_hi" class="htemp"></div> - <div id="target_lo" class="ltemp"></div>Sp + <div id="fermenter_display"> + <div id="target_lo" style="margin-left: 40px; margin-top: 15px;"></div> + <div style="margin-top: 5px;">°C laag</div> </div> - <div id="fermenter_display2"> - <div id="load_air" class="dtemp"></div>Air - </div> - <div id="fermenter_display3"> - <div id="load_beer" class="dtemp"></div>Beer + <div id="fermenter_display"> + <div id="target_hi" style="margin-left: 40px; margin-top: 15px;"></div> + <div style="margin-top: 5px;">°C hoog</div> </div> </div> <!-- fermenter_panel_display -->