##// END OF EJS Templates
realtime_web
RSS
Update jroplots.js
Juan C. Espinoza -
r31:ee33adc177ff
parent child
Show More
Show file before | Show file after | Hide comments
@@ -2,7 +2,7
2 # -*- coding: UTF-8 -*-
2 # -*- coding: UTF-8 -*-
3 import os
3 import os
4 import json
4 import json
5
5 import simplejson
6 from datetime import datetime, timedelta
6 from datetime import datetime, timedelta
7 import numpy
7 import numpy
8 from pymongo import MongoClient
8 from pymongo import MongoClient
@@ -106,7 +106,7 class PlotConsumer(WebsocketConsumer):
106
106
107 # exp.pop('date', None)
107 # exp.pop('date', None)
108 # exp.pop('_id', None)
108 # exp.pop('_id', None)
109 self.send(json.dumps(ret))
109 self.send(simplejson.dumps(ret, ignore_nan=True))
110 else:
110 else:
111 self.send(json.dumps({'interval': 0}))
111 self.send(json.dumps({'interval': 0}))
112
112
Show file before | Show file after | Hide comments
@@ -16,18 +16,18 function list2dict(values) {
16 };
16 };
17 /* In this class is defined all the function to RTI plot */
17 /* In this class is defined all the function to RTI plot */
18 class PcolorBuffer {
18 class PcolorBuffer {
19 constructor({ div, data, props }) {
19 constructor({ div, data }) {
20 this.div = document.getElementById(div);
20 this.div = document.getElementById(div);
21 this.n = 0;
21 this.n = 0;
22 this.divs = [];
22 this.divs = [];
23 this.wait = false;
23 this.wait = false;
24 this.timer = (props.throttle || 30) * 1000;
25 this.lastRan = Date.now();
24 this.lastRan = Date.now();
26 this.lastFunc = null;
25 this.lastFunc = null;
27 this.zbuffer = [];
26 this.zbuffer = [];
28 this.xbuffer = [];
27 this.xbuffer = [];
29 this.empty = Array(data.metadata.yrange.length).fill(null);
28 this.empty = Array(data.metadata.yrange.length).fill(null);
30 this.props = props;
29 this.timespan = 12;
30 this.metadata = data.metadata;
31 this.setup(data);
31 this.setup(data);
32 }
32 }
33 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
33 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
@@ -67,7 +67,7 class PcolorBuffer {
67 mirror: true,
67 mirror: true,
68 },
68 },
69 yaxis: {
69 yaxis: {
70 title: 'km',
70 title: data.metadata.ylabel || 'km',
71 showgrid: false,
71 showgrid: false,
72 linewidth: 2,
72 linewidth: 2,
73 size: 12,
73 size: 12,
@@ -90,14 +90,14 class PcolorBuffer {
90 var trace = {
90 var trace = {
91 z: values.data[i],
91 z: values.data[i],
92 x: t,
92 x: t,
93 y: data.yrange,
93 y: data.metadata.yrange,
94 colorscale: this.props.colormap || 'Jet',
94 colorscale: this.metadata.colormap || 'Jet',
95 transpose: true,
95 transpose: true,
96 type: 'heatmap'
96 type: 'heatmap'
97 };
97 };
98
98
99 if (this.props.zmin) { trace.zmin = this.props.zmin }
99 if (this.metadata.zmin) { trace.zmin = this.metadata.zmin }
100 if (this.props.zmax) { trace.zmax = this.props.zmax }
100 if (this.metadata.zmax) { trace.zmax = this.metadata.zmax }
101
101
102 layout.title = 'Ch ' + i + ' - ' + t.slice(-1).toLocaleString();
102 layout.title = 'Ch ' + i + ' - ' + t.slice(-1).toLocaleString();
103 var conf = {
103 var conf = {
@@ -122,7 +122,7 class PcolorBuffer {
122 var div = document.getElementById(this.divs[0]);
122 var div = document.getElementById(this.divs[0]);
123 var t = this.xbuffer.slice(-1)[0];
123 var t = this.xbuffer.slice(-1)[0];
124 var n = 0;
124 var n = 0;
125 var timespan = (this.props.timespan || 12) * 1000 * 60 * 60; //If i dont put timespan in rti.html, by default is 8hs
125 var timespan = this.timespan * 1000 * 60 * 60;
126
126
127 while ((t - div.data[0].x[n]) > timespan) {
127 while ((t - div.data[0].x[n]) > timespan) {
128 n += 1;
128 n += 1;
@@ -217,18 +217,17 class PcolorBuffer {
217 });
217 });
218 }
218 }
219
219
220 // plot when ready (every 10 secs)
221 if (!this.wait) {
220 if (!this.wait) {
222 this.plot();
221 this.plot();
223 this.wait = true;
222 this.wait = true;
224 } else {
223 } else {
225 clearTimeout(this.lastFunc)
224 clearTimeout(this.lastFunc)
226 this.lastFunc = setTimeout(function (scope) {
225 this.lastFunc = setTimeout(function (scope) {
227 if ((Date.now() - scope.lastRan) >= scope.timer) {
226 if ((Date.now() - scope.lastRan) >= 30000) {
228 scope.plot()
227 scope.plot()
229 scope.lastRan = Date.now()
228 scope.lastRan = Date.now()
230 }
229 }
231 }, this.timer - (Date.now() - this.lastRan), this)
230 }, 30000 - (Date.now() - this.lastRan), this)
232 }
231 }
233 }
232 }
234 // With this function You can change parameters in your plot
233 // With this function You can change parameters in your plot
@@ -240,7 +239,7 class PcolorBuffer {
240 Plotly.relayout(div, {
239 Plotly.relayout(div, {
241 yaxis: {
240 yaxis: {
242 range: [values.ymin, values.ymax],
241 range: [values.ymin, values.ymax],
243 title: 'km',
242 title: this.metadata.ylabel || 'km',
244 linewidth: 2,
243 linewidth: 2,
245 size: 12,
244 size: 12,
246 mirror: true,
245 mirror: true,
@@ -257,11 +256,11 class PcolorBuffer {
257 }
256 }
258 /* In this class is defined all the function to SPC plot */
257 /* In this class is defined all the function to SPC plot */
259 class Pcolor {
258 class Pcolor {
260 constructor({ div, data, props }) {
259 constructor({ div, data }) {
261 this.div = document.getElementById(div);
260 this.div = document.getElementById(div);
262 this.n = 0;
261 this.n = 0;
263 this.divs = [];
262 this.divs = [];
264 this.props = props;
263 this.metadata = data.metadata;
265 this.setup(data);
264 this.setup(data);
266 }
265 }
267 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
266 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
@@ -273,7 +272,7 class Pcolor {
273 },
272 },
274 height: 320,
273 height: 320,
275 xaxis: {
274 xaxis: {
276 title: 'Velocity',
275 title: data.metadata.xlabel || 'Velocity',
277 showgrid: false,
276 showgrid: false,
278 zeroline: false,
277 zeroline: false,
279 linewidth: 2,
278 linewidth: 2,
@@ -281,7 +280,7 class Pcolor {
281 size: 12,
280 size: 12,
282 },
281 },
283 yaxis: {
282 yaxis: {
284 title: 'km',
283 title: data.metadata.ylabel || 'km',
285 showgrid: false,
284 showgrid: false,
286 linewidth: 2,
285 linewidth: 2,
287 mirror: 'all',
286 mirror: 'all',
@@ -304,43 +303,24 class Pcolor {
304 z: data['data'][i],
303 z: data['data'][i],
305 y: data.metadata.yrange,
304 y: data.metadata.yrange,
306 x: data.metadata.xrange,
305 x: data.metadata.xrange,
307 colorscale: this.props.colormap || 'Jet',
306 colorscale: this.metadata.colormap || 'Jet',
308 transpose: true,
307 transpose: true,
309 type: 'heatmap'
308 type: 'heatmap'
310 };
309 };
311 /*
310
312 if ('rti' in data){
311 if (this.metadata.zmin) {
313 layout.xaxis.domain = [0, 0.7];
312 trace1.zmin = this.metadata.zmin
314 layout.xaxis2 = {
315 title: 'dB',
316 domain: [0.75, 1],
317 ticks: 'outside',
318 linewidth: 2,
319 mirror: true,
320 size: 12,
321 };
322 var trace2 = {
323 x: data.rti[i],
324 y: data.metadata.yrange,
325 xaxis: 'x2',
326 type: 'scatter',
327 };
328 }
329 */
330 if (this.props.zmin) {
331 trace1.zmin = this.props.zmin
332 }
313 }
333 if (this.props.zmax) {
314 if (this.metadata.zmax) {
334 trace1.zmax = this.props.zmax;
315 trace1.zmax = this.metadata.zmax;
335 }
316 }
336
317
337 var t = new Date(data.time * 1000);
318 var t = new Date(data.time * 1000);
338 // This condition is used to change from UTC to LT
339 if (data.metadata.localtime == true){
319 if (data.metadata.localtime == true){
340 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
320 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
341 }
321 }
342 if ('titles' in data.metadata){
322 if ('titles' in data.metadata){
343 layout.title = 'Ch ' + i + ': ' + data.metadata.titles[i] + ' ' + t.toLocaleString();
323 layout.title = data.metadata.titles[i] + ' ' + t.toLocaleString();
344 }else{
324 }else{
345 layout.title = 'Ch ' + i + ': ' + t.toLocaleString();
325 layout.title = 'Ch ' + i + ': ' + t.toLocaleString();
346 }
326 }
@@ -378,7 +358,7 class Pcolor {
378 var div = document.getElementById(this.divs[i]);
358 var div = document.getElementById(this.divs[i]);
379
359
380 if ('titles' in obj.metadata){
360 if ('titles' in obj.metadata){
381 var title = 'Ch ' + i + ': ' + obj.metadata.titles[i] + ' ' + t.toLocaleString();
361 var title = obj.metadata.titles[i] + ' ' + t.toLocaleString();
382 }else{
362 }else{
383 var title = 'Ch ' + i + ': ' + t.toLocaleString();
363 var title = 'Ch ' + i + ': ' + t.toLocaleString();
384 }
364 }
@@ -398,7 +378,6 class Pcolor {
398 this.plot(data);
378 this.plot(data);
399 }
379 }
400
380
401 // With this function You can change parameters in your plot
402 restyle(values) {
381 restyle(values) {
403
382
404 var values = list2dict(values);
383 var values = list2dict(values);
@@ -406,26 +385,16 class Pcolor {
406
385
407 Plotly.relayout(div, {
386 Plotly.relayout(div, {
408 yaxis: {
387 yaxis: {
409 title: 'km',
388 title: this.metadata.ylabel || 'km',
410 linewidth: 2,
389 linewidth: 2,
411 mirror: 'all',
412 range: [values.ymin, values.ymax]
390 range: [values.ymin, values.ymax]
413 },
391 },
414 xaxis: {
392 xaxis: {
415 title: 'Velocity',
393 title: this.metadata.xlabel || 'Velocity',
416 linewidth: 2,
394 linewidth: 2,
417 mirror: true,
395 mirror: true,
418 domain: [0, .7],
419 range: [values.xmin, values.xmax]
396 range: [values.xmin, values.xmax]
420 },
421 xaxis2: {
422 title: 'dB',
423 linewidth: 2,
424 mirror: true,
425 domain: [0.75, 1],
426 range: [values.zmin, values.zmax]
427 }
397 }
428
429 });
398 });
430
399
431 Plotly.restyle(div, {
400 Plotly.restyle(div, {
@@ -435,19 +404,18 class Pcolor {
435 });
404 });
436 }
405 }
437 }
406 }
438 /* In this class is defined all the function to Scatter(noise) plot */
407
439 class Scatter {
408 class ScatterBuffer {
440 constructor({ div, data, props }) {
409 constructor({ div, data }) {
441 this.div = document.getElementById(div);
410 this.div = document.getElementById(div);
442 this.n = 0;
411 this.n = 0;
443 this.wait = false;
412 this.wait = false;
444 this.timer = (props.throttle || 30) * 1000;
445 this.lastRan = Date.now();
413 this.lastRan = Date.now();
446 this.lastFunc = null;
414 this.lastFunc = null;
447 this.ybuffer = [];
415 this.ybuffer = [];
448 this.xbuffer = [];
416 this.xbuffer = [];
449 this.props = props;
417 this.timespan = 12;
450 console.log(data);
418 this.metadata = data.metadata;
451 this.setup(data);
419 this.setup(data);
452 }
420 }
453 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
421 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
@@ -509,7 +477,7 class Scatter {
509 mirror: true,
477 mirror: true,
510 },
478 },
511 yaxis: {
479 yaxis: {
512 title: this.props.ylabel || 'dB',
480 title: data.metadata.ylabel || 'dB',
513 linewidth: 2,
481 linewidth: 2,
514 mirror: true,
482 mirror: true,
515 },
483 },
@@ -521,7 +489,7 class Scatter {
521 }
489 }
522 };
490 };
523
491
524 if (this.props.ymin) { layout.yaxis.range = [this.props.ymin, this.props.ymax] }
492 if (data.metadata.ymin) { layout.yaxis.range = [data.metadata.ymin, data.metadata.ymax] }
525
493
526 var conf = {
494 var conf = {
527 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
495 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
@@ -541,7 +509,7 class Scatter {
541 getSize() {
509 getSize() {
542 var t = this.xbuffer.slice(-1)[0];
510 var t = this.xbuffer.slice(-1)[0];
543 var n = 0;
511 var n = 0;
544 var timespan = (this.props.timespan || 12) * 1000 * 60 * 60;
512 var timespan = this.timespan * 1000 * 60 * 60;
545
513
546 while ((t - this.div.data[0].x[n]) > timespan) {
514 while ((t - this.div.data[0].x[n]) > timespan) {
547 n += 1;
515 n += 1;
@@ -563,12 +531,10 class Scatter {
563 for (var i = 1; i < xBuffer.length; i++) {
531 for (var i = 1; i < xBuffer.length; i++) {
564 var cnt = 0;
532 var cnt = 0;
565 last = x.slice(-1)[0];
533 last = x.slice(-1)[0];
566 //console.log(Math.abs(parseFloat(xBuffer[i]) - last) + ' '+ parseFloat(interval));
567 while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) {
534 while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) {
568 cnt += 1;
535 cnt += 1;
569 last = last + interval;
536 last = last + interval;
570 x.push(last);
537 x.push(last);
571 console.log('missing ' + new Date(last*1000));
572 for (var j = 0; j < N; j++) {
538 for (var j = 0; j < N; j++) {
573 y[j].push(null);
539 y[j].push(null);
574 }
540 }
@@ -643,28 +609,27 class Scatter {
643 title: t.toLocaleString(),
609 title: t.toLocaleString(),
644 });
610 });
645
611
646 // plot when ready (every 10 secs)
647 if (!this.wait) {
612 if (!this.wait) {
648 this.plot();
613 this.plot();
649 this.wait = true;
614 this.wait = true;
650 } else {
615 } else {
651 clearTimeout(this.lastFunc)
616 clearTimeout(this.lastFunc)
652 this.lastFunc = setTimeout(function (scope) {
617 this.lastFunc = setTimeout(function (scope) {
653 if ((Date.now() - scope.lastRan) >= scope.timer) {
618 if ((Date.now() - scope.lastRan) >= 30000) {
654 scope.plot()
619 scope.plot()
655 scope.lastRan = Date.now()
620 scope.lastRan = Date.now()
656 }
621 }
657 }, this.timer - (Date.now() - this.lastRan), this)
622 }, 30000 - (Date.now() - this.lastRan), this)
658 }
623 }
659 }
624 }
660 // With this function You can change parameters in your plot
625
661 restyle(values) {
626 restyle(values) {
662
627
663 var values = list2dict(values);
628 var values = list2dict(values);
664 Plotly.relayout(this.div, {
629 Plotly.relayout(this.div, {
665 yaxis: {
630 yaxis: {
666 range: [values.ymin, values.ymax],
631 range: [values.ymin, values.ymax],
667 title: this.props.ylabel || 'dB'
632 title: this.metadata.ylabel || 'dB'
668 }
633 }
669
634
670 });
635 });
Show file before | Show file after | Hide comments
@@ -72,7 +72,6
72 plt = new {{ fn_plot }} ({
72 plt = new {{ fn_plot }} ({
73 div: 'plot',
73 div: 'plot',
74 data: data,
74 data: data,
75 props: { throttle: 30, timespan: 12, colormap: 'Jet' },
76 });
75 });
77 return true;
76 return true;
78 } else {
77 } else {
Show file before | Show file after | Hide comments
@@ -164,9 +164,9 def plot(request, code=None, plot=None):
164 kwargs['setup_form'] = SPCSetupForm()
164 kwargs['setup_form'] = SPCSetupForm()
165 kwargs['fn_plot'] = 'Pcolor'
165 kwargs['fn_plot'] = 'Pcolor'
166 return render(request, 'plot.html', kwargs)
166 return render(request, 'plot.html', kwargs)
167 elif meta.metadata['type'] == 'scatter':
167 elif meta.metadata['type'] == 'scatterbuffer':
168 kwargs['setup_form'] = ScatterSetupForm()
168 kwargs['setup_form'] = ScatterSetupForm()
169 kwargs['fn_plot'] = 'Scatter'
169 kwargs['fn_plot'] = 'ScatterBuffer'
170 return render(request, 'plot.html', kwargs)
170 return render(request, 'plot.html', kwargs)
171 else:
171 else:
172 return render(request, 'home.html', {})
172 return render(request, 'home.html', {})
@@ -181,5 +181,5 def plot_skynoise(request):
181
181
182 data = skynoise_plot(date.year, date.month, date.day)
182 data = skynoise_plot(date.year, date.month, date.day)
183 response = HttpResponse(data.getvalue(), content_type='image/png')
183 response = HttpResponse(data.getvalue(), content_type='image/png')
184
184
185 return response
185 return response
Show file before | Show file after | Hide comments
@@ -31,17 +31,8 def send(dato):
31 socks = dict(poll.poll(REQUEST_TIMEOUT))
31 socks = dict(poll.poll(REQUEST_TIMEOUT))
32 if socks.get(socket) == zmq.POLLIN:
32 if socks.get(socket) == zmq.POLLIN:
33 reply = socket.recv_string()
33 reply = socket.recv_string()
34 # if reply == 'ok':
34 if reply == 'ok':
35 # print(('Server replied (%s)' % reply))
35 print(('Server replied (%s)' % reply))
36 # break
37 if reply == 'rti':
38 print(('Server replied (%s) ok' % reply))
39 break
40 elif reply == 'noise':
41 print(('Server replied (%s) ok' % reply))
42 break
43 elif reply == 'spc':
44 print(('Server replied (%s) ok' % reply))
45 break
36 break
46 else:
37 else:
47 print(('Malformed reply from server: %s' % reply))
38 print(('Malformed reply from server: %s' % reply))
@@ -79,7 +70,7 def main(realtime, code, date=None, interval=30):
79 data = {
70 data = {
80 'pcolor': ('Spectra', np.round(np.random.rand(4, 60, 100)*5 + 10, 2).tolist()),
71 'pcolor': ('Spectra', np.round(np.random.rand(4, 60, 100)*5 + 10, 2).tolist()),
81 'pcolorbuffer': ('RTI', np.round(np.random.rand(4, 100)*5 + 10, 2).tolist()),
72 'pcolorbuffer': ('RTI', np.round(np.random.rand(4, 100)*5 + 10, 2).tolist()),
82 'scatter': ('Power noise', np.round(np.random.rand(4, 1) + np.array([[10],[11],[12],[13]]), 2).tolist())
73 'scatterbuffer': ('Power noise', np.round(np.random.rand(4, 1) + np.array([[10],[11],[12],[13]]), 2).tolist())
83 }
74 }
84
75
85 dato = {
76 dato = {
General Comments 0
You need to be logged in to leave comments. Login now