Tutorials/k0SDR/Tutorial20: js_scatterplot.html

File js_scatterplot.html, 6.0 KB (added by nilanjan, 9 months ago)
Line 
1<head>
2  <!-- Plotly.js -->
3  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
4        <script src="http://numericjs.com/numeric/lib/numeric-1.2.6.min.js"></script>
5</head>
6
7<body>
8 
9  <div id="myDiv" style="width: 100%; height: 100%; background-color: black"> <!-- Plotly chart will be drawn inside this DIV --> </div>
10 
11  <script>
12    <!-- JAVASCRIPT CODE GOES HERE -->
13                var nChannels = 8;
14                var nFC32SamplesPerChannel = 0;
15                var bReady = 0;
16                function random_number(num , mul) {
17                        var value = [];
18                        for(i = 0; i < num; i++) {
19                                // Math.random return number in the interval [0,1)
20                                rand = ( Math.random() - 0.5 ) * mul;  // returns [-0.5, 0.5) * mul
21                                value.push(rand);
22                        }
23                        return value;
24                }
25               
26                var trace1 = {
27                  type: 'scatter',
28                        x: [0.7, -0.7,  0.7, -0.7],
29                        y: [0.7,  0.7, -0.7, -0.7],
30                        mode: 'markers',
31                        marker: {
32                                size: 10,
33                                color: [36, 37, 38, 39]
34                        }
35                };
36
37                var trace2 = {
38                        x: [0.7, -0.7,  0.7, -0.7],
39                        y: [0.7,  0.7, -0.7, -0.7],
40                        mode: 'markers',
41                        xaxis: 'x2',
42                        yaxis: 'y2',
43                        type: 'scatter'
44                };
45
46                var trace3 = {
47                        x: [0.7, -0.7,  0.7, -0.7],
48                        y: [0.7,  0.7, -0.7, -0.7],
49                        xaxis: 'x3',
50                        yaxis: 'y3',
51                        mode: 'markers',
52                        type: 'scatter'
53                };
54
55                var trace4 = {
56                        x: random_number(4,1),
57                        y: random_number(4,1),
58                        xaxis: 'x4',
59                        yaxis: 'y4',
60                        mode: 'markers',
61                        type: 'scatter'
62                };
63
64                var trace5 = {
65                        x: random_number(4,1),
66                        y: random_number(4,1),
67                        xaxis: 'x5',
68                        yaxis: 'y5',
69                        mode: 'markers',
70                        type: 'scatter'
71                };
72               
73                var trace6 = {
74                        x: random_number(4,1),
75                        y: random_number(4,1),
76                        xaxis: 'x6',
77                        yaxis: 'y6',
78                        mode: 'markers',
79                        type: 'scatter'
80                };
81                var trace7 = {
82                        x: random_number(4,1),
83                        y: random_number(4,1),
84                        xaxis: 'x7',
85                        yaxis: 'y7',
86                        mode: 'markers',
87                        type: 'scatter'
88                };
89                var trace8 = {
90                        x: random_number(4,1),
91                        y: random_number(4,1),
92                        xaxis: 'x8',
93                        yaxis: 'y8',
94                        mode: 'markers',
95                        type: 'scatter'
96                };
97
98                var data = [];
99                for( var ch = 0; ch < nChannels;  ch++ ) {
100                        var trace1 = {
101                                x: random_number(4,1),
102                                y: trace1.x,
103                                mode: 'markers',
104                                marker: {
105                                        size: 5
106                                },
107                                type: 'scatter',
108                                xaxis: 'x'+ String(ch+1),
109                                yaxis: 'y'+ String(ch+1),
110                        }
111                        data.push(trace1);
112                }
113               
114
115                var layout = {
116                        title: 'IQ Constellation Diagram',
117                        xaxis:  { domain: [0.00, 0.20]},
118                        xaxis2: { domain: [0.25, 0.45]},
119                        xaxis3: { domain: [0.50, 0.70]},
120                        xaxis4: { domain: [0.75, 1.00]},
121
122                        yaxis:  { domain: [0, 0.45]},
123                        yaxis2: { domain: [0, 0.45], anchor: 'x2'       },
124                        yaxis3: { domain: [0, 0.45], anchor: 'x3'       },
125                        yaxis4: { domain: [0, 0.45], anchor: 'x4'       },
126
127                        xaxis5: { domain: [0.00, 0.20], anchor: 'y5'},
128                        xaxis6: { domain: [0.25, 0.45], anchor: 'y6'},
129                        xaxis7: { domain: [0.50, 0.70], anchor: 'y7'},
130                        xaxis8: { domain: [0.75, 1.00], anchor: 'y8'},
131
132                        yaxis5: { domain: [0.5, 1.00], anchor: 'x5'},
133                        yaxis6: { domain: [0.5, 1.00], anchor: 'x6'},
134                        yaxis7: { domain: [0.5, 1.00], anchor: 'x7'},
135                        yaxis8: { domain: [0.5, 1.00], anchor: 'x8'},
136
137                };
138
139                Plotly.newPlot('myDiv', data, layout);
140
141  if ("WebSocket" in window)    {
142                // to access data from node1-1
143                // 1) set up tunneling 5101:10.50.10.10:5101
144    // 2) run-websock 5101 node1-1:5101
145    // ~/CODE/BOOST/TCPServer$ ./server --port 5101
146       
147    var my_socket = new WebSocket("ws://localhost:5101/",'binary');
148    my_socket.binaryType = "arraybuffer";
149    my_socket.onopen = function (evt) {
150      console.log('WebSocket open: ', evt);
151                        bReady = 1;
152      my_socket.send( "GetConfig\0");
153    }
154    my_socket.onclose = function (evt) {
155      console.log('WebSocket close: ' + evt.data);
156    };
157
158    my_socket.onerror = function (evt) {
159      console.log('WebSocket Error ' + evt.data);
160    };
161
162    my_socket.onmessage = function (evt) {
163
164      if(evt.data instanceof ArrayBuffer) {
165        // get 8 bytes header out of the ArrayBuffer and cast as ui32 array
166        var ui32array = new Uint32Array(evt.data.slice(0,8));
167
168        console.log("type = " + ui32array[0]);  // type
169        console.log("nbytes = " + ui32array[1]);  // number of bytes to follow
170
171        if (ui32array[0] == 0xff) {
172          var ui32array_pyld = new Uint32Array(evt.data.slice(8));
173          var nChannelsAvail = ui32array_pyld[0];
174                                        nChannels = Math.min(nChannelsAvail, nChannels);
175                                        nFC32SamplesPerChannel = ui32array_pyld[1];
176          console.log( "nChannelsAvail = " + nChannelsAvail );
177                      console.log( "nFC32SamplesPerChannel = " + nFC32SamplesPerChannel );
178                                        }
179        else if (ui32array[0] == 0xfe) {
180                                        for (ch = 0; ch < nChannels; ch++) {
181                                                var nf32s = nFC32SamplesPerChannel *2;
182                                                var array = new Float32Array(evt.data.slice(nf32s * ch + 8, nf32s*ch + 8 + nf32s) );
183                                                console.log(array.length);
184                                                var re = [];
185                                                var im = [];
186                                                for( var idx = 0; idx < array.length;  idx=idx+2 ){
187                                                        re.push( array[idx+0]);
188                                                        im.push( array[idx+1]);
189                                                }
190                                                data[ch].x = re;
191                                                data[ch].y = im;
192                                       
193                                        }
194               
195                                        //console.log("min, max " + Math.min(...array) + ", " + Math.max(...array));
196        }
197        else {
198          console.log("Unsupported type received.")
199                                }
200      }
201    };
202  }
203  else {
204    alert("WebSocket NOT supported by your Browser!");
205    // The browser doesn't support WebSocket
206  }
207               
208                var my_tmr = setInterval(tmr_handler, 1000);
209                var tmr_count = 0;
210                function tmr_handler()
211                {
212                        if (bReady == 0)
213                                return;
214
215                        my_socket.send( "GetIQ\0");
216                        //var d = new Date();
217                        //console.log("[" + tmr_count++ + "]: " + d.toLocaleTimeString());
218                        //my_socket.send( "GetBoxes " + String(nChannels) + "\0");
219
220                        //for( var ch = 3; ch < nChannels;  ch++ ){
221                        //      data[ch].x = random_number(16, 2.0); // populate with samples from device
222                        //      data[ch].y = random_number(16, 2.0); // populate with samples from device
223                        //}
224
225                        //console.log("timer: ", d.toLocaleTimeString());
226                        Plotly.newPlot('myDiv', data, layout);
227                }
228
229               
230               
231  </script>
232</body>