ESP8266 SHT21 sensor
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

script.js 9.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. var arrSensor = Array();
  2. $(document).ready(function() {
  3. $('body').append(`<div class="container-fluid">
  4. <div class="page-header">
  5. <h2>Systemadministration</h2>
  6. </div>
  7. <div class="row" id="contentDiv">
  8. <div class="col-md-5 col-lg-5">
  9. <div class="panel panel-primary">
  10. <div class="panel-heading" id="listSensorsHeading" style="font-size: 18px;">Verf&uuml;gbare Sensoren (0/0)</div>
  11. <div class="panel-body">
  12. <ul class="list-group" id="listSensors"></ul>
  13. <div id="alertDiv"></div>
  14. <button class="btn btn-primary" disabled="" id="btnSubmit">Weiter</button>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. </div>
  20. <div class="footer">
  21. <div class="container-fluid">
  22. <p class="text-muted">&copy; Copyright 2016 by Christian H&ouml;gerle und Thomas Buck</p>
  23. </div>
  24. </div>`);
  25. // aktuelle Uhrzeit fuer die Graphen ermitteln
  26. var actTime = new Date();
  27. actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes();
  28. $('#listSensorsHeading').empty();
  29. $('#listSensorsHeading').html("Verf&uuml;gbare Sensoren (0/" + clients.length + ")");
  30. // Alle clients im Array iterieren und Websocket abfragen
  31. var count = [0];
  32. jQuery.each(clients, function(index, client) {
  33. webSocket(client, "2391", count, clients.length);
  34. });
  35. // Submit-Button fuer die Formulareingabe
  36. $("#btnSubmit").click(function(event) {
  37. $('#contentDiv').empty();
  38. generateView(arrSensor, actTime);
  39. });
  40. });
  41. function webSocket(wsUri, wsPort, count, clientsCount) {
  42. websocket = new WebSocket("ws://" + wsUri + ":" + wsPort + "/");
  43. websocket.onopen = function(evt) {};
  44. websocket.onclose = function(evt) {};
  45. websocket.onmessage = function(evt) {
  46. var jsonData = jQuery.parseJSON(evt.data);
  47. count[0]++;
  48. var sensor = {id: count[0], ip: wsUri, actualTemp: jsonData['T'], actualHum: jsonData['H']};
  49. var arrEEPROM = Array();
  50. jQuery.each(jsonData['EEPROM'], function(index, data) {
  51. arrEEPROM.push(data);
  52. });
  53. sensor.arrEEPROM = arrEEPROM;
  54. arrSensor.push(sensor);
  55. $('#listSensorsHeading').html("Verf&uuml;gbare Sensoren (" + sensor.id + "/" + clientsCount + ")");
  56. $('#listSensors').append('<li class="list-group-item">' +
  57. ' Sensor ' + sensor.id +
  58. ' | IP: ' + sensor.ip +
  59. ' | aktuelle Temperatur: ' + sensor.actualTemp +
  60. ' | aktuelle Luftfeuchtigkeit: ' + sensor.actualHum +
  61. '</li>');
  62. // Alle Sensoren erfolgreich abgefragt
  63. if(count[0] == clientsCount) {
  64. $('#btnSubmit').prop("disabled", false);
  65. }
  66. };
  67. websocket.onerror = function(evt) {
  68. if($('#websocketError').length ) {
  69. $('.alert-danger').append('Sensor mit der IP:' + wsUri + ' konnte nicht abgefragt werden! <br>');
  70. } else {
  71. $('#alertDiv').append('<div class="alert alert-danger" id="websocketError">' +
  72. '<strong>Fehler:</strong><br>Sensor mit der IP:' + wsUri + ' konnte nicht abgefragt werden! <br>' +
  73. '</div>');
  74. }
  75. console.log(evt.data);
  76. };
  77. }
  78. function generateView(arrSensor, actTime) {
  79. $('#contentDiv').append(`<div class="col-md-12 col-lg-12">
  80. <div class="panel panel-primary">
  81. <ul class="nav nav-pills">
  82. <li class="active"><a class="navtab" data-toggle="tab" href="#home">Home</a></li>
  83. </ul>
  84. <div class="panel-body">
  85. <div id="contentPanel">
  86. </div>
  87. </div>
  88. </div>
  89. </div>`);
  90. jQuery.each(arrSensor, function(index, sensor) {
  91. $('.nav-pills').append('<li><a class="navtab" data-toggle="tab" href="#' + sensor.id + '">Sensor ' + sensor.id + '</a></li>');
  92. });
  93. // Flag fuer gemeinsamer Graph -> true
  94. generateGraph(true, arrSensor, actTime);
  95. $(".navtab").click(function(event) {
  96. $('#contentPanel').empty();
  97. if(event.target.text == "Home") {
  98. // Flag fuer gemeinsamer Graph -> true
  99. generateGraph(true, arrSensor, actTime);
  100. } else {
  101. generateGraph(false, arrSensor[(event.target.text.split(" ")[1] - 1)], actTime);
  102. }
  103. });
  104. }
  105. function generateGraph(flag, sensor, actTime) {
  106. $('#contentPanel').append(`<div class="row">
  107. <div class="col-sm-12 col-md-12 col-lg-6">
  108. <canvas id="temperaturChart"></canvas>
  109. </div>
  110. <div class="col-sm-12 col-md-12 col-lg-6">
  111. <canvas id="humidityChart"></canvas>
  112. </div>
  113. </div>`);
  114. if(flag) { // ein Graph für alle Sensoren
  115. var length = 0;
  116. jQuery.each(sensor, function(index, tmp) {
  117. if(length < tmp.arrEEPROM.length) {
  118. length = tmp.arrEEPROM.length;
  119. }
  120. });
  121. var labels = Array();
  122. actHour = actTime.split(":")[0];
  123. for(var i = length; i > 0; i--) {
  124. labels.unshift(actHour + ":00");
  125. actHour = (actHour - 1).mod(24);
  126. }
  127. labels.push(actTime);
  128. var dataTemperature = Array();
  129. var dataHumidity = Array();
  130. var tmpDataTemperature = Array();
  131. var tmpDataHumidity = Array();
  132. jQuery.each(sensor, function(index, tmp) {
  133. for(var i = 0; i < (length - tmp.arrEEPROM.length); i++) {
  134. tmpDataTemperature.push([]);
  135. tmpDataHumidity.push([]);
  136. }
  137. jQuery.each(tmp.arrEEPROM, function(index, value) {
  138. tmpDataTemperature.push(value['T']);
  139. tmpDataHumidity.push(value['H']);
  140. });
  141. tmpDataTemperature.push(tmp.actualTemp);
  142. tmpDataHumidity.push(tmp.actualHum);
  143. var lineColor = getRandomColor();
  144. dataTemperature.push({label: "Sensor " + tmp.id, data: tmpDataTemperature, fill: false,
  145. borderWidth: 3, borderColor : lineColor,});
  146. dataHumidity.push({label: "Sensor " + tmp.id, data: tmpDataHumidity, fill: false,
  147. borderWidth: 3, borderColor : lineColor,});
  148. tmpDataTemperature = [];
  149. tmpDataHumidity = [];
  150. });
  151. } else { // Graph für einzelnen Sensor
  152. var labels = Array();
  153. var tmpDataTemperature = Array();
  154. var tmpDataHumidity = Array();
  155. actHour = actTime.split(":")[0];
  156. actHour = (actHour - sensor.arrEEPROM.length).mod(24);
  157. jQuery.each(sensor.arrEEPROM, function(index, value) {
  158. actHour = (actHour + 1).mod(24);
  159. labels.push(actHour + ":00");
  160. tmpDataTemperature.push(value['T']);
  161. tmpDataHumidity.push(value['H']);
  162. });
  163. labels.push(actTime);
  164. tmpDataTemperature.push(sensor.actualTemp);
  165. tmpDataHumidity.push(sensor.actualHum);
  166. var dataTemperature = [{label: 'Temperatur [C]', data: tmpDataTemperature,
  167. fill: false, borderWidth: 3, borderColor: '#337ab7',}];
  168. var dataHumidity = [{label: 'Luftfeuchtigkeit [%RH]', data: tmpDataHumidity,
  169. fill: false, borderWidth: 3, borderColor: '#337ab7',}];
  170. }
  171. var tempCtx = $('#temperaturChart');
  172. var humCtx = $('#humidityChart');
  173. var tempChart = new Chart(tempCtx, {
  174. type: 'line',
  175. data: {
  176. labels: labels,
  177. datasets: dataTemperature,
  178. },
  179. options: {
  180. title: {
  181. display: true,
  182. text: 'Temperaturverlauf'
  183. }
  184. }
  185. });
  186. var humCharts = new Chart(humCtx, {
  187. type: 'line',
  188. data: {
  189. labels: labels,
  190. datasets: dataHumidity,
  191. },
  192. options: {
  193. title: {
  194. display: true,
  195. text: 'Luftfeuchtigkeitverlauf'
  196. }
  197. }
  198. });
  199. }
  200. // Modulo-Bug: http://javascript.about.com/od/problemsolving/a/modulobug.htm
  201. Number.prototype.mod = function(n) {
  202. return ((this%n)+n)%n;
  203. }
  204. function getRandomColor() {
  205. var letters = '0123456789ABCDEF'.split('');
  206. var color = '#';
  207. for (var i = 0; i < 6; i++ ) {
  208. color += letters[Math.floor(Math.random() * 16)];
  209. }
  210. return color;
  211. }