| @@ -265,135 +265,6 | |||
|
|
265 | 265 | </div> |
|
|
266 | 266 | </div> |
|
|
267 | 267 | |
|
|
268 | <script> | |
|
|
269 | $(document).ready(function() { | |
|
|
270 | var socket = io.connect('http://' + document.domain + ':' + location.port); | |
|
|
271 | ||
|
|
272 | socket.on('connect', function(data) { | |
|
|
273 | console.log('Connecting OK'); | |
|
|
274 | makePlot("plot-temp",2,["Tx1","Tx2"],[14, 45]) | |
|
|
275 | makePlot("plot-pot",2,["Tx1","Tx2"],[70,100]) | |
|
|
276 | makePlot("plot-pot-t1",4,["P1","P2","P3","P4"],[0,25]) | |
|
|
277 | makePlot("plot-pot-t2",4,["P1","P2","P3","P4"],[0,25]) | |
|
|
278 | }) | |
|
|
279 | ||
|
|
280 | socket.on('test', function(data) { | |
|
|
281 | console.log(data) | |
|
|
282 | UpdateData(data.num,data); | |
|
|
283 | }) | |
|
|
284 | $('#ONBtn1').click(function() { | |
|
|
285 | console.log("holaa") | |
|
|
286 | socket.emit('atrad_control_event', '11'); | |
|
|
287 | }); | |
|
|
288 | $('#ONBtn2').click(function(){ | |
|
|
289 | console.log("holaa2") | |
|
|
290 | socket.emit('atrad_control_event', '21'); | |
|
|
291 | }); | |
|
|
292 | $('#OFFBtn1').click(function() { | |
|
|
293 | socket.emit('atrad_control_event','10'); | |
|
|
294 | }); | |
|
|
295 | $('#OFFBtn2').click(function(){ | |
|
|
296 | socket.emit('atrad_control_event', '20'); | |
|
|
297 | }); | |
|
|
298 | }); | |
|
|
299 | ||
|
|
300 | function UpdateData(id,data){ | |
|
|
301 | let total = data.pow.reduce((a, b) => a + b, 0)/1000.0; | |
|
|
302 | streamPlot("plot-pot",data.time,total,id,81); | |
|
|
303 | streamPlot("plot-temp",data.time,data.tmax[0],id,40); | |
|
|
304 | streamPlot2("plot-pot-t"+(id+1),data.time,data.pow); | |
|
|
305 | ligthStatus(id,data.status); | |
|
|
306 | PotenciaAmplificador(id,data.pow,total); | |
|
|
307 | $('#temp'+(id+1)).text(data.tmax[0]); | |
|
|
308 | if(eval(data.tmax[0])>20){ | |
|
|
309 | $('#alert-time'+(id+1)).text(data.time.slice(-8,)); | |
|
|
310 | $('#alert-temp'+(id+1)).text(data.tmax[0]); | |
|
|
311 | $('#alert-loc'+(id+1)).text('Tx'+(id+1)+' '+data.tmax[1]); | |
|
|
312 | } | |
|
|
313 | } | |
|
|
314 | ||
|
|
315 | function makePlot(div, n=1, names=["", ""],ranges){ | |
|
|
316 | var plotDiv = document.getElementById(div); | |
|
|
317 | var traces = []; | |
|
|
318 | for (let i = 0; i < n; i++) { | |
|
|
319 | traces.push({x: [], y: [],mode: 'lines', name: names[i]}); | |
|
|
320 | } | |
|
|
321 | traces.push({x: [], y: [],mode: 'lines',line: {color:'rgb(219, 64, 82)',dash: 'dot',width: 2},name:"nominal",showlegend: false}); | |
|
|
322 | var yrange = ranges; | |
|
|
323 | var layout = { | |
|
|
324 | width: 700, | |
|
|
325 | height: 350, | |
|
|
326 | font: {size: 12}, | |
|
|
327 | margin: { t: 10, b:40,}, | |
|
|
328 | xaxis: { | |
|
|
329 | type: 'date' | |
|
|
330 | }, | |
|
|
331 | yaxis: { | |
|
|
332 | range: yrange, | |
|
|
333 | }, | |
|
|
334 | }; | |
|
|
335 | var config = {responsive: true} | |
|
|
336 | Plotly.newPlot(plotDiv, traces, layout,config); | |
|
|
337 | }; | |
|
|
338 | ||
|
|
339 | function streamPlot(div,x,y,ind,val){ | |
|
|
340 | var plotDiv = document.getElementById(div); | |
|
|
341 | if (plotDiv.data[ind].x.length > 8){ | |
|
|
342 | plotDiv.data[2].x = plotDiv.data[2].x.slice(-23) | |
|
|
343 | plotDiv.data[2].y = plotDiv.data[2].y.slice(-23) | |
|
|
344 | plotDiv.data[ind].x = plotDiv.data[ind].x.slice(-11) | |
|
|
345 | plotDiv.data[ind].y = plotDiv.data[ind].y.slice(-11) | |
|
|
346 | } | |
|
|
347 | var tm = [x]; | |
|
|
348 | var values = [y]; | |
|
|
349 | var data_update = {x: [tm,tm], y: [values,[val]]} | |
|
|
350 | Plotly.extendTraces(plotDiv, data_update,[ind,2]) | |
|
|
351 | }; | |
|
|
352 | function streamPlot2(div,x,y){ | |
|
|
353 | var plotDiv = document.getElementById(div); | |
|
|
354 | if (plotDiv.data[0].x.length > 8){ | |
|
|
355 | for(let i=0;i<4;i++){ | |
|
|
356 | plotDiv.data[i].x = plotDiv.data[i].x.slice(-11) | |
|
|
357 | plotDiv.data[i].y = plotDiv.data[i].y.slice(-11) | |
|
|
358 | } | |
|
|
359 | } | |
|
|
360 | var tm = [x]; | |
|
|
361 | var values = []; | |
|
|
362 | for(let i=0;i<4;i++){ | |
|
|
363 | values[i]=[y[i]/1000.0]; | |
|
|
364 | } | |
|
|
365 | var data_update = {x: [tm,tm,tm,tm], y: values} | |
|
|
366 | Plotly.extendTraces(plotDiv, data_update,[0,1,2,3]) | |
|
|
367 | }; | |
|
|
368 | ||
|
|
369 | function ligthStatus(id,status){ | |
|
|
370 | let div1 = 'status'+(id+1); | |
|
|
371 | let div2 = 'status-text'+(id+1); | |
|
|
372 | ||
|
|
373 | if(status==='0000'){ | |
|
|
374 | document.getElementById(div1).style.backgroundColor = "red"; | |
|
|
375 | document.getElementById(div2).innerHTML = "Disable"; | |
|
|
376 | } | |
|
|
377 | else if(status==='1111'){ | |
|
|
378 | document.getElementById(div1).style.backgroundColor = "green"; | |
|
|
379 | document.getElementById(div2).innerHTML = "Fully enable"; | |
|
|
380 | } | |
|
|
381 | else{ | |
|
|
382 | document.getElementById(div1).style.backgroundColor = "yellow"; | |
|
|
383 | document.getElementById(div2).innerHTML = "Not fully enable"; | |
|
|
384 | } | |
|
|
385 | }; | |
|
|
386 | ||
|
|
387 | function PotenciaAmplificador(id,data1,data2){ | |
|
|
388 | let div = '#pot'+(id+1); | |
|
|
389 | for(let i=1; i<5; i++){ | |
|
|
390 | $(div+'-'+i).text(data1[i-1]/1000.0); | |
|
|
391 | } | |
|
|
392 | $(div).text(data2); | |
|
|
393 | } | |
|
|
394 | $(".clickable-row").click(function() { | |
|
|
395 | window.open($(this).data("href"),); | |
|
|
396 | }); | |
|
|
397 | </script> | |
|
|
268 | <script src="{% static 'js/atrad-conf.js' %}"></script> | |
|
|
398 | 269 | |
|
|
399 | 270 | {% endblock %} No newline at end of file |
General Comments 0
You need to be logged in to leave comments.
Login now