Tutorials/k0SDR/Tutorial24: spec_sense_display.html

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