joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make waterfall zoom continuous

Browse Source
This commit is contained in:
Jakob Ketterl 2022-06-18 15:57:06 +02:00
parent 08188527ce
commit 26440d4e24
1 changed files with 29 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
htdocs/openwebrx.js
View File

@ -60,7 +60,7 @@ function zoomOutOneStep() {
} }
function zoomInTotal() { function zoomInTotal() {
zoom_set(zoom_levels.length - 1); zoom_set(zoom_levels_count);
} }
function zoomOutTotal() { function zoomOutTotal() {
@ -317,7 +317,7 @@ function scale_px_from_freq(f, range) {
function get_visible_freq_range() { function get_visible_freq_range() {
if (!bandwidth) return false; if (!bandwidth) return false;
var fcalc = function (x) { var fcalc = function (x) {
var canvasWidth = waterfallWidth() * zoom_levels[zoom_level]; var canvasWidth = waterfallWidth() * get_zoom(zoom_level);
return Math.round(((-zoom_offset_px + x) / canvasWidth) * bandwidth) + (center_freq - bandwidth / 2); return Math.round(((-zoom_offset_px + x) / canvasWidth) * bandwidth) + (center_freq - bandwidth / 2);
}; };
var out = { var out = {
@ -565,7 +565,7 @@ function canvas_mousemove(evt) {
) { ) {
zoom_center_rel += dpx; zoom_center_rel += dpx;
} }
resize_canvases(false); resize_canvases();
canvas_drag_last_x = evt.pageX; canvas_drag_last_x = evt.pageX;
canvas_drag_last_y = evt.pageY; canvas_drag_last_y = evt.pageY;
mkscale(); mkscale();
@ -614,26 +614,16 @@ function get_relative_x(evt) {
return relativeX - zoom_offset_px; return relativeX - zoom_offset_px;
} }
var wheel_delta_remainder = 0;
function canvas_mousewheel(evt) { function canvas_mousewheel(evt) {
var dir = (evt.deltaY / Math.abs(evt.deltaY)) > 0; if (!waterfall_setup_done) return;
var delta = -evt.deltaY;
// deltaMode 0 means pixels instead of lines // deltaMode 0 means pixels instead of lines
if ('deltaMode' in evt && evt.deltaMode === 0) { if ('deltaMode' in evt && evt.deltaMode === 0) {
wheel_delta_remainder += evt.deltaY / 50; delta /= 50;
console.info(wheel_delta_remainder);
if (wheel_delta_remainder >= 1) {
dir = true;
wheel_delta_remainder -= 1;
} else if (wheel_delta_remainder < 0) {
dir = false;
wheel_delta_remainder += 1;
} else return;
wheel_delta_remainder %= 1;
} }
if (!waterfall_setup_done) return;
var relativeX = get_relative_x(evt); var relativeX = get_relative_x(evt);
zoom_step(dir, relativeX, zoom_center_where_calc(evt.pageX)); zoom_step(delta, relativeX, zoom_center_where_calc(evt.pageX));
evt.preventDefault(); evt.preventDefault();
} }
@ -646,7 +636,6 @@ function get_zoom_coeff_from_hps(hps) {
return bandwidth / shown_bw; return bandwidth / shown_bw;
} }
var zoom_levels = [1];
var zoom_level = 0; var zoom_level = 0;
var zoom_offset_px = 0; var zoom_offset_px = 0;
var zoom_center_rel = 0; var zoom_center_rel = 0;
@ -654,45 +643,48 @@ var zoom_center_where = 0;
var smeter_level = 0; var smeter_level = 0;
function mkzoomlevels() { function get_zoom(level) {
zoom_levels = [1];
var maxc = get_zoom_coeff_from_hps(zoom_max_level_hps); var maxc = get_zoom_coeff_from_hps(zoom_max_level_hps);
if (maxc < 1) return; if (maxc < 1) return;
// logarithmic interpolation // logarithmic interpolation
var zoom_ratio = Math.pow(maxc, 1 / zoom_levels_count); var zoom_ratio = Math.pow(maxc, 1 / zoom_levels_count);
for (var i = 1; i < zoom_levels_count; i++) return Math.pow(zoom_ratio, level);
zoom_levels.push(Math.pow(zoom_ratio, i));
} }
function zoom_step(out, where, onscreen) { function zoom_step(delta, where, onscreen) {
if ((out && zoom_level === 0) || (!out && zoom_level >= zoom_levels_count - 1)) return; zoom_level += delta;
if (out) --zoom_level; if (zoom_level < 0) {
else ++zoom_level; zoom_level = 0;
} else if (zoom_level > zoom_levels_count) {
zoom_level = zoom_levels_count;
}
zoom_center_rel = canvas_get_freq_offset(where); zoom_center_rel = canvas_get_freq_offset(where);
//console.log("zoom_step || zlevel: "+zoom_level.toString()+" zlevel_val: "+zoom_levels[zoom_level].toString()+" zoom_center_rel: "+zoom_center_rel.toString());
zoom_center_where = onscreen; zoom_center_where = onscreen;
//console.log(zoom_center_where, zoom_center_rel, where); resize_canvases();
resize_canvases(true);
mkscale(); mkscale();
bookmarks.position(); bookmarks.position();
} }
function zoom_set(level) { function zoom_set(level) {
if (!(level >= 0 && level <= zoom_levels.length - 1)) return; if (level < 0) {
level = parseInt(level); zoom_level = 0;
zoom_level = level; } else if (level > zoom_levels_count) {
zoom_level = zoom_levels_count;
} else {
zoom_level = parseFloat(level);
}
//zoom_center_rel=canvas_get_freq_offset(-canvases[0].offsetLeft+waterfallWidth()/2); //zoom to screen center instead of demod envelope //zoom_center_rel=canvas_get_freq_offset(-canvases[0].offsetLeft+waterfallWidth()/2); //zoom to screen center instead of demod envelope
zoom_center_rel = $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().get_offset_frequency(); zoom_center_rel = $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().get_offset_frequency();
zoom_center_where = 0.5 + (zoom_center_rel / bandwidth); //this is a kind of hack zoom_center_where = 0.5 + (zoom_center_rel / bandwidth); //this is a kind of hack
resize_canvases(true); resize_canvases();
mkscale(); mkscale();
bookmarks.position(); bookmarks.position();
} }
function zoom_calc() { function zoom_calc() {
var winsize = waterfallWidth(); var winsize = waterfallWidth();
var canvases_new_width = winsize * zoom_levels[zoom_level]; var canvases_new_width = winsize * get_zoom(zoom_level);
zoom_offset_px = -((canvases_new_width * (0.5 + zoom_center_rel / bandwidth)) - (winsize * zoom_center_where)); zoom_offset_px = -((canvases_new_width * (0.5 + zoom_center_rel / bandwidth)) - (winsize * zoom_center_where));
if (zoom_offset_px > 0) zoom_offset_px = 0; if (zoom_offset_px > 0) zoom_offset_px = 0;
if (zoom_offset_px < winsize - canvases_new_width) if (zoom_offset_px < winsize - canvases_new_width)
@ -1137,12 +1129,10 @@ function shift_canvases() {
canvas_maxshift++; canvas_maxshift++;
} }
function resize_canvases(zoom) { function resize_canvases() {
if (typeof zoom === "undefined") zoom = false;
if (!zoom) mkzoomlevels();
zoom_calc(); zoom_calc();
$('#webrx-canvas-container').css({ $('#webrx-canvas-container').css({
width: waterfallWidth() * zoom_levels[zoom_level] + 'px', width: waterfallWidth() * get_zoom(zoom_level) + 'px',
left: zoom_offset_px + "px" left: zoom_offset_px + "px"
}); });
} }
@ -1151,7 +1141,6 @@ function waterfall_init() {
init_canvas_container(); init_canvas_container();
resize_canvases(); resize_canvases();
scale_setup(); scale_setup();
mkzoomlevels();
waterfall_setup_done = 1; waterfall_setup_done = 1;
} }