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>
|
---|