changeset
Fermenter monitor screen added control boxes and LED's.
Mon, 07 Jan 2019 22:35:32 +0100
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Mon, 07 Jan 2019 22:35:32 +0100
- changeset 182
- 58618d93c0fb
- parent 181
- db4e62482d0b
- child 183
- a810539dc218
Fermenter monitor screen added control boxes and LED's.
--- a/www/css/style.css Mon Jan 07 16:46:43 2019 +0100 +++ b/www/css/style.css Mon Jan 07 22:35:32 2019 +0100 @@ -8,12 +8,13 @@ } - -#MainPanel { +#MainPanel, +#fermenter { width: 1278px; height: 628px; border: 2px solid #4297d7; background: #252526; + float: left; color: #eeeeee; } @@ -51,7 +52,8 @@ #fermenter_table { - width: 720px; + width: 960px; + height: 200px; background: #252526; margin: 5px; border: 2px solid; @@ -60,26 +62,6 @@ } - -.temperature { - display: inline-block; - width: 64px; - height: 20px; - white-space: nowrap; - color: #00eeee; -} - - - -.NUM { - font-family: "Arial Black", Gadget, sans-serif; - color: #00eeee; - padding: 2px; - margin: 2px; - background-color: #212121; -} - - .ebccolor { float: left; margin-left: 10px; @@ -99,18 +81,19 @@ * || || || || * || || chiller|| || * || || || || - * || |=--------+| || - * || Air temp |+--------+| Beer temp || - * || || || || - * || || Temps || || - * || || digits || || - * |+-------------------++--------++-------------------+| + * || |+--------+| || + * || Air temp | | Beer temp || + * || | | || + * || | | || + * || | | || + * |+-------------------+ +-------------------+| * +----------------------------------------------------+ */ #fermenter_thermometers { - width: 720px; - height: 295px; + width: 960px; + height: 390px; + float: left; background-color: #252526; margin: 5px; border: 2px solid; @@ -118,6 +101,203 @@ border-radius: 5px 5px 5px 5px; } +/* + * +----------panel_top------------+ + * |+-------------++--------------+| + * || || powerled || + * || selector |+--------------+| + * || |+--------------+| + * || || mode control || + * |+-------------++--------------+| + * +-------------------------------+ + * +---------panel_display---------+ + * |+--------++---------++--------+| + * || disp 1 || disp 2 || disp 3 || + * |+--------++---------++--------+| + * +-------------------------------+ + * +---------panel_control---------+ + * |+--------++---------++--------+| + * || led 1 || led 2 || led 3 || + * |+--------++---------++--------+| + * |+--------++---------++--------+| + * || sw 1 || sw 2 || sw 3 || + * |+--------++---------++--------+| + * +-------------------------------+ + * +--------panel_buttons----------+ + * | | + * +-------------------------------+ + */ +#fermentor_panel_top { + width: 280px; + height: 200px; + float: right; + margin: 5px; + background-color: #252526; + border: 2px solid; + border-color: #59b4d4; + border-radius: 5px 5px 5px 5px; +} + +#fermentor_selector { + width: 100px; + height: 198px; + float: left; +} + +input.select { + margin-left: 10px; + margin-top: 13px; +} + +#fermentor_alarmled { +width: 50px; +height: 30px; +float: left; +text-align: center; +margin-top: 10px; +margin-left: 20px; +} + +#fermentor_powerled { +width: 50px; +height: 30px; +float: left; +text-align: center; +margin-top: 10px; +margin-left: 42px; +} + +#fermentor_mode_control { +width: 148px; +height: 110px; +float: left; +margin-top: 10px; +background-color: #ddd; +} + +#fermentor_panel_display { + width: 280px; + height: 80px; + float: right; + margin: 5px; + background-color: #252526; + border: 2px solid; + border-color: #59b4d4; + border-radius: 5px 5px 5px 5px; + margin-bottom: 3px; +} + +#fermentor_display1 { +width: 93px; +height: 76px; +float: left; +text-align: center; +margin-top: 7px; +} + +#fermentor_display2 { +width: 93px; +height: 76px; +float: left; +text-align: center; +margin-top: 7px; +} + +#fermentor_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; +} + +#fermentor_panel_control { + width: 280px; + height: 120px; + float: right; + margin: 5px; + background-color: #252526; + border: 2px solid; + border-color: #59b4d4; + border-radius: 5px 5px 5px 5px; + margin-bottom: 3px; +} + +#fermentor_led1 { +width: 93px; +height: 30px; +float: left; +text-align: center; +margin-top: 8px; +} + +#fermentor_led2 { +width: 93px; +height: 30px; +float: left; +text-align: center; +margin-top: 8px; +} + +#fermentor_led3 { +width: 93px; +height: 30px; +float: left; +text-align: center; +margin-top: 8px; +} + +#fermentor_toggle1 { +width: 93px; +height: 70px; +float: left; +text-align: center; +margin-top: 10px; +} + +#fermentor_toggle2 { +width: 93px; +height: 70px; +float: left; +text-align: center; +margin-top: 10px; +} + +#fermentor_toggle3 { +width: 93px; +height: 70px; +float: left; +text-align: center; +margin-top: 10px; +} + + +#fermentor_panel_buttons { + width: 280px; + height: 130px; + float: right; + margin: 5px; + background-color: #252526; + border: 2px solid; + border-color: #59b4d4; + border-radius: 5px 5px 5px 5px; + margin-bottom: 3px; +} #fermenter_tempdigits { @@ -132,11 +312,11 @@ } -/* + .LEDred_on { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #F40; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px; @@ -144,8 +324,8 @@ .LEDred_off { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #820; border-radius: 50%; box-shadow: #400 0 0px 1px 1px; @@ -153,8 +333,8 @@ .LEDyellow_on { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #FF0; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px; @@ -162,8 +342,8 @@ .LEDyellow_off { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #A90; border-radius: 50%; box-shadow: #440 0 0px 1px 1px; @@ -171,8 +351,8 @@ .LEDgreen_on { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #5E0; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px; @@ -180,8 +360,8 @@ .LEDgreen_off { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #270; border-radius: 50%; box-shadow: #250 0 0px 1px 1px; @@ -189,8 +369,8 @@ .LEDblue_on { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #4AF; border-radius: 50%; box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px; @@ -198,13 +378,13 @@ .LEDblue_off { margin: 5px auto; - width: 12px; - height: 12px; + width: 18px; + height: 18px; background-color: #137; border-radius: 50%; box-shadow: #024 0 0px 1px 1px; } -*/ + /*
--- a/www/js/mon_fermenter.js Mon Jan 07 16:46:43 2019 +0100 +++ b/www/js/mon_fermenter.js Mon Jan 07 22:35:32 2019 +0100 @@ -25,13 +25,14 @@ var bname = ''; var bcode = ''; + var yl = 12; // Normal yeast temp range + var yh = 24; var gaugeoptions = { - min: -5, max: 35, width: 275, height: 275, - ranges: [{ startValue: -5, endValue: 0, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 }, - { startValue: 0, endValue: 16, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 }, - { startValue: 16, endValue: 24, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 10, startWidth: 10 }, - { startValue: 24, endValue: 35, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 10, startWidth: 10 }], + min: 0, max: 40, width: 375, height: 375, + ranges: [{ startValue: 0, endValue: yl, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 }, + { startValue: yl, endValue: yh, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 }, + { startValue: yh, endValue: 40, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 10, startWidth: 10 }], ticksMinor: { interval: 1, size: '5%' }, ticksMajor: { interval: 5, size: '9%' }, labels: { interval: 5 }, @@ -41,9 +42,10 @@ animationDuration: 1200 }; var gaugeSmalloptions = { - min: -20, max: 25, width: 150, height: 150, - ranges: [{ startValue: -20, endValue: 0, startWidth: 5, endWidth: 5, style: { fill: '#3399FF', stroke: '#3399FF' }}, - { startValue: 0, endValue: 25, startWidth: 5, endWidth: 5, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }}], + min: -15, max: 25, width: 190, height: 190, + ranges: [{ startValue: -15, endValue: 0, startWidth: 5, endWidth: 5, style: { fill: '#3399FF', stroke: '#3399FF' }}, + { startValue: 0, endValue: 10, startWidth: 5, endWidth: 5, style: { fill: '#00CC33', stroke: '#00CC33' }}, + { startValue: 10, endValue: 25, startWidth: 5, endWidth: 5, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }}], ticksMinor: { interval: 1, size: '5%' }, ticksMajor: { interval: 5, size: '9%' }, labels: { interval: 5 }, @@ -108,8 +110,7 @@ loadComplete: function (records) { var record = dataAdapter.records[0]; var oline = (record.online) ? "On-line" : "Off-line"; - var html = "<div id='fermenter_table'>"; - html += "<table style='width: 100%; padding: 10px;'>"; + var html = "<table style='width: 100%; padding: 10px;'>"; html += "<tr><th colspan=2>Klimaatkast overzicht</th></tr>"; html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; html += "<tr><td>Systeem</td><td>" + record.node + "/" + record.alias + " " + oline + "</td></tr>"; @@ -117,11 +118,43 @@ html += "<tr><td>Werking</td><td>" + record.mode + "</td></tr>"; html += "<tr><td>Fase</td><td>" + record.stage + "</td></tr>" html += "</<table>"; - html += "</div>"; - $("#ContentPanel").html(html); + $("#fermenter_info").html(html); bcode = record.beercode; bname = record.beername; + if (record.online && (record.mode != "OFF")) { + $("#fermentor_powerled").html('<div class="LEDblue_on"></div>Power'); + } else { + $("#fermentor_powerled").html('<div class="LEDblue_off"></div>Power'); + } + if (record.online && (record.alarm != "0")) { + $("#fermentor_alarmled").html('<div class="LEDred_on"></div>Alarm'); + } else { + $("#fermentor_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")) { + $("#fermentor_led1").html('<div class="LEDgreen_on"></div>Heat'); + } else { + $("#fermentor_led1").html('<div class="LEDgreen_off"></div>Heat'); + } + if (record.online && (record.cooler_state != "0")) { + $("#fermentor_led2").html('<div class="LEDgreen_on"></div>Cool'); + } else { + $("#fermentor_led2").html('<div class="LEDgreen_off"></div>Cool'); + } + if (record.online && (record.fan_state != "0")) { + $("#fermentor_led3").html('<div class="LEDgreen_on"></div>Fan'); + } else { + $("#fermentor_led3").html('<div class="LEDgreen_off"></div>Fan'); + } + + $('#gaugeContainer_air').jqxGauge({ value: record.air_temperature }); if (record.online && (record.air_state == "OK")) { $("#gaugeContainer_air").jqxGauge({ disabled: false }); @@ -140,12 +173,6 @@ } else { $("#gaugeContainer_chiller").jqxGauge({ disabled: true }); } - - html = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high.toFixed(1) + "</span></div>"; - html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low.toFixed(1) + "</span></div>"; - html += "<div>Air <span class='temperature NUM'>" + record.air_temperature.toFixed(3) + "</span></div>"; - html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature.toFixed(3) + "</span></div>"; - $("#fermenter_tempdigits").html(html); } });
--- a/www/mon_fermenter.php Mon Jan 07 16:46:43 2019 +0100 +++ b/www/mon_fermenter.php Mon Jan 07 22:35:32 2019 +0100 @@ -3,17 +3,54 @@ page_header('Monitor Fermentation', 'mon_fermenter'); ?> - <div id="MainPanel"> - <div id="ContentPanel"></div> - <div id='fermenter_thermometers'> + <div id="fermenter"> + + <div style="float: left; width: 970px;"> + <div id="fermenter_table"> + <div id="fermenter_info"></div> + </div> + <div id='fermenter_thermometers'> <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div> <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div> <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div> - <div id="fermenter_tempdigits"></div> </div> - <div style="float: right; margin-top: 20px; margin-bottom: 5px;"> - <input style="margin-right: 600px;" type="button" id="FLog" value="Vergisting log" /> - </div> + </div> <!-- End left side --> + + <div style="float: right; width: 295px; background-color: #ddd;"> + <div id="fermentor_panel_top"> + <div id="fermentor_selector"> + + </div> + <div id="fermentor_alarmled"></div> + <div id="fermentor_powerled"></div> + </div> <!-- fermenter_panel_top --> + + <div id="fermentor_panel_display"> + <div id="fermentor_display1"> + <div id="target_hi" class="htemp"></div> + <div id="target_lo" class="ltemp"></div>Sp + </div> + <div id="fermentor_display2"> + <div id="load_air" class="dtemp"></div>Air + </div> + <div id="fermentor_display3"> + <div id="load_beer" class="dtemp"></div>Beer + </div> + </div> <!-- fermentor_panel_display --> + + <div id="fermentor_panel_control"> + <div id="fermentor_led1"></div> + <div id="fermentor_led2"></div> + <div id="fermentor_led3"></div> + <div id="fermentor_toggle1"></div> + <div id="fermentor_toggle2"></div> + <div id="fermentor_toggle3"></div> + </div> <!-- fermentor_panel_control --> + + <div id="fermentor_panel_buttons"> + <input type="button" id="FLog" value="Vergisting log" /> + </div> <!-- fermentor_panel_buttons --> + </div> <!-- End right side --> </div> <?php
