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

fix scrolling for canvas background and bookmarks. i hope that's all

Browse Source 
now.
This commit is contained in:
Jakob Ketterl 2019-11-01 19:48:08 +01:00
parent 9f6a4891ed
commit 5fdffb5e0c
3 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
htdocs/css/openwebrx.css
View File

@ -258,16 +258,20 @@ input[type=range]:focus::-ms-fill-upper
border-top-color: #0F0; border-top-color: #0F0;
} }
#webrx-canvas-container #webrx-canvas-background {
{
flex-grow: 1; flex-grow: 1;
position: relative;
overflow: hidden;
background-image: url('../gfx/openwebrx-background-cool-blue.png'); background-image: url('../gfx/openwebrx-background-cool-blue.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #1e5f7f; background-color: #1e5f7f;
background-size: cover; background-size: cover;
}
#webrx-canvas-container
{
position: relative;
overflow: hidden;
cursor: crosshair; cursor: crosshair;
height: 100%;
} }
#webrx-canvas-container canvas #webrx-canvas-container canvas
@ -276,7 +280,8 @@ input[type=range]:focus::-ms-fill-upper
border-style: none; border-style: none;
image-rendering: crisp-edges; image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
/*transition: left 200ms, width 200ms;*/ width: 100%;
height: 200px;
} }
#openwebrx-mathbox-container #openwebrx-mathbox-container

6
htdocs/index.html
View File

@ -45,8 +45,10 @@
</div> </div>
</div> </div>
<div id="openwebrx-mathbox-container"> </div> <div id="openwebrx-mathbox-container"> </div>
<div id="webrx-canvas-container"> <div id="webrx-canvas-background">
<!-- add canvas here by javascript --> <div id="webrx-canvas-container">
<!-- add canvas here by javascript -->
</div>
</div> </div>
<div id="openwebrx-panels-container"> <div id="openwebrx-panels-container">
<div id="openwebrx-panels-container-left"> <div id="openwebrx-panels-container-left">

48
htdocs/openwebrx.js
View File

