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

design optimization & bugfixes

Browse Source
This commit is contained in:
NoobishSVK
2024-07-21 22:03:00 +02:00
parent 9c1af7bb9a
commit 392d32c1d2
12 changed files with 171 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
server/endpoints.js
View File

@@ -111,6 +111,7 @@ router.get('/setup', (req, res) => {
processUptime: formattedProcessUptime, processUptime: formattedProcessUptime,
consoleOutput: logs, consoleOutput: logs,
plugins: allPluginConfigs, plugins: allPluginConfigs,
enabledPlugins: serverConfig.plugins,
onlineUsers: dataHandler.dataToSend.users, onlineUsers: dataHandler.dataToSend.users,
connectedUsers: storage.connectedUsers connectedUsers: storage.connectedUsers
}); });

74
server/index.js
View File

@@ -63,46 +63,60 @@ connectToXdrd();
connectToSerial(); connectToSerial();
// Serial Connection // Serial Connection
function connectToSerial() { if (serverConfig.xdrd.wirelessConnection === false) {
if (serverConfig.xdrd.wirelessConnection === false) {
serialport = new SerialPort({path: serverConfig.xdrd.comPort, baudRate: 115200 }); // Configure the SerialPort with DTR and RTS options
serialport = new SerialPort({
path: serverConfig.xdrd.comPort,
baudRate: 115200,
autoOpen: false, // Prevents automatic opening
dtr: false, // Disable DTR
rts: false // Disable RTS
});
serialport.on('open', () => { // Open the port manually after configuring DTR and RTS
logInfo('Using COM device: ' + serverConfig.xdrd.comPort); serialport.open((err) => {
serialport.write('x\n'); if (err) {
setTimeout(() => { logError('Error opening port: ' + err.message);
serialport.write('Q0\n'); return;
serialport.write('M0\n'); }
serialport.write('Z0\n');
logInfo('Using COM device: ' + serverConfig.xdrd.comPort);
serialport.write('x\n');
setTimeout(() => {
serialport.write('Q0\n');
serialport.write('M0\n');
serialport.write('Z0\n');
if(serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true) { if (serverConfig.defaultFreq && serverConfig.enableDefaultFreq === true) {
serialport.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n'); serialport.write('T' + Math.round(serverConfig.defaultFreq * 1000) + '\n');
dataHandler.initialData.freq = Number(serverConfig.defaultFreq).toFixed(3); dataHandler.initialData.freq = Number(serverConfig.defaultFreq).toFixed(3);
dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3); dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3);
} else { } else {
serialport.write('T87500\n'); serialport.write('T87500\n');
} }
serialport.write('A0\n'); serialport.write('A0\n');
serialport.write('F-1\n'); serialport.write('F-1\n');
serialport.write('W0\n'); serialport.write('W0\n');
serialport.write('D0\n'); serialport.write('D0\n');
serialport.write('G00\n'); serialport.write('G00\n');
serverConfig.audio.startupVolume ? serialport.write('Y' + (serverConfig.audio.startupVolume * 100).toFixed(0) + '\n') : serialport.write('Y100\n'); serverConfig.audio.startupVolume
}, 3000); ? serialport.write('Y' + (serverConfig.audio.startupVolume * 100).toFixed(0) + '\n')
: serialport.write('Y100\n');
serialport.on('data', (data) => { }, 3000);
helpers.resolveDataBuffer(data, wss);
}); serialport.on('data', (data) => {
helpers.resolveDataBuffer(data, wss);
}); });
serialport.on('error', (error) => { serialport.on('error', (error) => {
logError(error.message); logError(error.message);
}); });
});
return serialport; return serialport;
}
} }
// xdrd connection // xdrd connection

2
web/css/breadcrumbs.css
View File

