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