diff --git a/client/canvasHandling.js b/client/canvasHandling.js index a4c1c67..9680b94 100644 --- a/client/canvasHandling.js +++ b/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 diff --git a/client/glCanvas.js b/client/glCanvas.js index 794270b..818dd21 100644 --- a/client/glCanvas.js +++ b/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); +} diff --git a/client/index.html b/client/index.html index 1042ff6..f27741f 100644 --- a/client/index.html +++ b/client/index.html @@ -32,14 +32,12 @@
-
- diff --git a/client/main.js b/client/main.js index 6a81fb1..ce83a79 100644 --- a/client/main.js +++ b/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'); diff --git a/client/pointer.js b/client/pointer.js deleted file mode 100644 index b047d77..0000000 --- a/client/pointer.js +++ /dev/null @@ -1,24 +0,0 @@ -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 -} - diff --git a/client/style.css b/client/style.css index ef678bb..667f0cc 100644 --- a/client/style.css +++ b/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; diff --git a/client/workersHandling.js b/client/workersHandling.js index 6a0bf04..3abc099 100644 --- a/client/workersHandling.js +++ b/client/workersHandling.js @@ -43,8 +43,18 @@ 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'; @@ -52,14 +62,14 @@ eventWorker.onmessage = (event) => { 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);