Merge pull request #89 from owulveryck/glPointer

Pointer is now handled in the main canvas with webgl

client/canvasHandling.js

@@ -28,8 +28,6 @@ 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;	
 }
 function waiting(message) {
 	// Clear the canvas

client/glCanvas.js

@@ -1,6 +1,8 @@
 // WebGL initialization
 //const gl = visibleCanvas.getContext('webgl');
 //const gl = canvas.getContext('webgl', { antialias: true, preserveDrawingBuffer: true  });
+let laserX = 0; // Initialize with default values
+let laserY = 0;
 const gl = canvas.getContext('webgl', { antialias: true });
 
 
@@ -24,11 +26,24 @@ void main(void) {
 
 // Fragment shader program
 const fsSource = `
+precision mediump float;
+
 varying highp vec2 vTextureCoord;
 uniform sampler2D uSampler;
+uniform float uLaserX;
+uniform float uLaserY;
 
 void main(void) {
-	gl_FragColor = texture2D(uSampler, vTextureCoord);
+    float dx = gl_FragCoord.x - uLaserX;
+    float dy = gl_FragCoord.y - uLaserY;
+    float distance = sqrt(dx * dx + dy * dy);
+    float radius = 5.0; // Radius of the dot, adjust as needed
+
+    if(distance < radius) {
+        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color for the laser dot
+    } else {
+        gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
 }
 `;
 
@@ -90,6 +105,8 @@ const programInfo = {
 	},
 	uniformLocations: {
 		uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+        uLaserX: gl.getUniformLocation(shaderProgram, 'uLaserX'),
+        uLaserY: gl.getUniformLocation(shaderProgram, 'uLaserY'),
 	},
 };
 
@@ -180,6 +197,10 @@ function drawScene(gl, programInfo, positionBuffer, textureCoordBuffer, texture)
 	// Tell the shader we bound the texture to texture unit 0
 	gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
 
+	   // Set the laser coordinates
+    gl.uniform1f(programInfo.uniformLocations.uLaserX, laserX);
+    gl.uniform1f(programInfo.uniformLocations.uLaserY, laserY);
+
 	gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 }
 
@@ -220,3 +241,11 @@ function resizeGLCanvas(canvas) {
 
 	return false; // indicates no change in size
 }
+
+function updateLaserPosition(x, y) {
+
+	laserX = x / 1872 * gl.canvas.width;
+	laserY = gl.canvas.height - (y / 1404 * gl.canvas.height);
+
+    drawScene(gl, programInfo, positionBuffer, textureCoordBuffer, texture);
+}

client/index.html

@@ -32,14 +32,12 @@
 		<div id="container">
 			<canvas id="canvas"></canvas>
 			<div id="message" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: red;"> </div>
-			<canvas id="canvasPresent" width="1872" height="1404"></canvas>
 			<iframe id="content" allow="camera *;" allowfullscreen="true" frameborder="0" width="100%" height="100%"  allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">></iframe>
 		</div>
 
 	</body>
 	<script src="main.js"></script> <!-- Include the JavaScript file -->
 	<script src="glCanvas.js"></script> <!-- Include the JavaScript file -->
-	<script src="pointer.js"></script> <!-- Include the JavaScript file -->
 	<script src="utilities.js"></script> <!-- Include the JavaScript file -->
 	<script src="recording.js"></script> <!-- Include the JavaScript file -->
 	<script src="canvasHandling.js"></script> <!-- Include the JavaScript file -->

client/main.js

@@ -14,7 +14,6 @@ let rate = parseInt(getQueryParamOrDefault('rate', '200'), 10);
 //const presentURL = getQueryParam('present');// Assuming rawCanvas is an OffscreenCanvas that's already been defined
 const ctx = rawCanvas.getContext('2d');
 const visibleCanvas = document.getElementById("canvas");
-const canvasPresent = document.getElementById("canvasPresent");
 const iFrame = document.getElementById("content");
 const messageDiv = document.getElementById('message');
 

client/style.css

@@ -34,13 +34,6 @@ body, html {
 canvas.hidden {
 	display: none;
 }
-#canvasPresent {
-	position: fixed;
-	max-width: 100%;
-	max-height: 100%;
-	background-color: rgba(0, 0, 0, 0); /* Transparent background */
-	z-index: 3;
-}
 .sidebar {
 	width: 150px;
 	height: 100vh;

client/workersHandling.js

@@ -43,23 +43,33 @@ eventWorker.postMessage({
 	wsURL: wsURL
 });
 
+let messageTimeout;
+
+function clearLaser() {
+    // Function to call when no message is received for 300 ms
+	updateLaserPosition(-10,-10);
+}
 // Listen for updates from the worker
 eventWorker.onmessage = (event) => {
+	// Reset the timer every time a message is received
+    clearTimeout(messageTimeout);
+    messageTimeout = setTimeout(clearLaser, 300);
+
 	// To hide the message (e.g., when you start drawing in WebGL again)
 	messageDiv.style.display = 'none';
 
 	const data = event.data;
 
 	switch (data.type) {
 		case 'clear':
-			clearLaser();
+			updateLaserPosition(-10,-10);
+			//clearLaser();
 			break;
 		case 'update':
 			// Handle the update
 			const X = event.data.X;
 			const Y = event.data.Y;
-			drawLaser(X,Y);
-
+			updateLaserPosition(X,Y);
 			break;
 		case 'error':
 			console.error('Error from worker:', event.data.message);