##// END OF EJS Templates
realtime_web
RSS
Fix noise plot not plotting gaps
Juan C. Espinoza -
r12:15f210b8fac1
parent child
Show More
Show file before | Show file after | Hide comments
@@ -1,678 +1,663
1
1
2 var icon = {
2 var icon = {
3 'width': 20,
3 'width': 20,
4 'path': 'M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z',
4 'path': 'M18.303,4.742l-1.454-1.455c-0.171-0.171-0.475-0.171-0.646,0l-3.061,3.064H2.019c-0.251,0-0.457,0.205-0.457,0.456v9.578c0,0.251,0.206,0.456,0.457,0.456h13.683c0.252,0,0.457-0.205,0.457-0.456V7.533l2.144-2.146C18.481,5.208,18.483,4.917,18.303,4.742 M15.258,15.929H2.476V7.263h9.754L9.695,9.792c-0.057,0.057-0.101,0.13-0.119,0.212L9.18,11.36h-3.98c-0.251,0-0.457,0.205-0.457,0.456c0,0.253,0.205,0.456,0.457,0.456h4.336c0.023,0,0.899,0.02,1.498-0.127c0.312-0.077,0.55-0.137,0.55-0.137c0.08-0.018,0.155-0.059,0.212-0.118l3.463-3.443V15.929z M11.241,11.156l-1.078,0.267l0.267-1.076l6.097-6.091l0.808,0.808L11.241,11.156z',
5 'ascent': 20,
5 'ascent': 20,
6 'descent': 2,
6 'descent': 2,
7 };
7 };
8
8
9 function list2dict(values) {
9 function list2dict(values) {
10
10
11 var o = {};
11 var o = {};
12 $.each(values, function () {
12 $.each(values, function () {
13 o[this.name] = this.value;
13 o[this.name] = this.value;
14 });
14 });
15 return o;
15 return o;
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, key, props }) {
19 constructor({ div, data, key, props }) {
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.key = key;
24 this.key = key;
25 this.timer = (props.throttle || 30) * 1000;
25 this.timer = (props.throttle || 30) * 1000;
26 this.lastRan = Date.now();
26 this.lastRan = Date.now();
27 this.lastFunc = null;
27 this.lastFunc = null;
28 this.zbuffer = [];
28 this.zbuffer = [];
29 this.xbuffer = [];
29 this.xbuffer = [];
30 this.empty = Array(data.yrange.length).fill(null);
30 this.empty = Array(data.yrange.length).fill(null);
31 this.props = props;
31 this.props = props;
32 this.setup(data);
32 this.setup(data);
33 }
33 }
34 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
34 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
35 setup(data) {
35 setup(data) {
36 this.last = data.time.slice(-1);
36 this.last = data.time.slice(-1);
37 if (data.time.length == 1) {
37 if (data.time.length == 1) {
38 var values = { 'time': data.time, 'data': data[this.key].map(function (x) { return [x] }) };
38 var values = { 'time': data.time, 'data': data[this.key].map(function (x) { return [x] }) };
39 } else {
39 } else {
40 var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length);
40 var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length);
41 }
41 }
42 var t = values.time.map(function (x) {
42 var t = values.time.map(function (x) {
43 var a = new Date(x * 1000);
43 var a = new Date(x * 1000);
44 // This condition is used to change from UTC to LT
44 // This condition is used to change from UTC to LT
45 if (data.localtime == true){
45 if (data.localtime == true){
46 a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
46 a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
47 }
47 }
48 return a;
48 return a;
49 });
49 });
50
50
51 var label;
51 var label;
52 if (data.localtime == true){
52 if (data.localtime == true){
53 label = "LT";
53 label = "LT";
54
54
55 }
55 }
56 else{
56 else{
57 label = "UTC";
57 label = "UTC";
58 }
58 }
59
59
60 for (var i = 0; i < data[this.key].length; i++) {
60 for (var i = 0; i < data[this.key].length; i++) {
61 var layout = {
61 var layout = {
62 xaxis: {
62 xaxis: {
63 title: 'Time ' + label,
63 title: 'Time ' + label,
64 showgrid: false,
64 showgrid: false,
65 linecolor: 'rgb(40, 223, 247)',
65 linecolor: 'rgb(40, 223, 247)',
66 color: 'rgb(40, 223, 247)',
66 color: 'rgb(40, 223, 247)',
67 size: 24,
67 size: 24,
68 titlefont: {
68 titlefont: {
69 color: 'white',
69 color: 'white',
70 size: 24
70 size: 24
71 },
71 },
72 },
72 },
73 yaxis: {
73 yaxis: {
74 title: 'km',
74 title: 'km',
75 showgrid: false,
75 showgrid: false,
76 linecolor: 'rgb(40, 223, 247)',
76 linecolor: 'rgb(40, 223, 247)',
77 color: 'rgb(40, 223, 247)',
77 color: 'rgb(40, 223, 247)',
78 size: 24,
78 size: 24,
79 titlefont: {
79 titlefont: {
80 color: 'white',
80 color: 'white',
81 size: 24
81 size: 24
82 },
82 },
83 },
83 },
84 paper_bgcolor: 'black',
84 paper_bgcolor: 'black',
85 plot_bgcolor: 'white',
85 plot_bgcolor: 'white',
86 titlefont: {
86 titlefont: {
87 color: 'white',
87 color: 'white',
88 size: 24,
88 size: 24,
89 },
89 },
90 font: {
90 font: {
91 color: 'rgb(40, 223, 247)'
91 color: 'rgb(40, 223, 247)'
92 }
92 }
93
93
94 };
94 };
95 var iDiv = document.createElement('div');
95 var iDiv = document.createElement('div');
96 iDiv.id = 'plot-' + i;
96 iDiv.id = 'plot-' + i;
97 this.zbuffer.push([]);
97 this.zbuffer.push([]);
98 this.n = this.n + 1;
98 this.n = this.n + 1;
99 this.div.appendChild(iDiv);
99 this.div.appendChild(iDiv);
100 this.divs.push(iDiv.id);
100 this.divs.push(iDiv.id);
101 var trace = {
101 var trace = {
102 z: values.data[i],
102 z: values.data[i],
103 x: t,
103 x: t,
104 y: data.yrange,
104 y: data.yrange,
105 colorscale: this.props.colormap || 'Jet',
105 colorscale: this.props.colormap || 'Jet',
106 transpose: true,
106 transpose: true,
107 type: 'heatmap'
107 type: 'heatmap'
108 };
108 };
109
109
110 if (this.props.zmin) { trace.zmin = this.props.zmin }
110 if (this.props.zmin) { trace.zmin = this.props.zmin }
111 if (this.props.zmax) { trace.zmax = this.props.zmax }
111 if (this.props.zmax) { trace.zmax = this.props.zmax }
112
112
113 layout.title = 'Channel ' + i + ' - ' + t.slice(-1).toLocaleString();
113 layout.title = 'Channel ' + i + ' - ' + t.slice(-1).toLocaleString();
114 var conf = {
114 var conf = {
115 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
115 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
116 modeBarButtonsToAdd: [{
116 modeBarButtonsToAdd: [{
117 name: 'Edit plot',
117 name: 'Edit plot',
118 icon: icon,
118 icon: icon,
119 click: function (gd) {
119 click: function (gd) {
120 var div = gd.id;
120 var div = gd.id;
121 $('input[id=id_plotdiv]').val(div);
121 $('input[id=id_plotdiv]').val(div);
122 $('#setup').modal('show');
122 $('#setup').modal('show');
123 }
123 }
124 }],
124 }],
125 displaylogo: false,
125 displaylogo: false,
126 showTips: true
126 showTips: true
127 };
127 };
128 Plotly.newPlot('plot-' + i, [trace], layout, conf);
128 Plotly.newPlot('plot-' + i, [trace], layout, conf);
129 }
129 }
130 }
130 }
131
131
132 getSize() {
132 getSize() {
133 var div = document.getElementById(this.divs[0]);
133 var div = document.getElementById(this.divs[0]);
134 var t = this.xbuffer.slice(-1)[0];
134 var t = this.xbuffer.slice(-1)[0];
135 var n = 0;
135 var n = 0;
136 var timespan = (this.props.timespan || 8) * 1000 * 60 * 60; //If i dont put timespan in rti.html, by default is 8hs
136 var timespan = (this.props.timespan || 8) * 1000 * 60 * 60; //If i dont put timespan in rti.html, by default is 8hs
137
137
138 while ((t - div.data[0].x[n]) > timespan) {
138 while ((t - div.data[0].x[n]) > timespan) {
139 n += 1;
139 n += 1;
140 }
140 }
141 return n;
141 return n;
142 }
142 }
143
143
144 fill_gaps(xBuffer, zBuffer, interval, N) {
144 fill_gaps(xBuffer, zBuffer, interval, N) {
145
145
146 var x = [xBuffer[0]];
146 var x = [xBuffer[0]];
147 var z = [];
147 var z = [];
148 var last;
148 var last;
149
149
150 for (var j = 0; j < N; j++) {
150 for (var j = 0; j < N; j++) {
151 z.push([zBuffer[j][0]]);
151 z.push([zBuffer[j][0]]);
152 }
152 }
153
153
154 for (var i = 1; i < xBuffer.length; i++) {
154 for (var i = 1; i < xBuffer.length; i++) {
155 var cnt = 0;
155 var cnt = 0;
156 last = x.slice(-1)[0];
156 last = x.slice(-1)[0];
157 while (Math.abs(parseFloat(xBuffer[i]) - last ) > 1.5 * parseFloat(interval)) {
157 while (Math.abs(parseFloat(xBuffer[i]) - last ) > 1.5 * parseFloat(interval)) {
158 //console.log(parseFloat(xBuffer[i]));
159 //console.log(last);
160 //console.log(Math.abs(parseFloat(xBuffer[i]) - last));
161 //console.log(parseFloat(interval));
162 //console.log("==========");
163 cnt += 1;
158 cnt += 1;
164 last = last + interval;
159 last = last + interval;
165 x.push(last);
160 x.push(last);
166 for (var j = 0; j < N; j++) {
161 for (var j = 0; j < N; j++) {
167 z[j].push(this.empty);
162 z[j].push(this.empty);
168 }
163 }
169 // Avoid infinite loop
164 // Avoid infinite loop
170 if (cnt == 100) { break; }
165 if (cnt == 100) { break; }
171 }
166 }
172 x.push(xBuffer[i]);
167 x.push(xBuffer[i]);
173 for (var j = 0; j < N; j++) {
168 for (var j = 0; j < N; j++) {
174 z[j].push(zBuffer[j][i]);
169 z[j].push(zBuffer[j][i]);
175 }
170 }
176 }
171 }
177 return { 'time': x, 'data': z };
172 return { 'time': x, 'data': z };
178 }
173 }
179
174
180 plot() {
175 plot() {
181 // add new data to plots and empty buffers
176 // add new data to plots and empty buffers
182 var N = this.getSize();
177 var N = this.getSize();
183 console.log('Plotting...');
178 console.log('Plotting...');
184 for (var i = 0; i < this.n; i++) {
179 for (var i = 0; i < this.n; i++) {
185 var div = document.getElementById(this.divs[i]);
180 var div = document.getElementById(this.divs[i]);
186 if (N > 0) {
181 if (N > 0) {
187 div.data[0].z = div.data[0].z.slice(N, )
182 div.data[0].z = div.data[0].z.slice(N, )
188 div.data[0].x = div.data[0].x.slice(N, )
183 div.data[0].x = div.data[0].x.slice(N, )
189 }
184 }
190 Plotly.extendTraces(div, {
185 Plotly.extendTraces(div, {
191 z: [this.zbuffer[i]],
186 z: [this.zbuffer[i]],
192 x: [this.xbuffer]
187 x: [this.xbuffer]
193 }, [0]);
188 }, [0]);
194 this.zbuffer[i] = [];
189 this.zbuffer[i] = [];
195 }
190 }
196 this.xbuffer = [];
191 this.xbuffer = [];
197 }
192 }
198 //This function just add the last data and is used if previously was used setup()
193 //This function just add the last data and is used if previously was used setup()
199 update(obj) {
194 update(obj) {
200
195
201 // fill data gaps
196 // fill data gaps
202 var cnt = 0;
197 var cnt = 0;
203 console.log('updating');
198
204 while (Math.abs(parseFloat(obj.time[0]) - this.last) > 1.5 * parseFloat(obj.interval)) {
199 while (Math.abs(parseFloat(obj.time[0]) - this.last) > 1.5 * parseFloat(obj.interval)) {
205 cnt += 1;
200 cnt += 1;
206 this.last += obj.interval;
201 this.last += obj.interval;
207 var newt = new Date((this.last) * 1000);
202 var newt = new Date((this.last) * 1000);
208 // This condition is used to change from UTC to LT
203 // This condition is used to change from UTC to LT
209 if (obj.localtime == true){
204 if (obj.localtime == true){
210 newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
205 newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
211 }
206 }
212 this.xbuffer.push(newt);
207 this.xbuffer.push(newt);
213 for (var i = 0; i < obj[this.key].length; i++) {
208 for (var i = 0; i < obj[this.key].length; i++) {
214 this.zbuffer[i].push(this.empty);
209 this.zbuffer[i].push(this.empty);
215 }
210 }
216 // Avoid infinite loop
211 // Avoid infinite loop
217 if (cnt == 100) { break; }
212 if (cnt == 100) { break; }
218 }
213 }
219
214
220 // update buffers
215 // update buffers
221 this.last = parseFloat(obj.time[0]);
216 this.last = parseFloat(obj.time[0]);
222 var t = new Date(obj.time[0] * 1000);
217 var t = new Date(obj.time[0] * 1000);
223 // This condition is used to change from UTC to LT
218 // This condition is used to change from UTC to LT
224 if (obj.localtime == true){
219 if (obj.localtime == true){
225 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
220 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
226 }
221 }
227 this.xbuffer.push(t);
222 this.xbuffer.push(t);
228 for (var i = 0; i < obj[this.key].length; i++) {
223 for (var i = 0; i < obj[this.key].length; i++) {
229 this.zbuffer[i].push(obj[this.key][i]);
224 this.zbuffer[i].push(obj[this.key][i]);
230 // update title
225 // update title
231 var title = this.props.title || ''
226 var title = this.props.title || ''
232 var div = document.getElementById(this.divs[i]);
227 var div = document.getElementById(this.divs[i]);
233 Plotly.relayout(div, {
228 Plotly.relayout(div, {
234 title: title + ': Channel ' + i + ' - ' + t.toLocaleString(),
229 title: title + ': Channel ' + i + ' - ' + t.toLocaleString(),
235 });
230 });
236 }
231 }
237
232
238 // plot when ready (every 10 secs)
233 // plot when ready (every 10 secs)
239 if (!this.wait) {
234 if (!this.wait) {
240 this.plot();
235 this.plot();
241 this.wait = true;
236 this.wait = true;
242 } else {
237 } else {
243 clearTimeout(this.lastFunc)
238 clearTimeout(this.lastFunc)
244 this.lastFunc = setTimeout(function (scope) {
239 this.lastFunc = setTimeout(function (scope) {
245 if ((Date.now() - scope.lastRan) >= scope.timer) {
240 if ((Date.now() - scope.lastRan) >= scope.timer) {
246 scope.plot()
241 scope.plot()
247 scope.lastRan = Date.now()
242 scope.lastRan = Date.now()
248 }
243 }
249 }, this.timer - (Date.now() - this.lastRan), this)
244 }, this.timer - (Date.now() - this.lastRan), this)
250 }
245 }
251 }
246 }
252 // With this function You can change parameters in your plot
247 // With this function You can change parameters in your plot
253 restyle(values) {
248 restyle(values) {
254
249
255 var values = list2dict(values);
250 var values = list2dict(values);
256 var div = document.getElementById(values.plotdiv);
251 var div = document.getElementById(values.plotdiv);
257
252
258 Plotly.relayout(div, {
253 Plotly.relayout(div, {
259 yaxis: {
254 yaxis: {
260 range: [values.ymin, values.ymax]
255 range: [values.ymin, values.ymax]
261 }
256 }
262
257
263 });
258 });
264
259
265 Plotly.restyle(div, {
260 Plotly.restyle(div, {
266 zmin: values.zmin,
261 zmin: values.zmin,
267 zmax: values.zmax,
262 zmax: values.zmax,
268 colorscale: values.colormap
263 colorscale: values.colormap
269 });
264 });
270 }
265 }
271 }
266 }
272 /* In this class is defined all the function to SPC plot */
267 /* In this class is defined all the function to SPC plot */
273 class Pcolor {
268 class Pcolor {
274 constructor({ div, data, props }) {
269 constructor({ div, data, props }) {
275 this.div = document.getElementById(div);
270 this.div = document.getElementById(div);
276 this.n = 0;
271 this.n = 0;
277 this.divs = [];
272 this.divs = [];
278 this.props = props;
273 this.props = props;
279 this.setup(data);
274 this.setup(data);
280 }
275 }
281 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
276 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
282 setup(data) {
277 setup(data) {
283 console.log(data);
284 for (var i = 0; i < data.spc.length; i++) {
278 for (var i = 0; i < data.spc.length; i++) {
285 var layout = {
279 var layout = {
286 height: 400,
280 height: 400,
287 xaxis: {
281 xaxis: {
288 title: 'Velocity',
282 title: 'Velocity',
289 showgrid: false,
283 showgrid: false,
290 zeroline: false,
284 zeroline: false,
291 domain: [0, 0.7],
285 domain: [0, 0.7],
292 linecolor: 'rgb(40, 223, 247)',
286 linecolor: 'rgb(40, 223, 247)',
293 color: 'rgb(40, 223, 247)',
287 color: 'rgb(40, 223, 247)',
294 size: 24,
288 size: 24,
295 titlefont: {
289 titlefont: {
296 color: 'white',
290 color: 'white',
297 size: 24
291 size: 24
298 },
292 },
299 },
293 },
300 yaxis: {
294 yaxis: {
301 title: 'km',
295 title: 'km',
302 showgrid: false,
296 showgrid: false,
303 linecolor: 'rgb(40, 223, 247)',
297 linecolor: 'rgb(40, 223, 247)',
304 color: 'rgb(40, 223, 247)',
298 color: 'rgb(40, 223, 247)',
305 size: 24,
299 size: 24,
306 titlefont: {
300 titlefont: {
307 color: 'white',
301 color: 'white',
308 size: 24
302 size: 24
309 },
303 },
310 },
304 },
311 xaxis2: {
305 xaxis2: {
312 title: 'dB',
306 title: 'dB',
313 domain: [0.75, 1],
307 domain: [0.75, 1],
314 ticks: 'outside',
308 ticks: 'outside',
315 linecolor: 'rgb(40, 223, 247)',
309 linecolor: 'rgb(40, 223, 247)',
316 color: 'rgb(40, 223, 247)',
310 color: 'rgb(40, 223, 247)',
317 size: 24,
311 size: 24,
318 titlefont: {
312 titlefont: {
319 color: 'white',
313 color: 'white',
320 size: 24
314 size: 24
321 },
315 },
322 },
316 },
323 titlefont: {
317 titlefont: {
324 color: 'white',
318 color: 'white',
325 size: 18
319 size: 18
326 },
320 },
327 font:{
321 font:{
328 color:'rgb(40, 223, 247)'
322 color:'rgb(40, 223, 247)'
329 },
323 },
330 paper_bgcolor: 'black',
324 paper_bgcolor: 'black',
331 plot_bgcolor: 'white',
325 plot_bgcolor: 'white',
332 };
326 };
333 var iDiv = document.createElement('div');
327 var iDiv = document.createElement('div');
334 iDiv.id = 'plot-' + i;
328 iDiv.id = 'plot-' + i;
335 iDiv.className += iDiv.className ? ' col-md-6' : 'col-md-6';
329 iDiv.className += iDiv.className ? ' col-md-6' : 'col-md-6';
336 this.n = this.n + 1;
330 this.n = this.n + 1;
337 this.div.appendChild(iDiv);
331 this.div.appendChild(iDiv);
338 this.divs.push(iDiv.id);
332 this.divs.push(iDiv.id);
339
333
340 var trace1 = {
334 var trace1 = {
341 z: data.spc[i],
335 z: data.spc[i],
342 x: data.xrange,
336 x: data.xrange,
343 y: data.yrange,
337 y: data.yrange,
344 colorscale: this.props.colormap || 'Jet',
338 colorscale: this.props.colormap || 'Jet',
345 transpose: true,
339 transpose: true,
346 type: 'heatmap'
340 type: 'heatmap'
347 };
341 };
348
342
349 var trace2 = {
343 var trace2 = {
350 x: data.rti[i],
344 x: data.rti[i],
351 y: data.yrange,
345 y: data.yrange,
352 xaxis: 'x2',
346 xaxis: 'x2',
353 yaxis: 'y',
347 yaxis: 'y',
354 type: 'scatter',
348 type: 'scatter',
355 };
349 };
356
350
357 if (this.props.zmin) {
351 if (this.props.zmin) {
358 trace1.zmin = this.props.zmin
352 trace1.zmin = this.props.zmin
359 }
353 }
360 if (this.props.zmax) {
354 if (this.props.zmax) {
361 trace1.zmax = this.props.zmax;
355 trace1.zmax = this.props.zmax;
362 layout.xaxis2.range = [this.props.zmin, this.props.zmax]
356 layout.xaxis2.range = [this.props.zmin, this.props.zmax]
363 }
357 }
364
358
365 var t = new Date(data.time * 1000);
359 var t = new Date(data.time * 1000);
366 // This condition is used to change from UTC to LT
360 // This condition is used to change from UTC to LT
367 if (data.localtime == true){
361 if (data.localtime == true){
368 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
362 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
369 }
363 }
370 layout.title = 'Channel ' + i + ': ' + data.noise[i] + 'dB - ' + t.toLocaleString();
364 layout.title = 'Channel ' + i + ': ' + data.noise[i] + 'dB - ' + t.toLocaleString();
371 var conf = {
365 var conf = {
372 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
366 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
373 modeBarButtonsToAdd: [{
367 modeBarButtonsToAdd: [{
374 name: 'Edit plot',
368 name: 'Edit plot',
375 icon: icon,
369 icon: icon,
376 click: function (gd) {
370 click: function (gd) {
377 var div = gd.id;
371 var div = gd.id;
378 $('input[id=id_plotdiv]').val(div);
372 $('input[id=id_plotdiv]').val(div);
379 $('#setup').modal('show');
373 $('#setup').modal('show');
380 }
374 }
381 }],
375 }],
382 displaylogo: false,
376 displaylogo: false,
383 showTips: true
377 showTips: true
384 };
378 };
385 Plotly.newPlot('plot-' + i, [trace1, trace2], layout, conf);
379 Plotly.newPlot('plot-' + i, [trace1, trace2], layout, conf);
386 }
380 }
387 }
381 }
388
382
389 plot(obj) {
383 plot(obj) {
390 this.data = obj;
384 // this.data = obj;
391 // add new data to plots and empty buffers
385 // add new data to plots and empty buffers
392 console.log('Plotting...');
386 console.log('Plotting...');
393 var t = new Date(obj.time[0] * 1000);
387 var t = new Date(obj.time[0] * 1000);
394 // This condition is used to change from UTC to LT
388 // This condition is used to change from UTC to LT
395 if (obj.localtime == true){
389 if (obj.localtime == true){
396 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
390 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
397 }
391 }
398 for (var i = 0; i < this.n; i++) {
392 for (var i = 0; i < this.n; i++) {
399 var div = document.getElementById(this.divs[i]);
393 var div = document.getElementById(this.divs[i]);
400 Plotly.relayout(div, {
394 Plotly.relayout(div, {
401 title: 'Channel ' + i + ': ' + obj.noise[i] + 'dB - ' + t.toLocaleString(),
395 title: 'Channel ' + i + ': ' + obj.noise[i] + 'dB - ' + t.toLocaleString(),
402
396
403 });
397 });
404 Plotly.restyle(div, {
398 Plotly.restyle(div, {
405 z: [obj.spc[i], null],
399 z: [obj.spc[i], null],
406 x: [obj.xrange, obj.rti[i]]
400 x: [obj.xrange, obj.rti[i]]
407 }, [0, 1]);
401 }, [0, 1]);
408 }
402 }
409 }
403 }
410 // With this function You can change parameters in your plot
404 // With this function You can change parameters in your plot
411 restyle(values) {
405 restyle(values) {
412
406
413 var values = list2dict(values);
407 var values = list2dict(values);
414 var div = document.getElementById(values.plotdiv);
408 var div = document.getElementById(values.plotdiv);
415
409
416 Plotly.relayout(div, {
410 Plotly.relayout(div, {
417 yaxis: {
411 yaxis: {
418 range: [values.ymin, values.ymax]
412 range: [values.ymin, values.ymax]
419 },
413 },
420
414
421
415
422 });
416 });
423
417
424 /*Plotly.relayout(div, {
425 xaxis: {
426 range: [values.xmin, values.xmax]
427 },
428
429
430 });*/
431
432
433 Plotly.restyle(div, {
418 Plotly.restyle(div, {
434 zmin: values.zmin,
419 zmin: values.zmin,
435 zmax: values.zmax,
420 zmax: values.zmax,
436 xmin: values.xmin,
421 xmin: values.xmin,
437 xmax: values.xmax,
422 xmax: values.xmax,
438
423
439
424
440 colorscale: values.colormap
425 colorscale: values.colormap
441 });
426 });
442 }
427 }
443 }
428 }
444 /* In this class is defined all the function to Scatter(noise) plot */
429 /* In this class is defined all the function to Scatter(noise) plot */
445 class Scatter {
430 class Scatter {
446 constructor({ div, data, key, props }) {
431 constructor({ div, data, key, props }) {
447 this.div = document.getElementById(div);
432 this.div = document.getElementById(div);
448 this.n = 0;
433 this.n = 0;
449 this.key = key;
434 this.key = key;
450 this.wait = false;
435 this.wait = false;
451 this.timer = (props.throttle || 30) * 1000;
436 this.timer = (props.throttle || 30) * 1000;
452 this.lastRan = Date.now();
437 this.lastRan = Date.now();
453 this.lastFunc = null;
438 this.lastFunc = null;
454 this.ybuffer = [];
439 this.ybuffer = [];
455 this.xbuffer = [];
440 this.xbuffer = [];
456 this.props = props;
441 this.props = props;
457 this.setup(data);
442 this.setup(data);
458 }
443 }
459 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
444 /* This function is used to plot all the data that have the DB and just is used when is loaded or reloaded*/
460 setup(data) {
445 setup(data) {
461
446
462 this.data = data; //le agrego juan carlos para ver la data en mi consola
447 this.data = data; //le agrego juan carlos para ver la data en mi consola
463 var traces = [];
448 var traces = [];
464 this.last = data.time.slice(-1);
449 this.last = data.time.slice(-1);
465 if (data.time.length == 1) {
450 if (data.time.length == 1) {
466 var values = { 'time': data.time, 'data': data[this.key] };
451 var values = { 'time': data.time, 'data': data[this.key] };
467 } else {
452 } else {
468 var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length);
453 var values = this.fill_gaps(data.time, data[this.key], data.interval, data[this.key].length);
469 }
454 }
470
455
471 var t = values.time.map(function (x) {
456 var t = values.time.map(function (x) {
472 var a = new Date(x * 1000);
457 var a = new Date(x * 1000);
473 // This condition is used to change from UTC to LT
458 // This condition is used to change from UTC to LT
474 if (data.localtime == true){
459 if (data.localtime == true){
475 a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
460 a.setTime( a.getTime() + a.getTimezoneOffset()*60*1000 );
476 }
461 }
477 return a;
462 return a;
478 });
463 });
479
464
480 for (var i = 0; i < data[this.key].length; i++) {
465 for (var i = 0; i < data[this.key].length; i++) {
481
466
482 this.n = this.n + 1;
467 this.n = this.n + 1;
483 this.ybuffer.push([]);
468 this.ybuffer.push([]);
484 var trace = {
469 var trace = {
485 x: t,
470 x: t,
486 y: data[this.key][i],
471 y: values.data[i],
487 mode: 'lines',
472 mode: 'lines',
488 type: 'scatter',
473 type: 'scatter',
489 name: 'Channel ' + i,
474 name: 'Channel ' + i,
490 connectgaps:false,
475 connectgaps: false,
491 };
476 };
492
477
493 traces.push(trace);
478 traces.push(trace);
494 }
479 }
495 var title = this.props.title || ''
480 var title = this.props.title || ''
496 var layout = {
481 var layout = {
497 // autosize: false,
482 // autosize: false,
498 // width: 800,
483 // width: 800,
499 // height: 400,
484 // height: 400,
500 title: title + ' - ' + t.slice(-1).toLocaleString(),
485 title: title + ' - ' + t.slice(-1).toLocaleString(),
501 font: {
486 font: {
502 size: 18,
487 size: 18,
503 color: 'white'
488 color: 'white'
504 },
489 },
505 plot_bgcolor: 'black',
490 plot_bgcolor: 'black',
506 paper_bgcolor: 'black',
491 paper_bgcolor: 'black',
507 xaxis: {
492 xaxis: {
508 title: 'Time',
493 title: 'Time',
509 linecolor: 'rgb(40, 223, 247)',
494 linecolor: 'rgb(40, 223, 247)',
510 color: 'rgb(40, 223, 247)',
495 color: 'rgb(40, 223, 247)',
511 size: 24,
496 size: 24,
512 titlefont: {
497 titlefont: {
513 color: 'white',
498 color: 'white',
514 size: 24
499 size: 24
515 },
500 },
516 },
501 },
517 yaxis: {
502 yaxis: {
518 title: this.props.ylabel || 'dB',
503 title: this.props.ylabel || 'dB',
519 linecolor: 'rgb(40, 223, 247)',
504 linecolor: 'rgb(40, 223, 247)',
520 color: 'rgb(40, 223, 247)',
505 color: 'rgb(40, 223, 247)',
521 size: 24,
506 size: 24,
522 titlefont: {
507 titlefont: {
523 color: 'white',
508 color: 'white',
524 size: 24
509 size: 24
525 },
510 },
526 },
511 },
527 titlefont: {
512 titlefont: {
528 size: 24,
513 size: 24,
529 }
514 }
530 };
515 };
531
516
532 if (this.props.ymin) { layout.yaxis.range = [this.props.ymin, this.props.ymax] }
517 if (this.props.ymin) { layout.yaxis.range = [this.props.ymin, this.props.ymax] }
533
518
534 var conf = {
519 var conf = {
535 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
520 modeBarButtonsToRemove: ['sendDataToCloud', 'autoScale2d', 'hoverClosestCartesian', 'hoverCompareCartesian', 'lasso2d', 'select2d', 'zoomIn2d', 'zoomOut2d', 'toggleSpikelines'],
536 modeBarButtonsToAdd: [{
521 modeBarButtonsToAdd: [{
537 name: 'Edit plot',
522 name: 'Edit plot',
538 icon: icon,
523 icon: icon,
539 click: function (gd) {
524 click: function (gd) {
540 $('#setup').modal('show');
525 $('#setup').modal('show');
541 }
526 }
542 }],
527 }],
543 displaylogo: false,
528 displaylogo: false,
544 showTips: true
529 showTips: true
545 };
530 };
546 Plotly.newPlot('plot', traces, layout, conf);
531 Plotly.newPlot('plot', traces, layout, conf);
547 }
532 }
548
533
549 getSize() {
534 getSize() {
550 var t = this.xbuffer.slice(-1)[0];
535 var t = this.xbuffer.slice(-1)[0];
551 var n = 0;
536 var n = 0;
552 var timespan = (this.props.timespan || 12) * 1000 * 60 * 60;
537 var timespan = (this.props.timespan || 12) * 1000 * 60 * 60;
553
538
554 while ((t - this.div.data[0].x[n]) > timespan) {
539 while ((t - this.div.data[0].x[n]) > timespan) {
555 n += 1;
540 n += 1;
556 }
541 }
557 return n;
542 return n;
558 }
543 }
559
544
560 fill_gaps(xBuffer, yBuffer, interval, N) {
545 fill_gaps(xBuffer, yBuffer, interval, N) {
561
546
562 var x = [xBuffer[0]];
547 var x = [xBuffer[0]];
563 var y = [];
548 var y = [];
564
549
565 for (var j = 0; j < N; j++) {
550 for (var j = 0; j < N; j++) {
566 y.push([yBuffer[j][0]]);
551 y.push([yBuffer[j][0]]);
567 }
552 }
568
553
569 var last;
554 var last;
570
555
571 for (var i = 1; i < xBuffer.length; i++) {
556 for (var i = 1; i < xBuffer.length; i++) {
572 var cnt = 0;
557 var cnt = 0;
573 last = x.slice(-1)[0];
558 last = x.slice(-1)[0];
574 while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) {
559 while (Math.abs(parseFloat(xBuffer[i]) - last) > 1.5 * parseFloat(interval)) {
575 cnt += 1;
560 cnt += 1;
576 last = last + interval;
561 last = last + interval;
577 x.push(last);
562 x.push(last);
578 for (var j = 0; j < N; j++) {
563 for (var j = 0; j < N; j++) {
579 y[j].push(null);
564 y[j].push(null);
580 }
565 }
581 // Avoid infinite loop
566 // Avoid infinite loop
582 if (cnt == 50) { break; }
567 if (cnt == 50) { break; }
583 }
568 }
584 x.push(xBuffer[i]);
569 x.push(xBuffer[i]);
585
570
586 for (var j = 0; j < N; j++) {
571 for (var j = 0; j < N; j++) {
587 y[j].push(yBuffer[j][i]);
572 y[j].push(yBuffer[j][i]);
588 }
573 }
589 }
574 }
590 return { 'time': x, 'data': y };
575 return { 'time': x, 'data': y };
591 }
576 }
592
577
593 plot() {
578 plot() {
594 // add new data to plots and empty buffers
579 // add new data to plots and empty buffers
595 var xvalues = [];
580 var xvalues = [];
596 var yvalues = [];
581 var yvalues = [];
597 var traces = [];
582 var traces = [];
598 var N = this.getSize();
583 var N = this.getSize();
599 console.log('Plotting...');
584 console.log('Plotting...');
600 for (var i = 0; i < this.n; i++) {
585 for (var i = 0; i < this.n; i++) {
601 if (N > 0) {
586 if (N > 0) {
602 this.div.data[i].y = this.div.data[i].y.slice(N, )
587 this.div.data[i].y = this.div.data[i].y.slice(N, )
603 this.div.data[i].x = this.div.data[i].x.slice(N, )
588 this.div.data[i].x = this.div.data[i].x.slice(N, )
604 }
589 }
605 yvalues.push(this.ybuffer[i]);
590 yvalues.push(this.ybuffer[i]);
606 xvalues.push(this.xbuffer);
591 xvalues.push(this.xbuffer);
607 traces.push(i);
592 traces.push(i);
608 this.ybuffer[i] = [];
593 this.ybuffer[i] = [];
609 }
594 }
610 Plotly.extendTraces(this.div, {
595 Plotly.extendTraces(this.div, {
611 y: yvalues,
596 y: yvalues,
612 x: xvalues
597 x: xvalues
613 }, traces);
598 }, traces);
614 this.xbuffer = [];
599 this.xbuffer = [];
615 }
600 }
616 //This function just add the last data and is used if previously was used setup()
601 //This function just add the last data and is used if previously was used setup()
617 update(obj) {
602 update(obj) {
618
603
619 // fill data gaps
604 // fill data gaps
620 var cnt = 0;
605 var cnt = 0;
621 while (Math.abs(parseFloat(obj.time[0]) - this.last ) > 1.5 * parseFloat(obj.interval)) {
606 while (Math.abs(parseFloat(obj.time[0]) - this.last ) > 1.5 * parseFloat(obj.interval)) {
622 cnt += 1;
607 cnt += 1;
623 this.last += obj.interval;
608 this.last += obj.interval;
624 var newt = new Date((this.last) * 1000);
609 var newt = new Date((this.last) * 1000);
625 // This condition is used to change from UTC to LT
610 // This condition is used to change from UTC to LT
626 if (obj.localtime == true){
611 if (obj.localtime == true){
627 newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
612 newt.setTime( newt.getTime() + newt.getTimezoneOffset()*60*1000 );
628 }
613 }
629 this.xbuffer.push(newt);
614 this.xbuffer.push(newt);
630 for (var i = 0; i < this.n; i++) {
615 for (var i = 0; i < this.n; i++) {
631 this.ybuffer[i].push(null);
616 this.ybuffer[i].push(null);
632 }
617 }
633 // Avoid infinite loop
618 // Avoid infinite loop
634 if (cnt == 100) { break; }
619 if (cnt == 100) { break; }
635 }
620 }
636
621
637 // update buffers
622 // update buffers
638 this.last = parseFloat(obj.time[0]);
623 this.last = parseFloat(obj.time[0]);
639 var t = new Date(obj.time[0] * 1000);
624 var t = new Date(obj.time[0] * 1000);
640 // This condition is used to change from UTC to LT
625 // This condition is used to change from UTC to LT
641 if (obj.localtime == true){
626 if (obj.localtime == true){
642 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
627 t.setTime( t.getTime() + t.getTimezoneOffset()*60*1000 );
643 }
628 }
644 this.xbuffer.push(t);
629 this.xbuffer.push(t);
645 for (var i = 0; i < this.n; i++) {
630 for (var i = 0; i < this.n; i++) {
646 this.ybuffer[i].push(obj[this.key][i][0]);
631 this.ybuffer[i].push(obj[this.key][i][0]);
647 }
632 }
648 var title = this.props.title || ''
633 var title = this.props.title || ''
649 Plotly.relayout(this.div, {
634 Plotly.relayout(this.div, {
650 title: title + ' - ' + t.toLocaleString(),
635 title: title + ' - ' + t.toLocaleString(),
651 });
636 });
652
637
653 // plot when ready (every 10 secs)
638 // plot when ready (every 10 secs)
654 if (!this.wait) {
639 if (!this.wait) {
655 this.plot();
640 this.plot();
656 this.wait = true;
641 this.wait = true;
657 } else {
642 } else {
658 clearTimeout(this.lastFunc)
643 clearTimeout(this.lastFunc)
659 this.lastFunc = setTimeout(function (scope) {
644 this.lastFunc = setTimeout(function (scope) {
660 if ((Date.now() - scope.lastRan) >= scope.timer) {
645 if ((Date.now() - scope.lastRan) >= scope.timer) {
661 scope.plot()
646 scope.plot()
662 scope.lastRan = Date.now()
647 scope.lastRan = Date.now()
663 }
648 }
664 }, this.timer - (Date.now() - this.lastRan), this)
649 }, this.timer - (Date.now() - this.lastRan), this)
665 }
650 }
666 }
651 }
667 // With this function You can change parameters in your plot
652 // With this function You can change parameters in your plot
668 restyle(values) {
653 restyle(values) {
669
654
670 var values = list2dict(values);
655 var values = list2dict(values);
671 Plotly.relayout(this.div, {
656 Plotly.relayout(this.div, {
672 yaxis: {
657 yaxis: {
673 range: [values.ymin, values.ymax]
658 range: [values.ymin, values.ymax]
674 }
659 }
675
660
676 });
661 });
677 }
662 }
678 }
663 }
General Comments 0
You need to be logged in to leave comments. Login now