rework panel code to use less javascript and more css for positioning
This commit is contained in:
Jakob Ketterl
parent
c7eb5c430c
commit
fe08228204
@ -146,8 +146,10 @@ input[type=range]:focus::-ms-fill-upper
|
|||||||
|
|
||||||
#webrx-page-container
|
#webrx-page-container
|
||||||
{
|
{
|
||||||
min-height:100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
#openwebrx-scale-container
|
#openwebrx-scale-container
|
||||||
@ -253,8 +255,8 @@ input[type=range]:focus::-ms-fill-upper
|
|||||||
|
|
||||||
#webrx-canvas-container
|
#webrx-canvas-container
|
||||||
{
|
{
|
||||||
|
flex-grow: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 2000px;
|
|
||||||
overflow: hidden;
|
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;
|
||||||
@ -274,6 +276,7 @@ input[type=range]:focus::-ms-fill-upper
|
|||||||
|
|
||||||
#openwebrx-mathbox-container
|
#openwebrx-mathbox-container
|
||||||
{
|
{
|
||||||
|
flex-grow: 1;
|
||||||
overflow: none;
|
overflow: none;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -288,14 +291,6 @@ input[type=range]:focus::-ms-fill-upper
|
|||||||
.nano .nano-pane { background: #444; }
|
.nano .nano-pane { background: #444; }
|
||||||
.nano .nano-slider { background: #eee !important; }
|
.nano .nano-slider { background: #eee !important; }
|
||||||
|
|
||||||
#webrx-main-container
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.webrx-error
|
.webrx-error
|
||||||
{
|
{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -356,18 +351,35 @@ input[type=range]:focus::-ms-fill-upper
|
|||||||
margin-bottom: 5px;
|
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
|
.openwebrx-panel
|
||||||
{
|
{
|
||||||
transform: perspective( 600px ) rotateX( 90deg );
|
transform: perspective( 600px ) rotateX( 90deg );
|
||||||
visibility: hidden;
|
|
||||||
background-color: #575757;
|
background-color: #575757;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
color: white;
|
color: white;
|
||||||
position: fixed;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
-moz-border-radius: 15px;
|
-moz-border-radius: 15px;
|
||||||
|
margin: 5.9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.openwebrx-panel a
|
.openwebrx-panel a
|
||||||
@ -525,7 +537,7 @@ img.openwebrx-mirror-img
|
|||||||
|
|
||||||
#openwebrx-panel-status
|
#openwebrx-panel-status
|
||||||
{
|
{
|
||||||
margin: 0px;
|
margin: 0 0 0 5.9px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
background-color:rgba(0, 0, 0, 0);
|
background-color:rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -37,7 +37,6 @@
|
|||||||
<body onload="openwebrx_init();">
|
<body onload="openwebrx_init();">
|
||||||
<div id="webrx-page-container">
|
<div id="webrx-page-container">
|
||||||
${header}
|
${header}
|
||||||
<div id="webrx-main-container">
|
|
||||||
<div id="openwebrx-frequency-container">
|
<div id="openwebrx-frequency-container">
|
||||||
<div id="openwebrx-bookmarks-container"></div>
|
<div id="openwebrx-bookmarks-container"></div>
|
||||||
<div id="openwebrx-scale-container">
|
<div id="openwebrx-scale-container">
|
||||||
@ -49,7 +48,90 @@
|
|||||||
<!-- add canvas here by javascript -->
|
<!-- add canvas here by javascript -->
|
||||||
</div>
|
</div>
|
||||||
<div id="openwebrx-panels-container">
|
<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="openwebrx-panel-line frequencies-container">
|
||||||
<div class="frequencies">
|
<div class="frequencies">
|
||||||
<div id="webrx-actual-freq">---.--- MHz</div>
|
<div id="webrx-actual-freq">---.--- MHz</div>
|
||||||
@ -128,86 +210,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -79,9 +79,7 @@ function toggle_rx_photo() {
|
|||||||
|
|
||||||
function close_rx_photo() {
|
function close_rx_photo() {
|
||||||
rx_photo_state = 0;
|
rx_photo_state = 0;
|
||||||
$('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic', step: function () {
|
$('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic'});
|
||||||
resize_waterfall_container(true);
|
|
||||||
}});
|
|
||||||
e("openwebrx-rx-details-arrow-down").style.display = "block";
|
e("openwebrx-rx-details-arrow-down").style.display = "block";
|
||||||
e("openwebrx-rx-details-arrow-up").style.display = "none";
|
e("openwebrx-rx-details-arrow-up").style.display = "none";
|
||||||
}
|
}
|
||||||
@ -90,9 +88,7 @@ function open_rx_photo() {
|
|||||||
rx_photo_state = 1;
|
rx_photo_state = 1;
|
||||||
e("webrx-rx-photo-desc").style.opacity = 1;
|
e("webrx-rx-photo-desc").style.opacity = 1;
|
||||||
e("webrx-rx-photo-title").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 () {
|
$('#webrx-top-photo-clip').animate({maxHeight: rx_photo_height}, {duration: 1000, easing: 'easeOutCubic'});
|
||||||
resize_waterfall_container(true);
|
|
||||||
}});
|
|
||||||
e("openwebrx-rx-details-arrow-down").style.display = "none";
|
e("openwebrx-rx-details-arrow-down").style.display = "none";
|
||||||
e("openwebrx-rx-details-arrow-up").style.display = "block";
|
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() );
|
//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_data_received = 0;
|
||||||
var debug_ws_time_start;
|
var debug_ws_time_start;
|
||||||
var currentprofile;
|
var currentprofile;
|
||||||
@ -1624,8 +1607,6 @@ function resize_canvases(zoom) {
|
|||||||
|
|
||||||
function waterfall_init() {
|
function waterfall_init() {
|
||||||
init_canvas_container();
|
init_canvas_container();
|
||||||
resize_waterfall_container(false);
|
|
||||||
/* then */
|
|
||||||
resize_canvases();
|
resize_canvases();
|
||||||
scale_setup();
|
scale_setup();
|
||||||
mkzoomlevels();
|
mkzoomlevels();
|
||||||
@ -1873,7 +1854,6 @@ function waterfall_clear() {
|
|||||||
|
|
||||||
function openwebrx_resize() {
|
function openwebrx_resize() {
|
||||||
resize_canvases();
|
resize_canvases();
|
||||||
resize_waterfall_container(true);
|
|
||||||
resize_scale();
|
resize_scale();
|
||||||
check_top_bar_congestion();
|
check_top_bar_congestion();
|
||||||
}
|
}
|
||||||
@ -1938,7 +1918,7 @@ function openwebrx_init() {
|
|||||||
setInterval(updateNetworkStats, 1000);
|
setInterval(updateNetworkStats, 1000);
|
||||||
secondary_demod_init();
|
secondary_demod_init();
|
||||||
digimodes_init();
|
digimodes_init();
|
||||||
place_panels(first_show_panel);
|
initPanels();
|
||||||
window.addEventListener("resize", openwebrx_resize);
|
window.addEventListener("resize", openwebrx_resize);
|
||||||
check_top_bar_congestion();
|
check_top_bar_congestion();
|
||||||
init_header();
|
init_header();
|
||||||
@ -1963,10 +1943,6 @@ function initSliders() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function digimodes_init() {
|
function digimodes_init() {
|
||||||
$(".openwebrx-meta-panel").each(function (_, p) {
|
|
||||||
p.openwebrxHidden = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
// initialze DMR timeslot muting
|
// initialze DMR timeslot muting
|
||||||
$('.openwebrx-dmr-timeslot-panel').click(function (e) {
|
$('.openwebrx-dmr-timeslot-panel').click(function (e) {
|
||||||
$(e.currentTarget).toggleClass("muted");
|
$(e.currentTarget).toggleClass("muted");
|
||||||
@ -2002,50 +1978,32 @@ var rt = function (s, n) {
|
|||||||
// ======================= PANELS =======================
|
// ======================= PANELS =======================
|
||||||
// ========================================================
|
// ========================================================
|
||||||
|
|
||||||
var panel_margin = 5.9;
|
function panel_displayed(el){
|
||||||
|
return !(el.style && el.style.display && el.style.display === 'none')
|
||||||
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 toggle_panel(what, on) {
|
function toggle_panel(what, on) {
|
||||||
var item = e(what);
|
var item = $('#' + what)[0];
|
||||||
if (!item) return;
|
if (!item) return;
|
||||||
if (typeof on !== "undefined") {
|
var displayed = panel_displayed(item);
|
||||||
if (item.openwebrxHidden && !on) return;
|
if (typeof on !== "undefined" && displayed === on) {
|
||||||
if (!item.openwebrxHidden && on) return;
|
return;
|
||||||
}
|
}
|
||||||
if (item.openwebrxDisableClick) 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";
|
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;
|
item.openwebrxDisableClick = true;
|
||||||
|
|
||||||
@ -2062,67 +2020,31 @@ function first_show_panel(panel) {
|
|||||||
roty = rottemp;
|
roty = rottemp;
|
||||||
}
|
}
|
||||||
if (rotx !== 0 && Math.random() > 0.5) rotx = 270;
|
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());
|
.replace("%1", rotx.toString()).replace("%2", roty.toString());
|
||||||
window.setTimeout(function () {
|
window.setTimeout(function () {
|
||||||
panel.style.transitionDuration = "599ms";
|
panel.style.transitionDuration = "600ms";
|
||||||
panel.style.transitionDelay = (Math.floor(Math.random() * 500)).toString() + "ms";
|
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);
|
}, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function place_panels(function_apply) {
|
function initPanels() {
|
||||||
if (function_apply === undefined) function_apply = function (x) {
|
$('#openwebrx-panels-container').find('.openwebrx-panel').each(function(){
|
||||||
};
|
var el = this;
|
||||||
var hoffset = 0; //added this because the first panel should not have such great gap below
|
el.openwebrxPanelTransparent = (!!el.dataset.panelTransparent);
|
||||||
var left_col = [];
|
el.addEventListener('transitionend', function(ev){
|
||||||
var right_col = [];
|
if (ev.target !== el) return;
|
||||||
var plist = e("openwebrx-panels-container").children;
|
el.openwebrxDisableClick = false;
|
||||||
for (var i = 0; i < plist.length; i++) {
|
el.style.transitionDuration = null;
|
||||||
var c = plist[i];
|
el.style.transitionDelay = null;
|
||||||
if (c.className.indexOf("openwebrx-panel") >= 0) {
|
el.style.transitionProperty = null;
|
||||||
if (c.openwebrxHidden) {
|
if (el.movement && el.movement == 'collapse') {
|
||||||
c.style.display = "none";
|
el.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);
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
if (panel_displayed(el)) first_show_panel(el);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function demodulator_buttons_update() {
|
function demodulator_buttons_update() {
|
||||||
@ -2261,9 +2183,6 @@ function secondary_demod_swap_canvases() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function secondary_demod_init() {
|
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 = $("#openwebrx-digimode-canvas-container")[0];
|
||||||
$(secondary_demod_canvas_container)
|
$(secondary_demod_canvas_container)
|
||||||
.mousemove(secondary_demod_canvas_container_mousemove)
|
.mousemove(secondary_demod_canvas_container_mousemove)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user