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

Some effects :-)

Browse Source
This commit is contained in:
ha7ilm 2016-06-17 13:47:15 +02:00
parent b98e75f1f9
commit ae5c598a3c
3 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
htdocs/index.wrx
View File

@ -72,7 +72,6 @@
<div id="openwebrx-scale-container">
<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
</div>
<div id="webrx-canvas-container">
<div id="openwebrx-phantom-canvas"></div>
@ -83,7 +82,6 @@
<div id="webrx-actual-freq">---.--- MHz</div>
<div id="webrx-mouse-freq">---.--- MHz</div>
<!--<div class="openwebrx-button" onclick="ws.send('SET mod=wfm');" >WFM</div>-->
<div class="openwebrx-panel-line">
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('nfm');">FM</div>
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('am');">AM</div>
@ -116,7 +114,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,142">
<div class="openwebrx-panel-inner" id="openwebrx-log-scroll">
<div id="openwebrx-client-log-title">OpenWebRX client log</strong><span id="openwebrx-problems"></span></div>

2
htdocs/openwebrx.css
View File

@ -499,6 +499,7 @@ input[type=range]:focus::-ms-fill-upper
.openwebrx-panel
{
transform: perspective( 600px );
visibility: hidden;
background-color: #575757;
padding: 10px;
@ -805,4 +806,3 @@ img.openwebrx-mirror-img
{
width: 150px;
}

60
htdocs/openwebrx.js
View File

@ -231,7 +231,6 @@ function typeInAnimation(element,timeout,what,onFinish)
// ========================================================
// ================= ANIMATION ROUTINES =================
// ========================================================
@ -1597,8 +1596,9 @@ function audio_init()
window.setTimeout(function(){
if(typeof e("openwebrx-panel-log").openwebrxHidden == "undefined" && !was_error)
{
animate(e("openwebrx-panel-log"),"opacity","",1,0,0.9,1000,60);
window.setTimeout(function(){toggle_panel("openwebrx-panel-log");e("openwebrx-panel-log").style.opacity="1";},1200)
toggle_panel("openwebrx-panel-log");
//animate(e("openwebrx-panel-log"),"opacity","",1,0,0.9,1000,60);
//window.setTimeout(function(){toggle_panel("openwebrx-panel-log");e("openwebrx-panel-log").style.opacity="1";},1200)
}
},2000);
}
@ -1897,7 +1897,7 @@ function openwebrx_init()
(opb=e("openwebrx-play-button-text")).style.marginTop=(window.innerHeight/2-opb.clientHeight/2).toString()+"px";
init_rx_photo();
open_websocket();
place_panels();
place_panels(first_show_panel);
window.setTimeout(function(){window.setInterval(debug_audio,1000);},1000);
window.addEventListener("resize",openwebrx_resize);
check_top_bar_congestion();
@ -1994,14 +1994,56 @@ function toggle_panel(what)
{
var item=e(what);
if(item.openwebrxDisableClick) return;
item.openwebrxHidden=!item.openwebrxHidden;
place_panels();
item.style.transitionDuration="599ms";
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;
window.setTimeout(function(){item.openwebrxDisableClick=false;},100);
}
function place_panels()
function first_show_panel(panel)
{
panel.style.transitionDuration=0;
panel.style.transitionDelay=0;
rotx=(Math.random()>0.5)?-90:90;
roty=0;
if(Math.random()>0.5)
{
rottemp=rotx;
rotx=roty;
roty=rottemp;
}
if(rotx!=0 && Math.random()>0.5) rotx=270;
console.log(rotx,roty);
transformString = "perspective( 599px ) rotateX( %1deg ) rotateY( %2deg )"
.replace("%1",rotx.toString()).replace("%2",roty.toString());
console.log(transformString);
console.log(panel);
panel.style.transform=transformString;
window.setTimeout(function() {
panel.style.transitionDuration="599ms";
panel.style.transitionDelay=(Math.floor(Math.random()*500)).toString()+"ms";
panel.style.transform="perspective( 599px ) rotateX( 0deg ) rotateY( 0deg )";
//panel.style.transitionDuration="0ms";
//panel.style.transitionDelay="0";
}, 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=[];
@ -2038,6 +2080,7 @@ function place_panels()
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);
}
y=hoffset;
while(right_col.length>0)
@ -2047,6 +2090,7 @@ function place_panels()
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);
}
}