comparison: www/monitor.php
www/monitor.php
- changeset 17
- bb97e0de63cf
- parent 16
- 522022b4fae4
- child 18
- 395833e20f88
equal
deleted
inserted
replaced
| 16:522022b4fae4 | 17:bb97e0de63cf |
|---|---|
| 1 <?php | |
| 2 $my_style = 'android'; | |
| 3 require_once('version.php'); | |
| 4 ?> | |
| 5 <!DOCTYPE html> | |
| 6 <html lang="en"> | |
| 7 <head>' | |
| 8 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| 9 <title id='Description'>Brewery Managment System v<?php echo $my_version; ?></title> | |
| 10 <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> | |
| 11 <link type="text/css" href="jqwidgets/styles/jqx.base.css" rel="stylesheet" /> | |
| 12 <link type="text/css" href="jqwidgets/styles/jqx.<?php echo $my_style; ?>.css" rel="stylesheet" /> | |
| 13 <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> | |
| 14 <script src="js/jquery-1.11.1.min.js"></script> | |
| 15 <script src="jqwidgets/jqxcore.js"></script> | |
| 16 <script src="jqwidgets/jqxbuttons.js"></script> | |
| 17 <script src="jqwidgets/jqxscrollbar.js"></script> | |
| 18 <script src="jqwidgets/jqxpanel.js"></script> | |
| 19 <script src="jqwidgets/jqxtree.js"></script> | |
| 20 <script src="jqwidgets/jqxexpander.js"></script> | |
| 21 <script src="jqwidgets/jqxsplitter.js"></script> | |
| 22 <script src="jqwidgets/jqxdata.js"></script> | |
| 23 <script src="jqwidgets/jqxcheckbox.js"></script> | |
| 24 <script src="jqwidgets/jqxradiobutton.js"></script> | |
| 25 <script src="jqwidgets/jqxchart.core.js"></script> | |
| 26 <script src="jqwidgets/jqxgauge.js"></script> | |
| 27 <script src="jqwidgets/jqxdraw.js"></script> | |
| 28 <script src="jqwidgets/jqxtooltip.js"></script> | |
| 29 <script> | |
| 30 $(document).ready(function () { | |
| 31 /* | |
| 32 * Different right panel pages | |
| 33 */ | |
| 34 var refreshIntervalId = 0; | |
| 35 $("#fermenter_thermometers").hide(); | |
| 36 $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] }); | |
| 37 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); | |
| 38 /* | |
| 39 * Build the fermenters subtree | |
| 40 */ | |
| 41 var fermenterByID = $("#jqxTree").find("#Fermenters")[0]; | |
| 42 $.getJSON("getfermenters.php", function(data) { | |
| 43 for( i = 0; i < data.length; i++ ) { | |
| 44 $("#jqxTree").jqxTree("addTo", { id: 'fermenter-' + data[i].uuid, label: data[i].node + "/" + data[i].alias, icon: 'images/folder.png' }, fermenterByID); | |
| 45 } | |
| 46 }); | |
| 47 | |
| 48 $("#jqxTree").css("visibility", "visible"); | |
| 49 | |
| 50 $("#jqxTree").on("select", function (event) { | |
| 51 /* | |
| 52 * Cancel a running refresh loop. | |
| 53 */ | |
| 54 if (refreshIntervalId > 0) { | |
| 55 console.log( "RefreshIIntervald: " + refreshIntervalId + " stopped" ); | |
| 56 clearInterval(refreshIntervalId); | |
| 57 refreshIntervalId = 0; | |
| 58 } | |
| 59 $("#fermenter_thermometers").hide(); | |
| 60 $("#gaugeContainer_air").hide(); | |
| 61 $("#gaugeContainer_beer").hide(); | |
| 62 $("#gaugeContainer_chiller").hide(); | |
| 63 /* | |
| 64 * Process the selected id from the left panel tree and show the correct page in the right panel. | |
| 65 */ | |
| 66 var estr = event.args.element.id; | |
| 67 if (estr == "Root") { | |
| 68 $("#ContentPanel").html("<div style='margin: 10px;'><a href='index.php'>Hoofdmenu</a></div>"); | |
| 69 | |
| 70 } else if (estr.indexOf("fermenter-", 0) == 0) { | |
| 71 // Load and show a fermenter. | |
| 72 // The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7 | |
| 73 var gaugeoptions = { | |
| 74 min: -5, max: 35, width: 275, height: 275, | |
| 75 ranges: [{ startValue: -5, endValue: 0, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 }, | |
| 76 { startValue: 0, endValue: 16, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 }, | |
| 77 { startValue: 16, endValue: 24, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 10, startWidth: 10 }, | |
| 78 { startValue: 24, endValue: 35, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 10, startWidth: 10 }], | |
| 79 ticksMinor: { interval: 1, size: '5%' }, | |
| 80 ticksMajor: { interval: 5, size: '9%' }, | |
| 81 labels: { interval: 5 }, | |
| 82 style: { fill: '#eeeeee', stroke: '#666666' }, | |
| 83 value: 0, | |
| 84 colorScheme: 'scheme05', | |
| 85 animationDuration: 1200 | |
| 86 }; | |
| 87 var gaugeSmalloptions = { | |
| 88 min: -20, max: 25, width: 150, height: 150, | |
| 89 ranges: [{ startValue: -20, endValue: 0, startWidth: 5, endWidth: 5, style: { fill: '#3399FF', stroke: '#3399FF' }}, | |
| 90 { startValue: 0, endValue: 25, startWidth: 5, endWidth: 5, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }}], | |
| 91 ticksMinor: { interval: 1, size: '5%' }, | |
| 92 ticksMajor: { interval: 5, size: '9%' }, | |
| 93 labels: { interval: 5 }, | |
| 94 style: { fill: '#eeeeee', stroke: '#666666' }, | |
| 95 value: 0, | |
| 96 colorScheme: 'scheme05', | |
| 97 animationDuration: 1200, | |
| 98 caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] } | |
| 99 }; | |
| 100 $("#fermenter_thermometers").show(); | |
| 101 $("#gaugeContainer_air").show(); | |
| 102 $("#gaugeContainer_air").jqxGauge( gaugeoptions ); | |
| 103 $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} ); | |
| 104 $("#gaugeContainer_beer").show(); | |
| 105 $("#gaugeContainer_beer").jqxGauge( gaugeoptions ); | |
| 106 $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} ); | |
| 107 $("#gaugeContainer_chiller").show(); | |
| 108 $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions ); | |
| 109 var uuid = estr.substr(10); | |
| 110 var url = "getfermenter.php?uuid='" + uuid + "'"; | |
| 111 var source = { | |
| 112 datatype: "json", | |
| 113 datafields: [ | |
| 114 { name: 'record', type: 'int' }, | |
| 115 { name: 'uuid', type: 'string' }, | |
| 116 { name: 'alias', type: 'string' }, | |
| 117 { name: 'node', type: 'string' }, | |
| 118 { name: 'online', type: 'bool' }, | |
| 119 { name: 'beercode', type: 'string' }, | |
| 120 { name: 'beername', type: 'string' }, | |
| 121 { name: 'air_address', type: 'string' }, | |
| 122 { name: 'air_state', type: 'string' }, | |
| 123 { name: 'air_temperature', type: 'float' }, | |
| 124 { name: 'beer_address', type: 'string' }, | |
| 125 { name: 'beer_state', type: 'string' }, | |
| 126 { name: 'beer_temperature', type: 'float' }, | |
| 127 { name: 'chiller_address', type: 'string' }, | |
| 128 { name: 'chiller_state', type: 'string' }, | |
| 129 { name: 'chiller_temperature', type: 'float' }, | |
| 130 { name: 'heater_address', type: 'string' }, | |
| 131 { name: 'heater_state', type: 'int' }, | |
| 132 { name: 'heater_usage', type: 'int' }, | |
| 133 { name: 'cooler_address', type: 'string' }, | |
| 134 { name: 'cooler_state', type: 'int' }, | |
| 135 { name: 'cooler_usage', type: 'int' }, | |
| 136 { name: 'fan_address', type: 'string' }, | |
| 137 { name: 'fan_state', type: 'int' }, | |
| 138 { name: 'fan_usage', type: 'int' }, | |
| 139 { name: 'light_address', type: 'string' }, | |
| 140 { name: 'light_state', type: 'int' }, | |
| 141 { name: 'light_usage', type: 'int' }, | |
| 142 { name: 'door_address', type: 'string' }, | |
| 143 { name: 'door_state', type: 'int' }, | |
| 144 { name: 'psu_address', type: 'string' }, | |
| 145 { name: 'psu_state', type: 'int' }, | |
| 146 { name: 'mode', type: 'string' }, | |
| 147 { name: 'alarm', type: 'int' }, | |
| 148 { name: 'setpoint_high', type: 'float' }, | |
| 149 { name: 'setpoint_low', type: 'float' }, | |
| 150 { name: 'profile_uuid', type: 'string' }, | |
| 151 { name: 'profile_name', type: 'string' }, | |
| 152 { name: 'profile_state', type: 'string' }, | |
| 153 { name: 'profile_precent', type: 'int' }, | |
| 154 { name: 'profile_inittemp_high', type: 'float' }, | |
| 155 { name: 'profile_inittemp_low', type: 'float' }, | |
| 156 { name: 'profile_steps', type: 'string' }, | |
| 157 { name: 'stage', type: 'string' } | |
| 158 ], | |
| 159 id: 'record', | |
| 160 url: url | |
| 161 }; | |
| 162 var dataAdapter = new $.jqx.dataAdapter(source, { | |
| 163 loadComplete: function (records) { | |
| 164 var record = dataAdapter.records[0]; | |
| 165 var oline = (record.online) ? "On-line" : "Off-line"; | |
| 166 var html = "<div id='fermenter_table'>"; | |
| 167 html += "<table style='width: 100%; padding: 10px;'>"; | |
| 168 html += "<tr><th colspan=2>Klimaatkast overzicht</th></tr>"; | |
| 169 html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; | |
| 170 html += "<tr><td>Systeem</td><td>" + record.node + "/" + record.alias + " " + oline + "</td></tr>"; | |
| 171 html += "<tr><td>Bier</td><td>" + record.beercode + " - " + record.beername + "</td></tr>"; | |
| 172 html += "<tr><td>Werking</td><td>" + record.mode + "</td></tr>"; | |
| 173 html += "<tr><td>Fase</td><td>" + record.stage + "</td></tr>" | |
| 174 html += "</<table>"; | |
| 175 html += "</div>"; | |
| 176 $("#ContentPanel").html(html); | |
| 177 $('#gaugeContainer_air').jqxGauge({ value: record.air_temperature }); | |
| 178 if (record.online && (record.air_state == "OK")) { | |
| 179 $("#gaugeContainer_air").jqxGauge({ disabled: false }); | |
| 180 } else { | |
| 181 $("#gaugeContainer_air").jqxGauge({ disabled: true }); | |
| 182 } | |
| 183 $('#gaugeContainer_beer').jqxGauge({ value: record.beer_temperature }); | |
| 184 if (record.online && (record.beer_state == "OK")) { | |
| 185 $("#gaugeContainer_beer").jqxGauge({ disabled: false }); | |
| 186 } else { | |
| 187 $("#gaugeContainer_beer").jqxGauge({ disabled: true }); | |
| 188 } | |
| 189 $("#gaugeContainer_chiller").jqxGauge({ value: record.chiller_temperature }); | |
| 190 if (record.online && (record.chiller_state == "OK")) { | |
| 191 $("#gaugeContainer_chiller").jqxGauge({ disabled: false }); | |
| 192 } else { | |
| 193 $("#gaugeContainer_chiller").jqxGauge({ disabled: true }); | |
| 194 } | |
| 195 html = "<div>SpH <span class='temperature NUM'>" + record.setpoint_high + "</span></div>"; | |
| 196 html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low + "</span></div>"; | |
| 197 html += "<div>Air <span class='temperature NUM'>" + record.air_temperature + "</span></div>"; | |
| 198 html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature + "</span></div>"; | |
| 199 $("#fermenter_tempdigits").html(html); | |
| 200 } | |
| 201 }); | |
| 202 // Get the data immediatly and then at regular intervals to refresh. | |
| 203 dataAdapter.dataBind(); | |
| 204 refreshIntervalId = setInterval(function(){ | |
| 205 dataAdapter.dataBind(); | |
| 206 }, 10000); | |
| 207 | |
| 208 } else if (event.args.element.id == "Nodes") { | |
| 209 $("#ContentPanel").html("<div></div"); | |
| 210 } else { | |
| 211 $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>"); | |
| 212 } | |
| 213 }); | |
| 214 }); | |
| 215 </script> | |
| 216 </head> | |
| 217 | |
| 218 <body class="default"> | |
| 219 <div id="jqxWidget"> | |
| 220 <div id="header"> | |
| 221 <div id="title">BMS <?php echo $my_version; ?></div> | |
| 222 </div> <!-- header --> | |
| 223 <div id="splitter"> | |
| 224 <div> <!-- tree panel --> | |
| 225 <div style="visibility: hidden; border: none;" id='jqxTree'> | |
| 226 <ul> | |
| 227 <li id="Root" item-expanded='true'> | |
| 228 <img style='float: left; margin-right: 5px;' src='images/earth.png' /> | |
| 229 <span item-title="true">Root</span> | |
| 230 <ul> | |
| 231 <li id="Fermenters"> | |
| 232 <img style='float: left; margin-right: 5px;' src='images/folder.png' /> | |
| 233 <span item-title="true">Klimaatkasten</span> | |
| 234 <!-- Subtree fermenters --> | |
| 235 </li> | |
| 236 </ul> | |
| 237 </li> | |
| 238 </ul> | |
| 239 </div> <!-- jqxTree --> | |
| 240 </div> <!-- tree panel --> | |
| 241 <div id="RightPanel"> | |
| 242 <div id="ContentPanel"></div> | |
| 243 <div id='fermenter_thermometers'> | |
| 244 <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div> | |
| 245 <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div> | |
| 246 <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div> | |
| 247 <div id="fermenter_tempdigits"></div> | |
| 248 </div> | |
| 249 </div> | |
| 250 </div> <!--- splitter --> | |
| 251 </div> <!-- jqxWidget --> | |
| 252 </body> | |
| 253 </html> |
