Thu, 13 Dec 2018 20:32:36 +0100
Added EBC color examples. Added simple progessbars for hop flavour and aroma contribution. We need something better. In the fermentables tab, above the grid display the malt color and OG estimates. Display supplier as well in the fermentables grid.
<?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(); ?>