@@ -326,7 +326,7 @@ pre {
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
#ps-container { #ps-container {
background-color: var(--color-1); background-color: var(--color-1-transparent);
height: 100px !important; height: 100px !important;
margin: auto !important; margin: auto !important;
width: 100%; width: 100%;

39
web/css/buttons.css
View File

@@ -71,7 +71,7 @@ button:hover {
input[type="text"], textarea, input[type="password"] { input[type="text"], textarea, input[type="password"] {
width: 300px; width: 300px;
min-height: 46px; min-height: 48px;
padding-left: 20px; padding-left: 20px;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid transparent; border: 2px solid transparent;
@@ -90,9 +90,29 @@ input[type="text"], textarea, input[type="password"] {
border: 2px solid transparent; border: 2px solid transparent;
outline: 0; outline: 0;
color: var(--color-text); color: var(--color-text);
background-color: var(--color-1); background-color: var(--color-1-transparent);
font-family: 'Titillium Web', sans-serif; font-family: 'Titillium Web', sans-serif;
} }
#tune-buttons input[type="text"]:not(.no-bg):not(.no-filter)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-1);
opacity: 0.6; /* Set the desired opacity */
pointer-events: none; /* Ensure it does not interfere with interactions */
z-index: -1; /* Place the pseudo-element behind the panel content */
border-radius: 15px;
}
#tune-buttons input[type="text"]:not(.no-bg):not(.no-filter) {
backdrop-filter: blur(5px);
background-attachment: fixed;
}
#tune-buttons button { #tune-buttons button {
box-sizing: border-box; box-sizing: border-box;
@@ -138,7 +158,7 @@ input[type="range"] {
/* Track: Mozilla Firefox */ /* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track { input[type="range"]::-moz-range-track {
height: 48px; height: 48px;
background: var(--color-1); background: var(--color-1-transparent);
border-radius: 15px; border-radius: 15px;
border: 0; border: 0;
} }
@@ -190,7 +210,7 @@ input[type="range"]::-moz-range-thumb {
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
border-radius: 25px; border-radius: 15px;
font-weight: bold; font-weight: bold;
background-color: var(--color-2); background-color: var(--color-2);
} }
@@ -218,7 +238,7 @@ input[type="range"]::-moz-range-thumb {
.toggleSwitch > span { .toggleSwitch > span {
position: absolute; position: absolute;
left: 0; left: 0;
width: calc(100% - 6px); width: calc(100%);
margin: 0; margin: 0;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
@@ -233,10 +253,9 @@ input[type="range"]::-moz-range-thumb {
width: 50%; width: 50%;
margin-left: 50px; margin-left: 50px;
text-align: left; text-align: left;
font-size: 0.9em;
width: auto; width: auto;
opacity: 1; opacity: 1;
width: 40%; width: 50%;
text-align: center; text-align: center;
line-height:48px; line-height:48px;
} }
@@ -251,7 +270,7 @@ input[type="range"]::-moz-range-thumb {
left: 0; left: 0;
width: 50%; width: 50%;
background-color: var(--color-4); background-color: var(--color-4);
border-radius: 25px; border-radius: 15px;
-webkit-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
@@ -285,7 +304,7 @@ input[type="range"]::-moz-range-thumb {
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} }
.toggleSwitch input:checked ~ a { .toggleSwitch input:checked ~ a {
left: calc(50% - 3px); left: calc(50%);
} }
.toggleSwitch input:checked ~ span span:first-of-type { .toggleSwitch input:checked ~ span span:first-of-type {

7
web/css/dropdown.css
View File

@@ -16,7 +16,7 @@
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 18px; top: 18px;
z-index: 100; z-index: 15;
width: 6px; width: 6px;
height: 6px; height: 6px;
border: 1px solid var(--color-main); border: 1px solid var(--color-main);
@@ -39,7 +39,12 @@
user-select: none; user-select: none;
background-color: var(--color-4); background-color: var(--color-4);
color: var(--color-main); color: var(--color-main);
border-radius: 15px;
} }
.dropdown.opened > input {
border-radius: 0 0 15px 15px;
}
.dropdown input:focus { .dropdown input:focus {
outline: none; outline: none;
} }

14
web/css/main.css
View File

@@ -1,8 +1,8 @@
:root { :root {
--color-main: rgba(32, 34, 40, 1); --color-main: rgb(32, 34, 40);
--color-main-bright: rgba(88, 219, 171, 1); --color-main-bright: rgb(88, 219, 171);
--color-text: rgba(255, 255, 255, 1); --color-text: rgb(255, 255, 255);
--color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); /* 5% Brightness */ --color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); /* 5% Brightness */
--color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); /* 25% Brightness */ --color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); /* 25% Brightness */
@@ -10,7 +10,13 @@
--color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); /* 80% Brightness */ --color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); /* 80% Brightness */
--color-5: color-mix(in srgb, var(--color-main) 5%, var(--color-main-bright)); /* 95% Brightness */ --color-5: color-mix(in srgb, var(--color-main) 5%, var(--color-main-bright)); /* 95% Brightness */
--color-text-2: #ccc; --color-1-transparent: color-mix(in srgb, var(--color-1), transparent 40%);
--color-2-transparent: color-mix(in srgb, var(--color-2), transparent 40%);
--color-3-transparent: color-mix(in srgb, var(--color-3), transparent 40%);
--color-4-transparent: color-mix(in srgb, var(--color-4), transparent 40%);
--color-5-transparent: color-mix(in srgb, var(--color-5), transparent 40%);
--color-text-2: rgb(240,240,240);
} }
* { * {

6
web/css/panels.css
View File

@@ -1,5 +1,5 @@
*[class^="panel-"] { *[class^="panel-"] {
background-color: var(--color-1); background-color: var(--color-1-transparent);
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
border-radius: 15px; border-radius: 15px;
@@ -8,6 +8,10 @@
transition: 0.3s ease-in-out background-color; transition: 0.3s ease-in-out background-color;
} }
*[class^="panel-"]:not(.no-bg):not(.no-filter) {
backdrop-filter:blur(5px);
}
.panel-10 { .panel-10 {
width: 10%; width: 10%;
} }

75
web/index.ejs
View File

@@ -57,7 +57,7 @@
</div> </div>
<div class="flex-container"> <div class="flex-container">
<div class="panel-100 bg-none" style="margin-top: 0; margin-left: 0;"> <div class="panel-100 no-bg" style="margin-top: 0; margin-left: 0;">
<div class="flex-container"> <div class="flex-container">
<div class="panel-75 flex-container no-bg"> <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;margin-right: 20px !important;"> <div class="panel-10 no-bg h-100 m-0 m-right-20 hide-phone" style="width: 100px;margin-right: 20px !important;">
@@ -118,15 +118,15 @@
<div class="flex-container flex-phone flex-phone-column"> <div class="flex-container flex-phone flex-phone-column">
<div class="panel-33 no-bg filter-controls" style="height: 48px;"> <div class="panel-33 no-bg filter-controls" style="height: 48px;">
<div class="flex-container flex-phone h-100"> <div class="flex-container no-filter 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;"> <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"><i class="fa-solid fa-play"></i></button> <button class="playbutton" aria-label="Play/Stop"><i class="fa-solid fa-play"></i></button>
</div> </div>
<% if (antennas.enabled == true) { %> <% if (antennas.enabled == true) { %>
<div class="panel-50 no-bg h-100 m-0 dropdown" id="data-ant" style="margin-right: 25px;"> <div class="panel-50 no-bg h-100 br-0 m-0 dropdown" id="data-ant" style="margin-right: 25px;">
<input type="text" placeholder="Ant A" readonly> <input type="text" placeholder="Ant A" readonly>
<ul class="options"> <ul class="options open-top">
<% if(antennas.ant1.enabled == true) { %><li data-value="0" class="option"><%= antennas.ant1.name %></li><% } %> <% if(antennas.ant1.enabled == true) { %><li data-value="0" class="option"><%= antennas.ant1.name %></li><% } %>
<% if(antennas.ant2.enabled == true) { %><li data-value="1" class="option"><%= antennas.ant2.name %></li><% } %> <% if(antennas.ant2.enabled == true) { %><li data-value="1" class="option"><%= antennas.ant2.name %></li><% } %>
<% if(antennas.ant3.enabled == true) { %><li data-value="2" class="option"><%= antennas.ant3.name %></li><% } %> <% if(antennas.ant3.enabled == true) { %><li data-value="2" class="option"><%= antennas.ant3.name %></li><% } %>
@@ -135,11 +135,11 @@
</div> </div>
<% } %> <% } %>
<div class="panel-50 no-bg h-100 m-0 button-eq"> <div class="panel-50 no-bg br-0 h-100 m-0 button-eq">
<% if (device == 'tef') { %><button id="data-eq" style="border-radius: 15px 0px 0px 15px;" class="tooltip" aria-label="EQ Filter" data-tooltip="<strong>The cEQ filter can reduce bandwidth below 56 KHz.</strong><br><br>Useful for weak stations next to strong ones,<br>although it may pick up more interference."><span class="text-bold">cEQ</span></button><% } %> <% if (device == 'tef') { %><button id="data-eq" style="border-radius: 15px 0px 0px 15px;" class="tooltip" aria-label="EQ Filter" data-tooltip="<strong>The cEQ filter can reduce bandwidth below 56 KHz.</strong><br><br>Useful for weak stations next to strong ones,<br>although it may pick up more interference."><span class="text-bold">cEQ</span></button><% } %>
<% if (device == 'xdr') { %><button id="data-eq" style="border-radius: 15px 0px 0px 15px;" class="tooltip" aria-label="RF+ Filter" data-tooltip="<strong>The RF+ filter increases gain by 5dB</strong>"><span class="text-bold">RF+</span></button><% } %> <% if (device == 'xdr') { %><button id="data-eq" style="border-radius: 15px 0px 0px 15px;" class="tooltip" aria-label="RF+ Filter" data-tooltip="<strong>The RF+ filter increases gain by 5dB</strong>"><span class="text-bold">RF+</span></button><% } %>
</div> </div>
<div class="panel-50 no-bg h-100 m-0 button-ims"> <div class="panel-50 no-bg br-0 h-100 m-0 button-ims">
<% if (device == 'tef') { %><button id="data-ims" style="border-radius: 0px 15px 15px 0px;" class="tooltip" aria-label="iMS + Filter" data-tooltip="<strong>The iMS filter reduces multipath audio artifacts.</strong><br><br>It's recommended to leave it on most of the time."><span class="text-bold">iMS</span></button><% } %> <% if (device == 'tef') { %><button id="data-ims" style="border-radius: 0px 15px 15px 0px;" class="tooltip" aria-label="iMS + Filter" data-tooltip="<strong>The iMS filter reduces multipath audio artifacts.</strong><br><br>It's recommended to leave it on most of the time."><span class="text-bold">iMS</span></button><% } %>
<% if (device == 'xdr') { %><button id="data-ims" style="border-radius: 0px 15px 15px 0px;" class="tooltip" aria-label="IF+ Filter" data-tooltip="<strong>The IF+ filter increases gain by 6dB</strong>"><span class="text-bold">IF+</span></button><% } %> <% if (device == 'xdr') { %><button id="data-ims" style="border-radius: 0px 15px 15px 0px;" class="tooltip" aria-label="IF+ Filter" data-tooltip="<strong>The IF+ filter increases gain by 6dB</strong>"><span class="text-bold">IF+</span></button><% } %>
</div> </div>
@@ -191,36 +191,23 @@
<div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;"> <div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
<input type="text" placeholder="Auto BW" readonly> <input type="text" placeholder="Auto BW" readonly>
<ul class="options open-top"> <ul class="options open-top">
<li data-value="0" data-value2="0" class="option">Auto</li> <li data-value="0" data-value2="-1" class="option">Auto</li>
<li data-value="9000" data-value2="1" class="option">9 KHz</li> <li data-value="55000" data-value2="0" class="option">55 KHz</li>
<li data-value="15000" data-value2="2" class="option">15 KHz</li> <li data-value="73000" data-value2="1" class="option">73 KHz</li>
<li data-value="17000" data-value2="3" class="option">17 KHz</li> <li data-value="90000" data-value2="2" class="option">90 KHz</li>
<li data-value="20000" data-value2="4" class="option">20 KHz</li> <li data-value="108000" data-value2="3" class="option">108 KHz</li>
<li data-value="24000" data-value2="5" class="option">24 KHz</li> <li data-value="125000" data-value2="4" class="option">125 KHz</li>
<li data-value="27000" data-value2="6" class="option">27 KHz</li> <li data-value="142000" data-value2="5" class="option">142 KHz</li>
<li data-value="32000" data-value2="7" class="option">32 KHz</li> <li data-value="159000" data-value2="6" class="option">159 KHz</li>
<li data-value="36000" data-value2="8" class="option">36 KHz</li> <li data-value="177000" data-value2="7" class="option">177 KHz</li>
<li data-value="42000" data-value2="9" class="option">42 KHz</li> <li data-value="194000" data-value2="8" class="option">194 KHz</li>
<li data-value="48000" data-value2="10" class="option">48 KHz</li> <li data-value="211000" data-value2="9" class="option">211 KHz</li>
<li data-value="55000" data-value2="11" class="option">55 KHz</li> <li data-value="229000" data-value2="10" class="option">229 KHz</li>
<li data-value="63000" data-value2="12" class="option">63 KHz</li> <li data-value="246000" data-value2="11" class="option">246 KHz</li>
<li data-value="73000" data-value2="13" class="option">73 KHz</li> <li data-value="263000" data-value2="12" class="option">263 KHz</li>
<li data-value="83000" data-value2="14" class="option">83 KHz</li> <li data-value="281000" data-value2="13" class="option">281 KHz</li>
<li data-value="90000" data-value2="15" class="option">90 KHz</li> <li data-value="298000" data-value2="14" class="option">298 KHz</li>
<li data-value="95000" data-value2="16" class="option">95 KHz</li> <li data-value="309000" data-value2="15" class="option">309 KHz</li>
<li data-value="108000" data-value2="17" class="option">108 KHz</li>
<li data-value="125000" data-value2="18" class="option">125 KHz</li>
<li data-value="142000" data-value2="19" class="option">142 KHz</li>
<li data-value="155000" data-value2="20" class="option">159 KHz</li>
<li data-value="177000" data-value2="21" class="option">177 KHz</li>
<li data-value="194000" data-value2="22" class="option">194 KHz</li>
<li data-value="211000" data-value2="23" class="option">211 KHz</li>
<li data-value="229000" data-value2="24" class="option">229 KHz</li>
<li data-value="246000" data-value2="25" class="option">246 KHz</li>
<li data-value="263000" data-value2="26" class="option">263 KHz</li>
<li data-value="281000" data-value2="27" class="option">281 KHz</li>
<li data-value="298000" data-value2="28" class="option">298 KHz</li>
<li data-value="309000" data-value2="29" class="option">309 KHz</li>
</ul> </ul>
</div> </div>
<% } %> <% } %>
@@ -279,7 +266,7 @@
</div> </div>
<div class="panel-10 bg-none m-0"> <div class="panel-10 no-bg m-0">
<div class="panel-100 w-100" style="margin-left: 0;"> <div class="panel-100 w-100" style="margin-left: 0;">
<h2>AF</h2> <h2>AF</h2>
<div id="af-list" class="p-bottom-20" style="text-align: center;"> <div id="af-list" class="p-bottom-20" style="text-align: center;">
@@ -302,13 +289,13 @@
<h2 class="show-phone"> <h2 class="show-phone">
<div class="data-pty text-color-default"></div> <div class="data-pty text-color-default"></div>
</h2> </h2>
<h3 style="margin-top:0;margin-bottom:0;" class="color-4 flex-center"> <h3 style="margin-top:0;margin-bottom:0;" class="colornode-4 flex-center">
<span class="data-tp">TP</span> <span class="data-tp">TP</span>
<span style="margin-left: 15px;" class="data-ta">TA</span> <span style="margin-left: 15px;" class="data-ta">TA</span>
<div style="display:inline-block"> <div style="display:inline-block">
<span style="margin-left: 20px;display: block;margin-top: 2px;" class="data-flag"></span> <span style="margin-left: 20px;display: block;margin-top: 2px;" class="data-flag"></span>
</div> </div>
<span class="pointer stereo-container" style="position: relative; margin-left: 20px;" role="button" aria-label="Stereo / Mono toggle" tabindex="0"> <span class="pointer stereo-container" style="position: noderelative; margin-left: 20px;" role="button" aria-label="Stereo / Mono toggle" tabindex="0">
<div class="circle-container"> <div class="circle-container">
<div class="circle data-st circle1"></div> <div class="circle data-st circle1"></div>
<div class="circle data-st circle2"></div> <div class="circle data-st circle2"></div>
@@ -396,7 +383,7 @@
</div> </div>
</div> </div>
<% } else if (isTuneAuthenticated) { %> <% } else if (isTuneAuthenticated) { %>
<p class="color-3">You are logged in and can control the receiver.<br><a class="logout-link" href="#">Logout</a></p> <p class="color-3">You are logged in and can control the receiver.</p>
<div class="admin-quick-dashboard"> <div class="admin-quick-dashboard">
<div class="icon tooltip logout-link" role="button" aria-label="Sign out" tabindex="0" data-tooltip="Sign out"> <div class="icon tooltip logout-link" role="button" aria-label="Sign out" tabindex="0" data-tooltip="Sign out">
<i class="fa-solid fa-sign-out"></i> <i class="fa-solid fa-sign-out"></i>
@@ -405,11 +392,13 @@
<% } else { %> <% } else { %>
<form action="./login" method="post" id="login-form" class="top-25"> <form action="./login" method="post" id="login-form" class="top-25">
<label for="password">Password:</label> <label for="password">Password:</label>
<input type="password" id="password" name="password" style="width: 200px;" required><br> <input type="password" id="password" name="password" style="width: 145px;" required>
<button type="submit" class="br-0 w-100 top-10" style="height: 44px">Login</button> <button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
<i class="fa-solid fa-right-to-bracket"></i>
</button>
</form> </form>
<% } %> <% } %>
<div id="login-message" class="color-3"></div> <div id="login-message" class="color-3">&nbsp;</div>
<hr class="color-2 auto"> <hr class="color-2 auto">

