Added nanoscroller, retabbed index.wrx and did some work on the digidemod UI

.gitignore

@@ -1,2 +1,3 @@
 *.pyc
 *.swp
+tags

htdocs/index.wrx

@@ -38,6 +38,8 @@
         <script src="sdr.js"></script>
         <script src="openwebrx.js"></script>
         <script src="jquery-3.2.1.min.js"></script>
+        <script src="jquery.nanoscroller.js"></script>
+        <link rel="stylesheet" type="text/css" href="nanoscroller.css" />
         <link rel="stylesheet" type="text/css" href="openwebrx.css" />
         <meta charset="utf-8">
     </head>
@@ -96,11 +98,11 @@
                             onclick="demodulator_analog_replace('cw');">CW</div>
                     </div>
                     <div class="openwebrx-panel-line">
-						<div class="openwebrx-button openwebrx-demodulator-button" onclick="demodulator_digital_replace_last();">DIG</div>
+                        <div class="openwebrx-button openwebrx-demodulator-button" id="openwebrx-button-dig" onclick="demodulator_digital_replace_last();">DIG</div>
-						<select id="openwebrx-select-digimod">
+                        <select id="openwebrx-secondary-demod-listbox" onchange="secondary_demod_listbox_changed();">
-							<option value="none" onselect="demodulator_analog_replace_last();"></option>
+                            <option value="none"></option>
-							<option value="bpsk31" onselect="demodulator_digital_replace('bpsk31');">BPSK31</option>
+                            <option value="bpsk31">BPSK31</option>
-							<option value="rtty" onselect="demodulator_digital_replace('rtty');">RTTY</option>
+                            <option value="rtty">RTTY</option>
                         </select>
                     </div>
                     <div class="openwebrx-panel-line">
@@ -129,12 +131,14 @@
                     </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 class="openwebrx-panel-inner nano" id="openwebrx-log-scroll">
+                        <div class="nano-content">
                             <div id="openwebrx-client-log-title">OpenWebRX client log</strong><span id="openwebrx-problems"></span></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>
@@ -147,12 +151,12 @@
                     <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="2" data-panel-size="619,500">
+                <div class="openwebrx-panel" id="openwebrx-panel-digimodes" data-panel-name="digimodes" data-panel-pos="left" data-panel-order="2" data-panel-size="619,210">
                     <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>
+                        <span id="openwebrx-cursor-blink"></span>
                         </div>
                     </div>
                 </div>

htdocs/nanoscroller.css

@@ -0,0 +1,55 @@
+/** initial setup **/
+.nano {
+  position : relative;
+  width    : 100%;
+  height   : 100%;
+  overflow : hidden;
+}
+.nano > .nano-content {
+  position      : absolute;
+  overflow      : scroll;
+  overflow-x    : hidden;
+  top           : 0;
+  right         : 0;
+  bottom        : 0;
+  left          : 0;
+}
+.nano > .nano-content:focus {
+  outline: thin dotted;
+}
+.nano > .nano-content::-webkit-scrollbar {
+  display: none;
+}
+.has-scrollbar > .nano-content::-webkit-scrollbar {
+  display: block;
+}
+.nano > .nano-pane {
+  background : rgba(0,0,0,.25);
+  position   : absolute;
+  width      : 8px;
+  right      : 0;
+  top        : 0;
+  bottom     : 0;
+  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
+  opacity    : .01;
+  -webkit-transition    : .2s;
+  -moz-transition       : .2s;
+  -o-transition         : .2s;
+  transition            : .2s;
+  -moz-border-radius    : 3px;
+  -webkit-border-radius : 3px;
+  border-radius         : 3px;
+}
+.nano > .nano-pane > .nano-slider {
+  background: #444;
+  background: rgba(0,0,0,.5);
+  position              : relative;
+  margin                : 0 0px;
+  -moz-border-radius    : 4px;
+  -webkit-border-radius : 4px;
+  border-radius         : 4px;
+}
+.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
+  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
+  opacity    : 0.99;
+}

htdocs/openwebrx.css

@@ -415,11 +415,15 @@ input[type=range]:focus::-ms-fill-upper
 	height: 396px;
 }*/
 