@ -563,6 +563,10 @@ function demodulator_set_offset_frequency(which, to_what) {
$("#webrx-actual-freq").html(format_frequency("{x} MHz", center_freq + to_what, 1e6, 4)); $("#webrx-actual-freq").html(format_frequency("{x} MHz", center_freq + to_what, 1e6, 4));
} }
function waterfallWidth() {
return $('body').width();
}
// ======================================================== // ========================================================
// =================== SCALE ROUTINES =================== // =================== SCALE ROUTINES ===================
@ -602,7 +606,7 @@ function scale_canvas_mousedown(evt) {
function scale_offset_freq_from_px(x, visible_range) { function scale_offset_freq_from_px(x, visible_range) {
if (typeof visible_range === "undefined") visible_range = get_visible_freq_range(); if (typeof visible_range === "undefined") visible_range = get_visible_freq_range();
return (visible_range.start + visible_range.bw * (x / canvas_container.clientWidth)) - center_freq; return (visible_range.start + visible_range.bw * (x / waterfallWidth())) - center_freq;
} }
function scale_canvas_mousemove(evt) { function scale_canvas_mousemove(evt) {
@ -643,20 +647,20 @@ function scale_canvas_mouseup(evt) {
} }
function scale_px_from_freq(f, range) { function scale_px_from_freq(f, range) {
return Math.round(((f - range.start) / range.bw) * canvas_container.clientWidth); return Math.round(((f - range.start) / range.bw) * waterfallWidth());
} }
function get_visible_freq_range() { function get_visible_freq_range() {
var out = {}; var out = {};
var fcalc = function (x) { var fcalc = function (x) {
var canvasWidth = canvas_container.clientWidth * zoom_levels[zoom_level]; var canvasWidth = waterfallWidth() * zoom_levels[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);
}; };
out.start = fcalc(0); out.start = fcalc(0);
out.center = fcalc(canvas_container.clientWidth / 2); out.center = fcalc(waterfallWidth() / 2);
out.end = fcalc(canvas_container.clientWidth); out.end = fcalc(waterfallWidth());
out.bw = out.end - out.start; out.bw = out.end - out.start;
out.hps = out.bw / canvas_container.clientWidth; out.hps = out.bw / waterfallWidth();
return out; return out;
} }
@ -732,7 +736,7 @@ function get_scale_mark_spacing(range) {
var out = {}; var out = {};
var fcalc = function (freq) { var fcalc = function (freq) {
out.numlarge = (range.bw / freq); out.numlarge = (range.bw / freq);
out.large = canvas_container.clientWidth / out.numlarge; //distance between large markers (these have text) out.large = waterfallWidth() / out.numlarge; //distance between large markers (these have text)
out.ratio = 5; //(ratio-1) small markers exist per large marker out.ratio = 5; //(ratio-1) small markers exist per large marker
out.small = out.large / out.ratio; //distance between small markers out.small = out.large / out.ratio; //distance between small markers
if (out.small < scale_min_space_bw_small_markers) return false; if (out.small < scale_min_space_bw_small_markers) return false;
@ -891,8 +895,8 @@ function canvas_mousemove(evt) {
var deltaX = canvas_drag_last_x - evt.pageX; var deltaX = canvas_drag_last_x - evt.pageX;
var dpx = range.hps * deltaX; var dpx = range.hps * deltaX;
if ( if (
!(zoom_center_rel + dpx > (bandwidth / 2 - canvas_container.clientWidth * (1 - zoom_center_where) * range.hps)) && !(zoom_center_rel + dpx > (bandwidth / 2 - waterfallWidth() * (1 - zoom_center_where) * range.hps)) &&
!(zoom_center_rel + dpx < -bandwidth / 2 + canvas_container.clientWidth * zoom_center_where * range.hps) !(zoom_center_rel + dpx < -bandwidth / 2 + waterfallWidth() * zoom_center_where * range.hps)
) { ) {
zoom_center_rel += dpx; zoom_center_rel += dpx;
} }
@ -929,14 +933,18 @@ function canvas_end_drag() {
} }
function zoom_center_where_calc(screenposX) { function zoom_center_where_calc(screenposX) {
//return (screenposX-(window.innerWidth-canvas_container.clientWidth))/canvas_container.clientWidth; return screenposX / waterfallWidth();
return screenposX / canvas_container.clientWidth;
} }
function get_relative_x(evt) { function get_relative_x(evt) {
var relativeX = (evt.offsetX) ? evt.offsetX : evt.layerX; var relativeX = evt.offsetX || evt.layerX;
if ($(evt.target).closest(canvas_container).length) return relativeX; if ($(evt.target).closest(canvas_container).length) return relativeX;
// compensate for the frequency scale, since that is not resized by the browser. // compensate for the frequency scale, since that is not resized by the browser.
var relatives = $(evt.target).closest('#openwebrx-frequency-container').map(function(){
return evt.pageX - this.offsetLeft;
});
if (relatives.length) relativeX = relatives[0];
return relativeX - zoom_offset_px; return relativeX - zoom_offset_px;
} }
@ -993,7 +1001,7 @@ function zoom_set(level) {
if (!(level >= 0 && level <= zoom_levels.length - 1)) return; if (!(level >= 0 && level <= zoom_levels.length - 1)) return;
level = parseInt(level); level = parseInt(level);
zoom_level = level; zoom_level = level;
//zoom_center_rel=canvas_get_freq_offset(-canvases[0].offsetLeft+canvas_container.clientWidth/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 = demodulators[0].offset_frequency; zoom_center_rel = demodulators[0].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(true);
@ -1002,13 +1010,12 @@ function zoom_set(level) {
} }
function zoom_calc() { function zoom_calc() {
var winsize = canvas_container.clientWidth; var winsize = waterfallWidth();
var canvases_new_width = winsize * zoom_levels[zoom_level]; var canvases_new_width = winsize * zoom_levels[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)
zoom_offset_px = winsize - canvases_new_width; zoom_offset_px = winsize - canvases_new_width;
//console.log("zoom_calc || zopx:"+zoom_offset_px.toString()+ " maxoff:"+(winsize-canvases_new_width).toString()+" relval:"+(0.5+zoom_center_rel/bandwidth).toString() );
} }
var networkSpeedMeasurement; var networkSpeedMeasurement;
@ -1572,9 +1579,6 @@ function add_canvas() {
new_canvas.width = fft_size; new_canvas.width = fft_size;
new_canvas.height = canvas_default_height; new_canvas.height = canvas_default_height;
canvas_actual_line = canvas_default_height - 1; canvas_actual_line = canvas_default_height - 1;
new_canvas.style.width = (canvas_container.clientWidth * zoom_levels[zoom_level]).toString() + "px";
new_canvas.style.left = zoom_offset_px.toString() + "px";
new_canvas.style.height = canvas_default_height.toString() + "px";
new_canvas.openwebrx_top = (-canvas_default_height + 1); new_canvas.openwebrx_top = (-canvas_default_height + 1);
new_canvas.style.top = new_canvas.openwebrx_top.toString() + "px"; new_canvas.style.top = new_canvas.openwebrx_top.toString() + "px";
canvas_context = new_canvas.getContext("2d"); canvas_context = new_canvas.getContext("2d");
@ -1614,11 +1618,9 @@ function resize_canvases(zoom) {
if (typeof zoom === "undefined") zoom = false; if (typeof zoom === "undefined") zoom = false;
if (!zoom) mkzoomlevels(); if (!zoom) mkzoomlevels();
zoom_calc(); zoom_calc();
var new_width = (canvas_container.clientWidth * zoom_levels[zoom_level]).toString() + "px"; $('#webrx-canvas-container').css({
var zoom_value = zoom_offset_px.toString() + "px"; width: waterfallWidth() * zoom_levels[zoom_level] + 'px',
canvases.forEach(function (p) { left: zoom_offset_px + "px"
p.style.width = new_width;
p.style.left = zoom_value;
}); });
} }