Adding proper spectrum display.
This commit is contained in:
Marat Fayzullin
parent
e56f9de7d3
commit
027790b8dd
|
|
@ -43,9 +43,6 @@
|
|||
<div id="webrx-page-container">
|
||||
${header}
|
||||
<div class="openwebrx-waterfall-container">
|
||||
<div id="openwebrx-spectrum-container">
|
||||
<canvas id="openwebrx-spectrum-canvas" width="0" height="0"></canvas>
|
||||
</div>
|
||||
<div id="openwebrx-frequency-container">
|
||||
<div id="openwebrx-bookmarks-container" style="z-index:2;">
|
||||
<div class="openwebrx-button openwebrx-round-button openwebrx-tune-button" style="position:absolute;top:30%;left:0;z-index:3;" title="Tune down" onclick="tuneBySteps(-1);">
|
||||
|
|
@ -58,6 +55,9 @@
|
|||
<div id="openwebrx-scale-container" style="z-index:1;">
|
||||
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
|
||||
</div>
|
||||
<div id="openwebrx-spectrum-container">
|
||||
<canvas id="openwebrx-spectrum-canvas" width="0" height="0"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="webrx-canvas-background">
|
||||
<div id="webrx-canvas-container">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,27 @@
|
|||
function Spectrum(id) {
|
||||
this.el = document.getElementById(id);
|
||||
this.ctx = this.el.getContext("2d");
|
||||
function Spectrum(el) {
|
||||
this.el = el;
|
||||
this.data = [];
|
||||
this.ctx = this.el.getContext("2d");
|
||||
this.min = 0;
|
||||
this.max = 0;
|
||||
|
||||
this.ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
|
||||
}
|
||||
|
||||
Spectrum.prototype.draw = function(data) {
|
||||
Spectrum.prototype.update = function(data) {
|
||||
for(var j=0; j<data.length; ++j) {
|
||||
this.data[j] = j>=this.data.length || data[j]>this.data[j]?
|
||||
data[j] : this.data[j] + (data[j] - this.data[j]) / 10.0;
|
||||
}
|
||||
|
||||
// this.min = Math.min(...data);
|
||||
this.min = waterfall_min_level;
|
||||
this.max = Math.max(...data);
|
||||
};
|
||||
|
||||
Spectrum.prototype.draw = function() {
|
||||
if (this.el.clientHeight == 0) return;
|
||||
|
||||
var vis_freq = get_visible_freq_range();
|
||||
var vis_center = vis_freq.center;
|
||||
var vis_start = 0.5 - (center_freq - vis_freq.start) / bandwidth;
|
||||
|
|
@ -12,30 +30,25 @@ Spectrum.prototype.draw = function(data) {
|
|||
var data_start = Math.round(fft_size * vis_start);
|
||||
var data_end = Math.round(fft_size * vis_end);
|
||||
var data_width = data_end - data_start;
|
||||
var data_height = Math.abs(waterfall_min_level - waterfall_max_level);
|
||||
var spec_width = window.screen.width;
|
||||
var spec_height = 100;
|
||||
var data_height = Math.abs(this.max - this.min);
|
||||
var spec_width = this.el.clientWidth;
|
||||
var spec_height = this.el.clientHeight;
|
||||
|
||||
ctx.clearRect(0, 0, spec_width,spec_height);
|
||||
this.ctx.clearRect(0, 0, spec_width, spec_height);
|
||||
|
||||
if(spec_width > data_width)
|
||||
{
|
||||
if(spec_width < data_width) {
|
||||
var x_ratio = data_width / spec_width;
|
||||
var y_ratio = spec_height / data_height;
|
||||
for(var x=0; x<spec_width; x++)
|
||||
{
|
||||
var y = data[data_start + j * x_ratio] * y_ratio;
|
||||
ctx.drawRect(x, 0, x+1, y);
|
||||
for(var x=0; x<spec_width; x++) {
|
||||
var y = (this.data[data_start + ((x * x_ratio) | 0)] - this.min) * y_ratio;
|
||||
this.ctx.fillRect(x, spec_height, 1, -y);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
var x_ratio = spec_width / data_width;
|
||||
var y_ratio = spec_height / data_height;
|
||||
for(var x=0; x<data_width; x++)
|
||||
{
|
||||
var y = data[data_start + j] * y_ratio;
|
||||
ctx.drawRect(x * x_ratio, 0, (x+1) * x_ratio, y);
|
||||
for(var x=0; x<data_width; x++) {
|
||||
var y = (this.data[data_start + x] - this.min) * y_ratio;
|
||||
this.ctx.fillRect(x * x_ratio, spec_height, x_ratio, -y);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1430,6 +1430,8 @@ function waterfall_add(data) {
|
|||
if (!waterfall_setup_done) return;
|
||||
var w = fft_size;
|
||||
|
||||
if (spectrum != null) spectrum.update(data);
|
||||
|
||||
if (waterfall_measure_minmax_now) {
|
||||
var levels = waterfall_measure_minmax_do(data);
|
||||
waterfall_measure_minmax_now = false;
|
||||
|
|
@ -1514,6 +1516,7 @@ function openwebrx_init() {
|
|||
open_websocket();
|
||||
secondary_demod_init();
|
||||
digimodes_init();
|
||||
spectrum_init();
|
||||
initPanels();
|
||||
$('#openwebrx-panel-receiver').demodulatorPanel();
|
||||
window.addEventListener("resize", openwebrx_resize);
|
||||
|
|
@ -1652,6 +1655,16 @@ function initPanels() {
|
|||
});
|
||||
}
|
||||
|
||||
function spectrum_init() {
|
||||
var canvas = document.getElementById('openwebrx-spectrum-canvas');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = 50;
|
||||
|
||||
spectrum = new Spectrum(canvas);
|
||||
setInterval(function() { spectrum.draw(); }, 100);
|
||||
}
|
||||
|
||||
/*
|
||||
_____ _ _ _
|
||||
| __ \(_) (_) | |
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
|
|||
"lib/Js8Threads.js",
|
||||
"lib/Modes.js",
|
||||
"lib/MetaPanel.js",
|
||||
"lib/Spectrum.js",
|
||||
],
|
||||
"map.js": [
|
||||
"lib/jquery-3.2.1.min.js",
|
||||
|
|
|
|||
Loading…
Reference in New Issue