comparison: www/index.php
www/index.php
- changeset 8
- 50545c3e36c6
- parent 7
- 59048cd5f00d
- child 9
- 5b384299cc53
equal
deleted
inserted
replaced
| 7:59048cd5f00d | 8:50545c3e36c6 |
|---|---|
| 18 <script src="jqwidgets/jqxpanel.js"></script> | 18 <script src="jqwidgets/jqxpanel.js"></script> |
| 19 <script src="jqwidgets/jqxtree.js"></script> | 19 <script src="jqwidgets/jqxtree.js"></script> |
| 20 <script src="jqwidgets/jqxexpander.js"></script> | 20 <script src="jqwidgets/jqxexpander.js"></script> |
| 21 <script src="jqwidgets/jqxsplitter.js"></script> | 21 <script src="jqwidgets/jqxsplitter.js"></script> |
| 22 <script src="jqwidgets/jqxdata.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> | |
| 23 <script> | 29 <script> |
| 24 $(document).ready(function () { | 30 $(document).ready(function () { |
| 25 /* | 31 /* |
| 26 * Different right panel pages | 32 * Different right panel pages |
| 27 */ | 33 */ |
| 28 var refreshIntervalId = 0; | 34 var refreshIntervalId = 0; |
| 29 var aFermenter = '<div class="fermenterContainer">Fermenter scherm </div>'; | 35 $("#fermentor_thermometers").hide(); |
| 30 $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] }); | 36 $("#splitter").jqxSplitter({ theme: "<?php echo $my_style; ?>", width: 1278, height: 618, panels: [{ size: 250}] }); |
| 31 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); | 37 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); |
| 32 /* | 38 /* |
| 33 * Build the nodes subtree | 39 * Build the nodes subtree |
| 34 */ | 40 */ |
| 57 if (refreshIntervalId > 0) { | 63 if (refreshIntervalId > 0) { |
| 58 console.log( "RefreshIIntervald: " + refreshIntervalId + " stopped" ); | 64 console.log( "RefreshIIntervald: " + refreshIntervalId + " stopped" ); |
| 59 clearInterval(refreshIntervalId); | 65 clearInterval(refreshIntervalId); |
| 60 refreshIntervalId = 0; | 66 refreshIntervalId = 0; |
| 61 } | 67 } |
| 68 $("#fermentor_thermometers").hide(); | |
| 69 $("#gaugeContainer_air").hide(); | |
| 70 $("#gaugeContainer_beer").hide(); | |
| 71 $("#gaugeContainer_chiller").hide(); | |
| 62 /* | 72 /* |
| 63 * Process the selected id from the left panel tree and show the correct page in the right panel. | 73 * Process the selected id from the left panel tree and show the correct page in the right panel. |
| 64 */ | 74 */ |
| 65 var estr = event.args.element.id; | 75 var estr = event.args.element.id; |
| 66 if (estr == "Root") { | 76 if (estr == "Root") { |
| 67 $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>"); | 77 $("#ContentPanel").html("<div style='margin: 10px;'>RrrR</div>"); |
| 78 | |
| 68 } else if (estr.indexOf("node-", 0) == 0) { | 79 } else if (estr.indexOf("node-", 0) == 0) { |
| 69 // Load and show a node. | 80 // Load and show a node. |
| 70 // The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7 | 81 // The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7 |
| 71 var uuid = estr.substr(5); | 82 var uuid = estr.substr(5); |
| 72 var url = "getnode.php?uuid='" + uuid + "'"; | 83 var url = "getnode.php?uuid='" + uuid + "'"; |
| 137 refreshIntervalId = setInterval(function(){ | 148 refreshIntervalId = setInterval(function(){ |
| 138 dataAdapter.dataBind(); | 149 dataAdapter.dataBind(); |
| 139 }, 30000); | 150 }, 30000); |
| 140 | 151 |
| 141 } else if (estr.indexOf("fermenter-", 0) == 0) { | 152 } else if (estr.indexOf("fermenter-", 0) == 0) { |
| 142 var uuid = estr.substr(10); | 153 // Load and show a fermenter. |
| 143 $("#ContentPanel").html("<div style='margin: 10px;'>" + uuid + "</div>"); | 154 // The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7 |
| 155 var gaugeoptions = { | |
| 156 min: -5, max: 35, width: 275, height: 275, | |
| 157 ranges: [{ startValue: -5, endValue: 0, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 }, | |
| 158 { startValue: 0, endValue: 16, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 }, | |
| 159 { startValue: 16, endValue: 24, style: { fill: '#FCA76A', stroke: '#FCA76A' }, endWidth: 10, startWidth: 10 }, | |
| 160 { startValue: 24, endValue: 35, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }, endWidth: 10, startWidth: 10 }], | |
| 161 ticksMinor: { interval: 1, size: '5%' }, | |
| 162 ticksMajor: { interval: 5, size: '9%' }, | |
| 163 labels: { interval: 5 }, | |
| 164 style: { fill: '#eeeeee', stroke: '#666666' }, | |
| 165 value: 0, | |
| 166 colorScheme: 'scheme05', | |
| 167 animationDuration: 1200 | |
| 168 }; | |
| 169 var gaugeSmalloptions = { | |
| 170 min: -20, max: 25, width: 150, height: 150, | |
| 171 ranges: [{ startValue: -20, endValue: 0, startWidth: 5, endWidth: 5, style: { fill: '#3399FF', stroke: '#3399FF' }}, | |
| 172 { startValue: 0, endValue: 25, startWidth: 5, endWidth: 5, style: { fill: '#FC6A6A', stroke: '#FC6A6A' }}], | |
| 173 ticksMinor: { interval: 1, size: '5%' }, | |
| 174 ticksMajor: { interval: 5, size: '9%' }, | |
| 175 labels: { interval: 5 }, | |
| 176 style: { fill: '#eeeeee', stroke: '#666666' }, | |
| 177 value: 0, | |
| 178 colorScheme: 'scheme05', | |
| 179 animationDuration: 1200, | |
| 180 caption: { value: 'Chiller', position: 'bottom', offset: [0, 10] } | |
| 181 }; | |
| 182 $("#fermentor_thermometers").show(); | |
| 183 $("#gaugeContainer_air").show(); | |
| 184 $("#gaugeContainer_air").jqxGauge( gaugeoptions ); | |
| 185 $("#gaugeContainer_air").jqxGauge( { caption: { value: 'Air', position: 'bottom', offset: [0, 10] }} ); | |
| 186 $("#gaugeContainer_beer").show(); | |
| 187 $("#gaugeContainer_beer").jqxGauge( gaugeoptions ); | |
| 188 $("#gaugeContainer_beer").jqxGauge( { caption: { value: 'Beer', position: 'bottom', offset: [0, 10] }} ); | |
| 189 $("#gaugeContainer_chiller").show(); | |
| 190 $("#gaugeContainer_chiller").jqxGauge( gaugeSmalloptions ); | |
| 191 var uuid = estr.substr(10); | |
| 192 var url = "getfermenter.php?uuid='" + uuid + "'"; | |
| 193 var source = { | |
| 194 datatype: "json", | |
| 195 datafields: [ | |
| 196 { name: 'record', type: 'int' }, | |
| 197 { name: 'uuid', type: 'string' }, | |
| 198 { name: 'alias', type: 'string' }, | |
| 199 { name: 'node', type: 'string' }, | |
| 200 { name: 'online', type: 'bool' }, | |
| 201 { name: 'beercode', type: 'string' }, | |
| 202 { name: 'beername', type: 'string' }, | |
| 203 { name: 'air_address', type: 'string' }, | |
| 204 { name: 'air_state', type: 'string' }, | |
| 205 { name: 'air_temperature', type: 'float' }, | |
| 206 { name: 'beer_address', type: 'string' }, | |
| 207 { name: 'beer_state', type: 'string' }, | |
| 208 { name: 'beer_temperature', type: 'float' }, | |
| 209 { name: 'chiller_address', type: 'string' }, | |
| 210 { name: 'chiller_state', type: 'string' }, | |
| 211 { name: 'chiller_temperature', type: 'float' }, | |
| 212 { name: 'heater_address', type: 'string' }, | |
| 213 { name: 'heater_state', type: 'int' }, | |
| 214 { name: 'heater_usage', type: 'int' }, | |
| 215 { name: 'cooler_address', type: 'string' }, | |
| 216 { name: 'cooler_state', type: 'int' }, | |
| 217 { name: 'cooler_usage', type: 'int' }, | |
| 218 { name: 'fan_address', type: 'string' }, | |
| 219 { name: 'fan_state', type: 'int' }, | |
| 220 { name: 'fan_usage', type: 'int' }, | |
| 221 { name: 'light_address', type: 'string' }, | |
| 222 { name: 'light_state', type: 'int' }, | |
| 223 { name: 'light_usage', type: 'int' }, | |
| 224 { name: 'door_address', type: 'string' }, | |
| 225 { name: 'door_state', type: 'int' }, | |
| 226 { name: 'psu_address', type: 'string' }, | |
| 227 { name: 'psu_state', type: 'int' }, | |
| 228 { name: 'mode', type: 'string' }, | |
| 229 { name: 'alarm', type: 'int' }, | |
| 230 { name: 'setpoint_high', type: 'float' }, | |
| 231 { name: 'setpoint_low', type: 'float' }, | |
| 232 { name: 'profile_uuid', type: 'string' }, | |
| 233 { name: 'profile_name', type: 'string' }, | |
| 234 { name: 'profile_state', type: 'string' }, | |
| 235 { name: 'profile_precent', type: 'int' }, | |
| 236 { name: 'profile_inittemp_high', type: 'float' }, | |
| 237 { name: 'profile_inittemp_low', type: 'float' }, | |
| 238 { name: 'profile_steps', type: 'string' }, | |
| 239 { name: 'stage', type: 'string' } | |
| 240 ], | |
| 241 id: 'record', | |
| 242 url: url | |
| 243 }; | |
| 244 var dataAdapter = new $.jqx.dataAdapter(source, { | |
| 245 loadComplete: function (records) { | |
| 246 var record = dataAdapter.records[0]; | |
| 247 var oline = (record.online) ? "On-line" : "Off-line"; | |
| 248 var html = "<div id='fermenter_table'>"; | |
| 249 html += "<table style='width: 100%; padding: 10px;'>"; | |
| 250 html += "<tr><th colspan=2>Klimaatkast overzicht</th></tr>"; | |
| 251 html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; | |
| 252 html += "<tr><td>Systeem</td><td>" + record.node + "/" + record.alias + " " + oline + "</td></tr>"; | |
| 253 html += "<tr><td>Bier</td><td>" + record.beercode + " - " + record.beername + "</td></tr>"; | |
| 254 html += "<tr><td>Werking</td><td>" + record.mode + "</td></tr>"; | |
| 255 html += "<tr><td>Fase</td><td>" + record.stage + "</td></tr>" | |
| 256 html += "</<table>"; | |
| 257 html += "</div>"; | |
| 258 $("#ContentPanel").html(html); | |
| 259 $('#gaugeContainer_air').jqxGauge({ value: record.air_temperature }); | |
| 260 if (record.online && (record.air_state == "OK")) { | |
| 261 $("#gaugeContainer_air").jqxGauge({ disabled: false }); | |
| 262 } else { | |
| 263 $("#gaugeContainer_air").jqxGauge({ disabled: true }); | |
| 264 } | |
| 265 $('#gaugeContainer_beer').jqxGauge({ value: record.beer_temperature }); | |
| 266 if (record.online && (record.beer_state == "OK")) { | |
| 267 $("#gaugeContainer_beer").jqxGauge({ disabled: false }); | |
| 268 } else { | |
| 269 $("#gaugeContainer_beer").jqxGauge({ disabled: true }); | |
| 270 } | |
| 271 $("#gaugeContainer_chiller").jqxGauge({ value: record.chiller_temperature }); | |
| 272 if (record.online && (record.chiller_state == "OK")) { | |
| 273 $("#gaugeContainer_chiller").jqxGauge({ disabled: false }); | |
| 274 } else { | |
| 275 $("#gaugeContainer_chiller").jqxGauge({ disabled: true }); | |
| 276 } | |
| 277 } | |
| 278 }); | |
| 279 // Get the data immediatly and then at regular intervals to refresh. | |
| 280 dataAdapter.dataBind(); | |
| 281 refreshIntervalId = setInterval(function(){ | |
| 282 dataAdapter.dataBind(); | |
| 283 }, 10000); | |
| 284 | |
| 144 } else if (event.args.element.id == "Nodes") { | 285 } else if (event.args.element.id == "Nodes") { |
| 145 $("#ContentPanel").html("<div></div"); | 286 $("#ContentPanel").html("<div></div"); |
| 146 } else { | 287 } else { |
| 147 $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>"); | 288 $("#ContentPanel").html("<div style='margin: 10px;'>" + event.args.element.id + "</div>"); |
| 148 } | 289 } |
| 193 </ul> | 334 </ul> |
| 194 </li> | 335 </li> |
| 195 </ul> | 336 </ul> |
| 196 </div> <!-- jqxTree --> | 337 </div> <!-- jqxTree --> |
| 197 </div> <!-- tree panel --> | 338 </div> <!-- tree panel --> |
| 198 <div id="ContentPanel"> | 339 <div id="RightPanel"> |
| 340 <div id="ContentPanel"></div> | |
| 341 <div id='fermentor_thermometers'> | |
| 342 <div id="gaugeContainer_air" style='float: left; margin-top: 10px; margin-left: 10px;'></div> | |
| 343 <div id="gaugeContainer_beer" style="float: right; margin-top: 10px; margin-right: 10px;"></div> | |
| 344 <div id="gaugeContainer_chiller" style="float: left; margin-top: 15px;"></div> | |
| 345 </div> | |
| 199 </div> | 346 </div> |
| 200 </div> <!--- splitter --> | 347 </div> <!--- splitter --> |
| 201 </div> <!-- jqxWidget --> | 348 </div> <!-- jqxWidget --> |
| 202 </body> | 349 </body> |
| 203 </html> | 350 </html> |
