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.

client-script.js 8.7KB

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