kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-02-26 22:13:53 +01:00
Code Issues Activity

bugfixes, ui changes, rds reset feature

Browse Source
This commit is contained in:
NoobishSVK
2024-01-29 23:32:00 +01:00
parent 6e25e0b1dd
commit 525ae519d7
7 changed files with 105 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
index.js
View File

@@ -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) => {

22
web/css/breadcrumbs.css
View File

@@ -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;
}
}

1
web/css/buttons.css
View File

@@ -7,6 +7,7 @@ button {
background-color: var(--color-4);
cursor: pointer;
font-family: inherit;
color: var(--color-main);
}
button:hover {

16
web/css/helpers.css
View File

@@ -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;
}
}

23
web/index.html
View File

@@ -49,8 +49,13 @@
<div class="flex-container">
<div class="panel-90 bg-none">
<div class="flex-container">
<div class="panel-75 hover-brighten flex-center" id="ps-container" style="height: 90px;">
<span class="text-big" id="data-ps"></span>
<div class="panel-75 flex-container no-bg">
<div class="panel-10 no-bg h-100 m-0 m-right-20 hide-phone" style="width: 100px;">
<button class="playbutton"><i class="fa-solid fa-play fa-lg"></i></button>
</div>
<div class="panel-100 m-0 hover-brighten flex-center" id="ps-container" style="height: 90px;">
<span class="text-big" id="data-ps"></span>
</div>
</div>
<div id="flags-container-desktop" class="panel-33">
@@ -90,22 +95,22 @@
</div>
</div>
<div class="flex-container">
<div class="panel-33 no-bg" style="height: 48px;">
<div class="flex-container flex-phone flex-phone-column">
<div class="panel-33 no-bg filter-controls" style="height: 48px;">
<div class="flex-container flex-phone h-100">
<div class="panel-75 no-bg h-100 m-0">
<button id="playbutton"><i class="fa-solid fa-play"></i></button>
<div class="panel-75 no-bg h-100 m-0 hide-desktop m-right-20 button-play-mobile" style="margin-right: 20px;">
<button class="playbutton"><i class="fa-solid fa-play"></i></button>
</div>
<div class="panel-33 no-bg h-100 m-0 m-left-20">
<div class="panel-100 no-bg h-100 m-0 button-eq">
<button id="data-eq" style="border-radius: 30px 0px 0px 30px;"><span class="text-bold">EQ</span><br><span class="text-smaller">(RF+)</span></button>
</div>
<div class="panel-33 no-bg h-100 m-0">
<div class="panel-100 no-bg h-100 m-0 button-ims">
<button id="data-ims" style="border-radius: 0px 30px 30px 0px;"><span class="text-bold">iMS</span><br><span class="text-smaller">(IF+)</span></button>
</div>
</div>
</div>
<div class="panel-33 flex-container flex-phone" id="tune-buttons" style="opacity: 1;">
<div class="panel-33 flex-container flex-phone" id="tune-buttons">
<button id="freq-down"><i class="fa-solid fa-chevron-left"></i></button>
<input type="text" id="commandinput" inputmode="numeric" placeholder="Frequency">
<button id="freq-up"><i class="fa-solid fa-chevron-right"></i></button>

13
web/js/3las/main.js
View File

@@ -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) {

48
web/js/main.js
View File

@@ -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 + '<br>');
};
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));
}