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;
}