kopia lustrzana https://github.com/ogre/habdec
195 wiersze
5.6 KiB
JavaScript
195 wiersze
5.6 KiB
JavaScript
function DrawPowerSpectrum(i_canvas, i_spectrum)
|
|
{
|
|
var ctx = i_canvas.getContext("2d");
|
|
|
|
// CLEAR THE CANVAS
|
|
//
|
|
ctx.clearRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
|
|
|
// BG
|
|
//
|
|
var grd_bg = ctx.createLinearGradient(0, 0, 0, i_canvas.height-1);
|
|
grd_bg.addColorStop(0, "hsl(210, 15%, 24%)");
|
|
grd_bg.addColorStop(.5, "hsl(210, 15%, 40%)");
|
|
grd_bg.addColorStop(1, "hsl(210, 15%, 24%)");
|
|
ctx.fillStyle = grd_bg;
|
|
ctx.fillRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
|
|
|
G_SPECTRUM_ZOOM = Math.max(0, Math.min(1, G_SPECTRUM_ZOOM));
|
|
|
|
var zoom = G_SPECTRUM_ZOOM;
|
|
|
|
// LOWPASS FILTER DRAW
|
|
//
|
|
var _lowpass_bw = GLOBALS.lowpass_bw / (1.0 - .999*zoom);
|
|
var _lowpass_trans = GLOBALS.lowpass_trans / (1.0 - .999*zoom);
|
|
var grd_lowpass = ctx.createLinearGradient(0, 0, i_canvas.width-1, 0);
|
|
var _l = Math.max(0, .5 - .5 * _lowpass_bw);
|
|
var _ll = Math.max(0, .5 - .5 * (_lowpass_bw + _lowpass_trans));
|
|
var _r = Math.min(1, .5 + .5 * _lowpass_bw);
|
|
var _rr = Math.min(1, .5 + .5 * (_lowpass_bw + _lowpass_trans));
|
|
|
|
grd_lowpass.addColorStop(0, "rgba(15,25,50,0)");
|
|
grd_lowpass.addColorStop(_ll, "rgba(15,25,50,0)");
|
|
grd_lowpass.addColorStop(_l, "#113555");
|
|
grd_lowpass.addColorStop(_r, "#113555");
|
|
grd_lowpass.addColorStop(_rr, "rgba(15,25,50,0)");
|
|
grd_lowpass.addColorStop(1, "rgba(15,25,50,0)");
|
|
ctx.fillStyle = grd_lowpass;
|
|
ctx.fillRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
|
|
|
// SPECTRUM
|
|
//
|
|
var power_grd = ctx.createLinearGradient(0, 0, 0, i_canvas.height-1);
|
|
power_grd.addColorStop(0.2, "yellow");
|
|
power_grd.addColorStop(.6, "#993311");
|
|
power_grd.addColorStop(1, "black");
|
|
|
|
ctx.strokeStyle = power_grd;
|
|
ctx.beginPath();
|
|
if(i_spectrum.type_size_ == 1) // 8 bit char
|
|
{
|
|
for(var x=0; x<i_canvas.width; ++x)
|
|
{
|
|
var x_0_1 = x/(i_canvas.width-1);
|
|
var val_0_1 = i_spectrum.values_[ Math.round(x_0_1 * i_spectrum.values_.length) ] / 255;
|
|
var val_pixel = (1-val_0_1) * (i_canvas.height-1);
|
|
ctx.moveTo(x, i_canvas.height - 1);
|
|
ctx.lineTo(x, val_pixel);
|
|
}
|
|
}
|
|
else if(i_spectrum.type_size_ == 2) // uint16_t
|
|
{
|
|
for(var x=0; x<i_canvas.width; ++x)
|
|
{
|
|
var x_0_1 = x/(i_canvas.width-1);
|
|
var val_0_1 = i_spectrum.values_[ Math.round(x_0_1 * i_spectrum.values_.length) ] / 65535;
|
|
var val_pixel = (1-val_0_1) * (i_canvas.height-1);
|
|
ctx.moveTo(x, i_canvas.height - 1);
|
|
ctx.lineTo(x, val_pixel);
|
|
}
|
|
}
|
|
else if(i_spectrum.type_size_ == 4) // 32float
|
|
{
|
|
for(var x=0; x<i_canvas.width; ++x)
|
|
{
|
|
var x_0_1 = x/(i_canvas.width-1);
|
|
var val_0_1 = (i_spectrum.values_[Math.round(x_0_1 * i_spectrum.values_.length)] - i_spectrum.min_) / (i_spectrum.max_ - i_spectrum.min_) ;
|
|
var val_pixel = (1-val_0_1) * (i_canvas.height-1);
|
|
ctx.moveTo(x, i_canvas.height - 1);
|
|
ctx.lineTo(x, val_pixel);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
|
|
// CENTER LINE
|
|
//
|
|
ctx.strokeStyle = '#888888';
|
|
ctx.beginPath();
|
|
ctx.moveTo(i_canvas.width/2, i_canvas.height - 1);
|
|
ctx.lineTo(i_canvas.width/2, 0);
|
|
ctx.stroke();
|
|
|
|
// NOISE FLOOR
|
|
//
|
|
ctx.strokeStyle = '#333388';
|
|
ctx.beginPath();
|
|
var nf_0_1 = (i_spectrum.noise_floor_ - i_spectrum.min_) / (i_spectrum.max_ - i_spectrum.min_);
|
|
ctx.moveTo(0, (1-nf_0_1)*i_canvas.height - 1);
|
|
ctx.lineTo(i_canvas.width-1, (1-nf_0_1)*i_canvas.height - 1);
|
|
ctx.stroke();
|
|
|
|
// PEAK LEFT
|
|
//
|
|
if(i_spectrum.peak_left_valid_)
|
|
ctx.strokeStyle = '#FF5500';
|
|
else
|
|
ctx.strokeStyle = '#55000';
|
|
ctx.beginPath();
|
|
var peak_left_0_1 = i_spectrum.peak_left_ / i_spectrum.size_;
|
|
ctx.moveTo(peak_left_0_1 * i_canvas.width, 0);
|
|
ctx.lineTo(peak_left_0_1 * i_canvas.width, i_canvas.height - 1);
|
|
ctx.stroke();
|
|
|
|
// PEAK RIGHT
|
|
//
|
|
if(i_spectrum.peak_right_valid_)
|
|
ctx.strokeStyle = '#0088FF';
|
|
else
|
|
ctx.strokeStyle = '#000055';
|
|
ctx.beginPath();
|
|
var peak_right_0_1 = i_spectrum.peak_right_ / i_spectrum.size_;
|
|
ctx.moveTo(peak_right_0_1 * i_canvas.width, 0);
|
|
ctx.lineTo(peak_right_0_1 * i_canvas.width, i_canvas.height - 1);
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
|
|
function DrawDemod(i_canvas, i_demod)
|
|
{
|
|
var ctx = i_canvas.getContext("2d");
|
|
|
|
// Clear the canvas
|
|
ctx.clearRect(0, 0, i_canvas.width, i_canvas.height);
|
|
|
|
// BG
|
|
//
|
|
var grd_bg = ctx.createLinearGradient(0, 0, 0, i_canvas.height-1);
|
|
grd_bg.addColorStop(0, "hsl(210, 15%, 24%)");
|
|
grd_bg.addColorStop(.5,"hsl(210, 15%, 40%)");
|
|
grd_bg.addColorStop(1, "hsl(210, 15%, 24%)");
|
|
ctx.fillStyle = grd_bg;
|
|
ctx.fillRect(0, 0, i_canvas.width-1, i_canvas.height-1);
|
|
|
|
// CENTER LINE
|
|
//
|
|
ctx.strokeStyle = 'hsl(210, 15%, 30%)';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, i_canvas.height/2);
|
|
ctx.lineTo(i_canvas.width-1, i_canvas.height/2);
|
|
ctx.stroke();
|
|
|
|
// DEMOD
|
|
//
|
|
ctx.strokeStyle = "#aa5500";
|
|
|
|
ctx.beginPath();
|
|
|
|
ctx.moveTo(0, 0);
|
|
|
|
for(var x=0; x<i_canvas.width; ++x)
|
|
{
|
|
var x_0_1 = x/(i_canvas.width-1);
|
|
|
|
var raw_value = i_demod.values_[ Math.round(x_0_1 * i_demod.values_.length) ];
|
|
var full_scale_value = 0;
|
|
if(i_demod.type_size_ == 1) // 8 bit char
|
|
full_scale_value = i_demod.min_ + raw_value / 255.0 * (i_demod.max_ - i_demod.min_);
|
|
else if(i_demod.type_size_ == 2) // uint16_t
|
|
full_scale_value = i_demod.min_ + raw_value / 65535.0 * (i_demod.max_ - i_demod.min_);
|
|
else if(i_demod.type_size_ == 4) // 32float
|
|
full_scale_value = raw_value;
|
|
|
|
full_scale_value *= .75; // scale down a little bit
|
|
var val_0_1 = .5 + .5 * full_scale_value / Math.max( Math.abs( i_demod.min_ ), Math.abs( i_demod.max_ ) );
|
|
|
|
var val_pixel = (1.0-val_0_1) * (i_canvas.height-1);
|
|
ctx.lineTo(x, val_pixel);
|
|
}
|
|
|
|
ctx.stroke();
|
|
}
|
|
|
|
|
|
function ResizeCanvas(canvas_id)
|
|
{
|
|
var canvasNode = document.getElementById(canvas_id);
|
|
var canvasDiv = canvasNode.parentNode;
|
|
|
|
canvasNode.style.width = '100%';
|
|
canvasNode.style.height = '100%';
|
|
canvasNode.width = canvasDiv.clientWidth;
|
|
canvasNode.height = canvasDiv.clientHeight;
|
|
}
|