diff --git a/client/glCanvas.js b/client/glCanvas.js index 8a7a60c..e27d6ec 100644 --- a/client/glCanvas.js +++ b/client/glCanvas.js @@ -1,5 +1,7 @@ // WebGL initialization -const gl = visibleCanvas.getContext('webgl'); +//const gl = visibleCanvas.getContext('webgl'); +const gl = canvas.getContext('webgl', { antialias: true }); + if (!gl) { alert('WebGL not supported'); @@ -130,10 +132,10 @@ gl.bindTexture(gl.TEXTURE_2D, texture); // Set the parameters so we can render any size image. - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); +gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); // To apply a smoothing algorithm, you'll likely want to adjust the texture filtering parameters in your WebGL setup. - // For smoothing, typically gl.LINEAR is used for both gl.TEXTURE_MIN_FILTER and gl.TEXTURE_MAG_FILTER +// For smoothing, typically gl.LINEAR is used for both gl.TEXTURE_MIN_FILTER and gl.TEXTURE_MAG_FILTER gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); @@ -148,7 +150,7 @@ function drawScene(gl, programInfo, positionBuffer, textureCoordBuffer, texture) if (resizeGLCanvas(gl.canvas)) { gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); } - gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque + gl.clearColor(0.5, 0.5, 0.5, 0.25); // Gray with 75% transparency gl.clearDepth(1.0); // Clear everything gl.enable(gl.DEPTH_TEST); // Enable depth testing gl.depthFunc(gl.LEQUAL); // Near things obscure far things diff --git a/client/main.js b/client/main.js index c6d4e0d..6a81fb1 100644 --- a/client/main.js +++ b/client/main.js @@ -2,8 +2,16 @@ const width = 1872; const height = 1404; const rawCanvas = new OffscreenCanvas(width, height); // Define width and height as needed -let portrait = false; -// Assuming rawCanvas is an OffscreenCanvas that's already been defined +let portrait = getQueryParam('portrait'); +portrait = portrait !== null ? portrait === 'true' : false; +let withColor = getQueryParam('color', 'true'); +withColor = withColor !== null ? withColor === 'true' : true; +let rate = parseInt(getQueryParamOrDefault('rate', '200'), 10); + + +//let portrait = false; +// Get the 'present' parameter from the URL +//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"); @@ -14,14 +22,20 @@ const messageDiv = document.getElementById('message'); // Initialize the worker const streamWorker = new Worker('worker_stream_processing.js'); const eventWorker = new Worker('worker_event_processing.js'); +function getQueryParamOrDefault(param, defaultValue) { + const urlParams = new URLSearchParams(window.location.search); + const value = urlParams.get(param); + return value !== null ? value : defaultValue; +} //let imageData = ctx.createImageData(width, height); // width and height of your canvas +function getQueryParam(name) { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(name); +} + + 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'); @@ -33,7 +47,7 @@ window.onload = function() { // Add an event listener for the 'beforeunload' event, which is triggered when the page is refreshed or closed window.addEventListener('beforeunload', () => { - // Send a termination signal to the worker before the page is unloaded - streamWorker.postMessage({ type: 'terminate' }); - eventWorker.postMessage({ type: 'terminate' }); + // Send a termination signal to the worker before the page is unloaded + streamWorker.postMessage({ type: 'terminate' }); + eventWorker.postMessage({ type: 'terminate' }); }); diff --git a/client/uiInteractions.js b/client/uiInteractions.js index 5845608..4bc81fa 100644 --- a/client/uiInteractions.js +++ b/client/uiInteractions.js @@ -1,5 +1,3 @@ -//let portrait = true; -let withColor = true; let recordingWithSound = false; document.getElementById('rotate').addEventListener('click', function () { diff --git a/client/worker_stream_processing.js b/client/worker_stream_processing.js index 031c64a..56623a1 100644 --- a/client/worker_stream_processing.js +++ b/client/worker_stream_processing.js @@ -1,6 +1,7 @@ let withColor=true; let height; let width; +let rate; onmessage = (event) => { const data = event.data; @@ -9,6 +10,8 @@ onmessage = (event) => { case 'init': height = event.data.height; width = event.data.width; + withColor = event.data.withColor; + rate = event.data.rate; initiateStream(); break; case 'withColorChanged': @@ -30,7 +33,7 @@ async function initiateStream() { try { // Create a new ReadableStream instance from a fetch request - const response = await fetch('/stream'); + const response = await fetch('/stream?rate='+rate); const stream = response.body; // Create a reader for the ReadableStream diff --git a/client/workersHandling.js b/client/workersHandling.js index 717a282..6a0bf04 100644 --- a/client/workersHandling.js +++ b/client/workersHandling.js @@ -2,7 +2,9 @@ streamWorker.postMessage({ type: 'init', width: width, - height: height + height: height, + rate: rate, + withColor: withColor }); diff --git a/internal/stream/handler.go b/internal/stream/handler.go index aca89db..78edd41 100644 --- a/internal/stream/handler.go +++ b/internal/stream/handler.go @@ -4,6 +4,7 @@ import ( "io" "log" "net/http" + "strconv" "sync" "time" @@ -12,8 +13,8 @@ import ( "github.com/owulveryck/goMarkableStream/internal/rle" ) -const ( - rate = 200 +var ( + rate time.Duration = 200 ) var rawFrameBuffer = sync.Pool{ @@ -40,6 +41,27 @@ type StreamHandler struct { // ServeHTTP implements http.Handler func (h *StreamHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) { + // Parse query parameters + query := r.URL.Query() + rateStr := query.Get("rate") + // If 'rate' parameter exists and is valid, use its value + if rateStr != "" { + var err error + rateInt, err := strconv.Atoi(rateStr) + if err != nil { + // Handle error or keep the default value + // For example, you can send a response with an error message + http.Error(w, "Invalid 'rate' parameter", http.StatusBadRequest) + return + } + rate = time.Duration(rateInt) + } + if rate < 100 { + http.Error(w, "rate value is too low", http.StatusBadRequest) + return + } + log.Println(rate) + // Set CORS headers for the preflight request if r.Method == http.MethodOptions { w.Header().Set("Access-Control-Allow-Origin", "*")