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

rework panel code to use less javascript and more css for positioning

Browse Source
This commit is contained in:
Jakob Ketterl 2019-10-26 21:32:00 +02:00
parent c7eb5c430c
commit fe08228204
3 changed files with 168 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
htdocs/css/openwebrx.css
View File

@ -146,8 +146,10 @@ input[type=range]:focus::-ms-fill-upper
#webrx-page-container
{
min-height:100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
}
#openwebrx-scale-container
@ -253,8 +255,8 @@ input[type=range]:focus::-ms-fill-upper
#webrx-canvas-container
{
flex-grow: 1;
position: relative;
height: 2000px;
overflow: hidden;
background-image: url('../gfx/openwebrx-background-cool-blue.png');
background-repeat: no-repeat;
@ -274,6 +276,7 @@ input[type=range]:focus::-ms-fill-upper
#openwebrx-mathbox-container
{
flex-grow: 1;
overflow: none;
display: none;
}
@ -288,14 +291,6 @@ input[type=range]:focus::-ms-fill-upper
.nano .nano-pane { background: #444; }
.nano .nano-slider { background: #eee !important; }
#webrx-main-container
{
position: relative;
width: 100%;
margin: 0;
padding: 0;
}
.webrx-error
{
font-weight: bold;
@ -356,18 +351,35 @@ input[type=range]:focus::-ms-fill-upper
margin-bottom: 5px;
}
#openwebrx-panels-container-left,
#openwebrx-panels-container-right {
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#openwebrx-panels-container-left {
left: 0;
align-items: flex-start;
}
#openwebrx-panels-container-right {
right: 0;
align-items: flex-end;
}
.openwebrx-panel
{
transform: perspective( 600px ) rotateX( 90deg );
visibility: hidden;
background-color: #575757;
padding: 10px;
color: white;
position: fixed;
font-size: 10pt;
border-radius: 15px;
-moz-border-radius: 15px;
margin: 5.9px;
}
.openwebrx-panel a
@ -525,7 +537,7 @@ img.openwebrx-mirror-img
#openwebrx-panel-status
{
margin: 0px;
margin: 0 0 0 5.9px;
padding: 0px;
background-color:rgba(0, 0, 0, 0);
}

166
htdocs/index.html
View File

@ -37,7 +37,6 @@
<body onload="openwebrx_init();">
<div id="webrx-page-container">
${header}
<div id="webrx-main-container">
<div id="openwebrx-frequency-container">
<div id="openwebrx-bookmarks-container"></div>
<div id="openwebrx-scale-container">
@ -49,7 +48,90 @@
<!-- add canvas here by javascript -->
</div>
<div id="openwebrx-panels-container">
<div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" data-panel-pos="right" data-panel-order="0" data-panel-size="259,115">
<div id="openwebrx-panels-container-left">
<div class="openwebrx-panel" data-panel-name="client-under-devel" style="width: 245px; background-color: Red;">
<span style="font-size: 15pt; font-weight: bold;">Under construction</span>
<br />We're working on the code right now, so the application might fail.
</div>
<div class="openwebrx-panel" id="openwebrx-panel-digimodes" style="display: none; width: 619px;" data-panel-name="digimodes">
<div id="openwebrx-digimode-canvas-container">
<div id="openwebrx-digimode-select-channel"></div>
</div>
<div id="openwebrx-digimode-content-container">
<div class="gradient"></div>
<div id="openwebrx-digimode-content">
<span id="openwebrx-cursor-blink"></span>
</div>
</div>
</div>
<table class="openwebrx-panel" id="openwebrx-panel-wsjt-message" style="display: none; width: 619px;" data-panel-name="wsjt-message">
<thead><tr>
<th>UTC</th>
<th class="decimal">dB</th>
<th class="decimal">DT</th>
<th class="decimal freq">Freq</th>
<th class="message">Message</th>
</tr></thead>
<tbody></tbody>
</table>
<table class="openwebrx-panel" id="openwebrx-panel-packet-message" style="display: none; width: 619px;" data-panel-name="aprs-message">
<thead><tr>
<th>UTC</th>
<th class="callsign">Callsign</th>
<th class="coord">Coord</th>
<th class="message">Comment</th>
</tr></thead>
<tbody></tbody>
</table>
<div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-ysf" style="display: none; width: 619px;" data-panel-name="metadata-ysf">
<div class="openwebrx-meta-frame">
<div class="openwebrx-meta-slot">
<div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
</div>
</div>
</div>
<div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-dmr" style="display: none; width: 300px;" data-panel-name="metadata-dmr">
<div class="openwebrx-meta-frame">
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 1</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 2</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
</div>
</div>
<div class="openwebrx-panel" id="openwebrx-panel-log" data-panel-name="debug" style="width: 619px;">
<div class="openwebrx-panel-inner nano" id="openwebrx-log-scroll">
<div class="nano-content">
<div id="openwebrx-client-log-title">OpenWebRX client log</strong></div>
<span id="openwebrx-client-1">Author: </span><a href="http://blog.sdr.hu/about" target="_blank">András Retzler, HA7ILM</a><br />You can support OpenWebRX development via <a href="http://blog.sdr.hu/support" target="_blank">PayPal!</a><br/>
<div id="openwebrx-debugdiv"></div>
</div>
</div>
</div>
<div class="openwebrx-panel" id="openwebrx-panel-status" data-panel-name="status" style="width: 615px;" data-panel-transparent="true">
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-buffer"> <span class="openwebrx-progressbar-text">Audio buffer [0 ms]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-output"> <span class="openwebrx-progressbar-text">Audio output [0 sps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-speed"> <span class="openwebrx-progressbar-text">Audio stream [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-network-speed"> <span class="openwebrx-progressbar-text">Network usage [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-server-cpu"> <span class="openwebrx-progressbar-text">Server CPU [0%]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-clients"> <span class="openwebrx-progressbar-text">Clients [1]</span><div class="openwebrx-progressbar-bar"></div></div>
</div>
</div>
<div id="openwebrx-panels-container-right">
<div class="openwebrx-panel" id="openwebrx-panel-receiver" data-panel-name="client-params" style="width: 259px;">
<div class="openwebrx-panel-line frequencies-container">
<div class="frequencies">
<div id="webrx-actual-freq">---.--- MHz</div>
@ -128,86 +210,6 @@
</div>
</div>
</div>
<div class="openwebrx-panel" id="openwebrx-panel-log" data-panel-name="debug" data-panel-pos="left" data-panel-order="1" data-panel-size="619,137">
<div class="openwebrx-panel-inner nano" id="openwebrx-log-scroll">
<div class="nano-content">
<div id="openwebrx-client-log-title">OpenWebRX client log</strong></div>
<span id="openwebrx-client-1">Author: </span><a href="http://blog.sdr.hu/about" target="_blank">András Retzler, HA7ILM</a><br />You can support OpenWebRX development via <a href="http://blog.sdr.hu/support" target="_blank">PayPal!</a><br/>
<div id="openwebrx-debugdiv"></div>
</div>
</div>
</div>
<div class="openwebrx-panel" id="openwebrx-panel-status" data-panel-name="status" data-panel-pos="left" data-panel-order="0" data-panel-size="615,50" data-panel-transparent="true">
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-buffer"> <span class="openwebrx-progressbar-text">Audio buffer [0 ms]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-output"> <span class="openwebrx-progressbar-text">Audio output [0 sps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-audio-speed"> <span class="openwebrx-progressbar-text">Audio stream [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-network-speed"> <span class="openwebrx-progressbar-text">Network usage [0 kbps]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-server-cpu"> <span class="openwebrx-progressbar-text">Server CPU [0%]</span><div class="openwebrx-progressbar-bar"></div></div>
<div class="openwebrx-progressbar" id="openwebrx-bar-clients"> <span class="openwebrx-progressbar-text">Clients [1]</span><div class="openwebrx-progressbar-bar"></div></div>
</div>
<div class="openwebrx-panel" data-panel-name="client-under-devel" data-panel-pos="left" data-panel-order="9" data-panel-size="245,55" style="background-color: Red;">
<span style="font-size: 15pt; font-weight: bold;">Under construction</span>
<br />We're working on the code right now, so the application might fail.
</div>
<div class="openwebrx-panel" id="openwebrx-panel-digimodes" data-panel-name="digimodes" data-panel-pos="left" data-panel-order="3" data-panel-size="619,210">
<div id="openwebrx-digimode-canvas-container">
<div id="openwebrx-digimode-select-channel"></div>
</div>
<div id="openwebrx-digimode-content-container">
<div class="gradient"></div>
<div id="openwebrx-digimode-content">
<span id="openwebrx-cursor-blink"></span>
</div>
</div>
</div>
<table class="openwebrx-panel" id="openwebrx-panel-wsjt-message" data-panel-name="wsjt-message" data-panel-pos="left" data-panel-order="2" data-panel-size="619,200">
<thead><tr>
<th>UTC</th>
<th class="decimal">dB</th>
<th class="decimal">DT</th>
<th class="decimal freq">Freq</th>
<th class="message">Message</th>
</tr></thead>
<tbody></tbody>
</table>
<table class="openwebrx-panel" id="openwebrx-panel-packet-message" data-panel-name="aprs-message" data-panel-pos="left" data-panel-order="2" data-panel-size="619,200">
<thead><tr>
<th>UTC</th>
<th class="callsign">Callsign</th>
<th class="coord">Coord</th>
<th class="message">Comment</th>
</tr></thead>
<tbody></tbody>
</table>
<div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-ysf" data-panel-name="metadata-ysf" data-panel-pos="left" data-panel-order="2" data-panel-size="145,220">
<div class="openwebrx-meta-frame">
<div class="openwebrx-meta-slot">
<div class="openwebrx-ysf-mode openwebrx-meta-autoclear"></div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-ysf-source openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-up openwebrx-meta-autoclear"></div>
<div class="openwebrx-ysf-down openwebrx-meta-autoclear"></div>
</div>
</div>
</div>
<div class="openwebrx-panel openwebrx-meta-panel" id="openwebrx-panel-metadata-dmr" data-panel-name="metadata-dmr" data-panel-pos="left" data-panel-order="2" data-panel-size="300,220">
<div class="openwebrx-meta-frame">
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 1</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
<div class="openwebrx-meta-slot openwebrx-dmr-timeslot-panel">
<div class="openwebrx-dmr-slot">Timeslot 2</div>
<div class="openwebrx-meta-user-image"></div>
<div class="openwebrx-dmr-id openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-name openwebrx-meta-autoclear"></div>
<div class="openwebrx-dmr-target openwebrx-meta-autoclear"></div>
</div>
</div>
</div>
</div>
</div>
</div>

161
htdocs/openwebrx.js
View File

@ -79,9 +79,7 @@ function toggle_rx_photo() {
function close_rx_photo() {
rx_photo_state = 0;
$('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic', step: function () {
resize_waterfall_container(true);
}});
$('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic'});
e("openwebrx-rx-details-arrow-down").style.display = "block";
e("openwebrx-rx-details-arrow-up").style.display = "none";
}
@ -90,9 +88,7 @@ function open_rx_photo() {
rx_photo_state = 1;
e("webrx-rx-photo-desc").style.opacity = 1;
e("webrx-rx-photo-title").style.opacity = 1;
$('#webrx-top-photo-clip').animate({maxHeight: rx_photo_height}, {duration: 1000, easing: 'easeOutCubic', step: function () {
resize_waterfall_container(true);
}});
$('#webrx-top-photo-clip').animate({maxHeight: rx_photo_height}, {duration: 1000, easing: 'easeOutCubic'});
e("openwebrx-rx-details-arrow-down").style.display = "none";
e("openwebrx-rx-details-arrow-up").style.display = "block";
}
@ -1001,19 +997,6 @@ function zoom_calc() {
//console.log("zoom_calc || zopx:"+zoom_offset_px.toString()+ " maxoff:"+(winsize-canvases_new_width).toString()+" relval:"+(0.5+zoom_center_rel/bandwidth).toString() );
}
function resize_waterfall_container(check_init) {
if (check_init && !waterfall_setup_done) return;
var numHeight;
mathbox_container.style.height = canvas_container.style.height = (numHeight = window.innerHeight - e("webrx-top-container").clientHeight - e("openwebrx-scale-container").clientHeight).toString() + "px";
if (mathbox) {
//mathbox.three.camera.aspect = document.body.offsetWidth / numHeight;
//mathbox.three.camera.updateProjectionMatrix();
mathbox.three.renderer.setSize(document.body.offsetWidth, numHeight);
console.log(document.body.offsetWidth, numHeight);
}
}
var debug_ws_data_received = 0;
var debug_ws_time_start;
var currentprofile;
@ -1624,8 +1607,6 @@ function resize_canvases(zoom) {
function waterfall_init() {
init_canvas_container();
resize_waterfall_container(false);
/* then */
resize_canvases();
scale_setup();
mkzoomlevels();
@ -1873,7 +1854,6 @@ function waterfall_clear() {
function openwebrx_resize() {
resize_canvases();
resize_waterfall_container(true);
resize_scale();
check_top_bar_congestion();
}
@ -1938,7 +1918,7 @@ function openwebrx_init() {
setInterval(updateNetworkStats, 1000);
secondary_demod_init();
digimodes_init();
place_panels(first_show_panel);
initPanels();
window.addEventListener("resize", openwebrx_resize);
check_top_bar_congestion();
init_header();
@ -1963,10 +1943,6 @@ function initSliders() {
}
function digimodes_init() {
$(".openwebrx-meta-panel").each(function (_, p) {
p.openwebrxHidden = true;
});
// initialze DMR timeslot muting
$('.openwebrx-dmr-timeslot-panel').click(function (e) {
$(e.currentTarget).toggleClass("muted");
@ -2002,50 +1978,32 @@ var rt = function (s, n) {
// ======================= PANELS =======================
// ========================================================
var panel_margin = 5.9;
function pop_bottommost_panel(from) {
var min_order = parseInt(from[0].dataset.panelOrder);
var min_index = 0;
for (var i = 0; i < from.length; i++) {
var actual_order = parseInt(from[i].dataset.panelOrder);
if (actual_order < min_order) {
min_index = i;
min_order = actual_order;
}
}
var to_return = from[min_index];
from.splice(min_index, 1);
return to_return;
function panel_displayed(el){
return !(el.style && el.style.display && el.style.display === 'none')
}
function toggle_panel(what, on) {
var item = e(what);
var item = $('#' + what)[0];
if (!item) return;
if (typeof on !== "undefined") {
if (item.openwebrxHidden && !on) return;
if (!item.openwebrxHidden && on) return;
var displayed = panel_displayed(item);
if (typeof on !== "undefined" && displayed === on) {
return;
}
if (item.openwebrxDisableClick) return;
item.style.transitionDuration = "599ms";
if (displayed) {
item.movement = 'collapse';
item.style.transform = "perspective(600px) rotateX(90deg)";
item.style.transitionProperty = 'transform';
} else {
item.movement = 'expand';
item.style.display = 'block';
setTimeout(function(){
item.style.transitionProperty = 'transform';
item.style.transform = 'perspective(600px) rotateX(0deg)';
}, 20);
}
item.style.transitionDuration = "600ms";
item.style.transitionDelay = "0ms";
if (!item.openwebrxHidden) {
window.setTimeout(function () {
item.openwebrxHidden = !item.openwebrxHidden;
place_panels();
item.openwebrxDisableClick = false;
}, 700);
item.style.transform = "perspective( 599px ) rotateX( 90deg )";
}
else {
item.openwebrxHidden = !item.openwebrxHidden;
place_panels();
window.setTimeout(function () {
item.openwebrxDisableClick = false;
}, 700);
item.style.transform = "perspective( 599px ) rotateX( 0deg )";
}
item.style.transitionDuration = "0";
item.openwebrxDisableClick = true;
@ -2062,67 +2020,31 @@ function first_show_panel(panel) {
roty = rottemp;
}
if (rotx !== 0 && Math.random() > 0.5) rotx = 270;
panel.style.transform = "perspective( 599px ) rotateX( %1deg ) rotateY( %2deg )"
panel.style.transform = "perspective(600px) rotateX(%1deg) rotateY(%2deg)"
.replace("%1", rotx.toString()).replace("%2", roty.toString());
window.setTimeout(function () {
panel.style.transitionDuration = "599ms";
panel.style.transitionDuration = "600ms";
panel.style.transitionDelay = (Math.floor(Math.random() * 500)).toString() + "ms";
panel.style.transform = "perspective( 599px ) rotateX( 0deg ) rotateY( 0deg )";
panel.style.transform = "perspective(600px) rotateX(0deg) rotateY(0deg)";
}, 1);
}
function place_panels(function_apply) {
if (function_apply === undefined) function_apply = function (x) {
};
var hoffset = 0; //added this because the first panel should not have such great gap below
var left_col = [];
var right_col = [];
var plist = e("openwebrx-panels-container").children;
for (var i = 0; i < plist.length; i++) {
var c = plist[i];
if (c.className.indexOf("openwebrx-panel") >= 0) {
if (c.openwebrxHidden) {
c.style.display = "none";
continue;
}
c.style.display = "block";
c.openwebrxPanelTransparent = (!!c.dataset.panelTransparent);
var newSize = c.dataset.panelSize.split(",");
if (c.dataset.panelPos === "left") {
left_col.push(c);
}
else if (c.dataset.panelPos === "right") {
right_col.push(c);
}
c.style.width = newSize[0] + "px";
//c.style.height=newSize[1]+"px";
if (!c.openwebrxPanelTransparent) c.style.margin = panel_margin.toString() + "px";
else c.style.marginLeft = panel_margin.toString() + "px";
c.openwebrxPanelWidth = parseInt(newSize[0]);
c.openwebrxPanelHeight = parseInt(newSize[1]);
}
}
var y = hoffset; //was y=0 before hoffset
var p;
while (left_col.length > 0) {
p = pop_bottommost_panel(left_col);
p.style.left = "0px";
p.style.bottom = y.toString() + "px";
p.style.visibility = "visible";
y += p.openwebrxPanelHeight + ((p.openwebrxPanelTransparent) ? 0 : 3) * panel_margin;
if (function_apply) function_apply(p);
//console.log(p.id, y, p.openwebrxPanelTransparent);
}
y = hoffset;
while (right_col.length > 0) {
p = pop_bottommost_panel(right_col);
p.style.right = (e("webrx-canvas-container").offsetWidth - e("webrx-canvas-container").clientWidth).toString() + "px"; //get scrollbar width
p.style.bottom = y.toString() + "px";
p.style.visibility = "visible";
y += p.openwebrxPanelHeight + ((p.openwebrxPanelTransparent) ? 0 : 3) * panel_margin;
if (function_apply) function_apply(p);
function initPanels() {
$('#openwebrx-panels-container').find('.openwebrx-panel').each(function(){
var el = this;
el.openwebrxPanelTransparent = (!!el.dataset.panelTransparent);
el.addEventListener('transitionend', function(ev){
if (ev.target !== el) return;
el.openwebrxDisableClick = false;
el.style.transitionDuration = null;
el.style.transitionDelay = null;
el.style.transitionProperty = null;
if (el.movement && el.movement == 'collapse') {
el.style.display = 'none';
}
});
if (panel_displayed(el)) first_show_panel(el);
});
}
function demodulator_buttons_update() {
@ -2261,9 +2183,6 @@ function secondary_demod_swap_canvases() {
}
function secondary_demod_init() {
$("#openwebrx-panel-digimodes")[0].openwebrxHidden = true;
$("#openwebrx-panel-wsjt-message")[0].openwebrxHidden = true;
$("#openwebrx-panel-packet-message")[0].openwebrxHidden = true;
secondary_demod_canvas_container = $("#openwebrx-digimode-canvas-container")[0];
$(secondary_demod_canvas_container)
.mousemove(secondary_demod_canvas_container_mousemove)