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

use transform / will-change properties for waterfall

Browse Source 
* prevents expensive layout events in the browser
* allows the browser to optimize rendering
This commit is contained in:
Jakob Ketterl 2021-02-27 17:06:53 +01:00
parent 54142f4f15
commit beb3d696c9
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
htdocs/css/openwebrx.css
View File

@ -302,6 +302,7 @@ input[type=range]:disabled {
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
width: 100%; width: 100%;
height: 200px; height: 200px;
will-change: transform;
} }
#openwebrx-log-scroll #openwebrx-log-scroll
@ -772,6 +773,7 @@ img.openwebrx-mirror-img
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
transition: width 500ms, left 500ms; transition: width 500ms, left 500ms;
will-change: transform;
} }
.openwebrx-panel select, .openwebrx-panel select,

8
htdocs/openwebrx.js
View File

@ -1074,7 +1074,7 @@ function add_canvas() {
new_canvas.height = canvas_default_height; new_canvas.height = canvas_default_height;
canvas_actual_line = canvas_default_height; canvas_actual_line = canvas_default_height;
new_canvas.openwebrx_top = -canvas_default_height; new_canvas.openwebrx_top = -canvas_default_height;
new_canvas.style.top = new_canvas.openwebrx_top.toString() + "px"; new_canvas.style.transform = 'translate(0, ' + 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);
canvases.push(new_canvas); canvases.push(new_canvas);
@ -1101,7 +1101,7 @@ canvas_maxshift = 0;
function shift_canvases() { function shift_canvases() {
canvases.forEach(function (p) { canvases.forEach(function (p) {
p.style.top = (p.openwebrx_top++).toString() + "px"; p.style.transform = 'translate(0, ' + (p.openwebrx_top++).toString() + 'px)';
}); });
canvas_maxshift++; canvas_maxshift++;
} }
@ -1407,7 +1407,9 @@ function secondary_demod_init_canvases() {
} }
function secondary_demod_canvases_update_top() { function secondary_demod_canvases_update_top() {
for (var i = 0; i < 2; i++) secondary_demod_canvases[i].style.top = secondary_demod_canvases[i].openwebrx_top + "px"; for (var i = 0; i < 2; i++) {
secondary_demod_canvases[i].style.transform = 'translate(0, ' + secondary_demod_canvases[i].openwebrx_top + 'px)';
}
} }
function secondary_demod_swap_canvases() { function secondary_demod_swap_canvases() {