2
web/js/init.js
View File

@@ -3,7 +3,7 @@ var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1 var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
var year = currentDate.getFullYear(); var year = currentDate.getFullYear();
var formattedDate = day + '/' + month + '/' + year; var formattedDate = day + '/' + month + '/' + year;
var currentVersion = 'v1.2.4 [' + formattedDate + ']'; var currentVersion = 'v1.2.5 [' + formattedDate + ']';
getInitialSettings(); getInitialSettings();

12
web/js/main.js
View File

@@ -724,7 +724,6 @@ const updateDataElements = throttle(function(parsedData) {
stereoColor = 'gray'; stereoColor = 'gray';
} }
$dataSt.css('border', '2px solid ' + stereoColor); $dataSt.css('border', '2px solid ' + stereoColor);
//updateHtmlIfChanged($dataSt, `<span class='opacity-${parsedData.st ? 'full' : 'half'}'>${parsedData.st_forced ? 'MO' : 'ST'}</span>`);
updateHtmlIfChanged($dataRt0, processString(parsedData.rt0, parsedData.rt0_errors)); updateHtmlIfChanged($dataRt0, processString(parsedData.rt0, parsedData.rt0_errors));
updateHtmlIfChanged($dataRt1, processString(parsedData.rt1, parsedData.rt1_errors)); updateHtmlIfChanged($dataRt1, processString(parsedData.rt1, parsedData.rt1_errors));
@@ -732,16 +731,21 @@ const updateDataElements = throttle(function(parsedData) {
updateTextIfChanged($dataPty, rdsMode == 'true' ? usa_programmes[parsedData.pty] : europe_programmes[parsedData.pty]); updateTextIfChanged($dataPty, rdsMode == 'true' ? usa_programmes[parsedData.pty] : europe_programmes[parsedData.pty]);
if (parsedData.rds === true) { if (parsedData.rds === true) {
$flagDesktopCointainer.css('background-color', 'var(--color-2)'); $flagDesktopCointainer.css('background-color', 'var(--color-2-transparent)');
} else { } else {
$flagDesktopCointainer.css('background-color', 'var(--color-1)'); $flagDesktopCointainer.css('background-color', 'var(--color-1-transparent)');
} }
$('.data-flag').html(`<i title="${parsedData.country_name}" class="flag-sm flag-sm-${parsedData.country_iso}"></i>`); $('.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-flag-big').html(`<i title="${parsedData.country_name}" class="flag-md flag-md-${parsedData.country_iso}"></i>`);
$dataAntInput.val($('#data-ant li[data-value="' + parsedData.ant + '"]').text()); $dataAntInput.val($('#data-ant li[data-value="' + parsedData.ant + '"]').text());
$dataBwInput.val($('#data-bw li[data-value="' + parsedData.bw + '"]').text());
if(parsedData.bw < 500) {
$dataBwInput.val($('#data-bw li[data-value2="' + parsedData.bw + '"]').text());
} else {
$dataBwInput.val($('#data-bw li[data-value="' + parsedData.bw + '"]').text());
}
if (parsedData.txInfo.station.length > 1) { if (parsedData.txInfo.station.length > 1) {
updateTextIfChanged($('#data-station-name'), parsedData.txInfo.station.replace(/%/g, '%25')); updateTextIfChanged($('#data-station-name'), parsedData.txInfo.station.replace(/%/g, '%25'));

26
web/js/settings.js
View File

@@ -6,16 +6,16 @@
* @param background filter color * @param background filter color
*/ */
const themes = { const themes = {
theme1: [ 'rgba(32, 34, 40, 1)', 'rgba(88, 219, 171, 1)', 'rgba(255, 255, 255, 1)', 'rgba(11, 12, 14, 1)' ], // Retro (Default) theme1: [ 'rgb(32, 34, 40)', 'rgb(88, 219, 171)', 'rgb(255, 255, 255)', 'rgb(11, 12, 14)' ], // Retro (Default)
theme2: [ 'rgba(21, 32, 33, 1)', 'rgba(203, 202, 165, 1)', 'rgba(255, 255, 255, 1)', 'rgba(7, 11, 12, 1)' ], // Cappuccino theme2: [ 'rgb(21, 32, 33)', 'rgb(203, 202, 165)', 'rgb(255, 255, 255)', 'rgb(7, 11, 12)' ], // Cappuccino
theme3: [ 'rgba(18, 18, 12, 1)', 'rgba(169, 255, 112, 1)', 'rgba(255, 255, 255, 1)', 'rgba(6, 6, 4, 1)' ], // Nature theme3: [ 'rgb(18, 18, 12)', 'rgb(169, 255, 112)', 'rgb(255, 255, 255)', 'rgb(6, 6, 4)' ], // Nature
theme4: [ 'rgba(12, 28, 27, 1)', 'rgba(104, 247, 238, 1)', 'rgba(255, 255, 255, 1)', 'rgba(4, 10, 9, 1)' ], // Ocean theme4: [ 'rgb(12, 28, 27)', 'rgb(104, 247, 238)', 'rgb(255, 255, 255)', 'rgb(4, 10, 9)' ], // Ocean
theme5: [ 'rgba(23, 17, 6, 1)', 'rgba(245, 182, 66, 1)', 'rgba(255, 255, 255, 1)', 'rgba(8, 6, 2, 1)' ], // Terminal theme5: [ 'rgb(23, 17, 6)', 'rgb(245, 182, 66)', 'rgb(255, 255, 255)', 'rgb(8, 6, 2)' ], // Terminal
theme6: [ 'rgba(33, 9, 29, 1)', 'rgba(250, 82, 141, 1)', 'rgba(255, 255, 255, 1)', 'rgba(12, 3, 10, 1)' ], // Nightlife theme6: [ 'rgb(33, 9, 29)', 'rgb(250, 82, 141)', 'rgb(255, 255, 255)', 'rgb(12, 3, 10)' ], // Nightlife
theme7: [ 'rgba(13, 11, 26, 1)', 'rgba(128, 105, 250, 1)', 'rgba(255, 255, 255, 1)', 'rgba(5, 4, 7, 1)' ], // Blurple theme7: [ 'rgb(13, 11, 26)', 'rgb(128, 105, 250)', 'rgb(255, 255, 255)', 'rgb(5, 4, 7)' ], // Blurple
theme8: [ 'rgba(252, 186, 3, 1)', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)', 'rgba(252, 186, 3, 1)' ], // Construction theme8: [ 'rgb(252, 186, 3)', 'rgb(0, 0, 0)', 'rgb(0, 0, 0)', 'rgb(252, 186, 3)' ], // Construction
theme9: [ 'rgba(0, 0, 0, 1)', 'rgba(204, 204, 204, 1)', 'rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 1)' ], // AMOLED theme9: [ 'rgb(0, 0, 0)', 'rgb(204, 204, 204)', 'rgb(255, 255, 255)', 'rgb(0, 0, 0)' ], // AMOLED
}; };
// Signal Units // Signal Units
const signalUnits = { const signalUnits = {
@@ -146,11 +146,11 @@ function setTheme(themeName) {
const rgbaComponentsText = themeColors[2].match(/(\d+(\.\d+)?)/g); const rgbaComponentsText = themeColors[2].match(/(\d+(\.\d+)?)/g);
const opacityText = parseFloat(rgbaComponentsText[3]); const opacityText = parseFloat(rgbaComponentsText[3]);
const newOpacityText = opacityText * 0.75; const newOpacityText = opacityText * 0.75;
const textColor2 = `rgba(${rgbaComponentsText[0]}, ${rgbaComponentsText[1]}, ${rgbaComponentsText[2]}, ${newOpacityText})`; const textColor2 = `rgba(${rgbaComponentsText[0]}, ${rgbaComponentsText[1]}, ${rgbaComponentsText[2]})`;
// Extracting the RGBA components from themeColors[0] for background color // Extracting the RGBA components from themeColors[0] for background color
const rgbaComponentsBackground = themeColors[3].match(/(\d+(\.\d+)?)/g); const rgbaComponentsBackground = themeColors[3].match(/(\d+(\.\d+)?)/g);
const backgroundOpacity = 0.85; const backgroundOpacity = 0.75;
const backgroundColorWithOpacity = `rgba(${rgbaComponentsBackground[0]}, ${rgbaComponentsBackground[1]}, ${rgbaComponentsBackground[2]}, ${backgroundOpacity})`; const backgroundColorWithOpacity = `rgba(${rgbaComponentsBackground[0]}, ${rgbaComponentsBackground[1]}, ${rgbaComponentsBackground[2]}, ${backgroundOpacity})`;
$(':root').css('--color-main', themeColors[0]); $(':root').css('--color-main', themeColors[0]);
@@ -162,7 +162,7 @@ function setTheme(themeName) {
} }
function setBg() { function setBg() {
if(localStorage.getItem('bgImage').length > 1 && localStorage.getItem('theme') != 'theme9') { if(localStorage.getItem('bgImage').length > 5 && localStorage.getItem('theme') != 'theme9') {
$('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)'); $('body').css('background', 'url(' + localStorage.getItem('bgImage') + ') top center / cover fixed no-repeat var(--color-main)');
} else { } else {
$('body').css('background', 'var(--color-main)'); $('body').css('background', 'var(--color-main)');

36
web/setup.ejs
View File

@@ -50,23 +50,23 @@
</div> </div>
<div class="panel-100" style="margin-top: -20px; border-radius: 0 0 15px 15px;"> <div class="panel-100" style="margin-top: -20px; border-radius: 0 0 15px 15px;">
<div class="panel-100 tab-content" id="dashboard" role="tabpanel"> <div class="panel-100 tab-content no-bg no-bg" id="dashboard" role="tabpanel">
<h2>Dashboard</h2> <h2>Dashboard</h2>
<div class="panel-100 flex-container auto"> <div class="panel-100 flex-container auto p-bottom-20">
<div class="panel-33"> <div class="panel-33 no-bg">
<span class="text-medium-big color-5"><%= onlineUsers %></span> <span class="text-medium-big color-5"><%= onlineUsers %></span>
<p>Online users</p> <p class="m-0">Online users</p>
</div> </div>
<div class="panel-33"> <div class="panel-33 no-bg">
<span class="text-medium-big color-5"><%= memoryUsage %></span> <span class="text-medium-big color-5"><%= memoryUsage %></span>
<p>Memory usage</p> <p class="m-0">Memory usage</p>
</div> </div>
<div class="panel-33"> <div class="panel-33 no-bg">
<span class="text-medium-big color-5"><%= processUptime %></span> <span class="text-medium-big color-5"><%= processUptime %></span>
<p>Uptime</p> <p class="m-0">Uptime</p>
</div> </div>
</div> </div>
@@ -138,7 +138,7 @@
<p><a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank">Check for the latest source code</a> • <a href="https://buymeacoffee.com/noobish" target="_blank">Support the developer</a></p> <p><a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank">Check for the latest source code</a> • <a href="https://buymeacoffee.com/noobish" target="_blank">Support the developer</a></p>
</div> </div>
<div class="panel-100 tab-content" id="connection" role="tabpanel"> <div class="panel-100 tab-content no-bg" id="connection" role="tabpanel">
<h2>Connection settings</h2> <h2>Connection settings</h2>
<p>You can set up your connection settings here. Changing these settings requires a server restart.</p> <p>You can set up your connection settings here. Changing these settings requires a server restart.</p>
<h3>Tuner connection:</h3> <h3>Tuner connection:</h3>
@@ -199,7 +199,7 @@
<br> <br>
</div> </div>
<div class="panel-100 tab-content" id="audio" role="tabpanel"> <div class="panel-100 tab-content no-bg" id="audio" role="tabpanel">
<h2>Audio settings</h2> <h2>Audio settings</h2>
<p>You can set up your audio settings here. Changing these settings requires a server restart.</p> <p>You can set up your audio settings here. Changing these settings requires a server restart.</p>
@@ -261,7 +261,7 @@
</div> </div>
</div> </div>
<div class="panel-100 tab-content" id="webserver" role="tabpanel"> <div class="panel-100 tab-content no-bg" id="webserver" role="tabpanel">
<h2>Webserver settings</h2> <h2>Webserver settings</h2>
<div class="flex-container"> <div class="flex-container">
<div class="panel-50 no-bg"> <div class="panel-50 no-bg">
@@ -420,7 +420,7 @@
</div> </div>
<div class="panel-100 tab-content" id="plugins" role="tabpanel"> <div class="panel-100 tab-content no-bg" id="plugins" role="tabpanel">
<h2>Plugins</h2> <h2>Plugins</h2>
<p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br> <p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br>
Click on the individual plugins to enable/disable them.</p> Click on the individual plugins to enable/disable them.</p>
@@ -432,10 +432,13 @@
<% }); %> <% }); %>
</select><br><br> </select><br><br>
<a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a> <a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a>
<hr>
<h3>Plugin settings</h3>
<div id="plugin-settings"></div>
</div> </div>
<div class="panel-100 tab-content" id="tuner" role="tabpanel"> <div class="panel-100 tab-content no-bg" id="tuner" role="tabpanel">
<h2>Tuner Specific Settings</h2> <h2>Tuner Specific Settings</h2>
<div class="form-group"> <div class="form-group">
<label for="themes"><i class="fa-solid fa-radio"></i> Device:</label> <label for="themes"><i class="fa-solid fa-radio"></i> Device:</label>
@@ -466,7 +469,7 @@
</div> </div>
<div class="panel-100 tab-content" id="identification" role="tabpanel"> <div class="panel-100 tab-content no-bg" id="identification" role="tabpanel">
<h2>Identification & Map</h2> <h2>Identification & Map</h2>
<div class="flex-container"> <div class="flex-container">
@@ -474,7 +477,7 @@
<h3>Basic info</h3> <h3>Basic info</h3>
<p class="text-gray">Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p> <p class="text-gray">Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
<div class="panel-100" style="padding-left: 20px; padding-right: 20px;"> <div class="panel-100 no-bg" style="padding-left: 20px; padding-right: 20px;">
<label for="webserver-name" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label> <label for="webserver-name" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
<input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="webserver-name" id="webserver-name" placeholder="Fill your server name here." maxlength="32"> <input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="webserver-name" id="webserver-name" placeholder="Fill your server name here." maxlength="32">
<br> <br>
@@ -553,5 +556,8 @@
<script src="js/dropdown.js"></script> <script src="js/dropdown.js"></script>
<script src="js/setup.js"></script> <script src="js/setup.js"></script>
<script src="js/confighandler.js"></script> <script src="js/confighandler.js"></script>
<% enabledPlugins?.forEach(function(plugin) { %>
<script src="js/plugins/<%= plugin %>"></script>
<% }); %>
</body> </body>
</html> </html>