comparison: www/monitor.php
www/monitor.php
- changeset 16
- 522022b4fae4
- parent 10
- 606b4af8f918
equal
deleted
inserted
replaced
| 15:ccbe79db80b8 | 16:522022b4fae4 |
|---|---|
| 34 var refreshIntervalId = 0; | 34 var refreshIntervalId = 0; |
| 35 $("#fermenter_thermometers").hide(); | 35 $("#fermenter_thermometers").hide(); |
| 36 $("#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}] }); |
| 37 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); | 37 $("#jqxTree").jqxTree({ theme: "<?php echo $my_style; ?>", height: "100%", width: "100%" }); |
| 38 /* | 38 /* |
| 39 * Build the nodes subtree | |
| 40 */ | |
| 41 var nodeByID = $("#jqxTree").find("#Nodes")[0]; | |
| 42 $.getJSON("getnodes.php", function(data) { | |
| 43 for( i = 0; i < data.length; i++ ) { | |
| 44 $("#jqxTree").jqxTree("addTo", { id: 'node-' + data[i].uuid, label: data[i].node, icon: 'images/folder.png' }, nodeByID); | |
| 45 } | |
| 46 }); | |
| 47 /* | |
| 48 * Build the fermenters subtree | 39 * Build the fermenters subtree |
| 49 */ | 40 */ |
| 50 var fermenterByID = $("#jqxTree").find("#Fermenters")[0]; | 41 var fermenterByID = $("#jqxTree").find("#Fermenters")[0]; |
| 51 $.getJSON("getfermenters.php", function(data) { | 42 $.getJSON("getfermenters.php", function(data) { |
| 52 for( i = 0; i < data.length; i++ ) { | 43 for( i = 0; i < data.length; i++ ) { |
| 73 * Process the selected id from the left panel tree and show the correct page in the right panel. | 64 * Process the selected id from the left panel tree and show the correct page in the right panel. |
| 74 */ | 65 */ |
| 75 var estr = event.args.element.id; | 66 var estr = event.args.element.id; |
| 76 if (estr == "Root") { | 67 if (estr == "Root") { |
| 77 $("#ContentPanel").html("<div style='margin: 10px;'><a href='index.php'>Hoofdmenu</a></div>"); | 68 $("#ContentPanel").html("<div style='margin: 10px;'><a href='index.php'>Hoofdmenu</a></div>"); |
| 78 | |
| 79 } else if (estr.indexOf("node-", 0) == 0) { | |
| 80 // Load and show a node. | |
| 81 // The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7 | |
| 82 var uuid = estr.substr(5); | |
| 83 var url = "getnode.php?uuid='" + uuid + "'"; | |
| 84 var source = { | |
| 85 datatype: "json", | |
| 86 datafields: [ | |
| 87 { name: 'record', type: 'int' }, | |
| 88 { name: 'uuid', type: 'string' }, | |
| 89 { name: 'node', type: 'string' }, | |
| 90 { name: 'online', type: 'bool' }, | |
| 91 { name: 'group_id', type: 'string' }, | |
| 92 { name: 'hardwaremake', type: 'string' }, | |
| 93 { name: 'hardwaremodel', type: 'string' }, | |
| 94 { name: 'os', type: 'string' }, | |
| 95 { name: 'os_version', type: 'string' }, | |
| 96 { name: 'firmware', type: 'string' }, | |
| 97 { name: 'firstseen', type: 'string' }, | |
| 98 { name: 'lastseen', type: 'string' }, | |
| 99 { name: 'temperature', type: 'float' }, | |
| 100 { name: 'humidity', type: 'float' }, | |
| 101 { name: 'barometer', type: 'float' }, | |
| 102 { name: 'gps_latitude', type: 'float' }, | |
| 103 { name: 'gps_longitude', type: 'float' }, | |
| 104 { name: 'gps_altitude', type: 'float' }, | |
| 105 { name: 'net_address', type: 'string' }, | |
| 106 { name: 'net_ifname', type: 'string' }, | |
| 107 { name: 'net_rssi', type: 'int' } | |
| 108 ], | |
| 109 id: 'record', | |
| 110 url: url | |
| 111 }; | |
| 112 var dataAdapter = new $.jqx.dataAdapter(source, { | |
| 113 loadComplete: function (records) { | |
| 114 var record = dataAdapter.records[0]; | |
| 115 var html = "<div style='background: #252526; margin: 50px;'>"; | |
| 116 html += "<table style='width: 100%; padding: 10px;'>"; | |
| 117 html += "<tr><th colspan=2>Systeem overzicht</th></tr>"; | |
| 118 html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; | |
| 119 html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>"; | |
| 120 html += "<tr><td>Online</td><td>" + record.online + "</td></tr>"; | |
| 121 html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>"; | |
| 122 html += "<tr><td>Eerst gezien</td><td>" + record.firstseen + "</td></tr>"; | |
| 123 html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</td></tr>"; | |
| 124 html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>"; | |
| 125 html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>"; | |
| 126 html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>"; | |
| 127 html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>"; | |
| 128 if (record.online) { | |
| 129 html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; | |
| 130 if (record.humidity > 0) { | |
| 131 html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>"; | |
| 132 } | |
| 133 if (record.barometer > 0) { | |
| 134 html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>"; | |
| 135 } | |
| 136 if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) { | |
| 137 html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>"; | |
| 138 } | |
| 139 html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>"; | |
| 140 } | |
| 141 html += "</<table>"; | |
| 142 html += "</div>"; | |
| 143 $("#ContentPanel").html(html); | |
| 144 } | |
| 145 }); | |
| 146 // Get the data immediatly and then at regular intervals to refresh. | |
| 147 dataAdapter.dataBind(); | |
| 148 refreshIntervalId = setInterval(function(){ | |
| 149 dataAdapter.dataBind(); | |
| 150 }, 30000); | |
| 151 | 69 |
| 152 } else if (estr.indexOf("fermenter-", 0) == 0) { | 70 } else if (estr.indexOf("fermenter-", 0) == 0) { |
| 153 // Load and show a fermenter. | 71 // Load and show a fermenter. |
| 154 // The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7 | 72 // The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7 |
| 155 var gaugeoptions = { | 73 var gaugeoptions = { |
| 308 <ul> | 226 <ul> |
| 309 <li id="Root" item-expanded='true'> | 227 <li id="Root" item-expanded='true'> |
| 310 <img style='float: left; margin-right: 5px;' src='images/earth.png' /> | 228 <img style='float: left; margin-right: 5px;' src='images/earth.png' /> |
| 311 <span item-title="true">Root</span> | 229 <span item-title="true">Root</span> |
| 312 <ul> | 230 <ul> |
| 313 <li id="Nodes"> | |
| 314 <img style='float: left; margin-right: 5px;' src='images/folder.png' /> | |
| 315 <span item-title="true">Systemen</span> | |
| 316 <!-- Subtree nodes --> | |
| 317 </li> | |
| 318 <li id="Fermenters"> | 231 <li id="Fermenters"> |
| 319 <img style='float: left; margin-right: 5px;' src='images/folder.png' /> | 232 <img style='float: left; margin-right: 5px;' src='images/folder.png' /> |
| 320 <span item-title="true">Klimaatkasten</span> | 233 <span item-title="true">Klimaatkasten</span> |
| 321 <!-- Subtree fermenters --> | 234 <!-- Subtree fermenters --> |
| 322 </li> | |
| 323 <li id="Brewboards"> | |
| 324 <img src='images/settings.png' /> | |
| 325 <span item-title="true">Brouw apparatuur</span> | |
| 326 </li> | |
| 327 <li id="Prducing"> | |
| 328 <img src='images/system.png' /> | |
| 329 <span item-title="true">In productie</span> | |
| 330 </li> | |
| 331 <li id="Recipes"> | |
| 332 <img style='float: left; margin-right: 5px;' src='images/beer.png' /> | |
| 333 <span item-title="true">Recepten</span> | |
| 334 </li> | |
| 335 <li id="Settings"> | |
| 336 <img style='float: left; margin-right: 5px;' src='images/setupIcon.png' /> | |
| 337 <span item-title="true">Instellingen</span> | |
| 338 </li> | 235 </li> |
| 339 </ul> | 236 </ul> |
| 340 </li> | 237 </li> |
| 341 </ul> | 238 </ul> |
| 342 </div> <!-- jqxTree --> | 239 </div> <!-- jqxTree --> |
