Tue, 25 Dec 2018 13:42:36 +0100
Import from brouwhulp fix style color ranges. Added calcSVG and calcABV calculation. Added batch size, time, efficiency and og change actions. Added style select and redesigned the first tab to fit this in. When equipment is changed, recalculate the recipe. Added print button.
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php'); page_header('Hoofdmenu', NULL); $uuid = $_GET["uuid"]; ?> <script> $(document).ready(function () { 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 }], ticksMinor: { interval: 1, size: '5%' }, ticksMajor: { interval: 5, size: '9%' }, labels: { interval: 5 }, style: { fill: '#eeeeee', stroke: '#666666' }, value: 0, colorScheme: 'scheme05', 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' }}], ticksMinor: { interval: 1, size: '5%' }, ticksMajor: { interval: 5, size: '9%' }, labels: { interval: 5 }, style: { fill: '#eeeeee', stroke: '#666666' }, value: 0, colorScheme: 'scheme05', animationDuration: 1200, caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] } }; $("#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 ); var uuid = "<?php echo $uuid; ?>"; var url = "getfermenter.php?uuid='" + uuid + "'"; var source = { datatype: "json", datafields: [ { name: 'record', type: 'int' }, { name: 'uuid', type: 'string' }, { name: 'alias', type: 'string' }, { name: 'node', type: 'string' }, { name: 'online', type: 'bool' }, { name: 'beercode', type: 'string' }, { name: 'beername', type: 'string' }, { name: 'air_address', type: 'string' }, { name: 'air_state', type: 'string' }, { name: 'air_temperature', type: 'float' }, { name: 'beer_address', type: 'string' }, { name: 'beer_state', type: 'string' }, { name: 'beer_temperature', type: 'float' }, { name: 'chiller_address', type: 'string' }, { name: 'chiller_state', type: 'string' }, { name: 'chiller_temperature', type: 'float' }, { name: 'heater_address', type: 'string' }, { name: 'heater_state', type: 'int' }, { name: 'heater_usage', type: 'int' }, { name: 'cooler_address', type: 'string' }, { name: 'cooler_state', type: 'int' }, { name: 'cooler_usage', type: 'int' }, { name: 'fan_address', type: 'string' }, { name: 'fan_state', type: 'int' }, { name: 'fan_usage', type: 'int' }, { name: 'light_address', type: 'string' }, { name: 'light_state', type: 'int' }, { name: 'light_usage', type: 'int' }, { name: 'door_address', type: 'string' }, { name: 'door_state', type: 'int' }, { name: 'psu_address', type: 'string' }, { name: 'psu_state', type: 'int' }, { name: 'mode', type: 'string' }, { name: 'alarm', type: 'int' }, { name: 'setpoint_high', type: 'float' }, { name: 'setpoint_low', type: 'float' }, { name: 'profile_uuid', type: 'string' }, { name: 'profile_name', type: 'string' }, { name: 'profile_state', type: 'string' }, { name: 'profile_precent', type: 'int' }, { name: 'profile_inittemp_high', type: 'float' }, { name: 'profile_inittemp_low', type: 'float' }, { name: 'profile_steps', type: 'string' }, { name: 'stage', type: 'string' } ], id: 'record', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { 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;'>"; 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>"; html += "<tr><td>Bier</td><td>" + record.beercode + " - " + record.beername + "</td></tr>"; 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); $('#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({ value: record.beer_temperature }); if (record.online && (record.beer_state == "OK")) { $("#gaugeContainer_beer").jqxGauge({ disabled: false }); } else { $("#gaugeContainer_beer").jqxGauge({ disabled: true }); } $("#gaugeContainer_chiller").jqxGauge({ value: record.chiller_temperature }); if (record.online && (record.chiller_state == "OK")) { $("#gaugeContainer_chiller").jqxGauge({ disabled: false }); } 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); } }); // Get the data immediatly and then at regular intervals to refresh. dataAdapter.dataBind(); setInterval(function(){ dataAdapter.dataBind(); }, 10000); }); </script> <div id="MainPanel"> <div id="ContentPanel"></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> <?php page_footer(); ?>