Merge pull request #24 from bkram/Bkram/enhance-mousewheel-tuning

Allow mouse-wheel tuning in steps of 1 Mhz with CTRL key pressed, 0.01 Mhz with SHIFT key pressed.

web/js/main.js

@@ -16,7 +16,7 @@ const europe_programmes = [
     "Oldies Music", "Folk Music", "Documentary", "Alarm Test"
 ];
 
-$(document).ready(function() {
+$(document).ready(function () {
     var canvas = $('#signal-canvas')[0];
 
     var signalToggle = $("#signal-units-toggle");
@@ -28,7 +28,7 @@ $(document).ready(function() {
     // Start updating the canvas
     initCanvas();
 
-    signalToggle.on("change", function() {
+    signalToggle.on("change", function () {
         const signalText = localStorage.getItem('signalUnit');
 
         if (signalText == 'dbuv') {
@@ -100,14 +100,27 @@ $(document).ready(function() {
 
     document.onkeydown = checkKey;
 
-    $('#freq-container').on('wheel', function(e) {
+    $('#freq-container').on('wheel keypress', function (e) {
+        getCurrentFreq();
         var delta = e.originalEvent.deltaY;
+        var adjustment = 0;
+    
+        if (e.shiftKey) {
+            adjustment = e.altKey ? 1 : 0.01;
+        } else if (e.ctrlKey) {
+            adjustment = 1;
+        } else {
             if (delta > 0) {
                 tuneDown();
             } else {
                 tuneUp();
             }
             return false;
+        }
+    
+        var newFreq = currentFreq + (delta > 0 ? -adjustment : adjustment);
+        socket.send("T" + (Math.round(newFreq * 1000)));
+        return false;
     });
 
     var freqUpButton = $('#freq-up')[0];
@@ -132,7 +145,7 @@ $(document).ready(function() {
     $(rtContainer).on("click", copyRt);
     $(txContainer).on("click", copyTx);
     $(piCodeContainer).on("click", findOnMaps);
-    $(freqContainer).on("click", function() {
+    $(freqContainer).on("click", function () {
         textInput.focus();
     });
 });
@@ -141,14 +154,14 @@ function getInitialSettings() {
     $.ajax({
         url: './static_data',
         dataType: 'json',
-        success: function(data) {
+        success: function (data) {
             // Use the received data (data.qthLatitude, data.qthLongitude) as needed
             localStorage.setItem('qthLatitude', data.qthLatitude);
             localStorage.setItem('qthLongitude', data.qthLongitude);
             localStorage.setItem('audioPort', data.audioPort);
             localStorage.setItem('streamEnabled', data.streamEnabled);
         },
-        error: function(error) {
+        error: function (error) {
             console.error('Error:', error);
         }
     });
@@ -174,7 +187,7 @@ function initCanvas(parsedData) {
 function updateCanvas(parsedData, signalChart) {
     const color2 = getComputedStyle(document.documentElement).getPropertyValue('--color-2').trim();
     const color4 = getComputedStyle(document.documentElement).getPropertyValue('--color-4').trim();
-    const {context, canvas, maxDataPoints, pointWidth} = signalChart;
+    const { context, canvas, maxDataPoints, pointWidth } = signalChart;
 
     while (data.length >= signalChart.maxDataPoints) {
         data.shift();
@@ -187,7 +200,7 @@ function updateCanvas(parsedData, signalChart) {
     zoomAvgValue = (zoomMaxValue - zoomMinValue) / 2 + zoomMinValue;
 
     // Clear the canvas
-    if(context) {
+    if (context) {
         context.clearRect(0, 0, canvas.width, canvas.height);
 
         // Draw the signal graph with smooth shifting
@@ -402,8 +415,8 @@ async function copyPs() {
     var signalUnit = $('#signal-units').text();
 
     try {
-        await copyToClipboard(frequency + " - " + pi + " | " + ps +  " [" + signal + signalDecimal + " " + signalUnit + "]");
+        await copyToClipboard(frequency + " - " + pi + " | " + ps + " [" + signal + signalDecimal + " " + signalUnit + "]");
-    } catch(error) {
+    } catch (error) {
         console.error(error);
     }
 }
@@ -418,8 +431,8 @@ async function copyTx() {
     const stationErp = $('#data-station-erp').text();
 
     try {
-        await copyToClipboard(frequency + " - " + pi + " | " + stationName +  " [" + stationCity + ", " + stationItu + "] - " + stationDistance + " km | " + stationErp + " kW");
+        await copyToClipboard(frequency + " - " + pi + " | " + stationName + " [" + stationCity + ", " + stationItu + "] - " + stationDistance + " km | " + stationErp + " kW");
-    } catch(error) {
+    } catch (error) {
         console.error(error);
     }
 }
@@ -430,7 +443,7 @@ async function copyRt() {
 
     try {
         await copyToClipboard("[0] RT: " + rt0 + "\n[1] RT: " + rt1);
-    } catch(error) {
+    } catch (error) {
         console.error(error);
     }
 }
@@ -439,9 +452,9 @@ function copyToClipboard(textToCopy) {
     // Navigator clipboard api needs a secure context (https)
     if (navigator.clipboard && window.isSecureContext) {
         navigator.clipboard.writeText(textToCopy)
-        .catch(function(err) {
+            .catch(function (err) {
-            console.error('Error:', err);
+                console.error('Error:', err);
-        });
+            });
     } else {
         var textArea = $('<textarea></textarea>');
         textArea.val(textToCopy);
@@ -515,7 +528,7 @@ function updateDataElements(parsedData) {
         : (parsedData.ms === -1
             ? "<span class='opacity-half'>M</span><span class='opacity-half'>S</span>"
             : "<span class='opacity-full'>M</span><span class='opacity-half'>S</span>"
-          )
+        )
     );
     $('.data-pty').html(europe_programmes[parsedData.pty]);
     $('.data-st').html(parsedData.st === false ? "<span class='text-gray'>ST</span>" : "ST");
@@ -524,7 +537,7 @@ function updateDataElements(parsedData) {
     $('.data-flag').html(`<i title="${parsedData.country_name}" class="flag-sm flag-sm-${parsedData.country_iso}"></i>`);
     $('#data-ant input').val($('#data-ant li[data-value="' + parsedData.ant + '"]').text());
 
-    if(parsedData.txInfo.station.length > 1) {
+    if (parsedData.txInfo.station.length > 1) {
         $('#data-station-name').text(decodeURIComponent(parsedData.txInfo.station.replace(/\u009e/g, '\u017E')));
         $('#data-station-erp').text(parsedData.txInfo.erp);
         $('#data-station-city').text(parsedData.txInfo.city);