1 <!DOCTYPE html>
2 <html lang="en">
3 <!--
4 /******************************************************************************
6 @file collectorApp.html
8 @brief front end file
10 Group: WCS LPC
11 $Target Device: DEVICES $
13 ******************************************************************************
14 $License: BSD3 2016 $
15 ******************************************************************************
16 $Release Name: PACKAGE NAME $
17 $Release Date: PACKAGE RELEASE DATE $
18 *****************************************************************************/
19 -->
20 <head>
21 <meta charset="utf-8">
22 <meta http-equiv="X-UA-Compatible" content="IE=edge">
23 <meta name="viewport" content="width=device-width, initial-scale=1">
24 <!-- The above 3 meta tags *must* come first in the head; any other
25 head content must come *after* these tags -->
26 <meta name="description" content="">
27 <meta name="author" content="Suyash Jain">
29 <title>Sensor-To-Cloud IBM Gateway</title>
30 <!-- Bootstrap core CSS -->
31 <link href="dist/css/bootstrap.min.css" rel="stylesheet">
32 <script src="dist/js/bootstrap.min.js"></script>
34 <style>
35 /* Sets the device information block to scroll after
36 set height */
37 #ConnectedDeviceWrapper {
38 max-height: 400px;
39 overflow-y: auto;
40 }
41 /* set alignment for table elements */
42 .table > tbody > tr > td {
43 vertical-align: middle;
44 }
45 </style>
47 </head>
49 <body>
50 <nav class="navbar navbar-inverse navbar-fixed-top">
51 <div class="navbar-header">
52 <a class="navbar-brand" href="#">TI 15.4-Stack Sensor-To-Cloud IBM Gateway</a>
53 <ul class="nav navbar-nav navbar-right">
54 <!-- Button trigger modal -->
55 <li><a class=" glyphicon glyphicon-cog" data-toggle="modal" data-target="#myModalNorm"></a></li>
56 </ul>
57 </div>
59 </nav>
62 <!-- Modal -->
63 <div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
64 aria-labelledby="myModalLabel" aria-hidden="true">
65 <div class="modal-dialog">
66 <div class="modal-content">
67 <!-- Modal Header -->
68 <div class="modal-header">
69 <button type="button" class="close"
70 data-dismiss="modal">
71 <span aria-hidden="true">×</span>
72 <span class="sr-only">Close</span>
73 </button>
74 <h4 class="modal-title" id="myModalLabel">
75 IBM IoT Credentials
76 </h4>
77 </div>
79 <!-- Modal Body -->
80 <div class="modal-body">
82 <form role="form">
83 <div class="form-group">
84 <label for="ServiceName">Service Name</label>
85 <input type="text" class="form-control"
86 id="ServiceName" placeholder="Enter Service Name"/>
87 </div>
88 <div class="form-group">
89 <label for="Id">ID</label>
90 <input type="text" class="form-control"
91 id="Id" placeholder="Enter iot Credentials Identifier"/>
92 </div>
93 <div class="form-group">
94 <label for="Org">Org</label>
95 <input type="text" class="form-control"
96 id="Org" placeholder="Enter org"/>
97 </div>
98 <div class="form-group">
99 <label for="ApiKey">API Key</label>
100 <input type="text" class="form-control"
101 id="ApiKey" placeholder="Enter api Key"/>
102 </div>
103 <div class="form-group">
104 <label for="ApiToken">API Token</label>
105 <input type="text" class="form-control"
106 id="ApiToken" placeholder="Enter api Token"/>
107 </div>
108 <div class="form-group">
109 <label for="type">Device Type</label>
110 <input type="text" class="form-control"
111 id="type" placeholder="Enter Device Type"/>
112 </div>
113 <div class="form-group">
114 <label for="typeId">Device ID</label>
115 <input type="text" class="form-control"
116 id="typeId" placeholder="Enter Device Id"/>
117 </div>
119 <div class="modal-footer">
120 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
121 <input id="changeBtn" type="button" class="btn btn-primary" value = "Save changes" data-dismiss="modal"/>
122 </div>
123 </form>
124 </div>
125 </div>
126 </div>
127 </div>
130 <!-- Main jumbotron -->
131 <div class="jumbotron">
132 <div class="container">
133 <h2>TI 15.4-Stack Linux Gateway Example Application</h2>
134 </div>
135 </div>
137 <div class="container">
138 <!--main data -->
139 <div class="row">
140 <div class="col-md-4">
141 <div id="networkInformationWrapper">
142 <div class="panel-group">
143 <div class="panel panel-default">
144 <div class="panel-heading">
145 <h4><b>Network Information</b></h4></div>
146 <!-- h2 >Network Information</h2 -->
147 <table class="table table-hover table-responsive nwkInformationTable">
148 <tr>
149 <td>PanID</td>
150 <td><span id="panid"></span></td>
151 </tr>
152 <tr>
153 <td>Coord Addr</td>
154 <td><span id="coordAddr"></span></td>
155 </tr>
156 <tr>
157 <td>Network Mode</td>
158 <td><span id="networkmode"></span></td>
159 </tr>
160 <tr>
161 <td>Security</td>
162 <td><span id="security"></span></td>
163 </tr>
165 <tr class="networkstate">
166 <td id="nwkStateText">
167 Network close for New Devices
168 </td>
169 <td>
170 <button type=button class=btn btn-default id="allowJoin">open</button>
171 </td>
172 </tr>
173 </table>
174 </div>
175 </div>
176 </div>
178 <div>
179 <div class="panel-group">
180 <div class="panel panel-default">
181 <div id="networkConvasPanel" class="panel-heading">
182 <h4><b>Network</b></h4></div>
183 <canvas id="networkCanvas" class="canvas"></canvas>
184 </div>
185 </div>
186 </div>
187 </div>
189 <div class="col-md-8">
190 <!-- Device List Information Box -->
191 <div class="panel-group">
192 <div class="panel panel-default">
193 <div class="panel-heading">
194 <h4><b>Sensor Nodes</b></h4></div>
195 <table class="table table-hover table-responsive">
196 <tr >
197 <th class="text-left">Device Info</th>
198 <th class="text-center">Sensors Data</th>
199 <th class="text-center">Toggle-Req</th>
200 </tr>
201 </table>
202 <div id="ConnectedDeviceWrapper">
203 <table id="deviceTable" class="table table-hover table-responsive ">
204 </table>
205 </div>
206 </div>
207 </div>
209 <div id="humChart">
210 </div>
212 <div id="tempChart">
213 </div>
215 <div id="iluChart">
216 </div>
219 </div>
222 </div>
224 <footer>
225 <p>© 2016-17 Texas Instruments Incorporated.</p>
226 </footer>
227 </div>
228 <!-- /container -->
229 <!-- Bootstrap core JavaScript
230 ================================================== -->
231 <!-- Placed at the end of the document so the pages load faster -->
232 <script src="dist/jquery/jquery-1.12.0.min.js"></script>
233 <script>
234 window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
235 </script>
236 <script src="dist/js/bootstrap.min.js"></script>
237 <script src="/socket.io/socket.io.js"></script>
239 <script type="text/javascript" src="dist/jquery/jquery.jqplot.min.js"></script>
240 <script type="text/javascript" src="dist/jquery/jqplot.logAxisRenderer.js"></script>
241 <script type="text/javascript" src="dist/jquery/jqplot.canvasTextRenderer.js"></script>
242 <script type="text/javascript" src="dist/jquery/jqplot.canvasAxisLabelRenderer.js"></script>
243 <script type="text/javascript" src="dist/jquery/jqplot.canvasAxisTickRenderer.js"></script>
244 <script type="text/javascript" src="dist/jquery/jqplot.dateAxisRenderer.js"></script>
245 <script type="text/javascript" src="dist/jquery/jqplot.categoryAxisRenderer.js"></script>
246 <link rel="stylesheet" type="text/css" href="dist/css/jquery.jqplot.css" />
249 <script>
251 $(function(){
253 var devs = {};
254 var socket = io.connect();
255 /* Device table */
256 var $deviceTable = $('#deviceTable');
258 /* Network Information Block */
259 var $panid = $('#panid');
260 var $coordAddr = $('#coordAddr');
261 var $security = $('#security');
262 var $networkmode = $('#networkmode');
264 /* connected device information */
265 var connectedDeviceArray;
266 var devArrayRequested = 0;
268 /* Request device list and newtork information on successful connection */
269 socket.on('connect', function () {
270 /* Request device array */
271 if (devArrayRequested === 0) {
272 socket.emit('getNwkInfoReq');
273 socket.emit('getDevArrayReq');
274 devArrayRequested = 1;
275 }
276 });
278 /* Handling Newtork open close button */
279 var $allowJoin = $('#allowJoin');
280 var buttonTimer;
282 /* Initialize network state button */
283 $('.networkstate').hide();
285 /* callback function */
286 function collectorApp_permitJoinButtonCb() {
287 /* did not recieve a confirm to the request */
288 clearInterval(buttonTimer);
290 if ($allowJoin.html() == "opening..") {
291 /* need to retry */
292 $allowJoin.html("open");
293 }
294 else if ($allowJoin.html() == "closing..") {
295 /* need to retry */
296 $allowJoin.html("close");
297 }
298 }
300 /* Handle button press */
301 $allowJoin.click(function () {
302 if ($allowJoin.text() == "open") {
303 /* network is open - lets close */
304 socket.emit('setJoinPermit', { action: 'open' });
305 $allowJoin.html("opening..");
306 buttonTimer = setInterval(collectorApp_permitJoinButtonCb, 2000);
307 }
308 else {
309 /* network is closed - lets open */
310 socket.emit('setJoinPermit', { action: 'close' });
311 $allowJoin.html("closing..");
312 buttonTimer = setInterval(collectorApp_permitJoinButtonCb, 2000);
313 }
314 });
318 /*********************************************************************
319 * Plotting functions
320 * *******************************************************************/
322 /* Initialize */
323 var networkCanvas = document.getElementById('networkCanvas');
324 var networkCanvasContext = networkCanvas.getContext('2d');
326 /* After getting the device array response plot the devices */
327 function collectorApp_drawNetwork(devArray) {
328 var width = networkCanvas.width;
329 var height = networkCanvas.height;
331 /* erase the canvas */
332 networkCanvasContext.clearRect(0, 0, width, height);
334 /* set canvas x/y to center */
335 networkCanvasContext.translate(width / 2, height / 2);
337 /* variables used for plotting*/
338 var x, y, r, s, angle, i;
340 /* draw central node -- panCoord
341 set up pan-coord parameters */
342 x = 0;
343 y = 0;
344 s = 7;
345 color = "DarkBlue";
346 /* draw concentrator */
347 networkCanvasContext.beginPath();
348 networkCanvasContext.arc(x, y, s, 0, 2 * Math.PI);
349 networkCanvasContext.fillStyle = color;
350 networkCanvasContext.fill();
351 /* select the starting angle for the first node to be 90 */
352 angle = 90;
353 /* calculate the difference in angle between two devices */
354 var diff = 360 / connectedDeviceArray.length;
355 /* draw nodes */
356 for (i = 0; i < connectedDeviceArray.length; i++) {
357 color = "grey";
358 angle = 90 + (i * diff);
360 rssi = connectedDeviceArray[i].rssi;
361 /* set parameters */
362 /* scale RSSI for short range */
363 r = ((height - 80) / 2) * (rssi / -128) + (s * 3);
364 x = r * Math.cos((angle * (Math.PI / 180)));
365 y = r * Math.sin((angle * (Math.PI / 180)));
366 s = 7;
367 /* Draw line to Concentrator (node 0) */
368 networkCanvasContext.setLineDash([5, 2]);
369 networkCanvasContext.beginPath();
370 networkCanvasContext.moveTo(0, 0);
371 networkCanvasContext.lineTo(x, y);
372 networkCanvasContext.strokeStyle = 'black';
373 networkCanvasContext.stroke();
374 /* render the node */
375 networkCanvasContext.beginPath();
376 networkCanvasContext.arc(x, y, s, 0, 2 * Math.PI);
377 networkCanvasContext.fillStyle = color;
378 networkCanvasContext.fill();
379 }
380 /* set canvas x/y back to 0,0 */
381 networkCanvasContext.translate(-(width / 2), -(height / 2));
382 }
385 /**********************************************************************
386 Process incoming message from the server
387 ***********************************************************************/
388 /* JSON object coming in for each of the messages below
389 has following elements
390 {
391 active,
392 capabilityInfo,
393 extAddress,
394 humiditysensor,
395 {
396 humidity,
397 temp
398 }
399 lightsensor,
400 {
401 rawData
402 }
403 pollingInterval,
404 reportingInterval,
405 rssi,
406 shortAddress,
407 temperaturesensor,
408 {
409 ambienceTemp,
410 objectTemp
411 }
412 }
413 */
415 function updateDevs(extAddr){
417 var addr = extAddr;
418 var element = {"hum" : [], "ilu" : [], "temp" : []};
419 var length;
421 if(!devs.hasOwnProperty(addr)){
422 console.log("does not have hasOwnProperty");
423 devs[addr] = element;
425 }
427 else{
429 length = devs[addr].hum.length;
430 console.log("length is:" + length.toString());
431 if( length >= 60){
432 console.log("its greater than 60!!");
433 devs[addr].hum.shift();
434 }
436 length = devs[addr].temp.length;
438 if(length >= 60){
439 devs[addr].temp.shift();
440 }
442 length = devs[addr].ilu.length;
444 if(length >= 60){
445 devs[addr].ilu.shift();
446 }
447 }
448 }
450 function collectorApp_updateNwkInfo(data) {
451 /* clear the curent table entries */
452 $deviceTable.empty();
453 connectedDeviceArray = JSON.parse(data);
454 var len = connectedDeviceArray.length;
455 var count;
457 /* Draw Network */
458 collectorApp_drawNetwork(connectedDeviceArray);
460 for (count = 0; count < len; count++) {
461 var devInfo = connectedDeviceArray[count];
462 var sAddr;
463 var extAddr = "";
464 var sensorS = '<table id=SensorID class="table table-hover table-responsive ">';
465 /* sensor data and rssi is not present when a device
466 info is recieved just after join */
467 var sensorDataFound = 0;
468 var rssi;
470 if (devInfo.hasOwnProperty('rssi')){
471 rssi = devInfo.rssi;
472 }
473 else {
474 rssi = "--";
475 }
477 /* Set the values to update */
478 if (devInfo.hasOwnProperty('shortAddress')
479 && devInfo.hasOwnProperty('extAddress')) {
480 /* short address */
481 sAddr = devInfo.shortAddress.slice(2);
482 /* Extended address */
483 extAddr = devInfo.extAddress.slice(2).toString(16);
485 }
486 else {
487 console.log("new device message missing required parameters");
488 continue;
489 }
491 updateDevs(extAddr);
493 /* Check supported sensors and get the values */
494 if (devInfo.hasOwnProperty('humiditysensor')) {
495 sensorDataFound = 1;
497 devs[extAddr].hum.push(parseFloat(devInfo.humiditysensor.humidity).toFixed(1));
499 sensorS += '<tr><td><img src="dist/images/Humidity.png " alt="some_text" height="30" width="30"></td><td>' + parseFloat(devInfo.humiditysensor.humidity).toFixed(1) + '% RH </td></tr>';
500 }
501 if (devInfo.hasOwnProperty('temperaturesensor')) {
502 sensorDataFound = 1;
504 devs[extAddr].temp.push(parseFloat(devInfo.temperaturesensor.ambienceTemp).toFixed(1));
506 sensorS += '<tr><td><img src="dist/images/Temperature.png " alt="some_text" height="30" width="30"></td><td>' + parseFloat(devInfo.temperaturesensor.ambienceTemp).toFixed(1) + '°C</td></tr>';
507 }
509 if (devInfo.hasOwnProperty('lightsensor')) {
510 sensorDataFound = 1;
512 devs[extAddr].ilu.push(devInfo.lightsensor.rawData);
514 sensorS += '<tr><td><img src="dist/images/Light.png " alt="some_text" height="30" width="30"></td><td>' + devInfo.lightsensor.rawData + 'lux </td></tr>';
515 }
517 if (devInfo.hasOwnProperty('doorlock')) {
518 sensorDataFound = 1;
519 console.log("checking actuator status");
520 if(devInfo.doorlock.value == 1){
521 sensorS += '<tr><td><img src="dist/images/Lock.png " alt="some_text" height="30" width="30"></td><td>' + 'Locked </td></tr>';
522 }
523 else if(devInfo.doorlock.value == 0){
524 sensorS += '<tr><td><img src="dist/images/Unlock.png " alt="some_text" height="30" width="30"></td><td>' + 'Unlocked </td></tr>';
525 }
526 }
528 if (devInfo.hasOwnProperty('fan')) {
529 sensorDataFound = 1;
530 console.log("checking actuator status");
531 sensorS += '<tr><td><img src="dist/images/Fan.png " alt="some_text" height="30" width="30"></td><td>Speed: ' + devInfo.fan.value +'</td><tr>';
532 }
534 if(devInfo.hasOwnProperty("pressuresensor")){
535 sensorDataFound = 1;
536 sensorS += '<tr><td><img src="dist/images/Pressure.png " alt="some_text" height="30" width="30"></td><td>' + Math.round(devInfo.pressuresensor.pressure) + ' Pa </td></tr>';
537 }
539 if (devInfo.hasOwnProperty('motionsensor')) {
540 sensorDataFound = 1;
541 //console.log("Motion: ", devInfo.motionsensor.isMotion);
542 if (devInfo.motionsensor.isMotion) {
543 sensorS += '<tr><td><img src="dist/images/Motion.png" height="30" width="30"></td><td>' + 'Motion Detected' + '</td></tr>';
544 } else {
545 sensorS += '<tr><td><img src="dist/images/No_Motion.png" height="30" width="30"></td><td>'+ 'No Motion' +'</td></tr>';
546 }
548 }
550 if (devInfo.hasOwnProperty('halleffectsensor')) {
551 sensorDataFound = 1;
552 //console.log("Door/Window isOpen: ",devInfo.halleffectsensor.isOpen);
553 if(devInfo.halleffectsensor.isOpen) {
554 sensorS += '<tr><td><img src="dist/images/door_open.png" height="30" width="30"></td><td>' + 'Door/Window Open' + '</td></tr>';
555 } else {
556 sensorS += '<tr><td><img src="dist/images/door.png" height="30" width="30"></td><td>' + 'Door/Window Closed' + '</td></tr>';
557 }
558 }
560 if (devInfo.hasOwnProperty('batterysensor')) {
561 sensorDataFound = 1;
562 //console.log("BatteryVoltage: ", devInfo.batterysensor.voltageValue);
563 if (devInfo.batterysensor.voltage > 2800)
564 {
565 sensorS += '<tr><td><img src="dist/images/battery_full.png" height="30" width="30"></td><td>' + devInfo.batterysensor.voltage+ ' mV </td></tr>';
566 }
567 else if (devInfo.batterysensor.voltage > 2300)
568 {
569 sensorS += '<tr><td><img src="dist/images/battery_half.png" height="30" width="30"></td><td>' + devInfo.batterysensor.voltage+ ' mV </td></tr>';
570 }
571 else
572 {
573 sensorS += '<tr><td><img src="dist/images/battery_low.png" height="30" width="30"></td><td>' + devInfo.batterysensor.voltage+ ' mV </td></tr>';
574 }
576 }
578 if (devInfo.hasOwnProperty('lastreported')) {
579 sensorDataFound = 1;
580 //console.log("Lastreported: ", devInfo.lastreported);
581 sensorS += '<tr><td><img src="dist/images/time.png" height="30" width="30"></td><td>' + devInfo.lastreported + '</td></tr>';
584 }
586 if (sensorDataFound == 0)
587 {
588 sensorS += "--";
589 }
591 sensorS += '</table>';
593 /* add/update device information */
594 $deviceTable.prepend('<tr><td><table class="table table-responsive"><tr><td>SAddr: 0x' + sAddr.toString(16) + '</td></tr><tr class="ieee"><td>ExAddr: 0x' + extAddr.toString(16).toUpperCase() + '</td></tr><tr><td>RSSI: ' + rssi + ' dBm</td></tr></table></td><td>' + sensorS + '</td>><td>' + "<p button type=button class='test btn btn-default'>Red LED" + "</p>"+'</td></tr>');
596 if (devInfo.active == 'true') {
597 /* active device */
598 }
599 else {
600 $('#deviceTable tr:first').fadeTo(1000, 0.4);
601 }
602 }
603 }
605 $deviceTable.on("click", "p.submit", function(){
606 var speed = $("#Speed").val();
607 let data = $(this).closest('tr').find('td:first').text();
608 let n = data.indexOf("ExAddr");
609 let m = data.indexOf("0x");
610 var shortAddr = data.substring((m),(n));
611 socket.emit('sendToggle', {dstAddr: shortAddr, value: speed});
612 });
614 $deviceTable.on("click", "p.test", function(){
616 var value = $('#toggle').text();
617 console.log("value:" + value.toString());
618 let data = $(this).closest('tr').find('td:first').text();
619 let n = data.indexOf("ExAddr");
620 let m = data.indexOf("0x");
621 var shortAddr = data.substring((m),(n));
622 console.log("addr:" + shortAddr.toString());
624 if(value == "Lock"){
625 socket.emit('sendToggle', {dstAddr: shortAddr, value: 1});
626 }
627 else{
628 socket.emit('sendToggle', {dstAddr: shortAddr, value: 0});
629 }
630 });
632 $deviceTable.on("click", "p.graph", function(){
634 $('#humChart').empty();
635 $('#tempChart').empty();
636 $('#iluChart').empty();
638 $('#humChart').hide();
639 $('#tempChart').hide();
640 $('#iluChart').hide();
642 var extAddr = $(this).closest('tr').find('td:eq(1)');
644 var humChart = [];
645 humChart = devs[extAddr.text().toLowerCase()].hum;
647 var tempChart = [];
648 tempChart = devs[extAddr.text().toLowerCase()].temp;
650 var iluChart = [];
651 iluChart = devs[extAddr.text().toLowerCase()].ilu;
653 if(humChart.length > 1){
654 $('#humChart').show();
655 var plot1 = $.jqplot('humChart', [humChart], {
656 legend: {show:false},
657 axes:{
658 xaxis:{
659 tickOptions:{
660 angle: -30
661 },
662 tickRenderer:$.jqplot.CanvasAxisTickRenderer,
663 label:'Time',
664 labelOptions:{
665 fontFamily:'Helvetica',
666 fontSize: '14pt'
667 },
668 labelRenderer: $.jqplot.CanvasAxisLabelRenderer
669 },
670 yaxis:{
671 renderer:$.jqplot.LogAxisRenderer,
672 tickOptions:{
673 labelPosition: 'middle',
674 angle:-30
675 },
676 tickRenderer:$.jqplot.CanvasAxisTickRenderer,
677 labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
678 labelOptions:{
679 fontFamily:'Helvetica',
680 fontSize: '14pt'
681 },
682 label:'Humidity Over Time'
683 }
684 }
685 });
686 }
688 if(tempChart.length > 1){
689 $('#tempChart').show();
690 var plot2 = $.jqplot('tempChart', [tempChart], {
691 legend: {show:false},
692 axes:{
693 xaxis:{
694 tickOptions:{
695 angle: -30
696 },
697 tickRenderer:$.jqplot.CanvasAxisTickRenderer,
698 label:'Time',
699 labelOptions:{
700 fontFamily:'Helvetica',
701 fontSize: '14pt'
702 },
703 labelRenderer: $.jqplot.CanvasAxisLabelRenderer
704 },
705 yaxis:{
706 renderer:$.jqplot.LogAxisRenderer,
707 tickOptions:{
708 labelPosition: 'middle',
709 angle:-30
710 },
711 tickRenderer:$.jqplot.CanvasAxisTickRenderer,
712 labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
713 labelOptions:{
714 fontFamily:'Helvetica',
715 fontSize: '14pt'
716 },
717 label:'Temperature Over Time'
718 }
719 }
720 });
721 }
724 if(iluChart.length > 1){
725 $('#iluChart').show();
726 var plot3 = $.jqplot('iluChart', [iluChart], {
727 legend: {show:false},
728 axes:{
729 xaxis:{
730 tickOptions:{
731 angle: -30
732 },
733 tickRenderer:$.jqplot.CanvasAxisTickRenderer,
734 label:'Time',
735 labelOptions:{
736 fontFamily:'Helvetica',
737 fontSize: '14pt'
738 },
739 labelRenderer: $.jqplot.CanvasAxisLabelRenderer
740 },
741 yaxis:{
742 renderer:$.jqplot.LogAxisRenderer,
743 tickOptions:{
744 labelPosition: 'middle',
745 angle:-30
746 },
747 tickRenderer:$.jqplot.CanvasAxisTickRenderer,
748 labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
749 labelOptions:{
750 fontFamily:'Helvetica',
751 fontSize: '14pt'
752 },
753 label:'Lux Over Time'
754 }
755 }
756 });
757 }
758 });
761 /* Rcvd device array */
762 socket.on('getdevArrayRsp', function (data) {
764 /* Check if the devices are connected */
765 if(data) {
766 /*update device information */
767 collectorApp_updateNwkInfo(data);
768 }
769 /* Request network information */
770 socket.emit('getNwkInfoReq');
771 });
773 /* Rcvd network information */
774 socket.on('nwkUpdate', function (data) {
775 /* Check if the network is connected */
776 if (!data) {
777 console.log("network is not started yet, we wait for update");
778 /* Non Hopping Network */
779 $panid.text('--');
780 $coordAddr.text('--');
781 $security.text('--');
782 $networkmode.text("Not Started");
783 /* exit */
784 return false;
785 }
787 var nwkInfo = JSON.parse(data);
788 $panid.text('0x' + nwkInfo.panCoord.panId.toString(16).slice(2).toUpperCase());
789 $coordAddr.text('0x' + nwkInfo.panCoord.shortAddress.toString(16).slice(2).toUpperCase());
790 $networkmode.text(nwkInfo.networkMode);
791 if (nwkInfo.securityEnabled === 1 ) {
792 $security.text("Enabled");
793 }
794 else {
795 $security.text("Disabled");
796 }
798 /* Out of box example application does not
799 support opening/closing the network in frequency hopping configuration */
800 if(nwkInfo.networkMode == "Freq Hopping"){
801 /* Hide the option to open or close the network for new device
802 joins */
803 $("#nwkInformationTable tbody tr.networkstate").hide();
804 }
807 /* Display Network State Information */
808 if (nwkInfo.state == "started") {
809 $("#nwkStateText").text("Network close for New Devices");
810 $allowJoin.text("open");
811 $('.networkstate').show();
812 }
813 else if (nwkInfo.state == "open") {
814 $("#nwkStateText").text("Network open for New Devices");
815 $allowJoin.text("close");
816 $('.networkstate').show();
817 }
818 else if (nwkInfo.state == "close") {
819 $("#nwkStateText").text("Network close for New Devices");
820 $allowJoin.text("open");
821 $('.networkstate').show();
822 }
823 });
825 /* Cloud Info Update */
826 $("#changeBtn").click(function(){
828 var data = {
829 ServiceName : $("#ServiceName").val(),
830 Id : $("#Id").val(),
831 Org : $("#Org").val(),
832 ApiKey : $("#ApiKey").val(),
833 ApiToken : $("#ApiToken").val(),
834 type : $("#type").val(),
835 typeId : $("#typeId").val()
836 };
838 console.log(JSON.stringify(data));
840 socket.emit('setIBMCredentials', data);
841 });
843 /* Rcvd connDevInfoUpdate message */
844 socket.on('connDevInfoUpdate', function (data) {
845 collectorApp_updateNwkInfo(data);
846 });
848 /* Rcvd permit join cnf */
849 socket.on('permitJoinCnf', function (data) {
850 clearInterval(buttonTimer);
851 if(data == "open"){
852 if ($allowJoin.html() == "opening..") {
853 /* need to retry */
854 $allowJoin.html("close");
855 }
856 }
857 else if(data == "close"){
858 if ($allowJoin.html() == "closing..") {
859 /* need to retry */
860 $allowJoin.html("open");
861 }
862 }
864 });
866 /* close connection */
867 $(window).on('beforeunload', function(){
868 socket.close();
869 });
870 });
871 </script>
872 </body>
873 </html>