New CSS animation to add new demod text is just coool

htdocs/index.wrx

@@ -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="none" onselect="demodulator_analog_replace_last();"></option>
-							<option value="bpsk31">BPSK31</option>
+							<option value="bpsk31" onselect="demodulator_digital_replace('bpsk31');">BPSK31</option>
-							<option value="rtty">RTTY</option>
+							<option value="rtty" onselect="demodulator_digital_replace('rtty');">RTTY</option>
 						</select>
 					</div>
 					<div class="openwebrx-panel-line">
@@ -149,8 +149,11 @@
 				</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">
+					<div id="openwebrx-digimode-content-container">
+                        <div class="gradient"></div>
+                        <div id="openwebrx-digimode-content">
 						macska<span id="openwebrx-cursor-blink"></span>
+                        </div>
 					</div>
 				</div>
 			</div>

htdocs/openwebrx.css

@@ -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); }
+}

htdocs/openwebrx.js

@@ -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()
+{
+}