feat: pointer

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) {

client/index.html

@@ -27,6 +27,7 @@
 		</div>
 		<div id="container">
 			<canvas id="canvas" width="1872" height="1404"></canvas>
+			<canvas id="canvasPresent" width="1872" height="1404"></canvas>
 			<iframe id="content" allowfullscreen="true" frameborder="0" width="100%" height="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">></iframe>
 		</div>
 		<!--<iframe id="content" src="https://docs.google.com/presentation/d/e/2PACX-1vQoU3OkrD499XPCjI1kl18dci2Um6eqCkZlKCMJaCVaUkonu6NOWZkLgDOdpTyJwLJlyZ9Yf8SAMTdE/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>-->

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();

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 */
 }