get rid of the e() function

htdocs/css/openwebrx.css

@@ -1233,12 +1233,12 @@ img.openwebrx-mirror-img
     height: 15px;
 }
 
-#openwebrx-mute-on .sprite-speaker {
+.openwebrx-mute-button .sprite-speaker {
-    background-position: -117px -38px;
+    background-position: -103px -38px;
 }
 
-#openwebrx-mute-off .sprite-speaker {
+.openwebrx-mute-button.muted .sprite-speaker {
-    background-position: -103px -38px;
+    background-position: -117px -38px;
 }
 
 .sprite-squelch {

htdocs/index.html

@@ -132,7 +132,7 @@
                 </div>
                 <div class="openwebrx-modes openwebrx-panel-line"></div>
                 <div class="openwebrx-panel-line">
-                    <div title="Mute on/off" id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute();"><span class="sprite sprite-speaker openwebrx-sliderbtn-img"></span></div>
+                    <div title="Mute on/off" class="openwebrx-button openwebrx-mute-button" onclick="toggleMute();"><span class="sprite sprite-speaker openwebrx-sliderbtn-img"></span></div>
                     <input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
                     <div title="Auto-adjust waterfall colors (right-click for continuous)" id="openwebrx-waterfall-colors-auto" class="openwebrx-button"><span class="sprite sprite-waterfall-auto openwebrx-sliderbtn-img"></span></div>
                     <input title="Waterfall minimum level" id="openwebrx-waterfall-color-min" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(0);" oninput="updateVolume()">

htdocs/openwebrx.js

@@ -32,26 +32,20 @@ var fft_codec;
 var waterfall_setup_done = 0;
 var secondary_fft_size;
 
-function e(what) {
-    return document.getElementById(what);
-}
-
 function updateVolume() {
-    audioEngine.setVolume(parseFloat(e("openwebrx-panel-volume").value) / 100);
+    audioEngine.setVolume(parseFloat($("#openwebrx-panel-volume").val()) / 100);
 }
 
 function toggleMute() {
-    if (mute) {
+    var $muteButton = $('.openwebrx-mute-button');
-        mute = false;
+    var $volumePanel = $('#openwebrx-panel-volume');
-        e("openwebrx-mute-on").id = "openwebrx-mute-off";
+    if ($muteButton.hasClass('muted')) {
-        e("openwebrx-panel-volume").disabled = false;
+        $muteButton.removeClass('muted');
-        e("openwebrx-panel-volume").value = volumeBeforeMute;
+        $volumePanel.prop('disabled', false).val(volumeBeforeMute);
     } else {
-        mute = true;
+        $muteButton.addClass('muted');
-        e("openwebrx-mute-off").id = "openwebrx-mute-on";
+        volumeBeforeMute = $volumePanel.val();
-        e("openwebrx-panel-volume").disabled = true;
+        $volumePanel.prop('disabled', true).val(0);
-        volumeBeforeMute = e("openwebrx-panel-volume").value;
-        e("openwebrx-panel-volume").value = 0;
     }
 
     updateVolume();
@@ -191,7 +185,7 @@ function setSmeterAbsoluteValue(value) //the value that comes from `csdr squelch
     var highLevel = waterfall_max_level + 20;
     var percent = (logValue - lowLevel) / (highLevel - lowLevel);
     setSmeterRelativeValue(percent);
-    e("openwebrx-smeter-db").innerHTML = logValue.toFixed(1) + " dB";
+    $("#openwebrx-smeter-db").html(logValue.toFixed(1) + " dB");
 }
 
 function typeInAnimation(element, timeout, what, onFinish) {
@@ -244,14 +238,14 @@ var scale_ctx;
 var scale_canvas;
 
 function scale_setup() {
-    scale_canvas = e("openwebrx-scale-canvas");
+    scale_canvas = $("#openwebrx-scale-canvas")[0];
     scale_ctx = scale_canvas.getContext("2d");
     scale_canvas.addEventListener("mousedown", scale_canvas_mousedown, false);
     scale_canvas.addEventListener("mousemove", scale_canvas_mousemove, false);
     scale_canvas.addEventListener("mouseup", scale_canvas_mouseup, false);
     resize_scale();
-    var frequency_container = e("openwebrx-frequency-container");
+    var frequency_container = $("#openwebrx-frequency-container");
-    frequency_container.addEventListener("mousemove", frequency_container_mousemove, false);
+    frequency_container.on("mousemove", frequency_container_mousemove, false);
 }
 
 var scale_canvas_drag_params = {
@@ -784,10 +778,10 @@ function on_ws_recv(evt) {
                         $('#openwebrx-bar-clients').progressbar().setClients(json['value']);
                         break;
                     case "profiles":
-                        var listbox = e("openwebrx-sdr-profiles-listbox");
+                        var listbox = $("#openwebrx-sdr-profiles-listbox");
-                        listbox.innerHTML = json['value'].map(function (profile) {
+                        listbox.html(json['value'].map(function (profile) {
                             return '<option value="' + profile['id'] + '">' + profile['name'] + "</option>";
-                        }).join("");
+                        }).join(""));
                         if (currentprofile) {
                             $('#openwebrx-sdr-profiles-listbox').val(currentprofile);
                         }
@@ -1019,7 +1013,7 @@ function divlog(what, is_error) {
         what = "<span class=\"webrx-error\">" + what + "</span>";
         toggle_panel("openwebrx-panel-log", true); //show panel if any error is present
     }
-    e("openwebrx-debugdiv").innerHTML += what + "<br />";
+    $('#openwebrx-debugdiv')[0].innerHTML += what + "<br />";
     var nano = $('.nano');
     nano.nanoScroller();
     nano.nanoScroller({scroll: 'bottom'});
@@ -1145,14 +1139,14 @@ function add_canvas() {
 
 
 function init_canvas_container() {
-    canvas_container = e("webrx-canvas-container");
+    canvas_container = $("#webrx-canvas-container")[0];
     canvas_container.addEventListener("mouseleave", canvas_container_mouseleave, false);
     canvas_container.addEventListener("mousemove", canvas_mousemove, false);
     canvas_container.addEventListener("mouseup", canvas_mouseup, false);
     canvas_container.addEventListener("mousedown", canvas_mousedown, false);
     canvas_container.addEventListener("wheel", canvas_mousewheel, false);
-    var frequency_container = e("openwebrx-frequency-container");
+    var frequency_container = $("#openwebrx-frequency-container");
-    frequency_container.addEventListener("wheel", canvas_mousewheel, false);
+    frequency_container.on("wheel", canvas_mousewheel, false);
     add_canvas();
 }