Added iSpindel monitor screen design.

Sat, 14 Dec 2019 21:02:57 +0100

author
Michiel Broek <mbroek@mbse.eu>
date
Sat, 14 Dec 2019 21:02:57 +0100
changeset 570
c8a20234d7e7
parent 569
d0e7ab1fc245
child 571
468377312726

Added iSpindel monitor screen design.

www/cmd_ispindel.php file | annotate | diff | comparison | revisions
www/css/style-min.css file | annotate | diff | comparison | revisions
www/css/style.css file | annotate | diff | comparison | revisions
www/getispindel.php file | annotate | diff | comparison | revisions
www/includes/global.inc.php file | annotate | diff | comparison | revisions
www/js/mon_ispindel.js file | annotate | diff | comparison | revisions
www/mon_ispindel.php file | annotate | diff | comparison | revisions
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/cmd_ispindel.php	Sat Dec 14 21:02:57 2019 +0100
@@ -0,0 +1,24 @@
+<?php
+require_once('config.php');
+
+#Connect to the database
+$connect = mysqli_connect(DBASE_HOST, DBASE_USER, DBASE_PASS, DBASE_NAME);
+if (! $connect) {
+        die('Connect Error (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
+}
+mysqli_set_charset($connect, "utf8" );
+
+$sql  = "UPDATE `mon_ispindels` SET ";
+$sql .=    "beername='" . mysqli_real_escape_string($connect, $_POST['beername']);
+$sql .= "', beercode='" . mysqli_real_escape_string($connect, $_POST['beercode']);
+$sql .= "', beeruuid='" . mysqli_real_escape_string($connect, $_POST['beeruuid']);
+$sql .= "' WHERE node='" . $_POST['node'] . "';";
+
+$result = mysqli_query($connect, $sql);
+if (! $result) {
+	syslog(LOG_NOTICE, "cmd_ispindel: result: ".mysqli_error($connect));
+} else {
+	syslog(LOG_NOTICE, "cmd_ispindel: updated record ".$_POST['node']);
+}
+echo $result;
+?>
--- a/www/css/style-min.css	Sat Dec 14 14:57:13 2019 +0100
+++ b/www/css/style-min.css	Sat Dec 14 21:02:57 2019 +0100
@@ -1,1 +1,1 @@
-body{background:#ccc;font-family:Verdana,Arial,sans-serif;margin:0}#MainPanel,#fermenter,#co2meter{width:1278px;height:628px;border:2px solid #4297d7;background:#252526;float:left;color:#eee}#water_totals{width:960px;background:#353536;margin-top:15px;border:1px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#propagator{width:800px;background:#353536;margin-top:15px;border:1px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#export_table,#about_table{width:960px;background:#353536;margin:150px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#node_table{width:600px;background:#353536;margin:50px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_table,#co2meter_table{width:960px;height:210px;background:#252526;margin:5px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}.ebccolor{float:left;margin-left:10px;width:75px;height:23px;border:1px solid #59b4d4;border-radius:6px;moz-border-radius:6px;webkit-border-radius:6px;background:#212121}#fermenter_thermometers,#co2meter_meters{width:960px;height:390px;float:left;background-color:#252526;margin:5px;margin-top:3px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_panel_top,#co2meter_panel_top{width:290px;height:100px;float:right;margin:5px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_doorled,#fermenter_lightled,#fermenter_alarmled,#fermenter_powerled{width:50px;height:30px;float:left;text-align:center;margin-top:15px;margin-left:20px}#co2meter_alarmled,#co2meter_powerled{width:50px;height:30px;float:right;text-align:center;margin-top:15px;margin-right:20px}#co2meter_panel_display{width:290px;height:260px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_panel_display{width:290px;height:98px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_display{width:145px;height:98px;float:left;text-align:center}#fermenter_panel_control{width:290px;height:150px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_led1,#fermenter_led2,#fermenter_led3{width:96px;height:30px;float:left;text-align:center;margin-top:13px}#fermenter_toggle1{float:left;margin-left:29px;margin-top:20px}#fermenter_toggle2,#fermenter_toggle3{float:left;margin-left:60px;margin-top:20px}#fermenter_panel_buttons,#co2meter_panel_buttons{width:290px;height:227px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}.LEDred_on{margin:5px auto;width:18px;height:18px;background-color:#F40;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #C33 0 -1px 5px,#f44 0 2px 12px}.LEDred_off{margin:5px auto;width:18px;height:18px;background-color:#820;border-radius:50%;box-shadow:#400 0 0 1px 1px}.LEDyellow_on{margin:5px auto;width:18px;height:18px;background-color:#FF0;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #860 0 -1px 5px,#DD0 0 2px 12px}.LEDyellow_off{margin:5px auto;width:18px;height:18px;background-color:#A90;border-radius:50%;box-shadow:#440 0 0 1px 1px}.LEDgreen_on{margin:5px auto;width:18px;height:18px;background-color:#5E0;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #270 0 -1px 5px,#5D0 0 2px 12px}.LEDgreen_off{margin:5px auto;width:18px;height:18px;background-color:#270;border-radius:50%;box-shadow:#250 0 0 1px 1px}.LEDblue_on{margin:5px auto;width:18px;height:18px;background-color:#4AF;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #247 0 -1px 5px,#48F 0 2px 12px}.LEDblue_off{margin:5px auto;width:18px;height:18px;background-color:#137;border-radius:50%;box-shadow:#024 0 0 1px 1px}#hintBase,#hintStyle,#hintEq{float:left;margin-top:30px;margin-right:20px;padding:5px;width:600px;color:yellow}#section{margin:5px}#baseButtonsWrapper{float:right;margin-top:30px;margin-right:10px;width:160px}#styleButtonsWrapper{float:right;margin-top:30px;margin-right:10px;width:320px}#eqButtonsWrapper{float:right;margin-top:30px;margin-right:10px;width:320px}#completedButtonsWrapper{float:right;margin-right:10px;width:320px;margin-top:160px}.nextButton{float:right;margin-left:0}.backButton{float:left;margin-left:10px}
\ No newline at end of file
+body{background:#ccc;font-family:Verdana,Arial,sans-serif;margin:0}#MainPanel,#fermenter,#co2meter,#ispindel{width:1278px;height:628px;border:2px solid #4297d7;background:#252526;float:left;color:#eee}#water_totals{width:960px;background:#353536;margin-top:15px;border:1px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#propagator{width:800px;background:#353536;margin-top:15px;border:1px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#export_table,#about_table{width:960px;background:#353536;margin:150px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#node_table{width:600px;background:#353536;margin:50px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_table,#co2meter_table,#ispindel_table{width:960px;height:210px;background:#252526;margin:5px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}.ebccolor{float:left;margin-left:10px;width:75px;height:23px;border:1px solid #59b4d4;border-radius:6px;moz-border-radius:6px;webkit-border-radius:6px;background:#212121}#fermenter_thermometers,#co2meter_meters,#ispindel_meters{width:960px;height:390px;float:left;background-color:#252526;margin:5px;margin-top:3px;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_panel_top,#co2meter_panel_top,#ispindel_panel_top{width:290px;height:100px;float:right;margin:5px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_doorled,#fermenter_lightled,#fermenter_alarmled,#fermenter_powerled{width:50px;height:30px;float:left;text-align:center;margin-top:15px;margin-left:20px}#co2meter_alarmled,#co2meter_powerled,#ispindel_alarmled,#ispindel_powerled{width:50px;height:30px;float:right;text-align:center;margin-top:15px;margin-right:20px}#co2meter_panel_display,#ispindel_panel_display{width:290px;height:260px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_panel_display{width:290px;height:98px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_display{width:145px;height:98px;float:left;text-align:center}#fermenter_panel_control{width:290px;height:150px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}#fermenter_led1,#fermenter_led2,#fermenter_led3{width:96px;height:30px;float:left;text-align:center;margin-top:13px}#fermenter_toggle1{float:left;margin-left:29px;margin-top:20px}#fermenter_toggle2,#fermenter_toggle3{float:left;margin-left:60px;margin-top:20px}#fermenter_panel_buttons,#co2meter_panel_buttons,#ispindel_panel_buttons{width:290px;height:227px;float:right;margin:5px;margin-top:3px;background-color:#252526;border:2px solid;border-color:#59b4d4;border-radius:5px 5px 5px 5px}.LEDred_on{margin:5px auto;width:18px;height:18px;background-color:#F40;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #C33 0 -1px 5px,#f44 0 2px 12px}.LEDred_off{margin:5px auto;width:18px;height:18px;background-color:#820;border-radius:50%;box-shadow:#400 0 0 1px 1px}.LEDyellow_on{margin:5px auto;width:18px;height:18px;background-color:#FF0;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #860 0 -1px 5px,#DD0 0 2px 12px}.LEDyellow_off{margin:5px auto;width:18px;height:18px;background-color:#A90;border-radius:50%;box-shadow:#440 0 0 1px 1px}.LEDgreen_on{margin:5px auto;width:18px;height:18px;background-color:#5E0;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #270 0 -1px 5px,#5D0 0 2px 12px}.LEDgreen_off{margin:5px auto;width:18px;height:18px;background-color:#270;border-radius:50%;box-shadow:#250 0 0 1px 1px}.LEDblue_on{margin:5px auto;width:18px;height:18px;background-color:#4AF;border-radius:50%;box-shadow:#000 0 0 4px 1px,inset #247 0 -1px 5px,#48F 0 2px 12px}.LEDblue_off{margin:5px auto;width:18px;height:18px;background-color:#137;border-radius:50%;box-shadow:#024 0 0 1px 1px}#hintBase,#hintStyle,#hintEq{float:left;margin-top:30px;margin-right:20px;padding:5px;width:600px;color:yellow}#section{margin:5px}#baseButtonsWrapper{float:right;margin-top:30px;margin-right:10px;width:160px}#styleButtonsWrapper{float:right;margin-top:30px;margin-right:10px;width:320px}#eqButtonsWrapper{float:right;margin-top:30px;margin-right:10px;width:320px}#completedButtonsWrapper{float:right;margin-right:10px;width:320px;margin-top:160px}.nextButton{float:right;margin-left:0}.backButton{float:left;margin-left:10px}
\ No newline at end of file
--- a/www/css/style.css	Sat Dec 14 14:57:13 2019 +0100
+++ b/www/css/style.css	Sat Dec 14 21:02:57 2019 +0100
@@ -10,7 +10,8 @@
 
 #MainPanel,
 #fermenter,
-#co2meter {
+#co2meter,
+#ispindel {
     width: 1278px;
     height: 628px;
     border: 2px solid #4297d7;
@@ -65,7 +66,8 @@
 
 
 #fermenter_table,
-#co2meter_table {
+#co2meter_table,
+#ispindel_table {
     width: 960px;
     height: 210px;
     background: #252526;
@@ -105,7 +107,8 @@
  */
 
 #fermenter_thermometers,
-#co2meter_meters {
+#co2meter_meters,
+#ispindel_meters {
     width: 960px;
     height: 390px;
     float: left;
@@ -140,7 +143,8 @@
  * +-------------------------------+
  */
 #fermenter_panel_top,
-#co2meter_panel_top {
+#co2meter_panel_top,
+#ispindel_panel_top {
   width: 290px;
   height: 100px;
   float: right;
@@ -164,7 +168,9 @@
 }
 
 #co2meter_alarmled,
-#co2meter_powerled {
+#co2meter_powerled,
+#ispindel_alarmled,
+#ispindel_powerled {
   width: 50px;
   height: 30px;
   float: right;
@@ -173,7 +179,8 @@
   margin-right: 20px;
 }
 
-#co2meter_panel_display {
+#co2meter_panel_display,
+#ispindel_panel_display {
   width: 290px;
   height: 260px;
   float: right;
@@ -241,7 +248,8 @@
 
 
 #fermenter_panel_buttons,
-#co2meter_panel_buttons {
+#co2meter_panel_buttons,
+#ispindel_panel_buttons {
   width: 290px;
   height: 227px;
   float: right;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/getispindel.php	Sat Dec 14 21:02:57 2019 +0100
@@ -0,0 +1,16 @@
+<?php
+
+require_once('config.php');
+
+if (isset($_GET["uuid"]))
+	    $uuid = $_GET["uuid"];
+else
+	    $uuid = "'ispindel000'";
+
+
+$mysqli = new mysqli(DBASE_HOST,DBASE_USER,DBASE_PASS,DBASE_NAME);
+$query = "SELECT * FROM mon_ispindels WHERE node=".$uuid."";
+$result = $mysqli->query($query);
+$resultArray = $result->fetch_array(MYSQLI_ASSOC);
+header("Content-type: application/json");
+echo json_encode($resultArray);
--- a/www/includes/global.inc.php	Sat Dec 14 14:57:13 2019 +0100
+++ b/www/includes/global.inc.php	Sat Dec 14 21:02:57 2019 +0100
@@ -254,7 +254,7 @@
         $img = "network-idle.png";
     else
         $img = "network-error.png";
-    echo '         <li><img style="float: left; margin-right: 5px;" src="images/'.$img.'" /><a href="mon_ispindel.php?node='.$row['node'].'">'.$row['node'].'</a></li>'.PHP_EOL;
+    echo '         <li><img style="float: left; margin-right: 5px;" src="images/'.$img.'" /><a href="mon_ispindel.php?uuid='.$row['node'].'">'.$row['node'].'</a></li>'.PHP_EOL;
 }
 mysqli_free_result($result);
 ?>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/js/mon_ispindel.js	Sat Dec 14 21:02:57 2019 +0100
