##// END OF EJS Templates
radarsys_met
RSS
Set data path for raw data in experiment
Set data path for raw data in experiment
jespinoza - - Load All Authors

File last commit:

r389:df3a4257ccd7
r391:453cf2094089
Show More
index.html
193 lines | 5.8 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);
socket.on('connect', function(data) {
console.log('Initialazing plots...');
makePlot("plot-az");
makePlot("plot-el");
makePlot("plot-saz");
makePlot("plot-sel");
makePlot("plot-tx");
})
socket.on('mqtt_message', function(data) {
console.log(data.topic);
var text = '(' + data['topic'] + ' qos: ' + data['qos'] + ') ' + data['payload'];
$('#subscribe_messages').val(text);
$('#radar_status').val(data.status);
streamPlot("plot-az", data.timestamp, data.az );
streamPlot("plot-el", data.timestamp, data.el );
streamPlot("plot-saz", data.timestamp, data.saz );
streamPlot("plot-sel", data.timestamp, data.sel );
})
});
function makePlot(div){
var plotDiv = document.getElementById(div);
var traces = [{
x: [],
y: []
}];
var layout = {
height: 350,
font: {size: 12},
margin: { t: 0 },
xaxis: {
type: 'date'
},
//yaxis: {
// range: [0, 110]
//}
};
Plotly.plot(plotDiv, traces, layout);
};
function streamPlot(div, x, y ){
var plotDiv = document.getElementById(div);
if (plotDiv.data[0].x.length > 499){
plotDiv.data[0].x = plotDiv.data[0].x.slice(-500)
plotDiv.data[0].y = plotDiv.data[0].y.slice(-500)
}
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]}
//var windowDateObj = getWindow(x)
//var layout_update = {xaxis: {
// range: [windowDateObj, x[x.length - 1]],
// rangeslider: {range: [plot_start, x[x.length - 1]]}
//}};
//Plotly.update(plotDiv, {}, layout_update)
Plotly.extendTraces(plotDiv, data_update, [0])
};
</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="row">
<div class="form-horizontal">
<div class="form-group">
<div class="col-xs-12">
<label for="radar_status">Status</label>
<input id="radar_status" class="form-control" value="Not Running", disabled></input>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label for="subscribe_messages">MQTT Message</label>
<textarea id="subscribe_messages" class="form-control" rows=8></textarea>
</div>
</div>
</div>
</div>`
</div>
</div>
</div>
</div>
<!--Azimuth-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Pedestal Azimuth</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-az"></div>
</div>
</div>
</div>
</div>
</div>
<!--Elevation-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Pedestal Elevation</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-el"></div>
</div>
</div>
</div>
</div>
</div>
<!--Azimuth Speed-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Pedestal Azimuth Speed</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-saz"></div>
</div>
</div>
</div>
</div>
</div>
<!--Elevation Speed-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Pedestal Elevation Speed</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div id="plot-sel"></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 %}