changeset
Fermenter thermomenters are in place.
Sat, 11 Aug 2018 16:36:45 +0200
- author
- Michiel Broek <mbroek@mbse.eu>
- date
- Sat, 11 Aug 2018 16:36:45 +0200
- changeset 8
- 50545c3e36c6
- parent 7
- 59048cd5f00d
- child 9
- 5b384299cc53
Fermenter thermomenters are in place.
| www/css/style.css | file | annotate | diff | comparison | revisions | |
| www/index.php | file | annotate | diff | comparison | revisions |
--- a/www/css/style.css Fri Aug 10 21:22:09 2018 +0200 +++ b/www/css/style.css Sat Aug 11 16:36:45 2018 +0200 @@ -57,6 +57,28 @@ } + +#fermenter_table { + width: 720px; + background: #252526; + margin: 5px; + border: 2px solid; + border-color: #888; + border-radius: 5px 5px 5px 5px; +} + + +#fermentor_thermometers { + width: 720px; + height: 295px; + background-color: #252526; + margin: 5px; + border: 2px solid; + border-color: #888; + border-radius: 5px 5px 5px 5px; +} + + .LEDred_on { margin: 5px auto; width: 12px;
--- a/www/index.php Fri Aug 10 21:22:09 2018 +0200 +++ b/www/index.php Sat Aug 11 16:36:45 2018 +0200 @@ -20,13 +20,19 @@ <script src="jqwidgets/jqxexpander.js"></script> <script src="jqwidgets/jqxsplitter.js"></script> <script src="jqwidgets/jqxdata.js"></script> + <script src="jqwidgets/jqxcheckbox.js"></script> + <script src="jqwidgets/jqxradiobutton.js"></script> + <script src="jqwidgets/jqxchart.core.js"></script> + <script src="jqwidgets/jqxgauge.js"></script> + <script src="jqwidgets/jqxdraw.js"></script> + <script src="jqwidgets/jqxtooltip.js"></script> <script> $(document).ready(function () { /* * Different right panel pages */ var refreshIntervalId = 0; - var aFermenter = '<div class="fermenterContainer">Fermenter scherm </div>'; + $("#fermentor_thermometers").hide(); $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] }); $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); /* @@ -59,12 +65,17 @@ clearInterval(refreshIntervalId); refreshIntervalId = 0; } + $("#fermentor_thermometers").hide(); + $("#gaugeContainer_air").hide(); + $("#gaugeContainer_beer").hide(); + $("#gaugeContainer_chiller").hide(); /* * Process the selected id from the left panel tree and show the correct page in the right panel. */ var estr = event.args.element.id; if (estr == "Root") { - $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>"); + $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>"); + } else if (estr.indexOf("node-", 0) == 0) { // Load and show a node. // The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7 @@ -139,8 +150,138 @@ }, 30000); } else if (estr.indexOf("fermenter-", 0) == 0) { - var uuid = estr.substr(10); - $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>"); + // Load and show a fermenter. + // The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7 + 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] } + }; + $("#fermentor_thermometers").show(); + $("#gaugeContainer_air").show(); + $("#gaugeContainer_air").jqxGauge( gaugeoptions ); + $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} ); + $("#gaugeContainer_beer").show(); + $("#gaugeContainer_beer").jqxGauge( gaugeoptions ); + $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} ); + $("#gaugeContainer_chiller").show(); + $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions ); + var uuid = estr.substr(10); + 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 }); + } + } + }); + // Get the data immediatly and then at regular intervals to refresh. + dataAdapter.dataBind(); + refreshIntervalId = setInterval(function(){ + dataAdapter.dataBind(); + }, 10000); + } else if (event.args.element.id == "Nodes") { $("#ContentPanel").html("<div></div"); } else { @@ -195,7 +336,13 @@ </ul> </div> <!-- jqxTree --> </div> <!-- tree panel --> - <div id="ContentPanel"> + <div id="RightPanel"> + <div id="ContentPanel"></div> + <div id='fermentor_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> </div> </div> <!--- splitter --> </div> <!-- jqxWidget -->
