Tutorials/k0SDR/Tutorial24: spec_sense_display.html

File spec_sense_display.html, 4.0 KB (added by prasanthi, 7 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: 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