refactor demodulator classes, part 1

htdocs/css/openwebrx.css

@@ -311,7 +311,7 @@ input[type=range]:focus::-ms-fill-upper
     font-style: normal;
 }
 
-#webrx-actual-freq {
+.webrx-actual-freq {
 	width: 100%;
 	text-align: left;
 	padding: 0;
@@ -320,11 +320,11 @@ input[type=range]:focus::-ms-fill-upper
 	flex-direction: row;
 }
 
-#webrx-actual-freq > * {
+.webrx-actual-freq > * {
     flex: 1;
 }
 
-#webrx-actual-freq input {
+.webrx-actual-freq input {
     font-family: 'roboto-mono';
     width: 0;
     box-sizing: border-box;
@@ -334,14 +334,13 @@ input[type=range]:focus::-ms-fill-upper
     color: inherit;
 }
 
-#webrx-actual-freq, #webrx-actual-freq input {
+.webrx-actual-freq, .webrx-actual-freq input {
 	font-size: 16pt;
 	font-family: 'roboto-mono';
 	line-height: 22px;
 }
 
-#webrx-mouse-freq
+.webrx-mouse-freq {
-{
 	width: 100%;
 	text-align: left;
 	font-size: 10pt;
@@ -728,8 +727,7 @@ img.openwebrx-mirror-img
 	color: White;
 }
 
-#openwebrx-secondary-demod-listbox
+.openwebrx-secondary-demod-listbox {
-{
 	width: 173px;
 	height: 27px;
 	padding-left:3px;

htdocs/index.html

@@ -28,6 +28,7 @@
         <script src="static/lib/jquery-3.2.1.min.js"></script>
         <script src="static/lib/jquery.nanoscroller.js"></script>
         <script src="static/lib/Demodulator.js"></script>
+        <script src="static/lib/DemodulatorPanel.js"></script>
         <script src="static/lib/BookmarkBar.js"></script>
         <script src="static/lib/AudioEngine.js"></script>
         <script src="static/lib/ProgressBar.js"></script>
@@ -156,8 +157,8 @@
             <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"></div>
+                        <div class="webrx-actual-freq"></div>
-                        <div id="webrx-mouse-freq"></div>
+                        <div class="webrx-mouse-freq"></div>
                     </div>
                     <div class="openwebrx-button openwebrx-square-button openwebrx-bookmark-button" style="display:none;" title="Add bookmark...">
                         <img src="static/gfx/openwebrx-bookmark.png">

htdocs/lib/BookmarkBar.js

@@ -9,11 +9,11 @@ function BookmarkBar() {
         me.$container.find('.bookmark').removeClass('selected');
         var b = $bookmark.data();
         if (!b || !b.frequency || (!b.modulation && !b.digital_modulation)) return;
-        demodulators[0].set_offset_frequency(b.frequency - center_freq);
+        me.getDemodulator().set_offset_frequency(b.frequency - center_freq);
         if (b.modulation) {
-            demodulator_analog_replace(b.modulation);
+            me.getDemodulatorPanel().setMode(b.modulation);
         } else if (b.digital_modulation) {
-            demodulator_digital_replace(b.digital_modulation);
+            me.getDemodulatorPanel().setDigiMode(b.digital_modulation);
         }
         $bookmark.addClass('selected');
     });
@@ -108,8 +108,8 @@ BookmarkBar.prototype.showEditDialog = function(bookmark) {
     if (!bookmark) {
         bookmark = {
             name: "",
-            frequency: center_freq + demodulators[0].offset_frequency,
+            frequency: center_freq + this.getDemodulator().get_offset_frequency(),
-            modulation: demodulators[0].subtype
+            modulation: this.getDemodulator().get_modulation()
         }
     }
     ['name', 'frequency', 'modulation'].forEach(function(key){
@@ -154,6 +154,14 @@ BookmarkBar.prototype.storeBookmark = function() {
     me.$dialog.hide();
 };
 
+BookmarkBar.prototype.getDemodulatorPanel = function() {
+    return $('#openwebrx-panel-receiver').demodulatorPanel();
+};
+
+BookmarkBar.prototype.getDemodulator = function() {
+    return this.getDemodulatorPanel().getDemodulator();
+};
+
 BookmarkLocalStorage = function(){
 };
 
@@ -171,7 +179,3 @@ BookmarkLocalStorage.prototype.deleteBookmark = function(data) {
     bookmarks = bookmarks.filter(function(b) { return b.id !== data; });
     this.setBookmarks(bookmarks);
 };
-
-
-
-

htdocs/lib/Demodulator.js

@@ -157,18 +157,15 @@ Envelope.prototype.drag_move = function(x) {
         //when any other part of the envelope is dragged, the offset frequency is changed (whole passband also moves with it)
         new_value = this.drag_origin.offset_frequency + freq_change;
         if (new_value > bandwidth / 2 || new_value < -bandwidth / 2) return true; //we don't allow tuning above Nyquist frequency :-)
-        this.demodulator.offset_frequency = new_value;
+        this.demodulator.set_offset_frequency(new_value);
     }
     //now do the actual modifications:
-    mkenvelopes(this.visible_range);
+    //mkenvelopes(this.visible_range);
-    this.demodulator.set();
+    //this.demodulator.set();
-    //will have to change this when changing to multi-demodulator mode:
-    tunedFrequencyDisplay.setFrequency(center_freq + this.demodulator.offset_frequency);
     return true;
 };
 
 Envelope.prototype.drag_end = function(){
-    demodulator_buttons_update();
     var to_return = this.dragged_range !== Demodulator.draggable_ranges.none; //this part is required for cliking anywhere on the scale to set offset
     this.dragged_range = Demodulator.draggable_ranges.none;
     return to_return;
@@ -194,6 +191,9 @@ function Demodulator(offset_frequency, modulation) {
         this.low_cut = mode.bandpass.low_cut;
         this.high_cut = mode.bandpass.high_cut;
     }
+    this.listeners = {
+        "frequencychange": []
+    };
 }
 
 //ranges on filter envelope that can be dragged:
@@ -216,12 +216,27 @@ Demodulator.get_next_color = function() {
 
 
 
+Demodulator.prototype.on = function(event, handler) {
+    this.listeners[event].push(handler);
+};
+
+Demodulator.prototype.emit = function(event, params) {
+    this.listeners[event].forEach(function(fn) {
+        fn(params);
+    });
+};
+
 Demodulator.prototype.set_offset_frequency = function(to_what) {
     if (to_what > bandwidth / 2 || to_what < -bandwidth / 2) return;
-    this.offset_frequency = Math.round(to_what);
+    to_what = Math.round(to_what);
+    if (this.offset_frequency === to_what) {
+        return;
+    }
+    this.offset_frequency = to_what;
     this.set();
+    this.emit("frequencychange", to_what);
     mkenvelopes(get_visible_freq_range());
-    tunedFrequencyDisplay.setFrequency(center_freq + to_what);
+    //tunedFrequencyDisplay.setFrequency(center_freq + to_what);
     updateHash();
 };
 
@@ -300,11 +315,21 @@ Demodulator.prototype.getBandpass = function() {
 };
 
 Demodulator.prototype.set_secondary_demod = function(secondary_demod) {
+    if (this.secondary_demod === secondary_demod) {
+        return;
+    }
     this.secondary_demod = secondary_demod;
     this.set();
 };
 
+Demodulator.prototype.get_secondary_demod = function() {
+    return this.secondary_demod;
+};
+
 Demodulator.prototype.set_secondary_offset_freq = function(secondary_offset) {
+    if (this.secondary_offset_freq === secondary_offset) {
+        return;
+    }
     this.secondary_offset_freq = secondary_offset;
     this.set();
 };

htdocs/lib/DemodulatorPanel.js

@@ -0,0 +1,158 @@
+function DemodulatorPanel(el) {
+    var self = this;
+    self.el = el;
+    self.demodulator = null;
+
+    var displayEl = el.find('.webrx-actual-freq')
+    this.tuneableFrequencyDisplay = displayEl.tuneableFrequencyDisplay();
+    displayEl.on('frequencychange', function(event, freq) {
+        self.getDemodulator().set_offset_frequency(freq - center_freq);
+    });
+
+    Modes.registerModePanel(this);
+    el.on('click', '.openwebrx-demodulator-button[data-modulation]', function() {
+        self.setMode($(this).data('modulation'));
+    });
+    el.on('change', '.openwebrx-secondary-demod-listbox', function() {
+        self.setDigiMode($(this).val());
+    });
+    // TODO: disable digimodes
+};
+
+DemodulatorPanel.prototype.render = function() {
+    var available = Modes.getModes().filter(function(m){ return m.isAvailable(); });
+    var normalModes = available.filter(function(m){ return m.type === 'analog'; });
+    var digiModes = available.filter(function(m){ return m.type === 'digimode'; });
+
+    var html = []
+
+    var buttons = normalModes.map(function(m){
+        return $(
+            '<div ' +
+                'class="openwebrx-button openwebrx-demodulator-button" ' +
+                'data-modulation="' + m.modulation + '" ' +
+                'id="openwebrx-button-' + m.modulation + '" r' +
+            '>' + m.name + '</div>'
+        );
+    });
+
+    var index = 0;
+    var arrayLength = buttons.length;
+    var chunks = [];
+
+    for (index = 0; index < arrayLength; index += 5) {
+        chunks.push(buttons.slice(index, index + 5));
+    }
+
+    html.push.apply(html, chunks.map(function(chunk){
+        $line = $('<div class="openwebrx-panel-line openwebrx-panel-flex-line"></div>');
+        $line.append.apply($line, chunk);
+        return $line
+    }));
+
+    html.push($(
+        '<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>' +
+            '<select class="openwebrx-secondary-demod-listbox">' +
+                '<option value="none"></option>' +
+                digiModes.map(function(m){
+                    return '<option value="' + m.modulation + '">' + m.name + '</option>';
+                }).join('') +
+            '</select>' +
+        '</div>'
+    ));
+
+    this.el.find(".openwebrx-modes").html(html);
+};
+
+DemodulatorPanel.prototype.setMode = function(mode) {
+    var offset_frequency = 0;
+    if (this.demodulator) {
+        if (this.demodulator.get_modulation() === mode) {
+            return;
+        }
+        offset_frequency = this.demodulator.get_offset_frequency();
+        this.demodulator.stop();
+    }
+    this.demodulator = new Demodulator(offset_frequency, mode);
+    var self = this;
+    this.demodulator.on("frequencychange", function(freq) {
+        self.tuneableFrequencyDisplay.setFrequency(center_freq + freq);
+    });
+    this.demodulator.start();
+    this.updateButtons();
+};
+
+DemodulatorPanel.prototype.setDigiMode = function(modulation) {
+    var mode = Modes.findByModulation(modulation);
+    if (!mode) {
+        return;
+    }
+    if (!mode.isAvailable()) {
+        divlog('Digital mode "' + mode.name + '" not supported. Please check requirements', true);
+        return;
+    }
+    this.setMode(mode.underlying[0]);
+    this.getDemodulator().set_secondary_demod(modulation);
+    if (mode.bandpass) {
+        this.getDemodulator().setBandpass(mode.bandpass);
+    }
+    $('#openwebrx-panel-digimodes').attr('data-mode', modulation);
+    toggle_panel("openwebrx-panel-digimodes", true);
+    toggle_panel("openwebrx-panel-wsjt-message", ['ft8', 'wspr', 'jt65', 'jt9', 'ft4'].indexOf(modulation) >= 0);
+    toggle_panel("openwebrx-panel-js8-message", modulation == "js8");
+    toggle_panel("openwebrx-panel-packet-message", modulation === "packet");
+    toggle_panel("openwebrx-panel-pocsag-message", modulation === "pocsag");
+    updateHash();
+};
+
+DemodulatorPanel.prototype.getDemodulator = function() {
+    return this.demodulator;
+};
+
+DemodulatorPanel.prototype.startDemodulator = function() {
+    var params = $.extend(this.initialParams || {}, validateHash());
+    this._apply(params);
+};
+
+DemodulatorPanel.prototype._apply = function(params) {
+    this.setMode(params.mod);
+    this.getDemodulator().set_offset_frequency(params.offset_frequency);
+    this.updateButtons();
+};
+
+DemodulatorPanel.prototype.setInitialParams = function(params) {
+    this.initialParams = params;
+};
+
+DemodulatorPanel.prototype.setHashParams = function(params) {
+    this._apply(params);
+};
+
+DemodulatorPanel.prototype.updateButtons = function() {
+    var $buttons = this.el.find(".openwebrx-demodulator-button");
+    $buttons.removeClass("highlighted").removeClass('disabled');
+    var demod = this.getDemodulator()
+    if (!demod) return;
+    var mod = demod.get_modulation();
+    this.el.find('[data-modulation=' + mod + ']').addClass("highlighted");
+    var secondary_demod = this.getDemodulator().get_secondary_demod()
+    if (secondary_demod) {
+        this.el.find("#openwebrx-button-dig").addClass("highlighted");
+        this.el.find('#openwebrx-secondary-demod-listbox').val(secondary_demod);
+        var mode = Modes.findByModulation(secondary_demod);
+        if (mode) {
+            var active = mode.underlying.map(function(u){ return 'openwebrx-button-' + u; });
+            $buttons.filter(function(){
+                return this.id !== "openwebrx-button-dig" && active.indexOf(this.id) < 0;
+            }).addClass('disabled');
+        }
+    }
+}
+
+$.fn.demodulatorPanel = function(){
+    if (!this.data('panel')) {
+        this.data('panel', new DemodulatorPanel(this));
+    };
+    return this.data('panel');
+};

htdocs/lib/FrequencyDisplay.js

@@ -50,7 +50,6 @@ TuneableFrequencyDisplay.prototype.setupElements = function() {
 
 TuneableFrequencyDisplay.prototype.setupEvents = function() {
     var me = this;
-    me.listeners = [];
 
     me.element.on('wheel', function(e){
         e.preventDefault();
@@ -63,17 +62,13 @@ TuneableFrequencyDisplay.prototype.setupEvents = function() {
         if (e.originalEvent.deltaY > 0) delta *= -1;
         var newFrequency = me.frequency + delta;
 
-        me.listeners.forEach(function(l) {
+        me.element.trigger('frequencychange', newFrequency);
-            l(newFrequency);
-        });
     });
 
     var submit = function(){
         var freq = parseInt(me.input.val());
         if (!isNaN(freq)) {
-            me.listeners.forEach(function(l) {
+            me.element.trigger('frequencychange', freq);
-                l(freq);
-            });
         }
         me.input.hide();
         me.displayContainer.show();
@@ -96,6 +91,16 @@ TuneableFrequencyDisplay.prototype.setupEvents = function() {
     });
 };
 
-TuneableFrequencyDisplay.prototype.onFrequencyChange = function(listener){
+$.fn.frequencyDisplay = function() {
-    this.listeners.push(listener);
+    if (!this.data('frequencyDisplay')) {
-};
+        this.data('frequencyDisplay', new FrequencyDisplay(this));
+    }
+    return this.data('frequencyDisplay');
+}
+
+$.fn.tuneableFrequencyDisplay = function() {
+    if (!this.data('frequencyDisplay')) {
+        this.data('frequencyDisplay', new TuneableFrequencyDisplay(this));
+    }
+    return this.data('frequencyDisplay');
+}

htdocs/lib/Modes.js

@@ -1,61 +1,33 @@
 var Modes = {
     modes: [],
     features: {},
+    panels: [],
     setModes:function(json){
         this.modes = json.map(function(m){ return new Mode(m); });
-        this.updateModePanel();
+        this.updatePanels();
+    },
+    getModes:function(){
+        return this.modes;
     },
     setFeatures:function(features){
         this.features = features;
-        this.updateModePanel();
+        this.updatePanels();
     },
     findByModulation:function(modulation){
         matches = this.modes.filter(function(m) { return m.modulation === modulation; });
         if (matches.length) return matches[0]
     },
-    updateModePanel:function() {
+    registerModePanel: function(el) {
-        var available = this.modes.filter(function(m){ return m.isAvailable(); });
+        this.panels.push(el);
-        var normalModes = available.filter(function(m){ return m.type === 'analog'; });
+    },
-        var digiModes = available.filter(function(m){ return m.type === 'digimode'; });
+    updatePanels: function() {
-
+        var init_complete = this.modes && this.features;
-        var html = []
+        this.panels.forEach(function(p) {
-
+            p.render();
-        var buttons = normalModes.map(function(m){
+            if (init_complete) {
-            return $(
+                p.startDemodulator();
-                '<div class="openwebrx-button openwebrx-demodulator-button"' +
+            }
-                'id="openwebrx-button-' + m.modulation + '"' +
-                'onclick="demodulator_analog_replace(\'' + m.modulation + '\');">' +
-                m.name + '</div>'
-            );
         });
-
-        var index = 0;
-        var arrayLength = buttons.length;
-        var chunks = [];
-
-        for (index = 0; index < arrayLength; index += 5) {
-            chunks.push(buttons.slice(index, index + 5));
-        }
-
-        html.push.apply(html, chunks.map(function(chunk){
-            $line = $('<div class="openwebrx-panel-line openwebrx-panel-flex-line"></div>');
-            $line.append.apply($line, chunk);
-            return $line
-        }));
-
-        html.push($(
-            '<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>' +
-                '<select id="openwebrx-secondary-demod-listbox" onchange="secondary_demod_listbox_changed();">' +
-                    '<option value="none"></option>' +
-                    digiModes.map(function(m){
-                        return '<option value="' + m.modulation + '">' + m.name + '</option>';
-                    }).join('') +
-                '</select>' +
-            '</div>'
-        ));
-
-        $("#openwebrx-panel-receiver").find(".openwebrx-modes").html(html);
     }
 };
 
@@ -78,4 +50,4 @@ Mode.prototype.isAvailable = function(){
     }).reduce(function(a, b){
         return a && b;
     }, true);
-}
+};

htdocs/openwebrx.js

@@ -142,7 +142,8 @@ function setSquelchToAuto() {
 
 function updateSquelch() {
     var sliderValue = parseInt($("#openwebrx-panel-squelch").val());
-    if (demodulators[0]) demodulators[0].setSquelch(sliderValue);
+    var demod = $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator();
+    if (demod) demod.setSquelch(sliderValue);
 }
 
 var waterfall_min_level;
@@ -236,11 +237,17 @@ function typeInAnimation(element, timeout, what, onFinish) {
 // ================  DEMODULATOR ROUTINES  ================
 // ========================================================
 
-demodulators = [];
+function getDemodulators() {
-
+    return [
+        $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator()
+    ].filter(function(d) {
+        return !!d;
+    });
+};
 
 function mkenvelopes(visible_range) //called from mkscale
 {
+    var demodulators = getDemodulators();
     scale_ctx.clearRect(0, 0, scale_ctx.canvas.width, 22); //clear the upper part of the canvas (where filter envelopes reside)
     for (var i = 0; i < demodulators.length; i++) {
         demodulators[i].envelope.draw(visible_range);
@@ -251,40 +258,6 @@ function mkenvelopes(visible_range) //called from mkscale
     }
 }
 
-function demodulator_remove(which) {
-    demodulators[which].stop();
-    demodulators.splice(which, 1);
-}
-
-function demodulator_add(what) {
-    demodulators.push(what);
-    mkenvelopes(get_visible_freq_range());
-}
-
-var last_analog_demodulator_subtype = 'nfm';
-var 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();
-        secondary_demod_listbox_update();
-    }
-    if (!demodulators || !demodulators[0] || demodulators[0].get_modulation() !== subtype) {
-        last_analog_demodulator_subtype = subtype;
-        var temp_offset = 0;
-        if (demodulators.length) {
-            temp_offset = demodulators[0].get_offset_frequency();
-            demodulator_remove(0);
-        }
-        var demod = new Demodulator(temp_offset, subtype);
-        demod.start();
-        demodulator_add(demod);
-    }
-    demodulator_buttons_update();
-    update_digitalvoice_panels("openwebrx-panel-metadata-" + subtype);
-    updateHash();
-}
-
 function waterfallWidth() {
     return $('body').width();
 }
@@ -296,11 +269,8 @@ function waterfallWidth() {
 
 var scale_ctx;
 var scale_canvas;
-var tunedFrequencyDisplay;
-var mouseFrequencyDisplay;
 
 function scale_setup() {
-    tunedFrequencyDisplay.setFrequency(canvas_get_frequency(window.innerWidth / 2));
     scale_canvas = e("openwebrx-scale-canvas");
     scale_ctx = scale_canvas.getContext("2d");
     scale_canvas.addEventListener("mousedown", scale_canvas_mousedown, false);
@@ -336,6 +306,7 @@ function scale_offset_freq_from_px(x, visible_range) {
 function scale_canvas_mousemove(evt) {
     var event_handled = false;
     var i;
+    var demodulators = getDemodulators();
     if (scale_canvas_drag_params.mouse_down && !scale_canvas_drag_params.drag && Math.abs(evt.pageX - scale_canvas_drag_params.start_x) > canvas_drag_min_delta)
     //we can use the main drag_min_delta thing of the main canvas
     {
@@ -354,7 +325,7 @@ function scale_canvas_mousemove(evt) {
 
 function frequency_container_mousemove(evt) {
     var frequency = center_freq + scale_offset_freq_from_px(evt.pageX);
-    mouseFrequencyDisplay.setFrequency(frequency);
+    $('.webrx-mouse-freq').frequencyDisplay().setFrequency(frequency);
 }
 
 function scale_canvas_end_drag(x) {
@@ -362,6 +333,7 @@ function scale_canvas_end_drag(x) {
     scale_canvas_drag_params.drag = false;
     scale_canvas_drag_params.mouse_down = false;
     var event_handled = false;
+    var demodulators = getDemodulators();
     for (var i = 0; i < demodulators.length; i++) event_handled |= demodulators[i].envelope.drag_end();
     if (!event_handled) demodulators[0].set_offset_frequency(scale_offset_freq_from_px(x));
 }
@@ -631,7 +603,7 @@ function canvas_mousemove(evt) {
             bookmarks.position();
         }
     } else {
-        mouseFrequencyDisplay.setFrequency(canvas_get_frequency(relativeX));
+        $('.webrx-mouse-freq').frequencyDisplay().setFrequency(canvas_get_frequency(relativeX));
     }
 }
 
@@ -644,7 +616,7 @@ function canvas_mouseup(evt) {
     var relativeX = get_relative_x(evt);
 
     if (!canvas_drag) {
-        demodulators[0].set_offset_frequency(canvas_get_freq_offset(relativeX));
+        $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().set_offset_frequency(canvas_get_freq_offset(relativeX));
     }
     else {
         canvas_end_drag();
@@ -727,7 +699,7 @@ function zoom_set(level) {
     level = parseInt(level);
     zoom_level = level;
     //zoom_center_rel=canvas_get_freq_offset(-canvases[0].offsetLeft+waterfallWidth()/2); //zoom to screen center instead of demod envelope
-    zoom_center_rel = demodulators[0].get_offset_frequency();
+    zoom_center_rel = $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().get_offset_frequency();
     zoom_center_where = 0.5 + (zoom_center_rel / bandwidth); //this is a kind of hack
     resize_canvases(true);
     mkscale();
@@ -787,7 +759,7 @@ function on_ws_recv(evt) {
                         updateSquelch();
 
                         waterfall_init();
-                        synchronize_demodulator_init({initialParams: initial_demodulator_params});
+                        $('#openwebrx-panel-receiver').demodulatorPanel().setInitialParams(initial_demodulator_params);
                         bookmarks.loadLocalBookmarks();
 
                         waterfall_clear();
@@ -832,7 +804,6 @@ function on_ws_recv(evt) {
                         break;
                     case "features":
                         Modes.setFeatures(json['value']);
-                        synchronize_demodulator_init({features: true});
                         break;
                     case "metadata":
                         update_metadata(json['value']);
@@ -884,8 +855,6 @@ function on_ws_recv(evt) {
                         break;
                     case 'modes':
                         Modes.setModes(json['value']);
-                        synchronize_demodulator_init({modes: true});
-                        demodulator_buttons_update();
                         break;
                     default:
                         console.warn('received message of unknown type: ' + json['type']);
@@ -1241,12 +1210,12 @@ function validateHash() {
 }
 
 function updateHash() {
-    var demod = demodulators[0];
+    var demod = $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator();
     if (!demod) return;
     window.location.hash = $.map({
         freq: demod.get_offset_frequency() + center_freq,
         mod: demod.get_modulation(),
-        secondary_mod: secondary_demod
+        secondary_mod: demod.get_secondary_demod()
     }, function(value, key){
         if (!value) return undefined;
         return key + '=' + value;
@@ -1259,7 +1228,7 @@ function onAudioStart(success, apiType){
     divlog('Web Audio API succesfully initialized, using ' + apiType  + ' API, sample rate: ' + audioEngine.getSampleRate() + " Hz");
 
     // canvas_container is set after waterfall_init() has been called. we cannot initialize before.
-    if (canvas_container) synchronize_demodulator_init();
+    //if (canvas_container) synchronize_demodulator_init();
 
     //hide log panel in a second (if user has not hidden it yet)
     window.setTimeout(function () {
@@ -1270,30 +1239,6 @@ function onAudioStart(success, apiType){
     updateVolume();
 }
 
-var sync_params = {}
-
-function synchronize_demodulator_init(params) {
-    sync_params = $.extend(sync_params, params || {});
-    if (sync_params.initialParams && sync_params.modes && sync_params.features) {
-        initialize_demodulator(sync_params.initialParams);
-        delete sync_params.initialParams;
-    }
-}
-
-function initialize_demodulator(initialParams) {
-    mkscale();
-    var params = $.extend(initialParams || {}, validateHash());
-    if (params.secondary_mod) {
-        demodulator_digital_replace(params.secondary_mod);
-    } else if (params.mod) {
-        demodulator_analog_replace(params.mod);
-    }
-    if (params.offset_frequency) {
-        demodulators[0].set_offset_frequency(params.offset_frequency);
-    }
-    demodulators[0].start()
-}
-
 var reconnect_timeout = false;
 
 function on_ws_closed() {
@@ -1525,17 +1470,13 @@ function openwebrx_init() {
     secondary_demod_init();
     digimodes_init();
     initPanels();
-    tunedFrequencyDisplay = new TuneableFrequencyDisplay($('#webrx-actual-freq'));
+    $('#openwebrx-panel-receiver').demodulatorPanel();
-    tunedFrequencyDisplay.onFrequencyChange(function(f) {
-        demodulators[0].set_offset_frequency(f - center_freq);
-    });
-    mouseFrequencyDisplay = new FrequencyDisplay($('#webrx-mouse-freq'));
     window.addEventListener("resize", openwebrx_resize);
     init_header();
     bookmarks = new BookmarkBar();
     initSliders();
     window.addEventListener('hashchange', function() {
-        synchronize_demodulator_init();
+        $('#openwebrx-panel-receiver').demodulatorPanel().setHashParams(validateHash());
     });
 }
 
@@ -1567,7 +1508,7 @@ function update_dmr_timeslot_filtering() {
     }).toArray().reduce(function (acc, v) {
         return acc | v;
     }, 0);
-    demodulators[0].setDmrFilter(filter);
+    $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().setDmrFilter(filter);
 }
 
 function playButtonClick() {
@@ -1659,29 +1600,6 @@ function initPanels() {
     });
 }
 
-function demodulator_buttons_update() {
-    var $buttons = $(".openwebrx-demodulator-button");
-    $buttons.removeClass("highlighted").removeClass('disabled');
-    if (!demodulators.length) return;
-    var mod = demodulators[0].get_modulation();
-    $("#openwebrx-button-" + mod).addClass("highlighted");
-    if (secondary_demod) {
-        $("#openwebrx-button-dig").addClass("highlighted");
-        $('#openwebrx-secondary-demod-listbox').val(secondary_demod);
-        var mode = Modes.findByModulation(secondary_demod);
-        if (mode) {
-            var active = mode.underlying.map(function(u){ return 'openwebrx-button-' + u; });
-            $buttons.filter(function(){
-                return this.id !== "openwebrx-button-dig" && active.indexOf(this.id) < 0;
-            }).addClass('disabled');
-        }
-    }
-}
-
-function demodulator_analog_replace_last() {
-    demodulator_analog_replace(last_analog_demodulator_subtype);
-}
-
 /*
   _____  _       _                     _
  |  __ \(_)     (_)                   | |
@@ -1693,7 +1611,6 @@ function demodulator_analog_replace_last() {
            |___/
 */
 
-var secondary_demod = false;
 var secondary_demod_fft_offset_db = 30; //need to calculate that later
 var secondary_demod_canvases_initialized = false;
 var secondary_demod_listbox_updating = false;
@@ -1710,36 +1627,6 @@ var secondary_demod_current_canvas_context;
 var secondary_demod_current_canvas_index;
 var secondary_demod_canvases;
 
-function demodulator_digital_replace_last() {
-    demodulator_digital_replace(last_digital_demodulator_subtype);
-    secondary_demod_listbox_update();
-}
-
-function demodulator_digital_replace(subtype) {
-    if (secondary_demod === subtype) return;
-    var mode = Modes.findByModulation(subtype);
-    if (!mode) {
-        return;
-    }
-    if (!mode.isAvailable()) {
-        divlog('Digital mode "' + mode.name + '" not supported. Please check requirements', true);
-        return;
-    }
-    demodulator_analog_replace(mode.underlying[0], true);
-    secondary_demod_start(subtype);
-    if (mode.bandpass) {
-        demodulators[0].setBandpass(mode.bandpass);
-    }
-    demodulator_buttons_update();
-    $('#openwebrx-panel-digimodes').attr('data-mode', subtype);
-    toggle_panel("openwebrx-panel-digimodes", true);
-    toggle_panel("openwebrx-panel-wsjt-message", ['ft8', 'wspr', 'jt65', 'jt9', 'ft4'].indexOf(subtype) >= 0);
-    toggle_panel("openwebrx-panel-js8-message", subtype == "js8");
-    toggle_panel("openwebrx-panel-packet-message", subtype === "packet");
-    toggle_panel("openwebrx-panel-pocsag-message", subtype === "pocsag");
-    updateHash();
-}
-
 function secondary_demod_create_canvas() {
     var new_canvas = document.createElement("canvas");
     new_canvas.width = secondary_fft_size;
@@ -1792,12 +1679,12 @@ function secondary_demod_init() {
     init_digital_removal_timer();
 }
 
+// TODO
 function secondary_demod_start(subtype) {
     secondary_demod_canvases_initialized = false;
-    demodulators[0].set_secondary_demod(subtype);
-    secondary_demod = subtype;
 }
 
+// TODO
 function secondary_demod_stop() {
     if (demodulators[0]) {
         demodulators[0].set_secondary_demod(false);
@@ -1834,7 +1721,6 @@ function secondary_demod_close_window() {
 }
 
 function secondary_demod_waterfall_add(data) {
-    if (!secondary_demod) return;
     var w = secondary_fft_size;
 
     //Add line to waterfall image
@@ -1854,22 +1740,6 @@ function secondary_demod_waterfall_add(data) {
     if (secondary_demod_current_canvas_actual_line < 0) secondary_demod_swap_canvases();
 }
 
-function secondary_demod_listbox_changed() {
-    if (secondary_demod_listbox_updating) return;
-    var sdm = $("#openwebrx-secondary-demod-listbox")[0].value;
-    if (sdm === "none") {
-        demodulator_analog_replace_last();
-    } else {
-        demodulator_digital_replace(sdm);
-    }
-}
-
-function secondary_demod_listbox_update() {
-    secondary_demod_listbox_updating = true;
-    $("#openwebrx-secondary-demod-listbox").val((secondary_demod) ? secondary_demod : "none");
-    secondary_demod_listbox_updating = false;
-}
-
 function secondary_demod_update_marker() {
     var width = Math.max((secondary_bw / (if_samp_rate / 2)) * secondary_demod_canvas_width, 5);
     var center_at = (secondary_demod_channel_freq / (if_samp_rate / 2)) * secondary_demod_canvas_width + secondary_demod_canvas_left;
@@ -1877,6 +1747,7 @@ function secondary_demod_update_marker() {
     $("#openwebrx-digimode-select-channel").width(width).css("left", left + "px")
 }
 
+// TODO
 function secondary_demod_update_channel_freq_from_event(evt) {
     if (typeof evt !== "undefined") {
         var relativeX = (evt.offsetX) ? evt.offsetX : evt.layerX;
@@ -1886,7 +1757,7 @@ function secondary_demod_update_channel_freq_from_event(evt) {
     if (!secondary_demod_waiting_for_set) {
         secondary_demod_waiting_for_set = true;
         window.setTimeout(function () {
-                demodulators[0].set_secondary_offset_freq(Math.floor(secondary_demod_channel_freq));
+                $('#openwebrx-panel-receiver').demodulatorPanel().getDemodulator().set_secondary_offset_freq(Math.floor(secondary_demod_channel_freq));
                 secondary_demod_waiting_for_set = false;
             },
             50
@@ -1919,7 +1790,7 @@ function secondary_demod_canvas_container_mouseup(evt) {
 
 
 function secondary_demod_waterfall_set_zoom(low_cut, high_cut) {
-    if (!secondary_demod || !secondary_demod_canvases_initialized) return;
+    if (!secondary_demod_canvases_initialized) return;
     if (low_cut < 0 && high_cut < 0) {
         var hctmp = high_cut;
         var lctmp = low_cut;