| @@ -265,135 +265,6 | |||||
| 265 | </div> |
|
265 | </div> | |
| 266 | </div> |
|
266 | </div> | |
| 267 |
|
267 | |||
| 268 | <script> |
|
268 | <script src="{% static 'js/atrad-conf.js' %}"></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> |
|
|||
| 398 |
|
269 | |||
| 399 | {% endblock %} No newline at end of file |
|
270 | {% endblock %} | |
General Comments 0
You need to be logged in to leave comments.
Login now