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

New CSS animation to add new demod text is just coool

Browse Source
This commit is contained in:
ha7ilm 2017-05-03 00:32:08 +02:00
parent 4ba8861c3a
commit 067592ff57
3 changed files with 134 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
htdocs/index.wrx
View File

@ -96,11 +96,11 @@
onclick="demodulator_analog_replace('cw');">CW</div>
</div>
<div class="openwebrx-panel-line">
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_analog_replace('cw');">DIG</div>
<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_digital_replace_last();">DIG</div>
<select id="openwebrx-select-digimod">
<option value="none"></option>
<option value="bpsk31">BPSK31</option>
<option value="rtty">RTTY</option>
<option value="none" onselect="demodulator_analog_replace_last();"></option>
<option value="bpsk31" onselect="demodulator_digital_replace('bpsk31');">BPSK31</option>
<option value="rtty" onselect="demodulator_digital_replace('rtty');">RTTY</option>
</select>
</div>
<div class="openwebrx-panel-line">
@ -149,6 +149,8 @@
</div>
<div class="openwebrx-panel" id="openwebrx-panel-digimodes" data-panel-name="digimodes" data-panel-pos="left" data-panel-order="2" data-panel-size="619,500">
<div id="openwebrx-digimode-canvas-container"></div>
<div id="openwebrx-digimode-content-container">
<div class="gradient"></div>
<div id="openwebrx-digimode-content">
macska<span id="openwebrx-cursor-blink"></span>
</div>
@ -156,6 +158,7 @@
</div>
</div>
</div>
</div>
<div id="openwebrx-big-grey" onclick="iosPlayButtonClick();">
<div id="openwebrx-play-button-text">
<img id="openwebrx-play-button" src="gfx/openwebrx-play-button.png" />

58
htdocs/openwebrx.css
View File

@ -814,7 +814,8 @@ img.openwebrx-mirror-img
#openwebrx-digimode-canvas-container
{
margin: -10px -10px 10px -10px;
/*margin: -10px -10px 10px -10px;*/
margin: -10px -10px 0px -10px;
border-radius: 15px;
height: 150px;
background-color: #333;
@ -873,4 +874,59 @@ img.openwebrx-mirror-img
100%{ transform: rotateX(360deg) rotateY(720deg); }
}
#openwebrx-digimode-content
{
word-wrap: break-word;
position: absolute;
bottom: 0;
width: 100%;
}
#openwebrx-digimode-content-container
{
overflow-y: hidden;
display: block;
height: 50px;
position: relative;
}
#openwebrx-digimode-content-container .gradient
{
width: 100%;
height: 20px;
background: linear-gradient(to top, rgba(87,87,87,0) 0%,rgba(87,87,87,1) 100%);
position: absolute;
top: 0;
z-index: 10;
}
#openwebrx-digimode-content .part
{
perspective: 700px;
}
#openwebrx-digimode-content .part
{
animation: new-digimode-data-3d 100ms;
animation-timing-function: linear;
display: inline-block;
perspective-origin: 50% 50%;
transform-origin: 0% 50%;
}
#openwebrx-digimode-content .part .subpart
{
}
@keyframes new-digimode-data
{
0%{ opacity: 0; }
100%{ opacity: 1; }
}
@keyframes new-digimode-data-3d
{
0%{ transform: rotateX(0deg) rotateY(-90deg) translateX(-5px) scale(1.3); }
100%{ transform: rotateX(0deg) rotateY(0deg) translateX(0) scale(1); }
}

70
htdocs/openwebrx.js
View File

@ -580,8 +580,13 @@ function demodulator_add(what)
mkenvelopes(get_visible_freq_range());
}
function demodulator_analog_replace(subtype)
last_analog_demodulator_subtype = 'nfm';
last_digital_demodulator_subtype = 'bpsk31';
function demodulator_analog_replace(subtype, for_digital)
{ //this function should only exist until the multi-demodulator capability is added
if(typeof for_digital !== "undefined" && for_digital && secondary_demod) secondary_demod_close_window();
last_analog_demodulator_subtype = subtype;
var temp_offset=0;
if(demodulators.length)
{
@ -2161,3 +2166,66 @@ function demodulator_buttons_update()
break;
}
}
function demodulator_analog_replace_last() { demodulator_analog_replace(last_analog_demodulator_subtype); }
/*
_____ _ _ _
| __ \(_) (_) | |
| | | |_ __ _ _ _ __ ___ ___ __| | ___ ___
| | | | |/ _` | | '_ ` _ \ / _ \ / _` |/ _ \/ __|
| |__| | | (_| | | | | | | | (_) | (_| | __/\__ \
|_____/|_|\__, |_|_| |_| |_|\___/ \__,_|\___||___/
__/ |
|___/
*/
secondary_demod = false;
secondary_demod_offset_freq = 0;
secondary_demod_ffts = [];
function demodulator_digital_replace_last() { demodulator_digital_replace(last_digital_demodulator_subtype); }
function demodulator_digital_replace(subtype)
{
switch(subtype)
{
case "bpsk31":
case "rtty":
demodulator_analog_replace('usb', true);
secondary_demod_start(subtype);
break;
}
}
function secondary_demod_start(subtype)
{
ws.send("SET secondary_mod="+subtype);
secondary_demod = true;
}
function secondary_demod_set()
{
ws.send("SET secondary_offset_freq="+secondary_demod_offset_freq.toString());
}
function secondary_demod_stop()
{
ws.send("SET secondary_mod=off");
secondary_demod = false;
}
function secondary_demod_push_fft(x)
{
}
function secondary_demod_push_data(x)
{
//$("#openwebrx-digimode-content").append("<span class=\"part\">"+x+"</span>");
$("#openwebrx-cursor-blink").before("<span class=\"part\"><span class=\"subpart\">"+x+"</span></span>");
}
function secondary_demod_close_window()
{
}