Mon, 13 Aug 2018 23:00:50 +0200
Added monitoring screens
www/css/style.css | file | annotate | diff | comparison | revisions | |
www/includes/global.inc.php | file | annotate | diff | comparison | revisions | |
www/mon_brewer.php | file | annotate | diff | comparison | revisions | |
www/mon_fermenter.php | file | annotate | diff | comparison | revisions | |
www/mon_node.php | file | annotate | diff | comparison | revisions | |
www/monitor.php | file | annotate | diff | comparison | revisions |
--- a/www/css/style.css Mon Aug 13 19:49:42 2018 +0200 +++ b/www/css/style.css Mon Aug 13 23:00:50 2018 +0200 @@ -44,9 +44,11 @@ height: 628px; border: 2px solid #4297d7; background: #252526; + color: #eeeeee; } + #header { width: 1278px; height: 38px; @@ -71,6 +73,18 @@ +#node_table { + width: 600px; + background: #353536; + margin: 50px; + border: 2px solid; + font-size: 12pt; + border-color: #888; + border-radius: 5px 5px 5px 5px; +} + + + #fermenter_table { width: 720px; background: #252526;
--- a/www/includes/global.inc.php Mon Aug 13 19:49:42 2018 +0200 +++ b/www/includes/global.inc.php Mon Aug 13 23:00:50 2018 +0200 @@ -77,6 +77,8 @@ <script src="jqwidgets/jqxcheckbox.js"></script> <script src="jqwidgets/jqxdatetimeinput.js"></script> <script src="jqwidgets/jqxcalendar.js"></script> + <script src="jqwidgets/jqxgauge.js"></script> + <script src="jqwidgets/jqxdraw.js"></script> <script src="jqwidgets/globalization/globalize.js"></script> <script src="js/global.js"></script> <?php @@ -100,7 +102,7 @@ $mysqli = new mysqli(DBASE_HOST,DBASE_USER,DBASE_PASS,DBASE_NAME); $result = $mysqli->query("SELECT uuid,node,online,net_address FROM nodes"); while($row = $result->fetch_array(MYSQLI_ASSOC)) { - echo ' <li><a href="mon_node.php?node='.$row['node'].'">'.$row['node'].'</a></li>'.PHP_EOL; + echo ' <li><a href="mon_node.php?uuid='.$row['uuid'].'">'.$row['node'].'</a></li>'.PHP_EOL; } mysqli_free_result($result); ?> @@ -111,13 +113,12 @@ <?php $result = $mysqli->query("SELECT uuid,node,alias,online,mode FROM fermenters"); while($row = $result->fetch_array(MYSQLI_ASSOC)) { - echo ' <li><a href="mon_fermenter.php?node='.$row['node'].'&alias='.$row['alias'].'">'.$row['node'].'/'.$row['alias'].'</a></li>'.PHP_EOL; + echo ' <li><a href="mon_fermenter.php?uuid='.$row['uuid'].'">'.$row['node'].'/'.$row['alias'].'</a></li>'.PHP_EOL; } mysqli_free_result($result); ?> </ul> </li> - <li><a href="monitor.php">Probeersel</a></li> </ul> </li> <li>Inventaris
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/mon_brewer.php Mon Aug 13 23:00:50 2018 +0200 @@ -0,0 +1,12 @@ +<?php +require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php'); +page_header('Hoofdmenu', NULL); +?> + + <div id="MainPanel"> + <div id="ContentPanel"></div> + </div> + +<?php +page_footer(); +?>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/mon_fermenter.php Mon Aug 13 23:00:50 2018 +0200 @@ -0,0 +1,159 @@ +<?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 + "</span></div>"; + html += "<div>SpL <span class='temperature NUM'>" + record.setpoint_low + "</span></div>"; + html += "<div>Air <span class='temperature NUM'>" + record.air_temperature + "</span></div>"; + html += "<div>Beer <span class='temperature NUM'>" + record.beer_temperature + "</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(); +?>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/www/mon_node.php Mon Aug 13 23:00:50 2018 +0200 @@ -0,0 +1,88 @@ +<?php +require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php'); +page_header('Hoofdmenu', NULL); +$uuid = $_GET["uuid"]; +?> + <script> + $(document).ready(function () { + + var uuid = "<?php echo $uuid; ?>"; + var url = "getnode.php?uuid='" + uuid + "'"; + var source = { + datatype: "json", + datafields: [ + { name: 'record', type: 'int' }, + { name: 'uuid', type: 'string' }, + { name: 'node', type: 'string' }, + { name: 'online', type: 'bool' }, + { name: 'group_id', type: 'string' }, + { name: 'hardwaremake', type: 'string' }, + { name: 'hardwaremodel', type: 'string' }, + { name: 'os', type: 'string' }, + { name: 'os_version', type: 'string' }, + { name: 'firmware', type: 'string' }, + { name: 'firstseen', type: 'string' }, + { name: 'lastseen', type: 'string' }, + { name: 'temperature', type: 'float' }, + { name: 'humidity', type: 'float' }, + { name: 'barometer', type: 'float' }, + { name: 'gps_latitude', type: 'float' }, + { name: 'gps_longitude', type: 'float' }, + { name: 'gps_altitude', type: 'float' }, + { name: 'net_address', type: 'string' }, + { name: 'net_ifname', type: 'string' }, + { name: 'net_rssi', type: 'int' } + ], + id: 'record', + url: url + }; + var dataAdapter = new $.jqx.dataAdapter(source, { + loadComplete: function (records) { + var record = dataAdapter.records[0]; + var html = "<div id='node_table'>"; + html += "<table style='width: 100%; padding: 10px;'>"; + html += "<tr><th colspan=2>Systeem overzicht</th></tr>"; + html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; + html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>"; + html += "<tr><td>Online</td><td>" + record.online + "</td></tr>"; + html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>"; + html += "<tr><td>Eerst gezien</td><td>" + record.firstseen + "</td></tr>"; + html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</td></tr>"; + html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>"; + html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>"; + html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>"; + html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>"; + if (record.online) { + html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; + if (record.humidity > 0) { + html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>"; + } + if (record.barometer > 0) { + html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>"; + } + if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) { + html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>"; + } + html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>"; + } + html += "</<table>"; + html += "</div>"; + $("#ContentPanel").html(html); + } + }); + + // Get the data immediatly and then at regular intervals to refresh. + dataAdapter.dataBind(); + setInterval(function(){ + dataAdapter.dataBind(); + }, 30000); + }); + </script> + + <div id="MainPanel"> + <div id="ContentPanel"></div> + </div> + +<?php +page_footer(); +?>
--- a/www/monitor.php Mon Aug 13 19:49:42 2018 +0200 +++ b/www/monitor.php Mon Aug 13 23:00:50 2018 +0200 @@ -36,15 +36,6 @@ $("#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%" }); /* - * Build the nodes subtree - */ - var nodeByID = $("#jqxTree").find("#Nodes")[0]; - $.getJSON("getnodes.php", function(data) { - for( i = 0; i < data.length; i++ ) { - $("#jqxTree").jqxTree("addTo", { id: 'node-' + data[i].uuid, label: data[i].node, icon: 'images/folder.png' }, nodeByID); - } - }); - /* * Build the fermenters subtree */ var fermenterByID = $("#jqxTree").find("#Fermenters")[0]; @@ -76,79 +67,6 @@ if (estr == "Root") { $("#ContentPanel").html("<div style='margin: 10px;'><a href='index.php'>Hoofdmenu</a></div>"); - } else if (estr.indexOf("node-", 0) == 0) { - // Load and show a node. - // The parameter is: node-36d4d030-4d62-4f2f-a96b-472e643687f7 - var uuid = estr.substr(5); - var url = "getnode.php?uuid='" + uuid + "'"; - var source = { - datatype: "json", - datafields: [ - { name: 'record', type: 'int' }, - { name: 'uuid', type: 'string' }, - { name: 'node', type: 'string' }, - { name: 'online', type: 'bool' }, - { name: 'group_id', type: 'string' }, - { name: 'hardwaremake', type: 'string' }, - { name: 'hardwaremodel', type: 'string' }, - { name: 'os', type: 'string' }, - { name: 'os_version', type: 'string' }, - { name: 'firmware', type: 'string' }, - { name: 'firstseen', type: 'string' }, - { name: 'lastseen', type: 'string' }, - { name: 'temperature', type: 'float' }, - { name: 'humidity', type: 'float' }, - { name: 'barometer', type: 'float' }, - { name: 'gps_latitude', type: 'float' }, - { name: 'gps_longitude', type: 'float' }, - { name: 'gps_altitude', type: 'float' }, - { name: 'net_address', type: 'string' }, - { name: 'net_ifname', type: 'string' }, - { name: 'net_rssi', type: 'int' } - ], - id: 'record', - url: url - }; - var dataAdapter = new $.jqx.dataAdapter(source, { - loadComplete: function (records) { - var record = dataAdapter.records[0]; - var html = "<div style='background: #252526; margin: 50px;'>"; - html += "<table style='width: 100%; padding: 10px;'>"; - html += "<tr><th colspan=2>Systeem overzicht</th></tr>"; - html += "<tr><td>Uuid</td><td>" + record.uuid + "</td></tr>"; - html += "<tr><td>Systeem</td><td>" + record.node + "</td></tr>"; - html += "<tr><td>Online</td><td>" + record.online + "</td></tr>"; - html += "<tr><td>Type</td><td>" + record.group_id + "</td></tr>"; - html += "<tr><td>Eerst gezien</td><td>" + record.firstseen + "</td></tr>"; - html += "<tr><td>Laatst gezien</td><td>" + record.lastseen + "</td></tr>"; - html += "<tr><td>Hardware maker</td><td>" + record.hardwaremake+ "</td></tr>"; - html += "<tr><td>Hardware model</td><td>" + record.harwaremodel+ "</td></tr>"; - html += "<tr><td>OS</td><td>" + record.os + " versie: " + record.os_version + "</td></tr>"; - html += "<tr><td>Firmware</td><td>" + record.firmware + "</td></tr>"; - if (record.online) { - html += "<tr><td>Temperatuur</td><td>" + record.temperature + "°C</td></tr>"; - if (record.humidity > 0) { - html += "<tr><td>Vochtigheid</td><td>" + record.humidity + "%</td></tr>"; - } - if (record.barometer > 0) { - html += "<tr><td>Luchtdruk</td><td>" + record.barometer + "</td></tr>"; - } - if ((record.gps_latitude != 0) && (record.gps_longitude != 0)) { - html += "<tr><td>GPS</td><td>"+ record.gps_latitude + " " + record.gps_longitude + " " + record.gps_altitude + "</td></tr>"; - } - html += "<tr><td>Netwerk</td><td>"+ record.net_ifname + " " + record.net_address + "</td></tr>"; - } - html += "</<table>"; - html += "</div>"; - $("#ContentPanel").html(html); - } - }); - // Get the data immediatly and then at regular intervals to refresh. - dataAdapter.dataBind(); - refreshIntervalId = setInterval(function(){ - dataAdapter.dataBind(); - }, 30000); - } else if (estr.indexOf("fermenter-", 0) == 0) { // Load and show a fermenter. // The parameter is: fermenter-36d4d030-4d62-4f2f-a96b-472e643687f7 @@ -310,32 +228,11 @@ <img style='float: left; margin-right: 5px;' src='images/earth.png' /> <span item-title="true">Root</span> <ul> - <li id="Nodes"> - <img style='float: left; margin-right: 5px;' src='images/folder.png' /> - <span item-title="true">Systemen</span> - <!-- Subtree nodes --> - </li> <li id="Fermenters"> <img style='float: left; margin-right: 5px;' src='images/folder.png' /> <span item-title="true">Klimaatkasten</span> <!-- Subtree fermenters --> </li> - <li id="Brewboards"> - <img src='images/settings.png' /> - <span item-title="true">Brouw apparatuur</span> - </li> - <li id="Prducing"> - <img src='images/system.png' /> - <span item-title="true">In productie</span> - </li> - <li id="Recipes"> - <img style='float: left; margin-right: 5px;' src='images/beer.png' /> - <span item-title="true">Recepten</span> - </li> - <li id="Settings"> - <img style='float: left; margin-right: 5px;' src='images/setupIcon.png' /> - <span item-title="true">Instellingen</span> - </li> </ul> </li> </ul>