kuba/fm-dx-webserver
1
0
Fork 0
mirror of https://github.com/KubaPro010/fm-dx-webserver.git synced 2026-07-30 08:49:16 +02:00
Code Issues Activity

serial port support, bugfixes, UI adjustments

Browse Source
This commit is contained in:
NoobishSVK
2024-03-10 22:42:43 +01:00
parent 786aa26674
commit a120355ee5
14 changed files with 618 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/breadcrumbs.css
+4 -1
View File
@@ -212,6 +212,9 @@ label {
text-transform: uppercase;
}
#tuner-wireless {
display: none;
}
@media (max-width: 768px) {
canvas, #flags-container {
display: none;
@@ -340,6 +343,6 @@ label {
height: 225px !important;
}
.chatbutton {
height: 86px !important;
height: 88px !important;
}
}
web/css/buttons.css
+1
View File
@@ -190,6 +190,7 @@ input[type="range"]::-moz-range-thumb {
width: 100%;
border-radius: 25px;
font-weight: bold;
background-color: var(--color-2);
}
.toggleSwitch * {
-webkit-box-sizing: border-box;
web/index.ejs
+1 -1
View File
@@ -119,7 +119,7 @@
<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 hide-desktop m-right-20 button-play-mobile" style="margin-right: 20px;">
<button class="playbutton" aria-label="Play/Stop Button"><i class="fa-solid fa-play"></i></button>
<button class="playbutton" aria-label="Play/Stop"><i class="fa-solid fa-play"></i></button>
</div>
<% if (antennaSwitch) { %>
web/js/confighandler.js
+22 -2
View File
@@ -8,7 +8,6 @@ function submitData() {
var themeSelectedValue = $("#selected-theme").val();
var themeDataValue = $(".option:contains('" + themeSelectedValue + "')").attr('data-value') || 'theme1';
const defaultTheme = themeDataValue;
let presets = [];
@@ -25,6 +24,11 @@ function submitData() {
validateAndAdd(banlist);
}
var comDevicesValue = $("#com-devices").val();
var comDevicesDataValue = $(".option:contains('" + comDevicesValue + "')").attr('data-value') || '';
const comPort = comDevicesDataValue;
const wirelessConnection = $('#connection-type-toggle').is(":checked") || false;
const xdrdIp = $('#xdrd-ip').val() || '127.0.0.1';
const xdrdPort = $('#xdrd-port').val() || '7373';
const xdrdPassword = $('#xdrd-password').val() || 'password';
@@ -66,6 +70,8 @@ function submitData() {
banlist
},
xdrd: {
comPort,
wirelessConnection,
xdrdIp,
xdrdPort,
xdrdPassword
@@ -108,7 +114,6 @@ function submitData() {
data: JSON.stringify(data),
success: function (message) {
alert(message);
console.log(data);
},
error: function (error) {
console.error(error);
@@ -155,13 +160,28 @@ function submitData() {
$('#ip-addresses').val(data.webserver.banlist?.join('\n') || "");
$('#connection-type-toggle').prop("checked", data.xdrd.wirelessConnection || false);
$('#xdrd-ip').val(data.xdrd.xdrdIp);
$('#xdrd-port').val(data.xdrd.xdrdPort);
$('#xdrd-password').val(data.xdrd.xdrdPassword);
$('#com-devices').val(data.xdrd.comPort);
var selectedDevice = $(".option[data-value='" + data.xdrd.comPort + "']");
if (selectedDevice.length > 0) {
$("#com-devices").val(selectedDevice.text());
}
$('#audio-devices').val(data.audio.audioDevice);
$('#audio-channels').val(data.audio.audioChannels);
var selectedChannels = $(".option[data-value='" + data.audio.audioChannels + "']");
if (selectedChannels.length > 0) {
$("#audio-channels").val(selectedChannels.text());
}
$('#audio-quality').val(data.audio.audioBitrate);
var selectedQuality = $(".option[data-value='" + data.audio.audioBitrate + "']");
if (selectedQuality.length > 0) {
$("#audio-quality").val(selectedQuality.text());
}
$('#webserver-name').val(data.identification.tunerName);
$('#webserver-desc').val(data.identification.tunerDesc);
web/js/main.js
+36 -34
View File
@@ -530,16 +530,16 @@ function copyToClipboard(textToCopy) {
}
function findOnMaps() {
var frequency = $('#data-frequency').text();
var frequency = parseFloat($('#data-frequency').text()).toFixed(1);
var pi = $('#data-pi').text();
var latitude = localStorage.getItem('qthLongitude');
var longitude = localStorage.getItem('qthLatitude');
frequency = parseFloat(frequency).toFixed(1);
var url = "https://maps.fmdx.pl/#qth=" + longitude + "," + latitude + "&freq=" + frequency + "&pi=" + pi;
var url = `https://maps.fmdx.pl/#qth=${longitude},${latitude}&freq=${frequency}&findPi=${pi}`;
window.open(url, "_blank");
}
function updateSignalUnits(parsedData, averageSignal) {
const signalUnit = localStorage.getItem('signalUnit');
let currentSignal;
@@ -577,35 +577,37 @@ function updateSignalUnits(parsedData, averageSignal) {
}
function updateDataElements(parsedData) {
$('#data-frequency').text(parsedData.freq);
$("#commandinput").attr("aria-label", "Current frequency: " + parsedData.freq);
$('#data-pi').html(parsedData.pi === '?' ? "<span class='opacity-half'>?</span>" : parsedData.pi);
const $dataFrequency = $('#data-frequency');
const $commandInput = $("#commandinput");
const $dataPi = $('#data-pi');
const $dataPs = $('#data-ps');
const $dataSt = $('.data-st');
const $dataRt0 = $('#data-rt0');
const $dataRt1 = $('#data-rt1');
const $dataAntInput = $('#data-ant input');
const $dataStationContainer = $('#data-station-container');
const $dataTp = $('.data-tp');
const $dataTa = $('.data-ta');
const $dataMs = $('.data-ms');
const $dataPty = $('.data-pty');
$dataFrequency.text(parsedData.freq);
$commandInput.attr("aria-label", "Current frequency: " + parsedData.freq);
$dataPi.html(parsedData.pi === '?' ? "<span class='opacity-half'>?</span>" : parsedData.pi);
if (localStorage.getItem('psUnderscores') === 'true') {
parsedData.ps = parsedData.ps.replace(/\s/g, '_');
}
$('#data-ps').html(parsedData.ps === '?' ? "<span class='opacity-half'>?</span>" : processString(parsedData.ps, parsedData.ps_errors));
$('.data-pty').html(europe_programmes[parsedData.pty]);
$dataPs.html(parsedData.ps === '?' ? "<span class='opacity-half'>?</span>" : processString(parsedData.ps, parsedData.ps_errors));
$dataSt.html(`<span class='opacity-${parsedData.st ? 'full' : 'half'}'>${parsedData.st_forced ? 'MO' : 'ST'}</span>`);
$dataRt0.html(processString(parsedData.rt0, parsedData.rt0_errors));
$dataRt1.html(processString(parsedData.rt1, parsedData.rt1_errors));
$dataPty.html(europe_programmes[parsedData.pty]);
if(parsedData.st === true) {
if (parsedData.st_forced == true) {
$('.data-st').html("<span class='opacity-full'>MO</span>");
} else {
$('.data-st').html("<span class='opacity-full'>ST</span>");
}
} else {
if (parsedData.st_forced == true) {
$('.data-st').html("<span class='opacity-half'>MO</span>");
} else {
$('.data-st').html("<span class='opacity-half'>ST</span>");
}
}
$('#data-rt0').html(processString(parsedData.rt0, parsedData.rt0_errors));
$('#data-rt1').html(processString(parsedData.rt1, parsedData.rt1_errors));
$('.data-flag').html(`<i title="${parsedData.country_name}" class="flag-sm flag-sm-${parsedData.country_iso}"></i>`);
$('.data-flag-big').html(`<i title="${parsedData.country_name}" class="flag-md flag-md-${parsedData.country_iso}"></i>`);
$('#data-ant input').val($('#data-ant li[data-value="' + parsedData.ant + '"]').text());
$dataAntInput.val($('#data-ant li[data-value="' + parsedData.ant + '"]').text());
if (parsedData.txInfo.station.length > 1) {
$('#data-station-name').text(parsedData.txInfo.station.replace(/%/g, '%25'));
@@ -615,16 +617,16 @@ function updateDataElements(parsedData) {
$('#data-station-pol').text(parsedData.txInfo.pol);
$('#data-station-distance').text(parsedData.txInfo.distance);
$('#data-station-azimuth').text(parsedData.txInfo.azimuth);
$('#data-station-container').css('display', 'block');
$dataStationContainer.css('display', 'block');
} else {
$('#data-station-container').removeAttr('style');
$dataStationContainer.removeAttr('style');
}
updateCounter++;
if(updateCounter % 8 === 0) {
$('.data-tp').html(parsedData.tp === 0 ? "<span class='opacity-half'>TP</span>" : "TP");
$('.data-ta').html(parsedData.ta === 0 ? "<span class='opacity-half'>TA</span>" : "TA");
$('.data-ms').html(parsedData.ms === 0
$dataTp.html(parsedData.tp === 0 ? "<span class='opacity-half'>TP</span>" : "TP");
$dataTa.html(parsedData.ta === 0 ? "<span class='opacity-half'>TA</span>" : "TA");
$dataMs.html(parsedData.ms === 0
? "<span class='opacity-half'>M</span><span class='opacity-full'>S</span>"
: (parsedData.ms === -1
? "<span class='opacity-half'>M</span><span class='opacity-half'>S</span>"
@@ -634,9 +636,9 @@ function updateDataElements(parsedData) {
}
if (updateCounter % 30 === 0) {
$('#data-ps').attr('aria-label', parsedData.ps);
$('#data-rt0').attr('aria-label', parsedData.rt0);
$('#data-rt1').attr('aria-label', parsedData.rt1);
$dataPs.attr('aria-label', parsedData.ps);
$dataRt0.attr('aria-label', parsedData.rt0);
$dataRt1.attr('aria-label', parsedData.rt1);
}
}
web/js/settings.js
+2 -2
View File
@@ -1,9 +1,9 @@
var currentDate = new Date('March 4, 2024 22:00:00');
var currentDate = new Date('March 10, 2024 22:00:00');
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
var year = currentDate.getFullYear();
var formattedDate = day + '/' + month + '/' + year;
var currentVersion = 'v1.1.2a [' + formattedDate + ']';
var currentVersion = 'v1.1.3 [' + formattedDate + ']';
/**
web/js/setup.js
+9
View File
@@ -50,6 +50,15 @@ $(document).ready(function() {
}
});
$('#connection-type-toggle').change(function(){
if($(this).is(":checked")) {
$('#tuner-usb').hide();
$('#tuner-wireless').show();
} else {
$('#tuner-wireless').hide();
$('#tuner-usb').show();
}
});
$('#login-form').submit(function (event) {
event.preventDefault();
web/setup.ejs
+50 -19
View File
@@ -125,20 +125,50 @@
<h2>Connection settings</h2>
<p>You can set up your connection settings here. Changing these settings requires a server restart.</p>
<h3>Tuner connection:</h3>
<p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="form-group">
<label for="xdrd-ip">xdrd ip address:</label>
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
</div>
<div class="form-group">
<label for="xdrd-port">xdrd port:</label>
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
</div>
<div class="form-group">
<label for="xdrd-password">xdrd server password:</label>
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
</div>
<br>
<div style="width: 300px;" class="auto top-10">
<label class="toggleSwitch nolabel" onclick="">
<input id="connection-type-toggle" type="checkbox"/>
<a></a>
<span>
<span class="left-span">USB Cable</span>
<span class="right-span">Wireless</span>
</span>
</label>
</div>
<div id="tuner-usb" class="top-25">
<div class="form-group">
<label for="com-devices"><i class="fa-brands fa-usb"></i> USB Device:</label>
<div class="dropdown" style="width: 300px;margin-right: 0;">
<input id="com-devices" type="text" name="com-devices" placeholder="Choose your USB device" readonly />
<ul class="options" id="deviceList">
<% serialPorts.forEach(serialPort => { %>
<li data-value="<%= serialPort.path %>" class="option"><%= serialPort.friendlyName %></li>
<% }); %>
</ul>
</div>
</div>
</div>
<div id="tuner-wireless">
<p class="text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="form-group">
<label for="xdrd-ip">xdrd ip address:</label>
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
</div>
<div class="form-group">
<label for="xdrd-port">xdrd port:</label>
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
</div>
<div class="form-group">
<label for="xdrd-password">xdrd server password:</label>
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
</div>
</div>
<br class="top-25">
<h3>Webserver connection:</h3>
<p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
<div class="form-group">
@@ -177,9 +207,9 @@
<div class="form-group">
<p class="text-left">Audio channel count.<br>
<span class="text-gray">1: Mono • 2: Stereo</span>
<span class="text-gray">Choose between Mono / Stereo.</span>
</p>
<label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> AUDIO CHANNELS:</label>
<label for="audio-devices"><i class="fa-solid fa-microphone-lines"></i> Audio channels:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-channels" type="text" name="audio-channels" placeholder="Stereo" readonly />
<ul class="options">
@@ -191,9 +221,9 @@
<div class="form-group">
<p class="text-left">The bitrate of the mp3 audio.<br>
<span class="text-gray">Minimum: 64 Kbps • Maximum: 256 Kbps</span>
<span class="text-gray">Minimum: 64 Kbps • Maximum: 320 Kbps</span>
</p>
<label for="audio-quality"><i class="fa-solid fa-wave-square"></i> AUDIO QUALITY:</label>
<label for="audio-quality"><i class="fa-solid fa-wave-square"></i> Audio quality:</label>
<div class="dropdown" style="width: 300px;">
<input id="audio-quality" type="text" name="audio-quality" placeholder="128k (standard)" readonly />
<ul class="options">
@@ -201,7 +231,8 @@
<li data-value="96k" class="option">96k (low quality)</li>
<li data-value="128k" class="option">128k (standard)</li>
<li data-value="192k" class="option">192k (higher quality)</li>
<li data-value="256k" class="option">256k (highest quality)</li>
<li data-value="256k" class="option">256k (very high quality)</li>
<li data-value="320k" class="option">320k (ultra quality)</li>
</ul>
</div>
</div>
web/wizard.ejs
+43 -15
View File
@@ -31,23 +31,51 @@
<!-- BASIC SETTINGS -->
<div class="panel-100 step" id="step1">
<h2 class="settings-heading">BASIC SETTINGS</h2>
<p class="m-0">Welcome to the setup wizard!<br> Let's set up some basic things.</p>
<p class="m-0">Welcome to the setup wizard! Let's set up some basic things.</p>
<h3>Tuner connection:</h3>
<p class="m-0 text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="flex-center top-25">
<div class="form-group">
<label for="xdrd-ip">xdrd ip address:</label>
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
</div>
<div class="form-group">
<label for="xdrd-port">xdrd port:</label>
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
</div>
<div class="form-group">
<label for="xdrd-password">xdrd server password:</label>
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
</div>
<div style="width: 300px;" class="auto top-10">
<label class="toggleSwitch nolabel" onclick="">
<input id="connection-type-toggle" type="checkbox"/>
<a></a>
<span>
<span class="left-span">USB Cable</span>
<span class="right-span">Wireless</span>
</span>
</label>
</div>
<div id="tuner-usb" class="top-25">
<p>It's time to choose your USB device.</p>
<div class="form-group">
<label for="com-devices"><i class="fa-brands fa-usb"></i> USB Device:</label>
<div class="dropdown" style="width: 300px;margin-right: 0;">
<input id="com-devices" type="text" name="com-devices" placeholder="Choose your USB device" readonly />
<ul class="options" id="deviceList">
<% serialPorts.forEach(serialPort => { %>
<li data-value="<%= serialPort.path %>" class="option"><%= serialPort.friendlyName %></li>
<% }); %>
</ul>
</div>
</div>
</div>
<div id="tuner-wireless" class="top-25">
<p class="m-0 text-gray">If you are connecting your tuner <strong>wirelessly</strong>, enter the tuner IP. <br> If you use <strong>xdrd</strong>, use 127.0.0.1 as your IP.</p>
<div class="flex-center top-25">
<div class="form-group">
<label for="xdrd-ip">xdrd ip address:</label>
<input class="input-text w-150" type="text" name="xdrd-ip" id="xdrd-ip" placeholder="127.0.0.1">
</div>
<div class="form-group">
<label for="xdrd-port">xdrd port:</label>
<input class="input-text w-100" type="text" name="xdrd-port" id="xdrd-port" placeholder="7373">
</div>
<div class="form-group">
<label for="xdrd-password">xdrd server password:</label>
<input class="input-text w-150" type="password" name="xdrd-password" id="xdrd-password">
</div>
</div>
</div>
<br class="top-25">
<h3>Webserver connection:</h3>
<p class="m-0 text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
<div class="flex-center top-25">