AF
@@ -129,9 +137,6 @@
-
-
-
-
+
\ No newline at end of file
diff --git a/web/js/main.js b/web/js/main.js
new file mode 100644
index 0000000..884da5d
--- /dev/null
+++ b/web/js/main.js
@@ -0,0 +1,382 @@
+$(document).ready(function() {
+ var hostParts = window.location.host.split(':');
+ var hostname = hostParts[0]; // Extract the hostname
+ var port = hostParts[1] || '8080'; // Extract the port or use a default (e.g., 8080)
+ var socketAddress = 'ws://' + hostname + ':' + port + '/text'; // Use 'wss' for secure WebSocket connections (recommended for external access)
+ var socket = new WebSocket(socketAddress);
+
+ var dataContainer = $('#data-container');
+ var canvas = $('#signal-canvas')[0];
+ var context = canvas.getContext('2d');
+
+ var signalToggle = $("#signal-units-toggle");
+
+ canvas.width = canvas.parentElement.clientWidth;
+
+ var data = [];
+ var maxDataPoints = 250;
+ var pointWidth = (canvas.width - 80) / maxDataPoints;
+
+ var europe_programmes = [
+ "No PTY", "News", "Current Affairs", "Info",
+ "Sport", "Education", "Drama", "Culture", "Science", "Varied",
+ "Pop M", "Rock M", "Easy Listening", "Light Classical",
+ "Serious Classical", "Other Music", "Weather", "Finance",
+ "Children's Programmes", "Social Affairs", "Religion", "Phone-in",
+ "Travel", "Leisure", "Jazz Music", "Country Music", "National Music",
+ "Oldies Music", "Folk Music", "Documentary", "Alarm Test"
+ ];
+
+ function getInitialSettings() {
+ $.ajax({
+ url: '/static_data',
+ dataType: 'json',
+ success: function(data) {
+ // Use the received data (data.qthLatitude, data.qthLongitude) as needed
+ localStorage.setItem('qthLatitude', data.qthLatitude);
+ localStorage.setItem('qthLongitude', data.qthLongitude);
+ localStorage.setItem('webServerName', data.webServerName);
+
+ document.title = 'FM-DX Webserver [' + data.webServerName + ']';
+ },
+ error: function(error) {
+ console.error('Error:', error);
+ }
+ });
+ }
+
+ getInitialSettings();
+ // Start updating the canvas
+ updateCanvas();
+
+ function updateCanvas() {
+ const color2 = getComputedStyle(document.documentElement).getPropertyValue('--color-2').trim();
+ const color4 = getComputedStyle(document.documentElement).getPropertyValue('--color-4').trim();
+
+ while (data.length >= maxDataPoints) {
+ data.shift();
+ }
+
+ // Modify the WebSocket onmessage callback
+ socket.onmessage = (event) => {
+ const parsedData = JSON.parse(event.data);
+
+ updatePanels(parsedData);
+ // Push the new signal data to the array
+ data.push(parsedData.signal);
+ const actualLowestValue = Math.min(...data);
+ const actualHighestValue = Math.max(...data);
+ zoomMinValue = actualLowestValue - ((actualHighestValue - actualLowestValue) / 2);
+ zoomMaxValue = actualHighestValue + ((actualHighestValue - actualLowestValue) / 2);
+ zoomAvgValue = (zoomMaxValue - zoomMinValue) / 2 + zoomMinValue;
+
+ // Clear the canvas
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw the signal graph with zoom
+ context.beginPath();
+ context.moveTo(50, canvas.height - (data[0] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue)));
+
+ for (let i = 1; i < data.length; i++) {
+ const x = i * pointWidth;
+ const y = canvas.height - (data[i] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
+ context.lineTo(x + 40, y);
+ }
+
+ context.strokeStyle = color4;
+ context.lineWidth = 1;
+ context.stroke();
+
+ // Draw horizontal lines for lowest, highest, and average values
+ context.strokeStyle = color2; // Set line color
+ context.lineWidth = 1;
+
+ // Draw the lowest value line
+ const lowestY = canvas.height - (zoomMinValue - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
+ context.beginPath();
+ context.moveTo(40, lowestY - 18);
+ context.lineTo(canvas.width - 40, lowestY - 18);
+ context.stroke();
+
+ // Draw the highest value line
+ const highestY = canvas.height - (zoomMaxValue - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
+ context.beginPath();
+ context.moveTo(40, highestY + 10);
+ context.lineTo(canvas.width - 40, highestY + 10);
+ context.stroke();
+
+ const avgY = canvas.height / 2;
+ context.beginPath();
+ context.moveTo(40, avgY - 7);
+ context.lineTo(canvas.width - 40, avgY - 7);
+ context.stroke();
+
+ // Label the lines with their values
+ context.fillStyle = color4;
+ context.font = '12px Titillium Web';
+
+ const offset = signalToggle.prop('checked') ? 11.75 : 0;
+ context.textAlign = 'right';
+ context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, 35, lowestY - 14);
+ context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, 35, highestY + 14);
+ context.fillText(`${(zoomAvgValue - offset).toFixed(1)}`, 35, avgY - 3);
+
+ context.textAlign = 'left';
+ context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, canvas.width - 35, lowestY - 14);
+ context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, canvas.width - 35, highestY + 14);
+ context.fillText(`${(zoomAvgValue - offset).toFixed(1)}`, canvas.width - 35, avgY - 3);
+
+ // Update the data container with the latest data
+ dataContainer.html(event.data + '
');
+ };
+ requestAnimationFrame(updateCanvas);
+ }
+
+
+
+ function compareNumbers(a, b) {
+ return a - b;
+ }
+
+ function escapeHTML(unsafeText) {
+ let div = document.createElement('div');
+ div.innerText = unsafeText;
+ return div.innerHTML.replace(' ', ' ');
+ }
+
+ function processString(string, errors) {
+ var output = '';
+ const max_alpha = 70;
+ const alpha_range = 50;
+ const max_error = 10;
+ errors = errors?.split(',');
+
+ for (let i = 0; i < string.length; i++) {
+ alpha = parseInt(errors[i]) * (alpha_range / (max_error + 1));
+ if (alpha) {
+ output += "
" + escapeHTML(string[i]) + "";
+ } else {
+ output += escapeHTML(string[i]);
+ }
+ }
+
+ return output;
+ }
+
+ function updatePanels(parsedData) {
+ const sortedAf = parsedData.af.sort(compareNumbers);
+ const scaledArray = sortedAf.map(element => element / 1000);
+ const listContainer = $('#af-list');
+ const scrollTop = listContainer.scrollTop();
+ let ul = listContainer.find('ul');
+
+ if (!ul.length) {
+ ul = $('
');
+ listContainer.append(ul);
+ }
+ ul.html('');
+
+ const listItems = scaledArray.map(element => {
+ return $('
').text(element.toFixed(1))[0];
+ });
+
+ ul.append(listItems);
+ listContainer.scrollTop(scrollTop);
+
+ $('#data-frequency').text(parsedData.freq);
+ $('#data-pi').html(parsedData.pi === '?' ? "
?" : parsedData.pi);
+ $('#data-ps').html(parsedData.ps === '?' ? "
?" : processString(parsedData.ps, parsedData.ps_errors));
+ $('#data-tp').html(parsedData.tp === false ? "
TP" : "TP");
+ $('#data-pty').html(europe_programmes[parsedData.pty]);
+ $('#data-st').html(parsedData.st === false ? "
ST" : "ST");
+ $('#data-rt0').html(processString(parsedData.rt0, parsedData.rt0_errors));
+ $('#data-rt1').html(processString(parsedData.rt1, parsedData.rt1_errors));
+ $('#data-flag').html('
');
+
+ const signalValue = signalToggle.is(':checked') ? (parsedData.signal - 11.75) : parsedData.signal;
+ const integerPart = Math.floor(signalValue);
+ const decimalPart = (signalValue - integerPart).toFixed(1).slice(1); // Adjusted this line
+
+ $('#data-signal').text(integerPart);
+ $('#data-signal-decimal').text(decimalPart);
+ $('#users-online').text(parsedData.users);
+ }
+
+ signalToggle.on("change", function() {
+ const signalText = $('#signal-units');
+ if (signalToggle.prop('checked')) {
+ signalText.text('dBµV');
+ } else {
+ signalText.text('dBf');
+ }
+ });
+
+ const textInput = $('#commandinput');
+
+ textInput.on('change', function (event) {
+ const inputValue = textInput.val();
+ // Check if the user agent contains 'iPhone'
+ if (/iPhone/i.test(navigator.userAgent) && socket.readyState === WebSocket.OPEN) {
+ socket.send(inputValue);
+ // Clear the input field if needed
+ textInput.val('');
+ }
+ });
+
+ textInput.on('keyup', function (event) {
+ if (event.key !== 'Backspace') {
+ let inputValue = textInput.val();
+ inputValue = inputValue.replace(/[^0-9.]/g, '');
+
+ if (inputValue.includes("..")) {
+ inputValue = inputValue.slice(0, inputValue.lastIndexOf('.')) + inputValue.slice(inputValue.lastIndexOf('.') + 1);
+ textInput.val(inputValue);
+ }
+
+ if (!inputValue.includes(".")) {
+ if (inputValue.startsWith('10') && inputValue.length > 2) {
+ inputValue = inputValue.slice(0, 3) + '.' + inputValue.slice(3);
+ textInput.val(inputValue);
+ } else if (inputValue.length > 2) {
+ inputValue = inputValue.slice(0, 2) + '.' + inputValue.slice(2);
+ textInput.val(inputValue);
+ }
+ }
+ }
+ if (event.key === 'Enter') {
+ const inputValue = textInput.val();
+ if (socket.readyState === WebSocket.OPEN) {
+ socket.send(inputValue);
+ }
+ textInput.val('');
+ }
+ });
+
+ document.onkeydown = checkKey;
+
+ function checkKey(e) {
+ e = e || window.event;
+
+ getCurrentFreq();
+
+ if (socket.readyState === WebSocket.OPEN) {
+ if (e.keyCode == '38') {
+ socket.send((currentFreq + 0.01).toFixed(2));
+ }
+ else if (e.keyCode == '40') {
+ socket.send((currentFreq - 0.01).toFixed(2));
+ }
+ else if (e.keyCode == '37') {
+ socket.send((currentFreq - 0.10).toFixed(1));
+ }
+ else if (e.keyCode == '39') {
+ socket.send((currentFreq + 0.10).toFixed(1));
+ }
+ }
+ }
+
+ function getCurrentFreq() {
+ currentFreq = $('#data-frequency').text();
+ currentFreq = parseFloat(currentFreq).toFixed(3);
+ currentFreq = parseFloat(currentFreq);
+
+ return currentFreq;
+ }
+
+ var freqUpButton = $('#freq-up')[0];
+ var freqDownButton = $('#freq-down')[0];
+ var psContainer = $('#ps-container')[0];
+ var rtContainer = $('#rt-container')[0];
+ var piCodeContainer = $('#pi-code-container')[0];
+ var freqContainer = $('#freq-container')[0];
+
+ $(freqUpButton).on("click", tuneUp);
+ $(freqDownButton).on("click", tuneDown);
+ $(psContainer).on("click", copyPs);
+ $(rtContainer).on("click", copyRt);
+ $(piCodeContainer).on("click", findOnMaps);
+ $(freqContainer).on("click", function() {
+ textInput.focus();
+ });
+
+
+ function tuneUp() {
+ if (socket.readyState === WebSocket.OPEN) {
+ getCurrentFreq();
+ socket.send((currentFreq + 0.10).toFixed(1));
+ }
+ }
+
+ function tuneDown() {
+ if (socket.readyState === WebSocket.OPEN) {
+ getCurrentFreq();
+ socket.send((currentFreq - 0.10).toFixed(1));
+ }
+ }
+
+ async function copyPs() {
+ var frequency = $('#data-frequency').text();
+ var pi = $('#data-pi').text();
+ var ps = $('#data-ps').text();
+ var signal = $('#data-signal').text();
+ var signalDecimal = $('#data-signal-decimal').text();
+ var signalUnit = $('#signal-units').text();
+
+ try {
+ await copyToClipboard(frequency + " - " + pi + " | " + ps + " [" + signal + signalDecimal + " " + signalUnit + "]");
+ } catch(error) {
+ console.error(error);
+ }
+ }
+
+ async function copyRt() {
+ var rt0 = $('#data-rt0').text();
+ var rt1 = $('#data-rt1').text();
+
+ try {
+ await copyToClipboard("[0] RT: " + rt0 + "\n[1] RT: " + rt1);
+ } catch(error) {
+ console.error(error);
+ }
+ }
+
+
+ function findOnMaps() {
+ var frequency = $('#data-frequency').text();
+ 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;
+ window.open(url, "_blank");
+ }
+
+ function copyToClipboard(textToCopy) {
+ // Navigator clipboard api needs a secure context (https)
+ if (navigator.clipboard && window.isSecureContext) {
+ navigator.clipboard.writeText(textToCopy)
+ .catch(function(err) {
+ console.error('Error:', err);
+ });
+ } else {
+ var textArea = $('
');
+ textArea.val(textToCopy);
+ textArea.css({
+ 'position': 'absolute',
+ 'left': '-999999px'
+ });
+
+ $('body').prepend(textArea);
+ textArea.select();
+
+ try {
+ document.execCommand('copy');
+ } catch (error) {
+ console.error('Error:', error);
+ } finally {
+ textArea.remove();
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/web/js/modal.js b/web/js/modal.js
new file mode 100644
index 0000000..830dc43
--- /dev/null
+++ b/web/js/modal.js
@@ -0,0 +1,33 @@
+$(document).ready(function() {
+ // Cache jQuery objects for reuse
+ var modal = $("#myModal");
+ var openBtn = $("#settings");
+ var closeBtn = $("#closeModal, #closeModalButton");
+
+ // Function to open the modal
+ function openModal() {
+ modal.css("display", "block");
+ setTimeout(function() {
+ modal.css("opacity", 1);
+ }, 10);
+ }
+
+ // Function to close the modal
+ function closeModal() {
+ modal.css("opacity", 0);
+ setTimeout(function() {
+ modal.css("display", "none");
+ }, 300);
+ }
+
+ // Event listeners for the open and close buttons
+ openBtn.on("click", openModal);
+ closeBtn.on("click", closeModal);
+
+ // Close the modal when clicking outside of it
+ $(document).on("click", function(event) {
+ if ($(event.target).is(modal)) {
+ closeModal();
+ }
+ });
+});
\ No newline at end of file
diff --git a/web/js/themes.js b/web/js/themes.js
new file mode 100644
index 0000000..e834a26
--- /dev/null
+++ b/web/js/themes.js
@@ -0,0 +1,33 @@
+const themes = {
+ theme1: ['#1d1838', '#8069fa'],
+ theme2: ['#381818', '#ff7070'],
+ theme3: ['#121c0c', '#a9ff70'],
+ theme4: ['#0c1c1b', '#68f7ee'],
+ theme5: ['#171106', '#f5b642'],
+ theme6: ['#21091d', '#ed51d3'],
+ theme7: ['#111', '#aaa']
+};
+
+function setTheme(themeName) {
+ const themeColors = themes[themeName];
+ if (themeColors) {
+ $(':root').css('--color-main', themeColors[0]);
+ $(':root').css('--color-main-bright', themeColors[1]);
+ }
+}
+
+$(document).ready(() => {
+ const themeSelector = $('#theme-selector');
+ const savedTheme = localStorage.getItem('theme');
+
+ if (savedTheme && themes[savedTheme]) {
+ setTheme(savedTheme);
+ themeSelector.val(savedTheme);
+ }
+
+ themeSelector.on('change', (event) => {
+ const selectedTheme = event.target.value;
+ setTheme(selectedTheme);
+ localStorage.setItem('theme', selectedTheme);
+ });
+});
\ No newline at end of file
diff --git a/web/js/webserver.js b/web/js/webserver.js
new file mode 100644
index 0000000..35f3df4
--- /dev/null
+++ b/web/js/webserver.js
@@ -0,0 +1,3 @@
+$.getScript('/js/main.js');
+$.getScript('/js/modal.js');
+$.getScript('/js/themes.js');
\ No newline at end of file
diff --git a/web/main.js b/web/main.js
deleted file mode 100644
index c88bfd4..0000000
--- a/web/main.js
+++ /dev/null
@@ -1,406 +0,0 @@
-const hostParts = window.location.host.split(':');
-const hostname = hostParts[0]; // Extract the hostname
-const port = hostParts[1] || '8080'; // Extract the port or use a default (e.g., 8080)
-const socketAddress = `ws://${hostname}:${port}/text`; // Use 'wss' for secure WebSocket connections (recommended for external access)
-const socket = new WebSocket(socketAddress);
-
-const dataContainer = document.querySelector('#data-container');
-const canvas = document.querySelector('#signal-canvas');
-const context = canvas.getContext('2d');
-
-var signalToggle = document.getElementById("signal-units-toggle");
-
-canvas.width = canvas.parentElement.clientWidth;
-
-const data = [];
-const maxDataPoints = 250;
-const pointWidth = (canvas.width - 80) / maxDataPoints;
-
-var europe_programmes = [
- "No PTY", "News", "Current Affairs", "Info",
- "Sport", "Education", "Drama", "Culture", "Science", "Varied",
- "Pop M", "Rock M", "Easy Listening", "Light Classical",
- "Serious Classical", "Other Music", "Weather", "Finance",
- "Children's Programmes", "Social Affairs", "Religion", "Phone-in",
- "Travel", "Leisure", "Jazz Music", "Country Music", "National Music",
- "Oldies Music", "Folk Music", "Documentary", "Alarm Test"
-];
-
-// Function to handle zoom in
-function zoomIn() {
- zoomMinValue *= 0.9;
- zoomMaxValue *= 0.9;
-}
-
-// Function to handle zoom out
-function zoomOut() {
- zoomMinValue *= 1.1;
- zoomMaxValue *= 1.1;
-}
-
-function getInitialSettings() {
- fetch('/static_data')
- .then(response => response.json())
- .then(data => {
- // Use the received data (data.qthLatitude, data.qthLongitude) as needed
- localStorage.setItem('qthLatitude', data.qthLatitude);
- localStorage.setItem('qthLongitude', data.qthLongitude);
- localStorage.setItem('webServerName', data.webServerName);
-
- document.title = 'FM-DX Webserver [' + data.webServerName + ']';
- })
- .catch(error => console.error('Error:', error));
-}
-
-getInitialSettings();
-
-function updateCanvas() {
- // Remove old data when it exceeds the maximum data points
-
- const color2 = getComputedStyle(document.documentElement).getPropertyValue('--color-2').trim();
- const color4 = getComputedStyle(document.documentElement).getPropertyValue('--color-4').trim();
-
- while (data.length >= maxDataPoints) {
- data.shift();
- }
- // Modify the WebSocket onmessage callback
- socket.onmessage = (event) => {
- const parsedData = JSON.parse(event.data);
-
- updatePanels(parsedData);
- // Push the new signal data to the array
- data.push(parsedData.signal);
- const actualLowestValue = Math.min(...data);
- const actualHighestValue = Math.max(...data);
- zoomMinValue = actualLowestValue - ((actualHighestValue - actualLowestValue) / 2);
- zoomMaxValue = actualHighestValue + ((actualHighestValue - actualLowestValue) / 2);
- zoomAvgValue = (zoomMaxValue - zoomMinValue) / 2 + zoomMinValue;
-
- // Clear the canvas
- context.clearRect(0, 0, canvas.width, canvas.height);
-
- // Draw the signal graph with zoom
- context.beginPath();
- context.moveTo(50, canvas.height - (data[0] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue)));
-
- for (let i = 1; i < data.length; i++) {
- const x = i * pointWidth;
- const y = canvas.height - (data[i] - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
- context.lineTo(x + 40, y);
- }
-
- context.strokeStyle = color4;
- context.lineWidth = 1;
- context.stroke();
-
- // Draw horizontal lines for lowest, highest, and average values
- context.strokeStyle = color2; // Set line color
- context.lineWidth = 1;
-
- // Draw the lowest value line
- const lowestY = canvas.height - (zoomMinValue - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
- context.beginPath();
- context.moveTo(40, lowestY - 18);
- context.lineTo(canvas.width - 40, lowestY - 18);
- context.stroke();
-
- // Draw the highest value line
- const highestY = canvas.height - (zoomMaxValue - zoomMinValue) * (canvas.height / (zoomMaxValue - zoomMinValue));
- context.beginPath();
- context.moveTo(40, highestY + 10);
- context.lineTo(canvas.width - 40, highestY + 10);
- context.stroke();
-
- const avgY = canvas.height / 2;
- context.beginPath();
- context.moveTo(40, avgY - 7);
- context.lineTo(canvas.width - 40, avgY - 7);
- context.stroke();
-
- // Label the lines with their values
- context.fillStyle = color4;
- context.font = '12px Titillium Web';
-
- const offset = signalToggle.checked ? 11.75 : 0;
- context.textAlign = 'right';
- context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, 35, lowestY - 14);
- context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, 35, highestY + 14);
- context.fillText(`${(zoomAvgValue - offset).toFixed(1)}`, 35, avgY - 3);
-
- context.textAlign = 'left';
- context.fillText(`${(zoomMinValue - offset).toFixed(1)}`, canvas.width - 35, lowestY - 14);
- context.fillText(`${(zoomMaxValue - offset).toFixed(1)}`, canvas.width - 35, highestY + 14);
- context.fillText(`${(zoomAvgValue - offset).toFixed(1)}`, canvas.width - 35, avgY - 3);
-
- // Update the data container with the latest data
- dataContainer.innerHTML = event.data + '
';
- };
-
- requestAnimationFrame(updateCanvas);
-}
-
-// Start updating the canvas
-updateCanvas();
-
-function compareNumbers(a, b) {
- return a - b;
-}
-
-function divideByHundred(a) {
- a = a / 100;
-}
-
-function escapeHTML(unsafeText) {
- let div = document.createElement('div');
- div.innerText = unsafeText;
- return div.innerHTML.replace(' ', ' ');
-}
-
-function processString(string, errors) {
- var output = '';
- const max_alpha = 70;
- const alpha_range = 50;
- const max_error = 10;
- errors = errors.split(',');
-
- for (let i = 0; i < string.length; i++) {
- alpha = parseInt(errors[i]) * (alpha_range / (max_error + 1));
- if (alpha) {
- output += "
" + escapeHTML(string[i]) + "";
- } else {
- output += escapeHTML(string[i]);
- }
- }
-
- return output;
-}
-
-function updatePanels(parsedData) {
- // Assuming sortedAf is your array
- const sortedAf = parsedData.af.sort(compareNumbers);
-
- // Convert the values in the array (dividing by 1000)
- const scaledArray = sortedAf.map(element => element / 1000);
-
- // Get the container element where you want to display the list
- const listContainer = document.querySelector('#af-list');
-
- // Preserve the current scroll position
- const scrollTop = listContainer.scrollTop;
-
- // Get the existing ul element
- const ul = listContainer.querySelector('ul');
-
- // If ul doesn't exist, create a new one
- if (!ul) {
- ul = document.createElement('ul');
- listContainer.appendChild(ul);
- }
-
- // Remove existing list items
- ul.innerHTML = '';
-
- // Create an array of list items
- const listItems = scaledArray.map(element => {
- const li = document.createElement('li');
- li.textContent = element.toFixed(1);
- return li;
- });
-
- // Append the list items to the unordered list
- listItems.forEach(li => ul.appendChild(li));
-
- // Restore the scroll position
- listContainer.scrollTop = scrollTop;
- document.querySelector('#data-frequency').textContent = parsedData.freq;
- document.querySelector('#data-pi').innerHTML = parsedData.pi === '?' ? "
?" : parsedData.pi;
- document.querySelector('#data-ps').innerHTML = parsedData.ps === '?' ? "
?" : processString(parsedData.ps, parsedData.ps_errors);
- document.querySelector('#data-tp').innerHTML = parsedData.tp === false ? "
TP" : "TP";
- document.querySelector('#data-pty').innerHTML = europe_programmes[parsedData.pty];
- document.querySelector('#data-st').innerHTML = parsedData.st === false ? "
ST" : "ST";
- document.querySelector('#data-rt0').innerHTML = processString(parsedData.rt0, parsedData.rt0_errors);
- document.querySelector('#data-rt1').innerHTML = processString(parsedData.rt1, parsedData.rt1_errors);
-
- document.querySelector('#data-flag').innerHTML = '
';
-
- const signalValue = signalToggle.checked ? (parsedData.signal - 11.75) : parsedData.signal;
- const integerPart = Math.floor(signalValue);
- const decimalPart = (signalValue - integerPart).toFixed(1).slice(1); // Adjusted this line
-
- document.querySelector('#data-signal').textContent = integerPart;
- document.querySelector('#data-signal-decimal').textContent = decimalPart;
- document.querySelector('#users-online').textContent = parsedData.users;
-}
-
-signalToggle.addEventListener("change", function() {
- signalText = document.querySelector('#signal-units');
- if (signalToggle.checked) {
- signalText.textContent = 'dBµV';
- } else {
- // Checkbox is unchecked
- signalText.textContent = 'dBf';
- }
-});
-
-const textInput = document.getElementById('commandinput');
-
-textInput.addEventListener('change', function (event) {
- const inputValue = textInput.value;
- // Check if the user agent contains 'iPhone'
- if (/iPhone/i.test(navigator.userAgent) && socket.readyState === WebSocket.OPEN) {
- socket.send(inputValue);
- // Clear the input field if needed
- textInput.value = '';
- }
-});
-
-textInput.addEventListener('keyup', function (event) {
- // Check if the pressed key is 'Backspace' (key code 8)
- if (event.key !== 'Backspace') {
- // Get the current input value
- let inputValue = textInput.value;
-
- // Remove non-digit characters (excluding dot)
- inputValue = inputValue.replace(/[^0-9.]/g, '');
-
- // Remove the last dot if there are two consecutive dots
- if (inputValue.includes("..")) {
- inputValue = inputValue.slice(0, inputValue.lastIndexOf('.')) + inputValue.slice(inputValue.lastIndexOf('.') + 1);
- textInput.value = inputValue;
- }
-
- // Determine where to add the dot based on the frequency range
- if (!inputValue.includes(".")) {
- 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;
-
- getCurrentFreq();
-
- if (socket.readyState === WebSocket.OPEN) {
- if (e.keyCode == '38') {
- socket.send((currentFreq + 0.01).toFixed(2));
- }
- else if (e.keyCode == '40') {
- socket.send((currentFreq - 0.01).toFixed(2));
- }
- else if (e.keyCode == '37') {
- socket.send((currentFreq - 0.10).toFixed(1));
- }
- else if (e.keyCode == '39') {
- socket.send((currentFreq + 0.10).toFixed(1));
- }
- }
-}
-
-function getCurrentFreq() {
- currentFreq = document.getElementById("data-frequency").textContent;
- currentFreq = parseFloat(currentFreq).toFixed(3);
- currentFreq = parseFloat(currentFreq);
-
- return currentFreq;
-}
-
-freqUpButton = document.getElementById('freq-up');
-freqDownButton = document.getElementById('freq-down');
-psContainer = document.getElementById('ps-container');
-piCodeContainer = document.getElementById('pi-code-container');
-freqContainer = document.getElementById('freq-container');
-
-freqUpButton.addEventListener("click", tuneUp);
-freqDownButton.addEventListener("click", tuneDown);
-psContainer.addEventListener("click", copyPs);
-piCodeContainer.addEventListener("click", findOnMaps);
-freqContainer.addEventListener("click", function() {
- textInput.focus();
-});
-
-function tuneUp() {
- if (socket.readyState === WebSocket.OPEN) {
- getCurrentFreq();
- socket.send((currentFreq + 0.10).toFixed(1));
- }
-}
-
-function tuneDown() {
- if (socket.readyState === WebSocket.OPEN) {
- getCurrentFreq();
- socket.send((currentFreq - 0.10).toFixed(1));
- }
-}
-
-async function copyPs() {
- let frequency = document.querySelector('#data-frequency').textContent;
- let pi = document.querySelector('#data-pi').textContent;
- let ps = document.querySelector('#data-ps').textContent;
- let signal = document.querySelector('#data-signal').textContent;
- let signalDecimal = document.querySelector('#data-signal-decimal').textContent;
- let signalUnit = document.querySelector('#signal-units').textContent;
- try {
- await copyToClipboard(frequency + " - " + pi + " | " + ps + " [" + signal + signalDecimal + " " + signalUnit + "]");
- } catch(error) {
- console.error(error);
- }
-}
-
-function findOnMaps() {
- let frequency = document.querySelector('#data-frequency').textContent;
- let pi = document.querySelector('#data-pi').textContent;
- let latitude = localStorage.getItem('qthLongitude');
- let longitude = localStorage.getItem('qthLatitude');
- frequency = parseFloat(frequency).toFixed(1);
- window.open("https://maps.fmdx.pl/#qth=" + longitude + "," + latitude + "&freq=" + frequency + "&pi=" + pi, "_blank");
-}
-
-async function copyToClipboard(textToCopy) {
- // Navigator clipboard api needs a secure context (https)
- if (navigator.clipboard && window.isSecureContext) {
- await navigator.clipboard.writeText(textToCopy);
- } else {
- const textArea = document.createElement("textarea");
- textArea.value = textToCopy;
- textArea.style.position = "absolute";
- textArea.style.left = "-999999px";
-
- document.body.prepend(textArea);
- textArea.select();
-
- try {
- document.execCommand('copy');
- } catch (error) {
- console.error(error);
- } finally {
- textArea.remove();
- }
- }
-}
diff --git a/web/modal.js b/web/modal.js
deleted file mode 100644
index 33c1b80..0000000
--- a/web/modal.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// Get the modal element and the buttons to open and close it
-var modal = document.getElementById("myModal");
-var openBtn = document.getElementById("settings");
-var closeBtn = document.getElementById("closeModal");
-var closeBtnFull = document.getElementById("closeModalButton");
-
-// Function to open the modal
-function openModal() {
- modal.style.display = "block";
- setTimeout(function() {
- modal.style.opacity = 1;
- }, 10);
-}
-
-// Function to close the modal
-function closeModal() {
- modal.style.opacity = 0;
- setTimeout(function() {
- modal.style.display = "none";
- }, 300); // This delay should match the transition duration (0.3s).
-}
-
-// Event listeners for the open and close buttons
-openBtn.addEventListener("click", openModal);
-closeBtn.addEventListener("click", closeModal);
-closeBtnFull.addEventListener("click", closeModal);
-
-// Close the modal when clicking outside of it
-window.addEventListener("click", function(event) {
- if (event.target == modal) {
- closeModal();
- }
-});
\ No newline at end of file
diff --git a/web/stream.js b/web/stream.js
deleted file mode 100644
index 5143e6e..0000000
--- a/web/stream.js
+++ /dev/null
@@ -1,20 +0,0 @@
- const audioElement = document.getElementById("myAudio");
- const volumeSlider = document.getElementById("volumeSlider");
- const audioStream = "/audio-proxy";
- const uniqueTimestamp = Date.now(); // Create a unique timestamp
-
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
- const audioSource = audioContext.createMediaElementSource(audioElement);
-
- audioSource.connect(audioContext.destination);
-
- // Set the audio element's source to your external audio stream
- audioElement.src = `${audioStream}?${uniqueTimestamp}`;
-
-
- audioElement.play();
-
- volumeSlider.addEventListener("input", (event) => {
- event.stopPropagation();
- audioElement.volume = volumeSlider.value;
- });
\ No newline at end of file
diff --git a/web/themes.js b/web/themes.js
deleted file mode 100644
index 5b2e8f8..0000000
--- a/web/themes.js
+++ /dev/null
@@ -1,57 +0,0 @@
-const themes = {
- theme1: {
- '--color-main': '#1d1838',
- '--color-main-bright': '#8069fa',
- },
- theme2: {
- '--color-main': '#381818',
- '--color-main-bright': '#ff7070',
- },
- theme3: {
- '--color-main': '#121c0c',
- '--color-main-bright': '#a9ff70',
- },
- theme4: {
- '--color-main': '#0c1c1b',
- '--color-main-bright': '#68f7ee',
- },
- theme5: {
- '--color-main': '#171106',
- '--color-main-bright': '#f5b642',
- },
- theme6: {
- '--color-main': '#21091d',
- '--color-main-bright': '#ed51d3',
- },
- theme7: {
- '--color-main': '#111',
- '--color-main-bright': '#aaa',
- }
-};
-
-
-function setTheme(themeName) {
- const theme = themes[themeName];
- if (theme) {
- for (const [variable, value] of Object.entries(theme)) {
- document.documentElement.style.setProperty(variable, value);
- }
- }
-}
-
-// Get the dropdown element
-const themeSelector = document.getElementById('theme-selector');
-
-const savedTheme = localStorage.getItem("theme");
-if(savedTheme) {
- setTheme(savedTheme);
- themeSelector.value = savedTheme;
-}
-
-// Listen for changes in the dropdown
-themeSelector.addEventListener('change', (event) => {
- const selectedTheme = event.target.value;
- setTheme(selectedTheme);
- localStorage.setItem("theme", selectedTheme);
-
-});