diff --git a/index.js b/index.js index ad3281e..27f3f7e 100644 --- a/index.js +++ b/index.js @@ -67,9 +67,14 @@ wss.on('connection', (ws, request) => { }); ws.on('message', (message) => { - logDebug('Received message from client:', message.toString()); + logDebug('Command received from \x1b[90m' + request.connection.remoteAddress + '\x1b[0m:', message.toString()); command = message.toString(); - client.write(command + "\n"); + + if(command.startsWith('X')) { + logWarn('Remote tuner shutdown attempted by \x1b[90m' + request.connection.remoteAddress + '\x1b[0m. You may consider blocking this user.'); + } else { + client.write(command + "\n"); + } }); ws.on('close', (code, reason) => { diff --git a/web/css/breadcrumbs.css b/web/css/breadcrumbs.css index 9ffe10e..97f81fe 100644 --- a/web/css/breadcrumbs.css +++ b/web/css/breadcrumbs.css @@ -59,7 +59,7 @@ h3 { display: none; } -@media (max-width: 960px) { +@media (max-width: 768px) { canvas, #flags-container { display: none; } @@ -80,7 +80,7 @@ h3 { padding: 0 !important; } #data-ps { - font-size: 60px; + font-size: 54px; } #data-frequency { font-size: 72px; @@ -109,6 +109,24 @@ h3 { } #tune-buttons { height: 64px; + order: 1; + } + .filter-controls { + order: 2; + } + .button-play-mobile { + order: 2; + margin: 0 !important; + border-radius: 0; + } + .button-play-mobile .playbutton { + border-radius: 0; + } + .button-eq { + order: 1; + } + .button-ims { + order: 3; } } diff --git a/web/css/buttons.css b/web/css/buttons.css index cd821f3..f7bd5d5 100644 --- a/web/css/buttons.css +++ b/web/css/buttons.css @@ -7,6 +7,7 @@ button { background-color: var(--color-4); cursor: pointer; font-family: inherit; + color: var(--color-main); } button:hover { diff --git a/web/css/helpers.css b/web/css/helpers.css index af35ac3..a47d467 100644 --- a/web/css/helpers.css +++ b/web/css/helpers.css @@ -42,6 +42,10 @@ margin-left: 20px; } +.m-right-20 { + margin-right: 20px; +} + .h-100 { height: 100%; } @@ -154,7 +158,19 @@ .flex-phone { display: flex; } + .flex-phone-column { + flex-flow: column; + } .hide-phone { display: none; } + .m-0 { + margin: auto; + } +} + +@media only screen and (min-width: 769px) { + .hide-desktop { + display: none; + } } \ No newline at end of file diff --git a/web/index.html b/web/index.html index 16fda2c..2cef1c5 100644 --- a/web/index.html +++ b/web/index.html @@ -49,8 +49,13 @@
-
- +
+
+ +
+
+ +
@@ -90,22 +95,22 @@
-
-
+
+
-
- +
+
-
+
-
+
-
+
diff --git a/web/js/3las/main.js b/web/js/3las/main.js index a20e063..16ccf05 100644 --- a/web/js/3las/main.js +++ b/web/js/3las/main.js @@ -22,7 +22,7 @@ function Init(_ev) { return; } Stream.ConnectivityCallback = OnConnectivityCallback; - document.getElementById("playbutton").onclick = OnPlayButtonClick; + $(".playbutton").on('click', OnPlayButtonClick); $("#volumeSlider").on("change", updateVolume); } @@ -36,10 +36,17 @@ function OnPlayButtonClick(_ev) { try { if (Stream.ConnectivityFlag) { Stream.Stop(); - $('#playbutton').find('.fa-solid').removeClass('fa-pause').addClass('fa-play'); + $('.playbutton').find('.fa-solid').removeClass('fa-pause').addClass('fa-play'); } else { Stream.Start(); - $('#playbutton').find('.fa-solid').removeClass('fa-play').addClass('fa-pause'); + $('.playbutton').find('.fa-solid').removeClass('fa-play').addClass('fa-stop'); + $('.playbutton').addClass('bg-gray'); + $('.playbutton').prop('disabled', true); + + setTimeout(function() { + $('.playbutton').removeClass('bg-gray'); + $('.playbutton').prop('disabled', false); + }, 3000); } } catch (_ex) { diff --git a/web/js/main.js b/web/js/main.js index 007f56c..e8e7500 100644 --- a/web/js/main.js +++ b/web/js/main.js @@ -43,8 +43,9 @@ $(document).ready(function() { // Modify the WebSocket onmessage callback socket.onmessage = (event) => { parsedData = JSON.parse(event.data); - + updatePanels(parsedData); + // Push the new signal data to the array data.push(parsedData.signal); const actualLowestValue = Math.min(...data); @@ -56,17 +57,27 @@ $(document).ready(function() { // Clear the canvas context.clearRect(0, 0, canvas.width, canvas.height); - // Draw the signal graph with zoom + // Draw the signal graph with smooth shifting context.beginPath(); - - // Start drawing from the rightmost point - const startingIndex = Math.max(0, data.length - maxDataPoints); - context.moveTo(canvas.width - 40 - (data.length - startingIndex) * pointWidth, canvas.height - (data[startingIndex] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue))); - for (let i = startingIndex + 1; i < data.length; i++) { + const startingIndex = Math.max(0, data.length - maxDataPoints); + + for (let i = startingIndex; i < data.length; i++) { const x = canvas.width - (data.length - i) * pointWidth - 40; const y = canvas.height - (data[i] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue)); - context.lineTo(x, y); + + if (i === startingIndex) { + context.moveTo(x, y); + } else { + const prevX = canvas.width - (data.length - i + 1) * pointWidth - 40; + const prevY = canvas.height - (data[i - 1] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue)); + + // Interpolate between the current and previous points + const interpolatedX = (x + prevX) / 2; + const interpolatedY = (y + prevY) / 2; + + context.quadraticCurveTo(prevX, prevY, interpolatedX, interpolatedY); + } } context.strokeStyle = color4; @@ -74,7 +85,7 @@ $(document).ready(function() { context.stroke(); // Draw horizontal lines for lowest, highest, and average values - context.strokeStyle = color2; // Set line color + context.strokeStyle = color2; context.lineWidth = 1; // Draw the lowest value line @@ -101,7 +112,17 @@ $(document).ready(function() { context.fillStyle = color4; context.font = '12px Titillium Web'; - const offset = signalToggle.prop('checked') ? 11.25 : 0; + const signalUnit = localStorage.getItem('signalUnit'); + let offset; + + if (signalUnit === 'dbuv') { + offset = 11.25; + } else if (signalUnit === 'dbm') { + offset = 120; + } else { + offset = 0; + } + context.textAlign = 'right'; context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, 35, lowestY - 14); context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, 35, highestY + 14); @@ -115,8 +136,10 @@ $(document).ready(function() { // Update the data container with the latest data dataContainer.html(event.data + '
'); }; + requestAnimationFrame(updateCanvas); - } + } + signalToggle.on("change", function() { const signalText = localStorage.getItem('signalUnit'); @@ -271,6 +294,9 @@ function checkKey(e) { getCurrentFreq(); if (socket.readyState === WebSocket.OPEN) { + if (e.keyCode == '82') { // RDS Reset (R key) + socket.send("T" + (currentFreq.toFixed(1) * 1000)); + } if (e.keyCode == '38') { socket.send("T" + ((currentFreq + 0.01).toFixed(2) * 1000)); }