diff --git a/client/canvasHandling.js b/client/canvasHandling.js index 1cb8e92..93e5f3c 100644 --- a/client/canvasHandling.js +++ b/client/canvasHandling.js @@ -20,6 +20,8 @@ function resizeVisibleCanvas() { visibleCanvas.style.width = containerWidth + "px"; visibleCanvas.style.height = containerWidth / aspectRatio + "px"; } + canvasPresent.style.width = visibleCanvas.style.width; + canvasPresent.style.height = visibleCanvas.style.height; renderCanvas(rawCanvas,visibleCanvas); } function waiting(message) { diff --git a/client/index.html b/client/index.html index 15e5349..4f8faea 100644 --- a/client/index.html +++ b/client/index.html @@ -27,6 +27,7 @@
+
diff --git a/client/main.js b/client/main.js index 1e85886..a1f8797 100644 --- a/client/main.js +++ b/client/main.js @@ -3,6 +3,7 @@ const height = 1404; const rawCanvas = new OffscreenCanvas(width, height); // Define width and height as needed const visibleCanvas = document.getElementById("canvas"); +const canvasPresent = document.getElementById("canvasPresent"); // Initialize the worker const worker = new Worker('worker_stream_processing.js'); @@ -43,18 +44,96 @@ worker.onmessage = (event) => { }; window.onload = function() { - // Function to get the value of a query parameter by name - function getQueryParam(name) { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get(name); - } - - // Get the 'present' parameter from the URL - const presentURL = getQueryParam('present'); - - // Set the iframe source if the URL is available - if (presentURL) { - document.getElementById('content').src = presentURL; - } + // Function to get the value of a query parameter by name + function getQueryParam(name) { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(name); + } + + // Get the 'present' parameter from the URL + const presentURL = getQueryParam('present'); + + // Set the iframe source if the URL is available + if (presentURL) { + document.getElementById('content').src = presentURL; + } }; +const ctxCanvasPresent = canvasPresent.getContext('2d'); + +// Variables to store the latest positions +let latestX = canvasPresent.width / 2; +let latestY = canvasPresent.height / 2; +let ws; +// Constants for the maximum values from the WebSocket messages +const MAX_X_VALUE = 15725; +const MAX_Y_VALUE = 20966; + +// Function to draw the laser pointer +function drawLaser(x, y) { + ctxCanvasPresent.clearRect(0, 0, canvasPresent.width, canvasPresent.height); // Clear the canvasPresent + ctxCanvasPresent.beginPath(); + ctxCanvasPresent.arc(x, y, 10, 0, 2 * Math.PI, false); // Draw a circle for the laser pointer + ctxCanvasPresent.fillStyle = 'red'; + ctxCanvasPresent.fill(); +} + +// Function to clear the laser pointer +function clearLaser() { + ctxCanvasPresent.clearRect(0, 0, canvasPresent.width, canvasPresent.height); // Clear the canvasPresent +} + +// Function to establish a WebSocket connection +function connectWebSocket() { + // Determine the WebSocket protocol based on the current window protocol + const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; + const wsURL = `${wsProtocol}//${window.location.host}/events`; + let draw = true; + + ws = new WebSocket(wsURL); + + ws.onmessage = (event) => { + const message = JSON.parse(event.data); + //if (message.Type === 0) { + // Code 0: Clear the laser pointer + // clearLaser(); + //} else if (message.Type === 3) { + if (message.Type === 3) { + if (message.Code === 24) { + draw = false; + clearLaser(); + } else if (message.Code === 25) { + draw = true; + + } + } + if (message.Type === 3) { + // Code 3: Update and draw laser pointer + if (message.Code === 1) { // Horizontal position + latestX = scaleValue(message.Value, MAX_X_VALUE, canvasPresent.width); + } else if (message.Code === 0) { // Vertical position + latestY = canvasPresent.height - scaleValue(message.Value, MAX_Y_VALUE, canvasPresent.height); + } + if (draw) { + drawLaser(latestX, latestY); + } + } + }; + + ws.onerror = () => { + console.error('WebSocket error occurred. Attempting to reconnect...'); + //setTimeout(connectWebSocket, 3000); // Reconnect after 3 seconds + }; + + ws.onclose = () => { + console.log('WebSocket connection closed. Attempting to reconnect...'); + //setTimeout(connectWebSocket, 3000); // Reconnect after 3 seconds + }; +} +// Function to scale the incoming value to the canvas size +function scaleValue(value, maxValue, canvasSize) { + return (value / maxValue) * canvasSize; +} + +// Initial WebSocket connection +// connectWebSocket(); diff --git a/client/style.css b/client/style.css index 7159995..2ca6d0b 100644 --- a/client/style.css +++ b/client/style.css @@ -23,12 +23,18 @@ body, html { canvas.hidden { display: none; } +#canvasPresent { + position: fixed; + max-width: 100%; + max-height: 100%; + background-color: rgba(0, 0, 0, 0); /* Transparent background */ +} .sidebar { width: 150px; height: 100vh; - background-color: #f5f5f5; /* Light gray */ - border-right: 1px solid #e0e0e0; /* Slight border to separate from the main content */ - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); + background-color: #f5f5f5; /* Light gray */ + border-right: 1px solid #e0e0e0; /* Slight border to separate from the main content */ + box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: -140px; @@ -104,16 +110,16 @@ canvas.hidden { /* Reset button styles to avoid browser defaults */ .apple-button { display: inline-block; - width: 120px; /* Fixed width */ - line-height: 30px; /* Centers the text vertically */ - padding: 0; /* Since we've set fixed width and height, padding is set to 0 */ - border-radius: 8px; - border: none; - font-family: 'San Francisco', 'Helvetica Neue', sans-serif; - font-size: 8px; - cursor: pointer; - transition: background-color 0.3s; - outline: none; + width: 120px; /* Fixed width */ + line-height: 30px; /* Centers the text vertically */ + padding: 0; /* Since we've set fixed width and height, padding is set to 0 */ + border-radius: 8px; + border: none; + font-family: 'San Francisco', 'Helvetica Neue', sans-serif; + font-size: 8px; + cursor: pointer; + transition: background-color 0.3s; + outline: none; } /* Main button styles */ @@ -145,26 +151,26 @@ canvas.hidden { /* Base styles for the toggle button */ .toggle-button { - display: inline-block; - padding: 10px 20px; - border-radius: 8px; - border: none; - font-family: 'San Francisco', 'Helvetica Neue', sans-serif; - font-size: 16px; - cursor: pointer; - transition: background-color 0.3s; - outline: none; + display: inline-block; + padding: 10px 20px; + border-radius: 8px; + border: none; + font-family: 'San Francisco', 'Helvetica Neue', sans-serif; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s; + outline: none; } /* Style for the "off" state (default) */ .toggle-button { - background-color: #D1D1D1; /* Gray background */ - color: #6B6B6B; /* Dark gray text */ + background-color: #D1D1D1; /* Gray background */ + color: #6B6B6B; /* Dark gray text */ } /* Style for the "on" state */ .toggle-button.active { - background-color: #007AFF; /* Blue background (like our Apple button) */ - color: #FFFFFF; /* White text */ + background-color: #007AFF; /* Blue background (like our Apple button) */ + color: #FFFFFF; /* White text */ }