##// END OF EJS Templates
radarsys_met
RSS
1)Update schain contenainer - 2)Add acq template - 3)Add AZ OFFSET pedestal parameter - 4)Add scheduler (sudo crontab) - 5)Add sirm-job container
1)Update schain contenainer - 2)Add acq template - 3)Add AZ OFFSET pedestal parameter - 4)Add scheduler (sudo crontab) - 5)Add sirm-job container
eynilupu - - Load All Authors

File last commit:

r438:4bd0c7e20a9b
r438:4bd0c7e20a9b
Show More
index.html
225 lines | 7.5 KiB | text/html | HtmlDjangoLexer
/ volumes / proc / templates / index.html
History | Annotation | Raw |Copy content |Copy permalink
{% extends "bootstrap/base.html" %}
{% block title %}SOPHY monitor{% endblock %}
{% block styles %}
{{ super() }}
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="text/javascript" src="{{ url_for('static', filename='js/plotly-latest.min.js') }}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var socket = io.connect('http://' + document.domain + ':' + location.port);
var rx_log_array = [];
socket.on('connect', function(data) {
console.log('Initialazing plots...');
makePlot("plot-pos", 2, ["Azimuth", "Elevation"]);
makePlot("plot-speed", 2, ["AZ Speed", "EL Speed"]);
makePlot("plot-tx", 2, ["Power A", "Power B"]);
})
socket.on('mqtt_message', function(data) {
console.log(data['topic']);
if (data['topic'].includes('monitor')){
if (rx_log_array.length > 7){
rx_log_array.shift();
}
rx_log_array.push(data['payload']);
$('#rx_log').val(rx_log_array.join('\r\n'));
if ('status' in data) {
$('#radar_status').val(data.status);
if (data.status == 'Running') {
$('#radar_status').css('color', 'green');
}else {
$('#radar_status').css('color', 'red');
}
}
if ('name' in data){
$('#experiment').val(data.name);
}
} else if (data['topic'].includes('pedestal')) {
streamPlot2("plot-pos", data.timestamp, data.az, data.el );
streamPlot2("plot-speed", data.timestamp, data.saz, data.sel );
//streamPlot2("plot-tx", data.timestamp, data.powa, data.powb );
//$('#status_txa').val(data.status_powa);
//if (data.status_powa == 'OK') {
// $('#status_txa').css('color', 'green');
// }else {
// $('#status_txa').css('color', 'red');
// }
//$('#status_txb').val(data.status_powb);
//if (data.status_powb == 'OK') {
// $('#status_txb').css('color', 'green');
// }else {
// $('#status_txb').css('color', 'red');
// }
} else if (data['topic'].includes('tx')) {
var payload = JSON.parse(data.payload);
streamPlot2("plot-tx", payload.timestamp, payload.powa, payload.powb );
$('#status_txa').val(payload.status_powa);
if (payload.status_powa == 'OK') {
$('#status_txa').css('color', 'green');
}else {
$('#status_txa').css('color', 'red');
}
$('#status_txb').val(payload.status_powb);
if (payload.status_powb == 'OK') {
$('#status_txb').css('color', 'green');
}else {
$('#status_txb').css('color', 'red');
}
}
})
});
function makePlot(div, n=1, names=["", ""]){
var plotDiv = document.getElementById(div);
var traces = [];
for (let i = 0; i < n; i++) {
traces.push({x: [], y: [], name: names[i]});
}
var yrange = [0, 50];
if (div == "plot-pos"){yrange = [0, 360];}
if (div == "plot-speed"){yrange = [-15, 15];}
var layout = {
height: 350,
font: {size: 12},
margin: { t: 0 },
xaxis: {
type: 'date'
},
yaxis: {
range: yrange,
},
};
Plotly.plot(plotDiv, traces, layout);
};
function streamPlot(div, x, y ){
var plotDiv = document.getElementById(div);
if (plotDiv.data[0].x.length > 599){
plotDiv.data[0].x = plotDiv.data[0].x.slice(-600)
plotDiv.data[0].y = plotDiv.data[0].y.slice(-600)
}
var tm = x.map(i => new Date(i*1000));
var values = y.map(i => Math.round(i * 100) / 100);
var data_update = {x: [tm], y: [values]}
Plotly.extendTraces(plotDiv, data_update, [0])
};
function streamPlot2(div, x, y1, y2 ){
var plotDiv = document.getElementById(div);
if (plotDiv.data[0].x.length > 499){
plotDiv.data[0].x = plotDiv.data[0].x.slice(-600)
plotDiv.data[0].y = plotDiv.data[0].y.slice(-600)
plotDiv.data[1].x = plotDiv.data[1].x.slice(-600)
plotDiv.data[1].y = plotDiv.data[1].y.slice(-600)
}
var tm = x.map(i => new Date(i*1000));
var values1 = y1.map(i => Math.round(i * 100) / 100);
var values2 = y2.map(i => Math.round(i * 100) / 100);
var data_update = {x: [tm, tm], y: [values1, values2]}
Plotly.extendTraces(plotDiv, data_update, [0, 1])
};
</script>
{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>SOPHy monitor</h1>
</div>
</div>
<div class="row">
<!--Messages-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Status</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="form-row">
<div class="form-group col-xs-6">
<label for="radar_status">Status</label>
<input id="radar_status" class="form-control" value="{{status}}" disabled></input>
</div>
<div class="form-group col-xs-6">
<label for="experiment">Experiment</label>
<input id="experiment" class="form-control" value="{{experiment_name}}" disabled></input>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-6">
<label for="status_txa">TX A</label>
<input id="status_txa" class="form-control" value="{{txa}}" disabled></input>
</div>
<div class="form-group col-xs-6">
<label for="status_txb">TX B</label>
<input id="status_txb" class="form-control" value="{{txb}}" disabled></input>
</div>
</div>
<div class="form-row">
<div class="form-group col-xs-12">
<label for="rx_log">RX Log</label>
<textarea id="rx_log" class="form-control" rows=7></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Position-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Pedestal Position</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-pos"></div>
</div>
</div>
</div>
</div>
</div>
<!--Speed-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Pedestal Speed</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-speed"></div>
</div>
</div>
</div>
</div>
</div>
<!--TX power-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">SSPA's power</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-tx"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{debug}}
{% endblock %}