Tutorials/Wireless/Channel Sounding: channel_sounding_display.html

File channel_sounding_display.html, 3.6 KB (added by prasanthi, 6 years ago)
Line 
1<head>
2 <!-- Plotly.js -->
3 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
4</head>
5
6<body>
7
8
9 <button onclick="start_channel_sound()">Start</button>
10
11 <div id="mySpec0" style="width: 720px; height: 480px;"><!-- Plotly chart will be drawn inside this DIV --></div>
12
13
14 <script>
15 function start_channel_sound()
16 {
17 my_socket.send("GetConfig");
18 setInterval(tmr_handler, 200);
19 }
20
21 function get_corr()
22 {
23 my_socket.send("GetSamples");
24 }
25
26 function tmr_handler()
27 {
28 get_corr();
29 }
30
31
32 var getconfig = 1;
33 var numCh = 1;
34 var PNLength = 63;
35 var freq = 2400;
36 var rate = 5;
37 var addrs = [];
38
39 if ("WebSocket" in window){
40
41 var my_socket = new WebSocket("ws://localhost:5100/", 'binary');
42 my_socket.binaryType = "arraybuffer";
43 my_socket.onopen = function (evt) {
44 console.log('WebSocket open: ', evt);
45 }
46 my_socket.onclose = function (evt) {
47 console.log('WebSocket close: ' + evt.data);
48 };
49 my_socket.onerror = function (evt) {
50 console.log('WebSocket Error ' + evt.data);
51 };
52
53 my_socket.onmessage = function (evt) {
54 if(evt.data instanceof ArrayBuffer) {
55 var header = new Uint32Array(evt.data.slice(0,4));
56 if (header[0] == 0xC0)
57 {
58 console.log("Rcvd config data");
59 var config = new Uint32Array(evt.data.slice(4,12));
60 console.log(config[0]); // Number of channels
61 if(config[0] > 8)
62 numCh = 8;
63 else
64 numCh = config[0];
65 console.log(config[1]); // FFT size
66 PNLength = config[1];
67 freq = new Float64Array(evt.data.slice(12,20)); // center frequency
68 rate = new Float64Array(evt.data.slice(20,28)); // Sampling rate
69 rate = rate*numCh;
70 console.log(PNLength);
71 console.log(freq);
72 console.log(rate);
73 var addrCharArray = new Uint8Array(evt.data.slice(28));
74 var addrString = String.fromCharCode.apply(String, addrCharArray);
75 addrs = addrString.split(','); // IP addresses of the channels
76 //console.log(addrs[0], addrs[1]);
77 }
78 else if(header[0] == 0xC1)
79 {
80 console.log("Rcvd samples");
81 var samp_array = new Uint32Array(evt.data.slice(4));
82 console.log(samp_array[0], samp_array[1]);
83 draw_plot(samp_array);
84
85 }
86 }
87 else {
88 console.log("Unsupported type received.")
89 }
90 }
91 }
92 else {
93 alert("WebSocket NOT supported by your Browser!");
94 }
95
96 function draw_plot(samp_array)
97 {
98 var xindex = [];
99 var yValues = [];
100 var data = [];
101 var layout = [];
102
103 for(var i = 0; i<PNLength; i++)
104 {
105 xindex[i] = i;
106 }
107 for(var i = 0; i <numCh; i++)
108 {
109 var ySingleValues = [];
110 for(var j = 0; j<PNLength; j++)
111 {
112 //ySingleValues[j] = 10*Math.log10(samp_array[ (PNLength*i) + j ]);
113 ySingleValues[j] = (samp_array[ (PNLength*i) + j ]);
114 if(ySingleValues[j] < 0)
115 ySingleValues[j] = 0;
116 }
117 yValues.push(ySingleValues);
118 }
119
120 for(var i = 0; i<numCh; i++)
121 {
122 data[i] = {
123 x: xindex,
124 y: yValues[i],
125 name: addrs[i],
126 type: 'scatter'
127 };
128 }
129
130 layout = {
131 xaxis : { range: [0 , PNLength], title: "Delay"},
132 yaxis : { range: [0, 2000], title:"Received Power"}
133 }
134
135 Plotly.newPlot('mySpec0', data , layout);
136
137 }
138
139 </script>
140</body>
141