-/*#webrx-debugdiv
+#openwebrx-log-scroll
 {
-	font-size: 10pt;
+    /*overflow-y:auto;*/
-	/*overflow-y:scroll;*/
+    height: 125px;
-/*}*/
+    width: 619px
+}
+
+.nano .nano-pane   { background: #444; }
+.nano .nano-slider { background: #eee !important;  }
 
 #webrx-main-container
 {
@@ -504,7 +508,7 @@ input[type=range]:focus::-ms-fill-upper
 
 .openwebrx-panel
 {
-	transform: perspective( 600px );
+	transform: perspective( 600px ) rotateX( 90deg );
 	visibility: hidden;
 	background-color: #575757;
 	padding: 10px;
@@ -821,7 +825,7 @@ img.openwebrx-mirror-img
 	background-color: #333;
 }
 
-#openwebrx-select-digimod
+#openwebrx-secondary-demod-listbox
 {
 	width: 195px;
 	height: 27px;
@@ -839,7 +843,7 @@ img.openwebrx-mirror-img
 	padding-left:3px;
 }
 
-#openwebrx-select-digimod option
+#openwebrx-secondary-demod-listbox option
 {
 	border-width: 0px;
 	background-color: #373737;
@@ -856,6 +860,8 @@ img.openwebrx-mirror-img
 	width: 8px;
 	background-color: White;
 	display: inline-block;
+    position: relative;
+    top: 1px;
 	/*perspective: 60px;*/
 
 }

htdocs/openwebrx.js

@@ -585,7 +585,11 @@ 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();
+    if(!(typeof for_digital !== "undefined" && for_digital && secondary_demod)) 
+    { 
+        secondary_demod_close_window(); 
+        secondary_demod_listbox_update(); 
+    }
     last_analog_demodulator_subtype = subtype;
 	var temp_offset=0;
 	if(demodulators.length)
@@ -1062,7 +1066,7 @@ function zoom_step(out, where, onscreen)
 	zoom_center_rel=canvas_get_freq_offset(where);
 	//console.log("zoom_step || zlevel: "+zoom_level.toString()+" zlevel_val: "+zoom_levels[zoom_level].toString()+" zoom_center_rel: "+zoom_center_rel.toString());
 	zoom_center_where=onscreen;
-	console.log(zoom_center_where, zoom_center_rel, where);
+	//console.log(zoom_center_where, zoom_center_rel, where);
 	resize_canvases(true);
 	mkscale();
 }
@@ -1137,7 +1141,7 @@ function on_ws_recv(evt)
 	if(firstChars=="CLI")
 	{
 		var stringData=arrayBufferToString(evt.data);
-		if(stringData.substring(0,16)=="CLIENT DE SERVER") divlog("Acknowledged WebSocket connection: "+stringData);
+		if(stringData.substring(0,16)=="CLIENT DE SERVER") divlog("Server acknowledged WebSocket connection.");
 
 	}
 	if(firstChars=="AUD")
@@ -1161,7 +1165,8 @@ function on_ws_recv(evt)
 			var waterfall_i16=fft_codec.decode(new Uint8Array(evt.data,4));
 			var waterfall_f32=new Float32Array(waterfall_i16.length-COMPRESS_FFT_PAD_N);
 			for(var i=0;i<waterfall_i16.length;i++) waterfall_f32[i]=waterfall_i16[i+COMPRESS_FFT_PAD_N]/100;
-			waterfall_add_queue(waterfall_f32);
+            if(evt.data[3]=="S") secondary_demod_waterfall_add_queue(waterfall_f32);
+            else waterfall_add_queue(waterfall_f32);
 		}
 	} else if(firstChars=="MSG")
 	{
@@ -1286,8 +1291,10 @@ function divlog(what, is_error)
 		if(e("openwebrx-panel-log").openwebrxHidden) toggle_panel("openwebrx-panel-log"); //show panel if any error is present
 	}
 	e("openwebrx-debugdiv").innerHTML+=what+"<br />";
-	var wls=e("openwebrx-log-scroll");
+	//var wls=e("openwebrx-log-scroll");
-	wls.scrollTop=wls.scrollHeight; //scroll to bottom
+	//wls.scrollTop=wls.scrollHeight; //scroll to bottom
+    $(".nano").nanoScroller();
+    $(".nano").nanoScroller({ scroll: 'bottom' });
 }
 
 var audio_context;
@@ -1778,7 +1785,7 @@ function resize_canvases(zoom)
 function waterfall_init()
 {
 	init_canvas_container();
-	waterfall_timer = window.setInterval(waterfall_dequeue,900/fft_fps);
+	waterfall_timer = window.setInterval(()=>{waterfall_dequeue(); secondary_demod_waterfall_dequeue();},900/fft_fps);
 	resize_waterfall_container(false); /* then */ resize_canvases();
 	scale_setup();
 	mkzoomlevels();
@@ -1922,6 +1929,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();
+    secondary_demod_init();
 	place_panels(first_show_panel);
 	window.setTimeout(function(){window.setInterval(debug_audio,1000);},1000);
 	window.addEventListener("resize",openwebrx_resize);
@@ -2015,9 +2023,14 @@ function pop_bottommost_panel(from)
 	return to_return;
 }
 
