kopia lustrzana https://github.com/projecthorus/wenet
343 wiersze
13 KiB
HTML
343 wiersze
13 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">
|
|
<link href="{{ url_for('static', filename='css/c3.min.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.5.4.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/c3.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/d3.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/fft_plot.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);
|
|
|
|
setup_fft_plot();
|
|
|
|
$.ajax({
|
|
// Get Wenet configuration information
|
|
url: "get_config",
|
|
dataType: 'json',
|
|
async: true,
|
|
success: function(data) {
|
|
// Update the current version field.
|
|
$('#wenet-version').text("Wenet RX v" + data.version);
|
|
$('#my-callsign').text(data.callsign);
|
|
}
|
|
});
|
|
|
|
// Handle an image update.
|
|
socket.on('image_update', function(msg) {
|
|
if(document.visibilityState == "hidden"){
|
|
return;
|
|
}
|
|
|
|
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) {
|
|
if(document.visibilityState == "hidden"){
|
|
return;
|
|
}
|
|
|
|
var snr = msg.snr.toFixed(1);
|
|
var ppm = msg.ppm.toFixed(1);
|
|
var freq = (msg.fcentre/1e6).toFixed(3);
|
|
|
|
var _new_desc = "SNR: " + snr + " dB";
|
|
$('#snr-data').html(_new_desc);
|
|
var _new_freq = freq + " MHz";
|
|
$('#freq-data').html(_new_freq);
|
|
|
|
var _new_time = msg.time;
|
|
$('#time-data').html(_new_time);
|
|
|
|
|
|
// Update the Spectra data.
|
|
scan_chart_spectra.columns[0] = ['x_spectra'].concat(msg.fft_freq);
|
|
scan_chart_spectra.columns[1] = ['Spectra'].concat(msg.fft_db);
|
|
|
|
scan_chart_obj.load(scan_chart_spectra);
|
|
|
|
var max_fft_level = Math.max(...msg.fft_db);
|
|
|
|
// Update the Frequency Estimate data.
|
|
scan_chart_peaks.columns[0] = ['x_fest'].concat([msg.fest[0]+msg.freq, msg.fest[1]+msg.freq]);
|
|
scan_chart_peaks.columns[1] = ['Tone Estimates'].concat([max_fft_level,max_fft_level]);
|
|
scan_chart_obj.load(scan_chart_peaks);
|
|
|
|
// Set the chart axes
|
|
scan_chart_obj.axis.max({'y':max_fft_level});
|
|
scan_chart_obj.axis.min({'y':max_fft_level-20});
|
|
|
|
// Ensure colors are set correctly.
|
|
$('.c3-axis-y').css('fill', 'white')
|
|
$('.c3-axis-x').css('fill', 'white')
|
|
$('.c3-legend-item text').css('fill', 'white')
|
|
|
|
});
|
|
|
|
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 numSV = msg.numSV.toFixed(0);
|
|
|
|
var _new_desc = msg.timestamp + "Z: " + lat + ", " + lon + " " + alt + "m " + ascent + " m/s " + numSV + " SVs";
|
|
$('#gps-data').html(_new_desc);
|
|
|
|
var _new_gps_detailed = msg.timestamp + "Z: "
|
|
if(msg.hasOwnProperty('radio_temp')){
|
|
_new_gps_detailed += "Radio Temp: " + msg.radio_temp.toFixed(1) + "˚C"
|
|
}
|
|
if(msg.hasOwnProperty('cpu_temp')){
|
|
_new_gps_detailed += ", CPU Temp: " + msg.cpu_temp.toFixed(1) + "˚C"
|
|
}
|
|
_new_gps_detailed += ", Load Avgs: " + msg.load_avg_1.toFixed(2) + "/" + msg.load_avg_5.toFixed(2) + "/" + msg.load_avg_15.toFixed(2)
|
|
_new_gps_detailed += ", Disk Usage: " + msg.disk_percent.toFixed(2) +"%"
|
|
_new_gps_detailed += ", CPU Speed: " + msg.cpu_speed +" MHz"
|
|
|
|
if(msg.lens_position > -900){
|
|
_new_gps_detailed += ", Lens Position: " + msg.lens_position
|
|
}
|
|
if(msg.sensor_temp > -900){
|
|
_new_gps_detailed += ", Sensor Temp: " + msg.sensor_temp
|
|
}
|
|
if(msg.focus_fom > -900){
|
|
_new_gps_detailed += ", FocusFoM: " + msg.focus_fom
|
|
}
|
|
|
|
|
|
$('#detail_gps_telem_data').html(_new_gps_detailed);
|
|
|
|
}
|
|
});
|
|
|
|
socket.on('orientation_update', function(msg) {
|
|
|
|
//console.log(msg);
|
|
// {
|
|
// "week": 2240,
|
|
// "iTOW": 8220,
|
|
// "leapS": 18,
|
|
// "timestamp": "2022-12-11T02:16:42",
|
|
// "sys_status": 5,
|
|
// "sys_error": 0,
|
|
// "sys_cal": 0,
|
|
// "gyro_cal": 3,
|
|
// "accel_cal": 1,
|
|
// "magnet_cal": 0,
|
|
// "temp": 29,
|
|
// "euler_heading": 1.5,
|
|
// "euler_roll": 1.125,
|
|
// "euler_pitch": 8.125,
|
|
// "quaternion_x": -0.0714111328125,
|
|
// "quaternion_y": -0.00933837890625,
|
|
// "quaternion_z": -0.01348876953125,
|
|
// "quaternion_w": 0.997314453125,
|
|
// "error": "None"
|
|
// }
|
|
|
|
if(msg.sys_cal==3){
|
|
var sys_cal = "Cal (S" + msg.sys_cal.toFixed(0) + " G" + msg.gyro_cal.toFixed(0) + " A" + msg.accel_cal.toFixed(0) + " M" + msg.magnet_cal.toFixed(0) + ")";
|
|
} else {
|
|
var sys_cal = "Uncal (S" + msg.sys_cal.toFixed(0) + " G" + msg.gyro_cal.toFixed(0) + " A" + msg.accel_cal.toFixed(0) + " M" + msg.magnet_cal.toFixed(0) + ")";
|
|
}
|
|
|
|
var heading = msg.euler_heading.toFixed(1);
|
|
var roll = msg.euler_roll.toFixed(1);
|
|
var pitch = msg.euler_pitch.toFixed(1)
|
|
|
|
var _ori_desc = "Heading " + heading + "˚ Roll " + roll + "˚ Pitch " + pitch + "˚ Cal: " + sys_cal;
|
|
$('#orientation-data').html(_ori_desc);
|
|
|
|
});
|
|
|
|
socket.on('image_telem_update', function(msg) {
|
|
|
|
//console.log(msg);
|
|
// {
|
|
// "week": 2240,
|
|
// "iTOW": 8220,
|
|
// "leapS": 18,
|
|
// "timestamp": "2022-12-11T02:16:42",
|
|
// "sys_status": 5,
|
|
// "sys_error": 0,
|
|
// "sys_cal": 0,
|
|
// "gyro_cal": 3,
|
|
// "accel_cal": 1,
|
|
// "magnet_cal": 0,
|
|
// "temp": 29,
|
|
// "euler_heading": 1.5,
|
|
// "euler_roll": 1.125,
|
|
// "euler_pitch": 8.125,
|
|
// "quaternion_x": -0.0714111328125,
|
|
// "quaternion_y": -0.00933837890625,
|
|
// "quaternion_z": -0.01348876953125,
|
|
// "quaternion_w": 0.997314453125,
|
|
// "error": "None"
|
|
// }
|
|
|
|
_img_number = msg.image_id.toFixed(0);
|
|
_timestamp = msg.timestamp;
|
|
|
|
if (msg.numSV < 3){
|
|
_gps_desc = "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 numSV = msg.numSV.toFixed(0);
|
|
|
|
var _gps_desc = lat + ", " + lon + " " + alt + "m " + ascent + " m/s, " + numSV + " SVs";
|
|
}
|
|
|
|
if(msg.sys_cal==3){
|
|
var sys_cal = "OK";
|
|
} else {
|
|
var sys_cal = "Uncal (S" + msg.sys_cal.toFixed(0) + " G" + msg.gyro_cal.toFixed(0) + " A" + msg.accel_cal.toFixed(0) + " M" + msg.magnet_cal.toFixed(0) + ")";
|
|
}
|
|
|
|
var heading = msg.euler_heading.toFixed(1);
|
|
var roll = msg.euler_roll.toFixed(1);
|
|
var pitch = msg.euler_pitch.toFixed(1)
|
|
|
|
var _ori_desc = "Heading " + heading + "˚ Roll " + roll + "˚ Pitch " + pitch + "˚ Cal: " + sys_cal;
|
|
|
|
var _image_telem_desc = "Img Number: " + _img_number + " Time: " + _timestamp + " " + _gps_desc + " " + _ori_desc;
|
|
|
|
$('#image_telem_data').html(_image_telem_desc);
|
|
|
|
});
|
|
|
|
var text_messages = [];
|
|
|
|
socket.on('text_update', function(msg) {
|
|
var _text = msg.timestamp + " Msg #" + msg.id + ": " + msg.text;
|
|
text_messages.push(_text);
|
|
if(text_messages.length > 10){
|
|
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-3">
|
|
<h3 class="masthead-brand" id="wenet-version">Wenet RX</h3>
|
|
</div>
|
|
<div class="col-5">
|
|
<h4 class="snr-display" id="time-data"></h4>
|
|
</div>
|
|
<div class="col-2">
|
|
<h4 class="snr-display" id="freq-data"></h4>
|
|
</div>
|
|
<div class="col-2">
|
|
<h4 class="snr-display" id="snr-data">SNR: 0 dB</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<h5 id="my-callsign">N0CALL</h5>
|
|
</div>
|
|
<div class="col-4">
|
|
<h5 class="orientation-display" id="orientation-data"></h5>
|
|
</div>
|
|
<div class="col-6">
|
|
<h5 class="gps-display" id="gps-data"></h5>
|
|
</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="image_telem_data"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-12'>
|
|
<div id="detail_gps_telem_data"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-12'>
|
|
<h5>Log Messages</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-12'>
|
|
<div id="log_data">No log messages received yet.</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-12'>
|
|
<h5>Spectrum Plot</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class='col-12'>
|
|
<div id="fft_plot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|