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

fix many, many problems with the frontend frequency displays, scroll and

Browse Source 
drag handling, closes #13
This commit is contained in:
Jakob Ketterl 2019-10-03 17:24:28 +02:00
parent 2025ccb366
commit 3e8e2182a8
3 changed files with 32 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
htdocs/css/openwebrx.css
View File

@ -245,13 +245,9 @@ input[type=range]:focus::-ms-fill-upper
#webrx-canvas-container #webrx-canvas-container
{ {
/*background-image:url('../gfx/openwebrx-blank-background-1.jpg');*/
position: relative; position: relative;
height: 2000px; height: 2000px;
overflow-y: scroll; overflow: hidden;
overflow-x: hidden;
/*background-color: #646464;*/
/*background-image: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(0,0,0,1) 100%);*/
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;
@ -273,20 +269,6 @@ input[type=range]:focus::-ms-fill-upper
display: none; display: none;
} }
#openwebrx-phantom-canvas
{
position: absolute;
width: 0px;
height: 0px;
}
/*#openwebrx-canvas-gradient-background
{
overflow: hidden;
width: 100%;
height: 396px;
}*/
#openwebrx-log-scroll #openwebrx-log-scroll
{ {
/*overflow-y:auto;*/ /*overflow-y:auto;*/

1
htdocs/index.html
View File

@ -43,7 +43,6 @@
</div> </div>
<div id="openwebrx-mathbox-container"> </div> <div id="openwebrx-mathbox-container"> </div>
<div id="webrx-canvas-container"> <div id="webrx-canvas-container">
<div id="openwebrx-phantom-canvas"></div>
<!-- add canvas here by javascript --> <!-- add canvas here by javascript -->
</div> </div>
<div id="openwebrx-panels-container"> <div id="openwebrx-panels-container">

101
htdocs/openwebrx.js
View File

@ -497,6 +497,8 @@ function demodulator_default_analog(offset_frequency,subtype)
this.color,center_freq+this.parent.offset_frequency); this.color,center_freq+this.parent.offset_frequency);
}; };
this.envelope.dragged_range = demodulator.draggable_ranges.none;
// event handlers // event handlers
this.envelope.drag_start=function(x, key_modifiers) this.envelope.drag_start=function(x, key_modifiers)
{ {
@ -649,6 +651,8 @@ function scale_setup()
scale_canvas.addEventListener("mousemove", scale_canvas_mousemove, false); scale_canvas.addEventListener("mousemove", scale_canvas_mousemove, false);
scale_canvas.addEventListener("mouseup", scale_canvas_mouseup, false); scale_canvas.addEventListener("mouseup", scale_canvas_mouseup, false);
resize_scale(); resize_scale();
var frequency_container = e("openwebrx-frequency-container");
frequency_container.addEventListener("mousemove", frequency_container_mousemove, false);
} }
var scale_canvas_drag_params={ var scale_canvas_drag_params={
@ -698,14 +702,18 @@ function scale_canvas_mousemove(evt)
} }
function frequency_container_mousemove(evt) {
var frequency = center_freq + scale_offset_freq_from_px(evt.pageX);
e("webrx-mouse-freq").innerHTML = format_frequency("{x} MHz", frequency, 1e6, 4);
}
function scale_canvas_end_drag(x) function scale_canvas_end_drag(x)
{ {
canvas_container.style.cursor="default"; scale_canvas.style.cursor="default";
scale_canvas_drag_params.drag=false; scale_canvas_drag_params.drag=false;
scale_canvas_drag_params.mouse_down=false; scale_canvas_drag_params.mouse_down=false;
var event_handled=false; var event_handled=false;
for (var i=0;i<demodulators.length;i++) event_handled|=demodulators[i].envelope.drag_end(x); for (var i=0;i<demodulators.length;i++) event_handled|=demodulators[i].envelope.drag_end(x);
//console.log(event_handled);
if (!event_handled) demodulator_set_offset_frequency(0,scale_offset_freq_from_px(x)); if (!event_handled) demodulator_set_offset_frequency(0,scale_offset_freq_from_px(x));
} }
@ -915,18 +923,6 @@ function resize_scale()
position_bookmarks(); position_bookmarks();
} }
function canvas_mouseover(evt)
{
if(!waterfall_setup_done) return;
//e("webrx-freq-show").style.visibility="visible";
}
function canvas_mouseout(evt)
{
if(!waterfall_setup_done) return;
//e("webrx-freq-show").style.visibility="hidden";
}
function canvas_get_freq_offset(relativeX) function canvas_get_freq_offset(relativeX)
{ {
rel=(relativeX/canvases[0].clientWidth); rel=(relativeX/canvases[0].clientWidth);
@ -972,13 +968,7 @@ function canvas_mousedown(evt)
function canvas_mousemove(evt) function canvas_mousemove(evt)
{ {
if(!waterfall_setup_done) return; if(!waterfall_setup_done) return;
//element=e("webrx-freq-show"); relativeX = get_relative_x(evt);
relativeX=(evt.offsetX)?evt.offsetX:evt.layerX;
/*realX=(relativeX-element.clientWidth/2);
maxX=(canvases[0].clientWidth-element.clientWidth);
if(realX>maxX) realX=maxX;
if(realX<0) realX=0;
element.style.left=realX.toString()+"px";*/
if(canvas_mouse_down) if(canvas_mouse_down)
{ {
if(!canvas_drag&&Math.abs(evt.pageX-canvas_drag_start_x)>canvas_drag_min_delta) if(!canvas_drag&&Math.abs(evt.pageX-canvas_drag_start_x)>canvas_drag_min_delta)
@ -990,13 +980,11 @@ function canvas_mousemove(evt)
{ {
var deltaX=canvas_drag_last_x-evt.pageX; var deltaX=canvas_drag_last_x-evt.pageX;
var deltaY=canvas_drag_last_y-evt.pageY; var deltaY=canvas_drag_last_y-evt.pageY;
//zoom_center_where=zoom_center_where_calc(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-canvas_container.clientWidth*(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+canvas_container.clientWidth*zoom_center_where*range.hps)
) { zoom_center_rel+=dpx; } ) { zoom_center_rel+=dpx; }
// -((canvases_new_width*(0.5+zoom_center_rel/bandwidth))-(winsize*zoom_center_where));
resize_canvases(false); resize_canvases(false);
canvas_drag_last_x=evt.pageX; canvas_drag_last_x=evt.pageX;
canvas_drag_last_y=evt.pageY; canvas_drag_last_y=evt.pageY;
@ -1007,22 +995,18 @@ function canvas_mousemove(evt)
else e("webrx-mouse-freq").innerHTML=format_frequency("{x} MHz",canvas_get_frequency(relativeX),1e6,4); else e("webrx-mouse-freq").innerHTML=format_frequency("{x} MHz",canvas_get_frequency(relativeX),1e6,4);
} }
function canvas_container_mouseout(evt) function canvas_container_mouseleave(evt)
{ {
canvas_end_drag(); canvas_end_drag();
} }
//function body_mouseup() { canvas_end_drag(); console.log("body_mouseup"); }
//function window_mouseout() { canvas_end_drag(); console.log("document_mouseout"); }
function canvas_mouseup(evt) function canvas_mouseup(evt)
{ {
if(!waterfall_setup_done) return; if(!waterfall_setup_done) return;
relativeX=(evt.offsetX)?evt.offsetX:evt.layerX; relativeX = get_relative_x(evt);
if(!canvas_drag) if(!canvas_drag)
{ {
//ws.send("SET offset_freq="+canvas_get_freq_offset(relativeX).toString());
demodulator_set_offset_frequency(0, canvas_get_freq_offset(relativeX)); demodulator_set_offset_frequency(0, canvas_get_freq_offset(relativeX));
} }
else else
@ -1044,19 +1028,20 @@ function zoom_center_where_calc(screenposX)
return screenposX/canvas_container.clientWidth; return screenposX/canvas_container.clientWidth;
} }
function get_relative_x(evt) {
var relativeX = (evt.offsetX)?evt.offsetX:evt.layerX;
if ($(evt.target).closest(canvas_container).length) return relativeX;
// compensate for the frequency scale, since that is not resized by the browser.
return relativeX - zoom_offset_px;
}
function canvas_mousewheel(evt) function canvas_mousewheel(evt)
{ {
if(!waterfall_setup_done) return; if(!waterfall_setup_done) return;
//var i=Math.abs(evt.wheelDelta); var relativeX = get_relative_x(evt);
//var dir=(i/evt.wheelDelta)<0;
//console.log(evt);
var relativeX=(evt.offsetX)?evt.offsetX:evt.layerX;
var dir=(evt.deltaY/Math.abs(evt.deltaY))>0; var dir=(evt.deltaY/Math.abs(evt.deltaY))>0;
//console.log(dir); zoom_step(dir, relativeX, zoom_center_where_calc(evt.pageX));
//i/=120;
/*while (i--)*/ zoom_step(dir, relativeX, zoom_center_where_calc(evt.pageX));
evt.preventDefault(); evt.preventDefault();
//evt.returnValue = false; //disable scrollbar move
} }
@ -2235,12 +2220,6 @@ function add_canvas()
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");
canvas_container.appendChild(new_canvas); canvas_container.appendChild(new_canvas);
new_canvas.addEventListener("mouseover", canvas_mouseover, false);
new_canvas.addEventListener("mouseout", canvas_mouseout, false);
new_canvas.addEventListener("mousemove", canvas_mousemove, false);
new_canvas.addEventListener("mouseup", canvas_mouseup, false);
new_canvas.addEventListener("mousedown", canvas_mousedown, false);
new_canvas.addEventListener("wheel",canvas_mousewheel, false);
canvases.push(new_canvas); canvases.push(new_canvas);
while (canvas_container && canvas_container.clientHeight + canvas_default_height * 2 < canvases.length * canvas_default_height) { while (canvas_container && canvas_container.clientHeight + canvas_default_height * 2 < canvases.length * canvas_default_height) {
var c = canvases.shift(); var c = canvases.shift();
@ -2254,17 +2233,13 @@ function init_canvas_container()
{ {
canvas_container=e("webrx-canvas-container"); canvas_container=e("webrx-canvas-container");
mathbox_container=e("openwebrx-mathbox-container"); mathbox_container=e("openwebrx-mathbox-container");
canvas_container.addEventListener("mouseout",canvas_container_mouseout, false); canvas_container.addEventListener("mouseleave",canvas_container_mouseleave, false);
//window.addEventListener("mouseout",window_mouseout,false); canvas_container.addEventListener("mousemove", canvas_mousemove, false);
//document.body.addEventListener("mouseup",body_mouseup,false); canvas_container.addEventListener("mouseup", canvas_mouseup, false);
canvas_phantom=e("openwebrx-phantom-canvas"); canvas_container.addEventListener("mousedown", canvas_mousedown, false);
canvas_phantom.addEventListener("mouseover", canvas_mouseover, false); canvas_container.addEventListener("wheel",canvas_mousewheel, false);
canvas_phantom.addEventListener("mouseout", canvas_mouseout, false); var frequency_container = e("openwebrx-frequency-container");
canvas_phantom.addEventListener("mousemove", canvas_mousemove, false); frequency_container.addEventListener("wheel",canvas_mousewheel, false);
canvas_phantom.addEventListener("mouseup", canvas_mouseup, false);
canvas_phantom.addEventListener("mousedown", canvas_mousedown, false);
canvas_phantom.addEventListener("wheel",canvas_mousewheel, false);
canvas_phantom.style.width=canvas_container.clientWidth+"px";
add_canvas(); add_canvas();
} }
@ -2277,18 +2252,6 @@ function shift_canvases()
p.style.top=(p.openwebrx_top++).toString()+"px"; p.style.top=(p.openwebrx_top++).toString()+"px";
}); });
canvas_maxshift++; canvas_maxshift++;
if(canvas_container.clientHeight>canvas_maxshift)
{
canvas_phantom.style.top=canvas_maxshift.toString()+"px";
canvas_phantom.style.height=(canvas_container.clientHeight-canvas_maxshift).toString()+"px";
canvas_phantom.style.display="block";
}
else
canvas_phantom.style.display="none";
//canvas_container.style.height=(((canvases.length-1)*canvas_default_height)+(canvas_default_height-canvas_actual_line)).toString()+"px";
//canvas_container.style.height="100%";
} }
function resize_canvases(zoom) function resize_canvases(zoom)
@ -2303,8 +2266,6 @@ function resize_canvases(zoom)
p.style.width=new_width; p.style.width=new_width;
p.style.left=zoom_value; p.style.left=zoom_value;
}); });
canvas_phantom.style.width=new_width;
canvas_phantom.style.left=zoom_value;
} }
function waterfall_init() function waterfall_init()
@ -3069,7 +3030,7 @@ function secondary_demod_init()
.mouseup(secondary_demod_canvas_container_mouseup) .mouseup(secondary_demod_canvas_container_mouseup)
.mousedown(secondary_demod_canvas_container_mousedown) .mousedown(secondary_demod_canvas_container_mousedown)
.mouseenter(secondary_demod_canvas_container_mousein) .mouseenter(secondary_demod_canvas_container_mousein)
.mouseleave(secondary_demod_canvas_container_mouseout); .mouseleave(secondary_demod_canvas_container_mouseleave);
init_digital_removal_timer(); init_digital_removal_timer();
} }
@ -3227,7 +3188,7 @@ function secondary_demod_canvas_container_mousein()
$("#openwebrx-digimode-select-channel").css("opacity","0.7"); //.css("border-width", "1px"); $("#openwebrx-digimode-select-channel").css("opacity","0.7"); //.css("border-width", "1px");
} }
function secondary_demod_canvas_container_mouseout() function secondary_demod_canvas_container_mouseleave()
{ {
$("#openwebrx-digimode-select-channel").css("opacity","0"); $("#openwebrx-digimode-select-channel").css("opacity","0");
} }