Browse Source

Translated JS

Thomas Buck 7 years ago
parent
commit
15edcadc35
3 changed files with 44 additions and 29 deletions
  1. 4
    0
      .gitignore
  2. 39
    28
      client-script.js
  3. 1
    1
      static.h

+ 4
- 0
.gitignore View File

1
 .DS_Store
1
 .DS_Store
2
+Icon

3
+
4
+.fseventsd
5
+.VolumeIcon.icns

+ 39
- 28
client-script.js View File

14
 
14
 
15
 textAvailableSensors = "Available Sensors";
15
 textAvailableSensors = "Available Sensors";
16
 textButtonNext = "Continue";
16
 textButtonNext = "Continue";
17
+homeTabName = "Home";
18
+sensorTabName = "Sensor";
19
+errorMessage = "Couldn't read sensor with IP: ";
20
+errorTitle = "Error: ";
21
+temperatureLabel = 'Temperature [C]';
22
+humidityLabel = 'Humidity [%RH]';
23
+temperatureHeading = "Temperature";
24
+humidityHeading = "Humidity";
17
 
25
 
18
 $(document).ready(function() {
26
 $(document).ready(function() {
19
     $('#main-part').append(`
27
     $('#main-part').append(`
34
             </div>
42
             </div>
35
         </div>`);
43
         </div>`);
36
 
44
 
37
-    // aktuelle Uhrzeit fuer die Graphen ermitteln
45
+    // Get current client-time for the graph X-axis labels
38
     var actTime = new Date();
46
     var actTime = new Date();
39
     actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes();
47
     actTime = actTime.getHours() + ":" + (actTime.getMinutes() < 10 ? '0':'') + actTime.getMinutes();
40
 
48
 
41
     $('#listSensorsHeading').empty();
49
     $('#listSensorsHeading').empty();
42
     $('#listSensorsHeading').html(textAvailableSensors + " (0/" + clients.length + ")");
50
     $('#listSensorsHeading').html(textAvailableSensors + " (0/" + clients.length + ")");
43
 
51
 
44
-    // Alle clients im Array iterieren und Websocket abfragen
52
+    // Iterate all given client IPs and get their data using Websocket
45
     var count = [0];
53
     var count = [0];
46
     jQuery.each(clients, function(index, client) {
54
     jQuery.each(clients, function(index, client) {
47
         webSocket(client, "2391", count, clients.length);
55
         webSocket(client, "2391", count, clients.length);
48
     });
56
     });
49
 
57
 
50
-    // Submit-Button fuer die Formulareingabe
58
+    // Button to continue to graph view
51
     $("#btnSubmit").click(function(event) {
59
     $("#btnSubmit").click(function(event) {
52
         $('#contentDiv').empty();
60
         $('#contentDiv').empty();
53
         generateView(arrSensor, actTime);
61
         generateView(arrSensor, actTime);
61
     websocket.onmessage = function(evt) {
69
     websocket.onmessage = function(evt) {
62
         var jsonData = jQuery.parseJSON(evt.data);
70
         var jsonData = jQuery.parseJSON(evt.data);
63
         count[0]++;
71
         count[0]++;
64
-        var sensor = {id: count[0], ip: wsUri, actualTemp: jsonData['T'], actualHum: jsonData['H']};
72
+        var sensor = {id: count[0], ip: wsUri, currentTemp: jsonData['T'], currentHum: jsonData['H']};
65
         var arrEEPROM = Array();
73
         var arrEEPROM = Array();
66
         jQuery.each(jsonData['EEPROM'], function(index, data) {
74
         jQuery.each(jsonData['EEPROM'], function(index, data) {
67
             arrEEPROM.push(data);
75
             arrEEPROM.push(data);
72
         $('#listSensors').append('<li class="list-group-item">' +
80
         $('#listSensors').append('<li class="list-group-item">' +
73
                                     ' Sensor ' + sensor.id +
81
                                     ' Sensor ' + sensor.id +
74
                                     ' | IP: ' + sensor.ip +
82
                                     ' | IP: ' + sensor.ip +
75
-                                    ' | aktuelle Temperatur: ' + sensor.actualTemp +
76
-                                    ' | aktuelle Luftfeuchtigkeit: ' + sensor.actualHum +
83
+                                    ' | Temperature: ' + sensor.currentTemp +
84
+                                    ' | Humidity: ' + sensor.currentHum +
77
                                 '</li>');
85
                                 '</li>');
78
 
86
 
79
-        // Alle Sensoren erfolgreich abgefragt
87
+        // Enable continue buttons when all modules have been reached
80
         if(count[0] == clientsCount) {
88
         if(count[0] == clientsCount) {
81
             $('#btnSubmit').prop("disabled", false);
89
             $('#btnSubmit').prop("disabled", false);
82
         }
90
         }
83
     };
91
     };
84
     websocket.onerror = function(evt) {
92
     websocket.onerror = function(evt) {
85
         if($('#websocketError').length ) {
93
         if($('#websocketError').length ) {
86
-            $('.alert-danger').append('Sensor mit der IP:' + wsUri + ' konnte nicht abgefragt werden! <br>');
94
+            $('.alert-danger').append(errorMessage + wsUri + '<br>');
87
         } else {
95
         } else {
88
             $('#alertDiv').append('<div class="alert alert-danger" id="websocketError">' +
96
             $('#alertDiv').append('<div class="alert alert-danger" id="websocketError">' +
89
-                                    '<strong>Fehler:</strong><br>Sensor mit der IP:' + wsUri + ' konnte nicht abgefragt werden! <br>' +
90
-                              '</div>');
97
+                                    '<strong>' + errorTitle
98
+                                    + '</strong><br>' + errorMessage
99
+                                    + wsUri + '<br></div>');
91
         }
100
         }
92
         console.log(evt.data);
101
         console.log(evt.data);
93
     };
102
     };
97
     $('#contentDiv').append(`<div class="col-md-12 col-lg-12">
106
     $('#contentDiv').append(`<div class="col-md-12 col-lg-12">
98
                                 <div class="panel panel-primary">
107
                                 <div class="panel panel-primary">
99
                                     <ul class="nav nav-pills">
108
                                     <ul class="nav nav-pills">
100
-                                        <li class="active"><a class="navtab" data-toggle="tab" href="#home">Home</a></li>
109
+                                        <li class="active"><a class="navtab" data-toggle="tab" href="#home">` + homeTabName + `</a></li>
101
                                     </ul>
110
                                     </ul>
102
                                     <div class="panel-body">
111
                                     <div class="panel-body">
103
                                         <div id="contentPanel">
112
                                         <div id="contentPanel">
107
                             </div>`);
116
                             </div>`);
108
 
117
 
109
     jQuery.each(arrSensor, function(index, sensor) {
118
     jQuery.each(arrSensor, function(index, sensor) {
110
-        $('.nav-pills').append('<li><a class="navtab" data-toggle="tab" href="#' + sensor.id + '">Sensor ' + sensor.id + '</a></li>');
119
+        $('.nav-pills').append('<li><a class="navtab" data-toggle="tab" href="#' + sensor.id + '">' + sensorTabName + ' ' + sensor.id + '</a></li>');
111
     });
120
     });
112
 
121
 
113
-    // Flag fuer gemeinsamer Graph -> true
122
+    // flag for combined plot -> true
114
     generateGraph(true, arrSensor, actTime);
123
     generateGraph(true, arrSensor, actTime);
115
 
124
 
116
     $(".navtab").click(function(event) {
125
     $(".navtab").click(function(event) {
117
         $('#contentPanel').empty();
126
         $('#contentPanel').empty();
118
-        if(event.target.text == "Home") {
119
-            // Flag fuer gemeinsamer Graph -> true
127
+        if(event.target.text == homeTabName) {
128
+            // flag for combined plot -> true
120
             generateGraph(true, arrSensor, actTime);
129
             generateGraph(true, arrSensor, actTime);
121
         } else {
130
         } else {
122
             generateGraph(false, arrSensor[(event.target.text.split(" ")[1] - 1)], actTime);
131
             generateGraph(false, arrSensor[(event.target.text.split(" ")[1] - 1)], actTime);
133
                                     <canvas id="humidityChart"></canvas>
142
                                     <canvas id="humidityChart"></canvas>
134
                                 </div>
143
                                 </div>
135
                             </div>`);
144
                             </div>`);
136
-    if(flag) { // ein Graph für alle Sensoren
145
+    if (flag) {
146
+        // one plot for all sensors
137
         var length = 0;
147
         var length = 0;
138
         jQuery.each(sensor, function(index, tmp) {
148
         jQuery.each(sensor, function(index, tmp) {
139
             if(length < tmp.arrEEPROM.length) {
149
             if(length < tmp.arrEEPROM.length) {
155
         var tmpDataTemperature = Array();
165
         var tmpDataTemperature = Array();
156
         var tmpDataHumidity = Array();
166
         var tmpDataHumidity = Array();
157
         jQuery.each(sensor, function(index, tmp) {
167
         jQuery.each(sensor, function(index, tmp) {
158
-            for(var i = 0; i < (length - tmp.arrEEPROM.length); i++) {
168
+            for (var i = 0; i < (length - tmp.arrEEPROM.length); i++) {
159
                 tmpDataTemperature.push([]);
169
                 tmpDataTemperature.push([]);
160
                 tmpDataHumidity.push([]);
170
                 tmpDataHumidity.push([]);
161
             }
171
             }
163
                 tmpDataTemperature.push(value['T']);
173
                 tmpDataTemperature.push(value['T']);
164
                 tmpDataHumidity.push(value['H']);
174
                 tmpDataHumidity.push(value['H']);
165
             });
175
             });
166
-            tmpDataTemperature.push(tmp.actualTemp);
167
-            tmpDataHumidity.push(tmp.actualHum);
176
+            tmpDataTemperature.push(tmp.currentTemp);
177
+            tmpDataHumidity.push(tmp.currentHum);
168
 
178
 
169
             var lineColor = getRandomColor();
179
             var lineColor = getRandomColor();
170
-            dataTemperature.push({label: "Sensor " + tmp.id, data: tmpDataTemperature, fill: false,
180
+            dataTemperature.push({label: sensorTabName + " " + tmp.id, data: tmpDataTemperature, fill: false,
171
                 borderWidth: 3, borderColor : lineColor,});
181
                 borderWidth: 3, borderColor : lineColor,});
172
-            dataHumidity.push({label: "Sensor " + tmp.id, data: tmpDataHumidity, fill: false,
182
+            dataHumidity.push({label: sensorTabName + " " + tmp.id, data: tmpDataHumidity, fill: false,
173
                 borderWidth: 3, borderColor : lineColor,});
183
                 borderWidth: 3, borderColor : lineColor,});
174
 
184
 
175
             tmpDataTemperature = [];
185
             tmpDataTemperature = [];
176
             tmpDataHumidity = [];
186
             tmpDataHumidity = [];
177
         });
187
         });
178
-    } else { // Graph für einzelnen Sensor
188
+    } else {
189
+        // plot for one sensor
179
         var labels = Array();
190
         var labels = Array();
180
 
191
 
181
         var tmpDataTemperature = Array();
192
         var tmpDataTemperature = Array();
190
         });
201
         });
191
 
202
 
192
         labels.push(actTime);
203
         labels.push(actTime);
193
-        tmpDataTemperature.push(sensor.actualTemp);
194
-        tmpDataHumidity.push(sensor.actualHum);
204
+        tmpDataTemperature.push(sensor.currentTemp);
205
+        tmpDataHumidity.push(sensor.currentHum);
195
 
206
 
196
-        var dataTemperature = [{label: 'Temperatur [C]', data: tmpDataTemperature,
207
+        var dataTemperature = [{label: temperatureLabel, data: tmpDataTemperature,
197
                                 fill: false, borderWidth: 3, borderColor: '#337ab7',}];
208
                                 fill: false, borderWidth: 3, borderColor: '#337ab7',}];
198
-        var dataHumidity = [{label: 'Luftfeuchtigkeit [%RH]', data: tmpDataHumidity,
209
+        var dataHumidity = [{label: humidityLabel, data: tmpDataHumidity,
199
                                 fill: false, borderWidth: 3, borderColor: '#337ab7',}];
210
                                 fill: false, borderWidth: 3, borderColor: '#337ab7',}];
200
     }
211
     }
201
 
212
 
211
         options: {
222
         options: {
212
             title: {
223
             title: {
213
                 display: true,
224
                 display: true,
214
-                text: 'Temperaturverlauf'
225
+                text: temperatureHeading
215
             }
226
             }
216
         }
227
         }
217
     });
228
     });
225
         options: {
236
         options: {
226
             title: {
237
             title: {
227
                 display: true,
238
                 display: true,
228
-                text: 'Luftfeuchtigkeitverlauf'
239
+                text: humidityHeading
229
             }
240
             }
230
         }
241
         }
231
     });
242
     });

+ 1
- 1
static.h
File diff suppressed because it is too large
View File


Loading…
Cancel
Save