-function toggle_panel(what)
+function toggle_panel(what, on)
 {
     var item=e(what);
+    if(typeof on !== "undefined") 
+    {
+        if(item.openwebrxHidden && !on) return;
+        if(!item.openwebrxHidden && on) return;
+    }
 	if(item.openwebrxDisableClick) return;
 	item.style.transitionDuration="599ms";
 	item.style.transitionDelay="0ms";
@@ -2106,6 +2119,7 @@ function place_panels(function_apply)
 		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)
@@ -2142,7 +2156,8 @@ function progressbar_set(obj,val,text,over)
 function demodulator_buttons_update()
 {
 	$(".openwebrx-demodulator-button").removeClass("highlighted");
-	switch(demodulators[0].subtype)
+    if(secondary_demod) $("#openwebrx-button-dig").addClass("highlighted");
+    else switch(demodulators[0].subtype)
 	{
 	case "nfm":
 		$("#openwebrx-button-nfm").addClass("highlighted");
@@ -2181,25 +2196,36 @@ function demodulator_analog_replace_last() { demodulator_analog_replace(last_ana
 
 secondary_demod = false;
 secondary_demod_offset_freq = 0;
-secondary_demod_ffts = [];
+secondary_demod_waterfall_queue = [];
 
-function demodulator_digital_replace_last() { demodulator_digital_replace(last_digital_demodulator_subtype); }
+function demodulator_digital_replace_last() 
+{ 
+    demodulator_digital_replace(last_digital_demodulator_subtype); 
+    secondary_demod_listbox_update();
+}
 function demodulator_digital_replace(subtype)
 {
     switch(subtype) 
     {
     case "bpsk31":
     case "rtty":
-        demodulator_analog_replace('usb', true);
         secondary_demod_start(subtype);
+        demodulator_analog_replace('usb', true);
+        demodulator_buttons_update();
         break;
     }
+    toggle_panel("openwebrx-panel-digimodes", true);
+}
+
+function secondary_demod_init()
+{
+    $("#openwebrx-panel-digimodes")[0].openwebrxHidden = true;
 }
 
 function secondary_demod_start(subtype) 
 { 
     ws.send("SET secondary_mod="+subtype); 
-    secondary_demod = true; 
+    secondary_demod = subtype; 
 }
 
 function secondary_demod_set()
@@ -2211,21 +2237,62 @@ function secondary_demod_stop()
 {
     ws.send("SET secondary_mod=off");
     secondary_demod = false; 
+    secondary_demod_waterfall_queue = [];
 }
 
-function secondary_demod_push_fft(x)
+function secondary_demod_waterfall_add_queue(x)
 {
-
+    secondary_demod_waterfall_queue.push(what);
 }
 
 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()
 {
+    secondary_demod_stop();
+    toggle_panel("openwebrx-panel-digimodes", false);
+}
+
+function secondary_demod_waterfall_add(x)
+{
+}
+
+function secondary_demod_waterfall_dequeue()
+{
+    if(!secondary_demod) return;
+	if(secondary_demod_waterfall_queue.length) secondary_demod_waterfall_add(waterfall_queue.shift());
+	if(secondary_demod_waterfall_queue.length>Math.max(fft_fps/2,20)) //in case of fft overflow
+	{
+		console.log("secondary waterfall overflow, queue length:", secondary_demod_waterfall_queue.length);
+		while(secondary_demod_waterfall_queue.length) secondary_demod_waterfall_add(secondary_demod_waterfall_queue.shift());
+	}
+} 
+
+secondary_demod_listbox_updating = false;
+function secondary_demod_listbox_changed()
+{
+    if(secondary_demod_listbox_updating) return;
+    switch ($("#openwebrx-secondary-demod-listbox")[0].value)
+    {
+        case "none":
+            demodulator_analog_replace_last();
+            break;
+        case "bpsk31":
+            demodulator_digital_replace('bpsk31');
+            break;
+        case "rtty":
+            demodulator_digital_replace('rtty');
+            break;
+    }
+}
+
+function secondary_demod_listbox_update()
+{
+    secondary_demod_listbox_updating = true;
+    $("#openwebrx-secondary-demod-listbox").val((secondary_demod)?secondary_demod:"none");
+    console.log("update");
+    secondary_demod_listbox_updating = false;
 }