bugfixes, new options in settings panel

index.js

@@ -161,6 +161,9 @@ function connectToXdrd() {
             
             if (authFlags.authMsg && authFlags.firstClient) {
               client.write('x\n');
+              if(serverConfig.defaultFreq) {
+                client.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n')
+              }
               client.write('T87500\n');
               client.write('A0\n');
               client.write('G00\n');
@@ -203,11 +206,13 @@ function connectToXdrd() {
 }
 
 client.on('close', () => {
-  logWarn('Disconnected from xdrd. Attempting to reconnect.');
   if(serverConfig.autoShutdown === false) {
+    logWarn('Disconnected from xdrd. Attempting to reconnect.');
     setTimeout(function () {
       connectToXdrd();
     }, 2000)
+  } else {
+    logWarn('Disconnected from xdrd.');
   }
 });
 
@@ -241,7 +246,8 @@ app.get('/static_data', (req, res) => {
     qthLatitude: serverConfig.identification.lat,
     qthLongitude: serverConfig.identification.lon,
     streamEnabled: streamEnabled,
-    presets: serverConfig.webserver.presets || []
+    presets: serverConfig.webserver.presets || [],
+    defaultTheme: serverConfig.webserver.defaultTheme || 'theme1'
   });
 });
 
@@ -345,7 +351,8 @@ app.get('/', (req, res) => {
     antennaSwitch: serverConfig.antennaSwitch,
     tuningLimit: serverConfig.webserver.tuningLimit,
     tuningLowerLimit: serverConfig.webserver.tuningLowerLimit,
-    tuningUpperLimit: serverConfig.webserver.tuningUpperLimit
+    tuningUpperLimit: serverConfig.webserver.tuningUpperLimit,
+    chatEnabled: serverConfig.webserver.chatEnabled,
    })
   }
 });
