kopia lustrzana https://github.com/projecthorus/wenet
124 wiersze
4.3 KiB
HTML
124 wiersze
4.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
|
|
<title>Wenet Web Interface</title>
|
|
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/wenet.css') }}" rel="stylesheet">
|
|
<script src="{{ url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
|
|
<script src="{{ url_for('static', filename='js/socket.io-4.1.2.min.js') }}"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
|
|
$(document).ready(function() {
|
|
// Use the 'update_status' namespace for all of our traffic
|
|
namespace = '/update_status';
|
|
|
|
// Connect to the Socket.IO server.
|
|
// The connection URL has the following format:
|
|
// http[s]://<domain>:<port>[/<namespace>]
|
|
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
|
|
|
|
|
|
// Handle an image update.
|
|
socket.on('image_update', function(msg) {
|
|
var myImageElement = document.getElementById('wenet_image');
|
|
myImageElement.src = 'latest.jpg?rand=' + Math.random();
|
|
|
|
var _new_desc = msg.text;
|
|
$('#image_data').html(_new_desc);
|
|
});
|
|
|
|
socket.on('uploader_update', function(msg) {
|
|
|
|
var _new_desc = "Uploader Status: " + msg.queued + " Queued, " + msg.uploaded + " Uploaded, " + msg.discarded + " Discarded";
|
|
$('#uploader_data').html(_new_desc);
|
|
});
|
|
|
|
|
|
socket.on('modem_stats', function(msg) {
|
|
|
|
var snr = msg.snr.toFixed(1);
|
|
var ppm = msg.ppm.toFixed(1);
|
|
|
|
var _new_desc = "SNR: " + snr + " dB"
|
|
$('#snr-data').html(_new_desc);
|
|
});
|
|
|
|
socket.on('gps_update', function(msg) {
|
|
|
|
if (msg.numSV < 3){
|
|
$('#gps-data').html("No GPS Lock");
|
|
} else {
|
|
|
|
var lat = msg.latitude.toFixed(5);
|
|
var lon = msg.longitude.toFixed(5);
|
|
var alt = msg.altitude.toFixed(0);
|
|
var ascent = msg.ascent_rate.toFixed(1);
|
|
|
|
var _new_desc = lat + ", " + lon + " " + alt + "m " + ascent + " m/s"
|
|
$('#gps-data').html(_new_desc);
|
|
}
|
|
});
|
|
|
|
var text_messages = [];
|
|
|
|
socket.on('text_update', function(msg) {
|
|
var _text = "Msg #" + msg.id + ": " + msg.text;
|
|
text_messages.push(_text);
|
|
if(text_messages.length > 6){
|
|
text_messages.shift();
|
|
}
|
|
|
|
var _log_output = "";
|
|
text_messages.forEach( function(value, index, array){
|
|
_log_output = _log_output + value + "<br>";
|
|
});
|
|
|
|
$('#log_data').html(_log_output);
|
|
});
|
|
|
|
// Tell the server we are connected and ready for data.
|
|
socket.on('connect', function() {
|
|
socket.emit('client_connected', {data: 'I\'m connected!'});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<h3 class="masthead-brand">Wenet Dashboard</h3>
|
|
</div>
|
|
<div class="col-6">
|
|
<h5 class="gps-display" id="gps-data"></h5>
|
|
</div>
|
|
<div class="col-2">
|
|
<h4 class="snr-display" id="snr-data">SNR: 0 dB</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<img src="{{ url_for('static', filename='horus.png') }}" id="wenet_image" class="center-block wenet-image"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-6'>
|
|
<div id="image_data">No image data received yet.</div>
|
|
</div>
|
|
<div class='col-6'>
|
|
<div id="uploader_data">No uploader status data received yet.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-12'>
|
|
<div id="log_data">No log messages received yet.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|