feat: add query parameters

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

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' });
 });

client/uiInteractions.js

@@ -1,5 +1,3 @@
-//let portrait = true;
-let withColor = true;
 let recordingWithSound = false;
 
 document.getElementById('rotate').addEventListener('click', function () {

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

client/workersHandling.js

@@ -2,7 +2,9 @@
 streamWorker.postMessage({ 
 	type: 'init', 
 	width: width, 
-	height: height 
+	height: height,
+	rate: rate,
+	withColor: withColor
 });
 
 

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", "*")