remote control support

web/index.html

@@ -51,8 +51,9 @@
                 <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1">
             </div>
             
-            <div class="panel-33" style="opacity: 0;">
-            <button id="playButton">play</button>
+            <div class="panel-33" style="opacity: 1;">
+            <!--<button id="playButton">play</button>-->
+            <input type="text" id="commandinput" inputmode="numeric" placeholder="Frequency">
             </div>
             
             <div class="panel-33" style="height: 48px;">
@@ -73,8 +74,11 @@
             <div id="data-rt1"></div>
             <div id="data-container" style="display: none;"></div>
         </div>
-
-        <div id="data-af" style="text-align: center;"></div>
+        
+        <div class="panel-100" style="overflow: hidden">
+            <h2 style="margin: 0;">AF</h2>
+            <div id="data-af" style="text-align: center;"></div>
+        </div>
     </div>
     
     <button id="settings"><i class="fa-solid fa-gear"></i></button>
@@ -92,7 +96,7 @@
                 <option value="theme4">Cyan</option>
                 <option value="theme5">Orange</option>
             </select>
-            <p class="text-small" style="margin-bottom: 50px;">FM-DX WebServer uses librds by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a>.</p>
+            <p class="text-small" style="margin-bottom: 50px;">FM-DX WebServer uses librdsparser by <a href="https://fmdx.pl" target="_blank">Konrad Kosmatka</a>.</p>
             <button class="button-close" id="closeModalButton">Close</button>
         </div>
     </div>

web/main.js

@@ -166,3 +166,68 @@ signalToggle.addEventListener("change", function() {
         signalText.textContent = 'dBf';
     }
 });
+
+const textInput = document.getElementById('commandinput');
+
+textInput.addEventListener('keyup', function (event) {
+    // Get the current input value
+    let inputValue = textInput.value;
+
+    // Remove non-digit characters
+    inputValue = inputValue.replace(/[^0-9]/g, '');
+
+    console.log("InputValue contains dot: ", inputValue.toLowerCase().includes("."));
+    
+    // Determine where to add the dot based on the frequency range
+    if (inputValue.includes(".") === false) {
+        if (inputValue.startsWith('10') && inputValue.length > 2) {
+            // For frequencies starting with '10', add the dot after the third digit
+            inputValue = inputValue.slice(0, 3) + '.' + inputValue.slice(3);
+            textInput.value = inputValue;
+        } else if (inputValue.length > 2) {
+            // For other frequencies, add the dot after the second digit
+            inputValue = inputValue.slice(0, 2) + '.' + inputValue.slice(2);
+            textInput.value = inputValue;
+        }
+    }
+
+    // Update the input value
+
+    // Check if the pressed key is 'Enter' (key code 13)
+    if (event.key === 'Enter') {
+        // Retrieve the input value
+        const inputValue = textInput.value;
+
+        // Send the input value to the WebSocket
+        if (socket.readyState === WebSocket.OPEN) {
+            socket.send(inputValue);
+        }
+
+        // Clear the input field if needed
+        textInput.value = '';
+    }
+});
+
+document.onkeydown = checkKey;
+
+function checkKey(e) {
+    e = e || window.event;
+    currentFreq = document.getElementById("data-frequency").textContent;
+    currentFreq = parseFloat(currentFreq).toFixed(3);
+    currentFreq = parseFloat(currentFreq);
+
+    if (socket.readyState === WebSocket.OPEN) {
+        if (e.keyCode == '38') {
+                socket.send((currentFreq + 0.01).toFixed(3));
+            }
+        else if (e.keyCode == '40') {
+                socket.send((currentFreq - 0.01).toFixed(3));
+        }
+        else if (e.keyCode == '37') {
+                socket.send((currentFreq - 0.10).toFixed(3));
+        }
+        else if (e.keyCode == '39') {
+            socket.send((currentFreq + 0.10).toFixed(3));
+        }
+    }
+}

web/styles.css

@@ -130,7 +130,22 @@ h2 {
     background: #100d1f;
 }
 
+input[type="text"] {
+  width: 100%;
+  height: 100%;
+  min-height: 46px;
+  border-radius: 30px;
+  padding-left: 20px;
+  box-sizing: border-box;
+  border: 0;
+  color: white;
+  background-color: var(--color-1);
+  font-family: 'Titillium Web', sans-serif;
+}
 
+input[type="text"]:focus {
+    outline: 2px solid var(--color-main-bright);
+}
 
 @media only screen and (max-width: 768px) {
     .flex-container {