Tutorials/Wireless/Channel Sounding Krypton: channel_sounding_display_cosmos.html

File channel_sounding_display_cosmos.html, 4.1 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
6<body>
7
8
9 <button onclick="start_spectrum()">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_spectrum()
16 {
17 my_socket.send("GetConfig");
18 setInterval(tmr_handler, 100);
19 }
20
21 function get_spectrum()
22 {
23 my_socket.send("GetSamples");
24 }
25
26 function tmr_handler()
27 {
28 get_spectrum();
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 //clearTimeout( my_tmr );
40 //var my_tmr = setInterval(tmr_handler, 2000);
41
42 if ("WebSocket" in window){
43
44 var my_socket = new WebSocket("ws://localhost:5105/", 'binary');
45 my_socket.binaryType = "arraybuffer";
46 my_socket.onopen = function (evt) {
47 console.log('WebSocket open: ', evt);
48 }
49 my_socket.onclose = function (evt) {
50 console.log('WebSocket close: ' + evt.data);
51 };
52 my_socket.onerror = function (evt) {
53 console.log('WebSocket Error ' + evt.data);
54 };
55
56 my_socket.onmessage = function (evt) {
57 if(evt.data instanceof ArrayBuffer) {
58 var header = new Uint32Array(evt.data.slice(0,4));
59 if (header[0] == 0xC0)
60 {
61 console.log("Rcvd config data");
62 var config = new Uint32Array(evt.data.slice(4,12));
63 console.log(config[0]); // Number of channels
64 if(config[0] > 8)
65 numCh = 8;
66 else
67 numCh = config[0];
68 console.log(config[1]); // FFT size
69 PNLength = config[1];
70 freq = new Float64Array(evt.data.slice(12,20)); // center frequency
71 rate = new Float64Array(evt.data.slice(20,28)); // Sampling rate
72 rate = rate*numCh;
73 console.log(PNLength);
74 console.log(freq);
75 console.log(rate);
76 var addrCharArray = new Uint8Array(evt.data.slice(28));
77 var addrString = String.fromCharCode.apply(String, addrCharArray);
78 addrs = addrString.split(','); // IP addresses of the channels
79 //console.log(addrs[0], addrs[1]);
80 }
81 else if(header[0] == 0xC1)
82 {
83 console.log("Rcvd samples");
84 var samp_array = new Uint32Array(evt.data.slice(4));
85 //var sampuint16_array = new Uint16Array(evt.data.slice(2) ); // read uint16
86 //console.log(sampuint16_array[0], sampuint16_array[1], sampuint16_array[2], sampuint16_array[3]);
87 //var samp_array = new Uint32Array(numCh*fftSize);
88 //for(var i = 0; i < (numCh*fftSize); i++){
89 // samp_array[i] = sampuint16_array[2*i] + 65536*sampuint16_array[2*i + 1];
90 // }
91
92 console.log(samp_array[0], samp_array[1]);
93 draw_spectrum(samp_array);
94
95 }
96 }
97 else {
98 console.log("Unsupported type received.")
99 }
100 }
101 }
102 else {
103 alert("WebSocket NOT supported by your Browser!");
104 }
105
106 function draw_spectrum(samp_array)
107 {
108 var xindex = [];
109 var yValues = [];
110 var data = [];
111 var layout = [];
112 var hrate = rate/2;
113 //var sfreq = freq.valueOf() - hrate.valueOf();
114 //var efreq = freq.valueOf() + hrate.valueOf();
115 console.log(hrate);
116
117 for(var i = 0; i<PNLength; i++)
118 {
119 xindex[i] = i;
120 }
121 for(var i = 0; i <numCh; i++)
122 {
123 var ySingleValues = [];
124 for(var j = 0; j<PNLength; j++)
125 {
126 ySingleValues[j] = samp_array[ (PNLength*i) + j ];
127 }
128 yValues.push(ySingleValues);
129 }
130
131 for(var i = 0; i<numCh; i++)
132 {
133 data[i] = {
134 x: xindex,
135 y: yValues[i],
136 name: addrs[i],
137 type: 'scatter'
138 };
139 }
140
141 layout = {
142 xaxis : { range: [0 , PNLength], title: "Delay"},
143 yaxis : { range: [0, 400000], title:"PDP"}
144 }
145
146 Plotly.newPlot('mySpec0', data , layout);
147
148 }
149
150 </script>
151</body>
152