##// END OF EJS Templates
radarsys_met
RSS
Fix power monitor
Fix power monitor
jespinoza - - Load All Authors

File last commit:

r394:6790c8880a2c
r394:6790c8880a2c
Show More
index.html
180 lines | 5.7 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-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);
var text = '(' + data['topic'] + ' qos: ' + data['qos'] + ') ' + data['payload'];
$('#subscribe_messages').val(text);
$('#radar_status').val(data.status);
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 );
})
});
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 layout = {
height: 350,
font: {size: 12},
margin: { t: 0 },
xaxis: {
type: 'date'
},
};
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]}
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(-500)
plotDiv.data[0].y = plotDiv.data[0].y.slice(-500)
plotDiv.data[1].x = plotDiv.data[1].x.slice(-500)
plotDiv.data[1].y = plotDiv.data[1].y.slice(-500)
}
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="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>
<!--RX LOG-->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">RX log</h3>
</div>
<div class="panel-body">
<div class="col-xs-12">
<div class="row">
<div></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 %}