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
|
||||
{
|
||||
min-height:100%;
|
||||
position:relative;
|
||||
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);
|
||||
}
|
||||
|
||||
@ -37,19 +37,101 @@
|
||||
<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">
|
||||
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
|
||||
<div id="openwebrx-frequency-container">
|
||||
<div id="openwebrx-bookmarks-container"></div>
|
||||
<div id="openwebrx-scale-container">
|
||||
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div id="openwebrx-mathbox-container"> </div>
|
||||
<div id="webrx-canvas-container">
|
||||
<!-- add canvas here by javascript -->
|
||||
</div>
|
||||
<div id="openwebrx-panels-container">
|
||||
<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-mathbox-container"> </div>
|
||||
<div id="webrx-canvas-container">
|
||||
<!-- 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-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>
|
||||
@ -65,29 +147,29 @@
|
||||
</div>
|
||||
<div class="openwebrx-panel-line openwebrx-panel-flex-line">
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-nfm"
|
||||
onclick="demodulator_analog_replace('nfm');">FM</div>
|
||||
onclick="demodulator_analog_replace('nfm');">FM</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-am"
|
||||
onclick="demodulator_analog_replace('am');">AM</div>
|
||||
onclick="demodulator_analog_replace('am');">AM</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-lsb"
|
||||
onclick="demodulator_analog_replace('lsb');">LSB</div>
|
||||
onclick="demodulator_analog_replace('lsb');">LSB</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-usb"
|
||||
onclick="demodulator_analog_replace('usb');">USB</div>
|
||||
onclick="demodulator_analog_replace('usb');">USB</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-cw"
|
||||
onclick="demodulator_analog_replace('cw');">CW</div>
|
||||
onclick="demodulator_analog_replace('cw');">CW</div>
|
||||
</div>
|
||||
<div class="openwebrx-panel-line openwebrx-panel-flex-line">
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-dmr"
|
||||
style="display:none;" data-feature="digital_voice_digiham"
|
||||
onclick="demodulator_analog_replace('dmr');">DMR</div>
|
||||
onclick="demodulator_analog_replace('dmr');">DMR</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-dstar"
|
||||
style="display:none;" data-feature="digital_voice_dsd"
|
||||
onclick="demodulator_analog_replace('dstar');">DStar</div>
|
||||
onclick="demodulator_analog_replace('dstar');">DStar</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-nxdn"
|
||||
style="display:none;" data-feature="digital_voice_dsd"
|
||||
onclick="demodulator_analog_replace('nxdn');">NXDN</div>
|
||||
onclick="demodulator_analog_replace('nxdn');">NXDN</div>
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-ysf"
|
||||
style="display:none;" data-feature="digital_voice_digiham"
|
||||
onclick="demodulator_analog_replace('ysf');">YSF</div>
|
||||
onclick="demodulator_analog_replace('ysf');">YSF</div>
|
||||
</div>
|
||||
<div class="openwebrx-panel-line openwebrx-panel-flex-line">
|
||||
<div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-dig" onclick="demodulator_digital_replace_last();">DIG</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>
|
||||
|
||||
@ -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;
|
||||
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';
|
||||
}
|
||||
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() {
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user