@@ -476,13 +483,14 @@ app.get('/getDevices', (req, res) => {
 /**
  * WEBSOCKET BLOCK
  */
+let lastDisconnectTime = null;
 
 wss.on('connection', (ws, request) => {
   const clientIp = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
   currentUsers++;
   dataHandler.showOnlineUsers(currentUsers);
   if(currentUsers > 0 && serverConfig.autoShutdown === true) {
-    client.write('x\n'); 
+    connectToXdrd(); 
   }
 
   // Use ipinfo.io API to get geolocation information
@@ -556,9 +564,19 @@ wss.on('connection', (ws, request) => {
       connectedUsers.splice(index, 1); // Remove the user's data from connectedUsers array
     }
 
+    if (currentUsers === 0 && serverConfig.defaultFreq && serverConfig.enableDefaultFreq && serverConfig.enableDefaultFreq === true) {
+      setTimeout(function() {
+        if(currentUsers === 0) {
+          client.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n');
+          dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3);
+        }
+      }, 10000)
+    }
+  
     if (currentUsers === 0 && serverConfig.autoShutdown === true) {
       client.write('X\n');
     }
+
     logInfo(`Web client \x1b[31mdisconnected\x1b[0m (${clientIp}) \x1b[90m[${currentUsers}]`);
   });  
 

server_config.js

@@ -14,7 +14,8 @@ let serverConfig = {
   webserver: {
     webserverIp: "0.0.0.0",
     webserverPort: 8080,
-    banlist: []
+    banlist: [],
+    chatEnabled: true
   },
   xdrd: {
     xdrdIp: "127.0.0.1",
@@ -39,9 +40,11 @@ let serverConfig = {
     tunePass: "",
     adminPass: ""
   },
+  defaultFreq: 87.5,
   publicTuner: true,
   lockToAdmin: false,
   autoShutdown: false,
+  enableDefaultFreq: false
 };
 
 function deepMerge(target, source)

web/index.ejs

@@ -71,7 +71,7 @@
                 <div class="flex-container">
                     <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;">
-                            <button class="playbutton"><i class="fa-solid fa-play fa-lg"></i></button>
+                            <button class="playbutton" aria-label="Play / Stop Button"><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>
@@ -124,7 +124,7 @@
                             
                             <% if (antennaSwitch) { %>
                                 <div class="panel-50 no-bg h-100 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">
                                         <li data-value="0" class="option">Ant A</li>
                                         <li data-value="1" class="option">Ant B</li>
@@ -188,9 +188,11 @@
                         </ul>
                     </div>
                 </div>
+                <% if (chatEnabled) { %>
                 <div class="panel-10 no-bg h-100 hide-phone" style="width: 100px; height: 100px;">
                     <button class="chatbutton bg-color-2"><i class="fa-solid fa-comments fa-lg"></i> (<span class="chat-messages-count">0</span>)</button>
                 </div>
+                <% } %>
             </div>
         </div>
         <div id="flags-container-phone" class="panel-33">
@@ -210,7 +212,9 @@
     </div>
     
     <button id="settings" aria-label="Settings"><i class="fa-solid fa-gear"></i></button>
+    <% if (chatEnabled) { %>
     <button class="chatbutton hide-desktop bg-color-2"><i class="fa-solid fa-comments fa-lg"></i> (<span class="chat-messages-count">0</span>)</button>
+    <% } %>
     <button id="users-online-container" class="hide-phone" aria-label="Online users"><i class="fa-solid fa-user"></i> <span class="users-online"></span></button>
 
 <div id="myModal" class="modal">
@@ -223,7 +227,7 @@
             <div class="form-group top-25">
                 <label for="themes"><i class="fa-solid fa-palette"></i> Theme:</label>
                 <div class="dropdown" id="theme-selector">
-                    <input type="text" placeholder="Theme" readonly />
+                    <input type="text" placeholder="Default" readonly>
                     <ul class="options">
                         <li class="option" data-value="theme1">Default</li>
                         <li class="option" data-value="theme2">Cappuccino</li>
@@ -241,7 +245,7 @@
             <div class="form-group top-25">
                 <label for="signal"><i class="fa-solid fa-signal"></i> Signal units:</label>
                 <div class="dropdown" id="signal-selector">
-                    <input type="text" placeholder="Signal Units" readonly />
+                    <input type="text" placeholder="dBf" readonly>
                     <ul class="options">
                         <li class="option" data-value="dbf">dBf</li>
                         <li class="option" data-value="dbuv">dBuV</li>
@@ -296,7 +300,7 @@
                             <br>
                             <br>
                             <% if(ownerContact){ %>
-                                <span>Owner contact:<span><br>
+                                <span>Owner contact:</span><br>
                                 <span class="text-small m-0"><%= ownerContact %></span>
                              <% } %>
                         </div>
@@ -315,7 +319,7 @@
             <div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
                 <strong>Support</strong> the developer!
             </div>
-            <div class="hover-brighten br-0" style="height: 50px;padding:12px;"onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
+            <div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
                 Join our <strong>OpenRadio Discord</strong> community!
             </div>
         </div>

web/js/confighandler.js

@@ -4,12 +4,22 @@ function submitData() {
     const tuningLimit = $('#tuning-limit').is(":checked") || false;
     const tuningLowerLimit = $('#tuning-lower-limit').val() || '0';
     const tuningUpperLimit = $('#tuning-upper-limit').val() || '108';
+    const chatEnabled = $("#chat-switch").length > 0 ? $("#chat-switch").is(":checked") : true;
+
+    var themeSelectedValue = $("#selected-theme").val();
+    var themeDataValue = $(".option:contains('" + themeSelectedValue + "')").attr('data-value') || 'theme1';
+
+    const defaultTheme = themeDataValue;
+    
     let presets = [];
     presets.push($('#preset1').val() || '87.5');
     presets.push($('#preset2').val() || '87.5');
     presets.push($('#preset3').val() || '87.5');
     presets.push($('#preset4').val() || '87.5');
 
+    const enableDefaultFreq = $('#default-freq-enable').is(":checked") || false;
+    const defaultFreq = $('#default-freq').val() || '87.5';
+
     let banlist = [];
     if($('#ip-addresses').length > 0) {
       validateAndAdd(banlist);
@@ -50,6 +60,8 @@ function submitData() {
         tuningLimit,
         tuningLowerLimit,
         tuningUpperLimit,
+        chatEnabled,
+        defaultTheme,
         presets,
         banlist
       },
@@ -80,6 +92,8 @@ function submitData() {
       lockToAdmin,
       autoShutdown,
       antennaSwitch,
+      enableDefaultFreq,
+      defaultFreq,
     };
 
     if(adminPass.length < 1) {
@@ -118,6 +132,16 @@ function submitData() {
         $('#tuning-limit').prop("checked", data.webserver.tuningLimit);
         $('#tuning-lower-limit').val(data.webserver.tuningLowerLimit || "");
         $('#tuning-upper-limit').val(data.webserver.tuningUpperLimit || "");
+        $("#chat-switch").prop("checked", data.webserver.chatEnabled || false);
+
+        $('#selected-theme').val(data.webserver.defaultTheme || 'Default');
+
+        var selectedTheme = $(".option[data-value='" + data.webserver.defaultTheme + "']");
+        
+        // If the option exists, set its text as the value of the input
+        if (selectedTheme.length > 0) {
+            $("#selected-theme").val(selectedTheme.text());
+        }
         
         if(Array.isArray(data.webserver.presets)) {
           $('#preset1').val(data.webserver.presets[0] || "");
@@ -126,6 +150,9 @@ function submitData() {
           $('#preset4').val(data.webserver.presets[3] || "");
         }
 
+        $("#default-freq-enable").prop("checked", data.enableDefaultFreq || false);
+        $('#default-freq').val(data.defaultFreq || "87.5");
+
         $('#ip-addresses').val(data.webserver.banlist?.join('\n') || "");
 
         $('#xdrd-ip').val(data.xdrd.xdrdIp);

web/js/init.js

@@ -9,6 +9,7 @@ function getInitialSettings() {
             localStorage.setItem('qthLatitude', data.qthLatitude);
             localStorage.setItem('qthLongitude', data.qthLongitude);
             localStorage.setItem('streamEnabled', data.streamEnabled);
+            localStorage.setItem('defaultTheme', data.defaultTheme);
             localStorage.setItem('preset1', data.presets[0]);
             localStorage.setItem('preset2', data.presets[1]);
             localStorage.setItem('preset3', data.presets[2]);

web/js/main.js

@@ -362,7 +362,7 @@ function getCurrentFreq() {
 function checkKey(e) {
     e = e || window.event;
 
-    if ($('#password:focus').length > 0) {
+    if ($('#password:focus').length > 0 || $('#chat-send-message:focus').length > 0) {
         return; 
     }
 

web/js/settings.js

@@ -29,8 +29,13 @@
         // Theme Selector
         const themeSelector = $('#theme-selector');
         const savedTheme = localStorage.getItem('theme');
+        const defaultTheme = localStorage.getItem('defaultTheme');
         const savedUnit = localStorage.getItem('signalUnit');
 
+        if(defaultTheme && themes[defaultTheme]) {
+            setTheme(defaultTheme);
+        }
+
         if (savedTheme && themes[savedTheme]) {
             setTheme(savedTheme);
             themeSelector.find('input').val(themeSelector.find('.option[data-value="' + savedTheme + '"]').text());

web/js/setup.js

@@ -9,12 +9,6 @@ $(document).ready(function() {
   MapCreate();
   fetchData();
 
-  setTimeout( function() {
-    if ($('.nav li.active[data-panel="status"]').length > 0) {
-      $('#submit-config').hide();
-    }
-  }, 50 )
-
   map.on('click', function(ev) {
     $('#lat').val((ev.latlng.lat).toFixed(6));
     $('#lng').val((ev.latlng.lng).toFixed(6));
@@ -31,7 +25,7 @@ $(document).ready(function() {
     }
   });
 
-  $('#status').show();
+  $('#dashboard').show();
   showPanelFromHash();
   $('.nav li').click(function() {
     // Remove background color from all li elements
@@ -54,12 +48,6 @@ $(document).ready(function() {
             map.invalidateSize();
         }, 200);
     }
-
-    if(panelId == 'status') {
-      $('#submit-config').hide();
-    } else {
-      $('#submit-config').show();
-    }
   });
 
 

web/setup.ejs

@@ -20,21 +20,19 @@
         </div>
         <div class="panel-100">
             <ul class="nav">
-                <li data-panel="status" class="active">Status</li>
+                <li data-panel="dashboard" class="active">Dashboard</li>
                 <li data-panel="connection">Connection</li>
                 <li data-panel="audio">Audio</li>
                 <li data-panel="webserver">Webserver</li>
-                <li data-panel="identification">Identification</li>
+                <li data-panel="identification">Info & Map</li>
-                <li data-panel="mapbroadcast">Online map</li>
-                <li data-panel="maintenance">Maintenance</li>
                 <li class="logout-link text-gray"><i class="fas fa-sign-out"></i></li>
             </ul>
         </div>
 
         <div id="login-message"></div>
         <div class="panel-100">
-            <div class="panel-100 tab-content" id="status">
+            <div class="panel-100 tab-content" id="dashboard">
-                <h2>STATUS</h2>
+                <h2>Dashboard</h2>
 
                 <div class="panel-100 flex-container auto">
                     <div class="panel-33">
@@ -90,7 +88,36 @@
                     <p>No console output available.</p>
                 <% } %>
 
-                <p>Version: <span class="version-string color-4"></span></p>
+                <h3>Maintenance</h3>
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="tuner-public">
+                            <label for="tuner-public">Allow tuner control without password</label>
+                        </div>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="tuner-lock">
+                            <label for="tuner-lock">Lock the tuner [only admins can tune with this option]</label>
+                        </div>
+                    </div>
+                    <div class="panel-50 no-bg">
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="shutdown-tuner">
+                            <label for="shutdown-tuner">Auto-shutdown tuner when no one is online</label>
+                        </div><br>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="tune-pass">Tune password:</label>
+                    <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
+                </div>
+                <div class="form-group">
+                    <label for="admin-pass">Admin setup password:</label>
+                    <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
+                </div><br>
+
+                <p class="text-small">Version: <span class="version-string color-4"></span></p>
                 <p class="p-bottom-20"><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>
     
@@ -183,14 +210,55 @@
 
             <div class="panel-100 tab-content" id="webserver">
                 <h2>Webserver settings</h2>
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
                         <h3>Antenna options</h3>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" id="antenna-switch">
                             <label for="antenna-switch">Enable the antenna switch</label>
-                </div><br>
+                        </div>        
+                    </div>
+                    <div class="panel-50 no-bg">
+                        <h3>Chat options</h3>
+                        <div class="form-group checkbox bottom-20">
+                            <input type="checkbox" id="chat-switch">
+                            <label for="chat-switch">Enable chat</label>
+                        </div>        
+                    </div>
+                </div>
 
+                <h3>Themes</h3>
+                <div class="form-group">
+                    <label for="themes"><i class="fa-solid fa-palette"></i>Default server theme:</label>
+                    <div class="dropdown" id="server-theme-selector" style="margin-right: 0;">
+                        <input type="text" placeholder="Default" id="selected-theme" readonly>
+                        <ul class="options">
+                            <li class="option" data-value="theme1">Default</li>
+                            <li class="option" data-value="theme2">Cappuccino</li>
+                            <li class="option" data-value="theme3">Nature</li>
+                            <li class="option" data-value="theme4">Ocean</li>
+                            <li class="option" data-value="theme5">Terminal</li>
+                            <li class="option" data-value="theme6">Nightlife</li>
+                            <li class="option" data-value="theme7">Blurple</li>
+                            <li class="option" data-value="theme8">Construction</li>
+                            <li class="option" data-value="theme9">AMOLED</li>
+                        </ul>
+                    </div>
+                </div>
+                <br><hr>
+
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
                         <h3>Tuning options</h3>
-                <p>If you want to limit which frequencies the users can tune to, you can set the lower and upper limit here.<br>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="default-freq-enable">
+                            <label for="default-freq-enable">Enable default frequency for first client</label>
+                        </div><br>
+                        <div class="form-group">
+                            <label for="default-freq">Default frequency:</label>
+                            <input class="input-text w-150" type="text" placeholder="87.5" name="default-freq" id="default-freq">
+                        </div>
+                        <p>If you want to limit which frequencies the users can tune to,<br>you can set the lower and upper limit here.<br>
                             <span class="text-gray">Enter frequencies in MHz.</span>
                         </p>
                         <div class="form-group checkbox">
@@ -205,9 +273,11 @@
                             <label for="tuning-upper-limit">Upper Limit:</label>
                             <input class="input-text w-100" type="text" placeholder="108" name="tuning-upper-limit" id="tuning-upper-limit">
                         </div>
+                    </div>
 
+                    <div class="panel-50 no-bg">
                         <h3>Presets</h3>
-                <p>You can set up to 4 presets. These presets are accessible with the F1-F4 buttons.<br>
+                        <p>You can set up to 4 presets.<br>These presets are accessible with the F1-F4 buttons.<br>
                         <span class="text-gray">Enter frequencies in MHz.</span></p>
                         <div class="form-group">
                             <label for="preset1">Preset 1:</label>
@@ -216,7 +286,7 @@
                         <div class="form-group">
                             <label for="preset2">Preset 2:</label>
                             <input class="input-text w-100" type="text" placeholder="87.5" name="preset2" id="preset2">
-                </div>
+                        </div><br>
                         <div class="form-group">
                             <label for="preset1">Preset 3:</label>
                             <input class="input-text w-100" type="text" placeholder="87.5" name="preset3" id="preset3">
@@ -225,6 +295,10 @@
                             <label for="preset1">Preset 4:</label>
                             <input class="input-text w-100" type="text" placeholder="87.5" name="preset4" id="preset4">
                         </div>
+                    </div>
+                </div>
+
+                <br><hr>
 
                 <h3>Banlist</h3>
                 <p>If you have users that don't behave in your chat, you can choose to ban them by their IP address.<br>
@@ -237,9 +311,13 @@
             </div>
     
             <div class="panel-100 tab-content" id="identification">
-                <h2>Tuner Identification info</h2>
+                <h2>Identification & Map</h2>
 
-                <p class="text-gray">Set your tuner name and description here. This info will be visible to anyone who tunes in. </p>
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
+                        <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>
                         <div class="panel-100" style="padding-left: 20px; padding-right: 20px;">
                             <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">
@@ -247,6 +325,30 @@
                             <label for="webserver-desc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label>
                             <textarea id="webserver-desc" name="webserver-desc" placeholder="Fill the server description here. You can put useful info here such as your antenna setup. You can use simple markdown." maxlength="255"></textarea>
                         </div>
+                    </div>
+
+                    <div class="panel-50 no-bg">
+                        <h3>Online map</h3>
+                        <p class="m-0 text-gray">If your location information is filled,<br>you can add your tuner to a public list.</p>
+                        <p></p>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="broadcast-tuner">
+                            <label for="broadcast-tuner">Broadcast to map</label>
+                        </div><br>
+                        <div class="form-group">
+                            <label for="owner-contact">Owner contact:</label>
+                            <input class="input-text" type="text" placeholder="Your e-mail, discord..." name="owner-contact" id="owner-contact">
+                        </div>
+                        <div class="form-group">
+                            <label for="broadcast-address">Broadcast address (if using a proxy):</label>
+                            <input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
+                        </div>
+        
+                        <p>Check your tuner at <strong><a href="https://list.fmdx.pl" target="_blank" class="color-4">list.fmdx.pl</a></strong>.</p>
+                    </div>
+                </div>
+                <br>
+                <hr>
 
                 <h3>Location:</h3>
                 <p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
@@ -264,51 +366,6 @@
                 <br>
             </div>
 
-            <div class="panel-100 tab-content" id="mapbroadcast">
-                <h2>Map broadcast</h2>
-                <p class="m-0">If your location information is filled, you can add your tuner to a public list.</p>
-                <p></p>
-                <div class="form-group checkbox">
-                    <input type="checkbox" id="broadcast-tuner">
-                    <label for="broadcast-tuner">Broadcast to map</label>
-                </div><br>
-                <div class="form-group">
-                    <label for="owner-contact">Owner contact:</label>
-                    <input class="input-text" type="text" placeholder="Your e-mail, discord..." name="owner-contact" id="owner-contact">
-
-                    <label for="broadcast-address">Broadcast address (if using a proxy):</label>
-                    <input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
-                </div>
-
-                <p>Check your tuner at <strong><a href="https://list.fmdx.pl" target="_blank" class="color-4">list.fmdx.pl</a></strong>.</p>
-            </div>
-    
-            <div class="panel-100 tab-content" id="maintenance">
-                <h2>Maintenance</h2>
-                <div class="text-left top-25 bottom-20 panel-33 auto">
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="tuner-public">
-                        <label for="tuner-public">Allow tuner control without password</label>
-                    </div><br>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="tuner-lock">
-                        <label for="tuner-lock">Lock the tuner [only admins can tune with this option]</label>
-                    </div><br><br>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="shutdown-tuner">
-                        <label for="shutdown-tuner">Auto-shutdown [XDR Only]</label>
-                    </div><br>
-                </div>
-                <div class="form-group">
-                    <label for="tune-pass">Tune password:</label>
-                    <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
-                </div>
-                <div class="form-group">
-                    <label for="admin-pass">Admin setup password:</label>
-                    <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
-                </div><br>
-            </div>
-
             <button id="submit-config" style="height:48px; width: 200px;margin:20px;" onclick="submitData();">Save settings</button>
         </div>