var arrSensor = Array(); $(document).ready(function() { $('body').append(`
Verfügbare Sensoren (0/0)
    `); // aktuelle Uhrzeit fuer die Graphen ermitteln var actTime = new Date(); actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes(); $('#listSensorsHeading').empty(); $('#listSensorsHeading').html("Verfügbare Sensoren (0/" + clients.length + ")"); // Alle clients im Array iterieren und Websocket abfragen var count = [0]; jQuery.each(clients, function(index, client) { webSocket(client, "2391", count, clients.length); }); // Submit-Button fuer die Formulareingabe $("#btnSubmit").click(function(event) { $('#contentDiv').empty(); generateView(arrSensor, actTime); }); }); function webSocket(wsUri, wsPort, count, clientsCount) { websocket = new WebSocket("ws://" + wsUri + ":" + wsPort + "/"); websocket.onopen = function(evt) {}; websocket.onclose = function(evt) {}; websocket.onmessage = function(evt) { var jsonData = jQuery.parseJSON(evt.data); count[0]++; var sensor = {id: count[0], ip: wsUri, actualTemp: jsonData['T'], actualHum: jsonData['H']}; var arrEEPROM = Array(); jQuery.each(jsonData['EEPROM'], function(index, data) { arrEEPROM.push(data); }); sensor.arrEEPROM = arrEEPROM; arrSensor.push(sensor); $('#listSensorsHeading').html("Verfügbare Sensoren (" + sensor.id + "/" + clientsCount + ")"); $('#listSensors').append('
  • ' + ' Sensor ' + sensor.id + ' | IP: ' + sensor.ip + ' | aktuelle Temperatur: ' + sensor.actualTemp + ' | aktuelle Luftfeuchtigkeit: ' + sensor.actualHum + '
  • '); // Alle Sensoren erfolgreich abgefragt if(count[0] == clientsCount) { $('#btnSubmit').prop("disabled", false); } }; websocket.onerror = function(evt) { if($('#websocketError').length ) { $('.alert-danger').append('Sensor mit der IP:' + wsUri + ' konnte nicht abgefragt werden!
    '); } else { $('#alertDiv').append('
    ' + 'Fehler:
    Sensor mit der IP:' + wsUri + ' konnte nicht abgefragt werden!
    ' + '
    '); } console.log(evt.data); }; } function generateView(arrSensor, actTime) { $('#contentDiv').append(`
    `); jQuery.each(arrSensor, function(index, sensor) { $('.nav-pills').append('
  • Sensor ' + sensor.id + '
  • '); }); // Flag fuer gemeinsamer Graph -> true generateGraph(true, arrSensor, actTime); $(".navtab").click(function(event) { $('#contentPanel').empty(); if(event.target.text == "Home") { // Flag fuer gemeinsamer Graph -> true generateGraph(true, arrSensor, actTime); } else { generateGraph(false, arrSensor[(event.target.text.split(" ")[1] - 1)], actTime); } }); } function generateGraph(flag, sensor, actTime) { $('#contentPanel').append(`
    `); if(flag) { // ein Graph für alle Sensoren var length = 0; jQuery.each(sensor, function(index, tmp) { if(length < tmp.arrEEPROM.length) { length = tmp.arrEEPROM.length; } }); var labels = Array(); actHour = actTime.split(":")[0]; for(var i = length; i > 0; i--) { labels.unshift(actHour + ":00"); actHour = (actHour - 1).mod(24); } labels.push(actTime); var dataTemperature = Array(); var dataHumidity = Array(); var tmpDataTemperature = Array(); var tmpDataHumidity = Array(); jQuery.each(sensor, function(index, tmp) { for(var i = 0; i < (length - tmp.arrEEPROM.length); i++) { tmpDataTemperature.push([]); tmpDataHumidity.push([]); } jQuery.each(tmp.arrEEPROM, function(index, value) { tmpDataTemperature.push(value['T']); tmpDataHumidity.push(value['H']); }); tmpDataTemperature.push(tmp.actualTemp); tmpDataHumidity.push(tmp.actualHum); dataTemperature.push({label: "Sensor " + tmp.id, data: tmpDataTemperature, fill: false, borderWidth: 3, borderColor : getRandomColor(),}); dataHumidity.push({label: "Sensor " + tmp.id, data: tmpDataHumidity, fill: false, borderWidth: 3, borderColor : getRandomColor(),}); tmpDataTemperature = []; tmpDataHumidity = []; }); } else { // Graph für einzelnen Sensor var labels = Array(); var tmpDataTemperature = Array(); var tmpDataHumidity = Array(); actHour = actTime.split(":")[0]; actHour = (actHour - sensor.arrEEPROM.length).mod(24); jQuery.each(sensor.arrEEPROM, function(index, value) { actHour = (actHour + 1).mod(24); labels.push(actHour + ":00"); tmpDataTemperature.push(value['T']); tmpDataHumidity.push(value['H']); }); labels.push(actTime); tmpDataTemperature.push(sensor.actualTemp); tmpDataHumidity.push(sensor.actualHum); var dataTemperature = [{label: 'Temperatur [C]', data: tmpDataTemperature, fill: false, borderWidth: 3, borderColor: '#337ab7',}]; var dataHumidity = [{label: 'Luftfeuchtigkeit [%RH]', data: tmpDataHumidity, fill: false, borderWidth: 3, borderColor: '#337ab7',}]; } var tempCtx = $('#temperaturChart'); var humCtx = $('#humidityChart'); var tempChart = new Chart(tempCtx, { type: 'line', data: { labels: labels, datasets: dataTemperature, }, options: { title: { display: true, text: 'Temperaturverlauf' } } }); var humCharts = new Chart(humCtx, { type: 'line', data: { labels: labels, datasets: dataHumidity, }, options: { title: { display: true, text: 'Luftfeuchtigkeitverlauf' } } }); } // Modulo-Bug: http://javascript.about.com/od/problemsolving/a/modulobug.htm Number.prototype.mod = function(n) { return ((this%n)+n)%n; } function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; }