Tutorials/Wireless/wideband: channel_sounding_display.html

File channel_sounding_display.html, 4.6 KB (added by prasanthi, 5 years ago)
Line 
1<head>
2 <!-- Plotly.js -->
3 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
4</head>
5<h1> Wideband Channel Sounding</h1>
6
7<body>
8 Group
9 <select id = group>
10 <option value="01">red</option>
11 <option value="02">yellow</option>
12 <option value="03">green</option>
13 <option value="04">purple</option>
14 <option value="05">blue</option>
15 <option value="06">black</option>
16 <option value="07">cyan</option>
17 <option value="08">white</option>
18 <option value="09">orange</option>
19 <option value="10">pink</option>
20 <option value="11">tan</option>
21 <option value="12">gray</option>
22 <option value="13">brown</option>
23 <option value="14">silver</option>
24 <option value="15">gold</option>
25 </select>
26
27
28 <button onclick="connect()">Connect</button>
29 <button onclick="start_channel_sound()">Start</button>
30
31 <div id="mySpec0" style="width: 720px; height: 480px;"><!-- Plotly chart will be drawn inside this DIV --></div>
32
33
34 <script>
35 function start_channel_sound()
36 {
37 my_socket.send("GetConfig");
38 setInterval(tmr_handler, 200);
39 }
40
41 function get_corr()
42 {
43 my_socket.send("GetSamples");
44 }
45
46 function tmr_handler()
47 {
48 get_corr();
49 }
50
51
52 var getconfig = 1;
53 var numCh = 1;
54 var PNLength = 63;
55 var freq = 2400;
56 var rate = 5;
57 var addrs = [];
58 var my_socket;
59
60 //if ("WebSocket" in window){
61 function connect(){
62 if ("WebSocket" in window){
63 var groupelement = document.getElementById("group");
64 var URL = "ws://console.grid.orbit-lab.org:51" + groupelement.options[groupelement.selectedIndex].value;
65 my_socket = new WebSocket(URL, 'binary');
66 my_socket.binaryType = "arraybuffer";
67 my_socket.onopen = function (evt) {
68 console.log('WebSocket open: ', evt);
69 }
70 my_socket.onclose = function (evt) {
71 console.log('WebSocket close: ' + evt.data);
72 };
73 my_socket.onerror = function (evt) {
74 console.log('WebSocket Error ' + evt.data);
75 };
76
77 my_socket.onmessage = function (evt) {
78 if(evt.data instanceof ArrayBuffer) {
79 var header = new Uint32Array(evt.data.slice(0,4));
80 if (header[0] == 0xC0)
81 {
82 console.log("Rcvd config data");
83 var config = new Uint32Array(evt.data.slice(4,12));
84 console.log(config[0]); // Number of channels
85 if(config[0] > 8)
86 numCh = 8;
87 else
88 numCh = config[0];
89 console.log(config[1]); // FFT size
90 PNLength = config[1];
91 freq = new Float64Array(evt.data.slice(12,20)); // center frequency
92 rate = new Float64Array(evt.data.slice(20,28)); // Sampling rate
93 rate = rate*numCh;
94 console.log(PNLength);
95 console.log(freq);
96 console.log(rate);
97 var addrCharArray = new Uint8Array(evt.data.slice(28));
98 var addrString = String.fromCharCode.apply(String, addrCharArray);
99 addrs = addrString.split(','); // IP addresses of the channels
100 //console.log(addrs[0], addrs[1]);
101 }
102 else if(header[0] == 0xC1)
103 {
104 console.log("Rcvd samples");
105 var samp_array = new Uint32Array(evt.data.slice(4));
106 console.log(samp_array[0], samp_array[1]);
107 draw_plot(samp_array);
108
109 }
110 }
111 else {
112 console.log("Unsupported type received.")
113 }
114 }
115 }
116 else {
117 alert("WebSocket NOT supported by your Browser!");
118 }
119 }
120
121 function draw_plot(samp_array)
122 {
123 var xindex = [];
124 var yValues = [];
125 var data = [];
126 var layout = [];
127
128 for(var i = 0; i<PNLength; i++)
129 {
130 xindex[i] = i;
131 }
132 for(var i = 0; i <numCh; i++)
133 {
134 var ySingleValues = [];
135 for(var j = 0; j<PNLength; j++)
136 {
137 //ySingleValues[j] = 10*Math.log10(samp_array[ (PNLength*i) + j ]);
138 ySingleValues[j] = (samp_array[ (PNLength*i) + j ]);
139 if(ySingleValues[j] < 0)
140 ySingleValues[j] = 0;
141 }
142 yValues.push(ySingleValues);
143 }
144
145 for(var i = 0; i<numCh; i++)
146 {
147 data[i] = {
148 x: xindex,
149 y: yValues[i],
150 name: addrs[i],
151 type: 'scatter'
152 };
153 }
154
155 layout = {
156 xaxis : { range: [0 , PNLength], title: "Delay"},
157 yaxis : { autorange: true, title:"Received Power"}
158 }
159
160 Plotly.newPlot('mySpec0', data , layout);
161
162 }
163
164 </script>
165</body>
166