Add files via upload

web/main.js

@@ -0,0 +1,168 @@
+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 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 + '<br>';
+    };
+    
+    requestAnimationFrame(updateCanvas);
+}
+
+// Start updating the canvas
+updateCanvas();
+
+function compareNumbers(a, b) {
+  return a - b;
+}
+
+function divideByHundred(a) {
+    a = a / 100;
+}
+
+function updatePanels(parsedData) {
+    sortedAf = parsedData.af.sort(compareNumbers);
+    
+    sortedAf.forEach((element, index, array) => {
+        array[index] = element / 1000;
+
+        // Check if it's the last element in the array
+        if (index === array.length - 1) {
+            document.querySelector('#data-af').innerHTML = array;
+        }
+    });
+
+    document.querySelector('#data-frequency').textContent = parsedData.freq;
+    document.querySelector('#data-pi').innerHTML = parsedData.pi === '?' ? "<span class='text-gray'>?</span>" : parsedData.pi;
+    document.querySelector('#data-ps').innerHTML = parsedData.ps === '?' ? "<span class='text-gray'>?</span>" : parsedData.ps;
+    document.querySelector('#data-tp').innerHTML = parsedData.tp === false ? "<span class='text-gray'>TP</span>" : "TP";
+    document.querySelector('#data-pty').innerHTML = europe_programmes[parsedData.pty];
+    document.querySelector('#data-st').innerHTML = parsedData.st === false ? "<span class='text-gray'>ST</span>" : "ST";
+    document.querySelector('#data-rt0').innerHTML = parsedData.rt0;
+    document.querySelector('#data-rt1').innerHTML = parsedData.rt1;
+    document.querySelector('#data-signal').textContent = signalToggle.checked ? (parsedData.signal - 11.75).toFixed(1) : parsedData.signal;
+}       
+
+signalToggle.addEventListener("change", function() {
+    signalText = document.querySelector('#signal-units');
+    if (signalToggle.checked) {
+        signalText.textContent = 'dBµV';
+    } else {
+        // Checkbox is unchecked
+        signalText.textContent = 'dBf';
+    }
+});