Tutorials/k0SDR/Tutorial20: js_scatterplot.html

File js_scatterplot.html, 6.0 KB (added by nilanjan, 8 years 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>