@@ -0,0 +1,218 @@
+/*****************************************************************************
+ * Copyright (C) 2019
+ *
+ * Michiel Broek <mbroek at mbse dot eu>
+ *
+ * This file is part of BMS
+ *
+ * This is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2, or (at your option) any
+ * later version.
+ *
+ * Brewery Management System istributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ThermFerm; see the file COPYING.  If not, write to the Free
+ * Software Foundation, 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA.
+ *****************************************************************************/
+
+
+$(document).ready(function() {
+
+ var record = {},
+ blank = {},
+ newProduct = false,
+ schedule = 0,
+
+ productSource = {
+  datatype: 'json',
+  cache: false,
+  datafields: [
+   { name: 'code', type: 'string' },
+   { name: 'name', type: 'string' },
+   { name: 'uuid', type: 'string' }
+  ],
+  id: 'code',
+  url: 'includes/db_product.php?select=ferment'
+ },
+ productlist = new $.jqx.dataAdapter(productSource, {
+  beforeLoadComplete: function(records) {
+   var row, i, data = new Array();
+   // Create a dummy beer on top to store in idle meters.
+   blank['code'] = 'Free';  // Will override this later.
+   blank['name'] = 'Dummy';
+   blank['uuid'] = '66ecccbf-e942-4a35-af49-8b02314561a5';
+   data.push(blank);
+   for (i = 0; i < records.length; i++) {
+    row = records[i];
+    data.push(row);
+   }
+   return data;
+  },
+  loadError: function(jqXHR, status, error) {
+   $('#err').text(status + ' ' + error);
+  },
+ }),
+ gaugeoptionst = {
+  min: 10, max: 40, width: 375, height: 375,
+  ranges: [{ startValue: 10, endValue: 20, style: { fill: '#3399FF', stroke: '#3399FF' }, endWidth: 10, startWidth: 10 },
+           { startValue: 20, endValue: 28, style: { fill: '#00CC33', stroke: '#00CC33' }, endWidth: 10, startWidth: 10 },
+           { startValue: 28, endValue: 40, 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'
+ },
+ gaugeoptionsg = {
+  orientation: 'vertical',
+  labels: { position: 'near', interval: 10 },
+  ticksMinor: { size: '5%', interval: 2 },
+  ticksMajor: { size: '9%', interval: 10 },
+  ticksPosition: 'near',
+  min: 0990, max: 1120, width: 120, height: 375,
+  value: 1000,
+  pointer: { pointerType: 'arrow', size: '15%', visible: true, offset: 0 },
+  colorScheme: 'scheme05',
+  showRanges: false
+ },
+ url = 'getispindel.php?node="' + my_uuid + '"',
+ source = {
+  datatype: 'json',
+  datafields: [
+   { name: 'record', type: 'int' },
+   { name: 'node', type: 'string' },
+   { name: 'online', type: 'int' },
+   { name: 'beercode', type: 'string' },
+   { name: 'beername', type: 'string' },
+   { name: 'beeruuid', type: 'string' },
+   { name: 'alarm', type: 'int' },
+   { name: 'tilt', type: 'float' },
+   { name: 'temperature', type: 'float' },
+   { name: 'battery', type: 'float' },
+   { name: 'gravity', type: 'float' },
+   { name: 'interval', type: 'int' },
+   { name: 'rssi', type: 'int' }
+  ],
+  id: 'record',
+  url: url
+ },
+ dataAdapter = new $.jqx.dataAdapter(source, {
+  loadComplete: function(records) {
+   record = dataAdapter.records[0];
+   var oline = (record.online) ? 'On-line' : 'Off-line';
+   $('#info_system').html(record.node);
+   $('#info_online').html(oline);
+   $('#info_beer').html(record.beercode + ' - ' + record.beername);
+//   blank['name'] = record.alias;
+//   blank['code'] = record.alias.toUpperCase();
+//   blank['uuid'] = record.uuid;
+
+   if (record.online) {
+    $('#ispindel_powerled').html('<div class="LEDblue_on"></div>Power');
+    $('#select_beer').jqxDropDownList({ disabled: true });
+    $('#select_beer').jqxDropDownList('clearSelection');
+    $('#select_beer').hide();
+   } else {
+    $('#ispindel_powerled').html('<div class="LEDblue_off"></div>Power');
+    $('#select_beer').show();
+    $('#select_beer').jqxDropDownList({ disabled: false });
+   }
+   if (record.online && (record.alarm != '0')) {
+    $('#ispindel_alarmled').html('<div class="LEDred_on"></div>Alarm');
+   } else {
+    $('#ispindel_alarmled').html('<div class="LEDred_off"></div>Alarm');
+   }
+
+   $('#gaugeContainer_temperature').jqxGauge({ caption: { value: record.temperature.toFixed(3) + '°C' }});
+   $('#gaugeContainer_temperature').jqxGauge({ value: record.temperature });
+
+   $('#info_battery').val(record.battery);
+   $('#info_rssi').val(record.rssi);
+   $('#info_tilt').val(record.tilt);
+
+   gravity = plato_to_sg(record.gravity) * 1000;
+   $('#gaugeContainer_gravity').jqxLinearGauge({ value: gravity });
+  }
+ });
+
+ $('#select_beer').jqxDropDownList({
+  placeHolder: 'Kies bier:',
+  theme: theme,
+  source: productlist,
+  displayMember: 'code',
+  width: 150,
+  height: 24,
+  dropDownWidth: 500,
+  autoDropDownHeight: true,
+  renderer: function(index, label, value) {
+   var datarecord = productlist.records[index];
+   return datarecord.code + ' - ' + datarecord.name;
+  }
+ });
+
+ $('#info_battery').jqxNumberInput(Show3dec);
+ $('#info_rssi').jqxNumberInput(Show0dec);
+ $('#info_tilt').jqxNumberInput(Show3dec);
+
+ $('#gaugeContainer_temperature').jqxGauge(gaugeoptionst);
+ $('#gaugeContainer_temperature').jqxGauge({ caption: { value: 'Temp: 00.000' }});
+ $('#gaugeContainer_gravity').jqxLinearGauge(gaugeoptionsg);
+
+ function sendProduct(code, name, uuid) {
+
+  console.log('sendProduct(' + code + ', ' + name + ', ' + uuid + ')');
+  var data = 'node=' + record.node + '&beeruuid=' + uuid + '&beercode=' + code + '&beername=' + name;
+  $.ajax({
+   url: 'cmd_ispindel.php',
+   data: data,
+   type: 'POST',
+   success: function(data) {},
+   error: function(jqXHR, textStatus, errorThrown) { console.log('sendProduct() error'); }
+  });
+ }
+
+ // Get the data immediatly and then at regular intervals to refresh.
+ dataAdapter.dataBind();
+ setInterval(function() {
+  var skip = false;
+  if (newProduct) {
+   sendProduct(record.beercode, record.beername, record.beeruuid);
+   newProduct = false;
+   skip = true;
+  }
+  if (skip) {
+   schedule = 4; // 2 seconds wait to get the results
+  } else {
+   if (schedule > 0)
+    schedule--;
+  }
+
+  if (schedule <= 0) {
+   dataAdapter.dataBind();
+   schedule = 20;
+  }
+ }, 500);
+
+ $('#select_beer').on('select', function(event) {
+  if (event.args) {
+   var index = event.args.index,
+   datarecord = productlist.records[index];
+   record.beercode = datarecord.code;
+   record.beername = datarecord.name;
+   record.beeruuid = datarecord.uuid;
+   newProduct = true;
+  }
+ });
+
+ // The chart button.
+ $('#VLog').jqxButton({ template: 'primary', width: '150px', theme: theme });
+// $('#FLog').click(function() {
+//  window.open('log_co2pressure.php?code=' + record.beercode + '&name=' + record.beername);
+// });
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/mon_ispindel.php	Sat Dec 14 21:02:57 2019 +0100
@@ -0,0 +1,72 @@
+<?php
+require_once($_SERVER['DOCUMENT_ROOT'].'/includes/global.inc.php');
+page_header('Monitor iSpindels', 'mon_ispindel');
+?>
+
+   <div id="ispindel">
+
+    <div style="float: left; width: 970px;">
+     <div id="ispindel_table">
+      <div id="ispindel_info">
+       <table style='width: 100%; padding: 10px;'>
+	<col width="20%">
+	<col width="40%">
+        <col width="40%">
+        <tr><th colspan=3>iSpindel overzicht</th></tr>
+        <tr><td colspan=3>&nbsp;</td></tr>
+	<tr style="height: 25px;">
+         <td>Systeem</td>
+	 <td><div id="info_system"></div></td>
+         <td><div id="info_online"></div></td>
+        </tr>
+	<tr style="height: 25px;">
+         <td>Code en bier</td>
+         <td><div id="info_beer"></div></td>
+         <td><div id="select_beer"></div></td>
+        </tr>
+	<tr style="height: 25px;">
+         <td>Battery</td>
+         <td colspan="2"><div id="info_battery"></div></td>
+        </tr>
+        <tr style="height: 25px;">
+         <td>WiFi signaal</td>
+         <td colspan="2"><div id="info_rssi"></div></td>
+        </tr>
+        <tr style="height: 25px;">
+         <td>Tilt hoek</td>
+         <td colspan="2"><div id="info_tilt"></div></td>
+        </tr>
+       </table>
+      </div>
+     </div>
+     <div id='ispindel_meters'>
+      <div id="gaugeContainer_temperature" style='float: left; margin-top: 10px; margin-left: 60px;'></div>
+      <div id="gaugeContainer_gravity" style="float: right; margin-top: 10px; margin-right: 160px;"></div>
+     </div>
+    </div> <!-- End left side -->
+
+    <div style="float: right; width: 295px;">
+     <div id="ispindel_panel_top">
+      <div id="ispindel_powerled"></div>
+      <div id="ispindel_alarmled"></div>
+     </div> <!-- ispindel_panel_top -->
+
+     <div id="ispindel_panel_display">
+      <div id="ispindel_display">
+      </div>
+      <div id="ispindel_display">
+      </div>
+     </div> <!-- ispindel_panel_display -->
+
+     <div id="ispindel_panel_control">
+     </div> <!-- ispindel_panel_control -->
+
+     <div id="ispindel_panel_buttons">
+      <input style="margin-top: 20px; margin-left: 70px;" type="button" id="VLog" value="Vergisting log" />
+     </div> <!-- ispindel_panel_buttons -->
+    </div> <!-- End right side -->
+   </div>
+
+<?php
+page_footer();
+?>

mercurial