Merge pull request #122 from alexander-akhmetov/dev/remarkable-paper-pro

Add initial support for Remarkable Paper Pro

Author: owulveryck

Makefile

@@ -0,0 +1,16 @@
+export GOOS ?= linux
+export CGO_ENABLED ?= 0
+export GOARCH ?= amd64
+
+.PHONY: build-remarkable-2
+build-remarkable-2: GOARCH=arm
+build-remarkable-2: build
+
+.PHONY: build-remarkable-paper-pro
+build-remarkable-paper-pro: GOARCH=arm64
+build-remarkable-paper-pro: build
+
+.PHONY: build
+build:
+	@echo "Building for GOOS=${GOOS}, GOARCH=${GOARCH}, CGO_ENABLED=${CGO_ENABLED}"
+	go build -v -trimpath -ldflags="-s -w" .

README.md

@@ -11,6 +11,17 @@ The goMarkableStream is a lightweight and user-friendly application designed spe
 
 Its primary goal is to enable users to stream their reMarkable tablet screen to a web browser without the need for any hacks or modifications that could void the warranty.
 
+## Device support
+
+- Remarkable 2
+- Remarkable Paper Pro (see notes below)
+
+### Remarkable Paper Pro
+
+Remarkable Paper Pro is in initial support. The application is not yet fully tested on this device and some features may not work as expected.
+
+When running on the Remarkable Paper Pro, `RLE_COMPRESSION` environment variable must be set to `false` since it's not supported.
+
 ## Version support
 
 - reMarkable with firmware < 3.4 may use goMarkableStream version < 0.8.6
@@ -122,6 +133,9 @@ Configure the application via environment variables:
 - `RK_HTTPS`: (True/False, default: `true`) Enable or disable HTTPS.
 - `RK_COMPRESSION`: (True/False, default: `false`) Enable or disable compression.
 - `RK_DEV_MODE`: (True/False, default: `false`) Enable or disable developer mode.
+- `RLE_COMPRESSION`: (True/False, default: `true`) Enable or disable RLE compression.
+- `ZSTD_COMPRESSION`: (True/False, default: `false`) Enable or disable ZSTD compression.
+- `ZSTD_COMPRESSION_LEVEL`: (Integer, default: `3`) Set the ZSTD compression level.
 
 ### Endpoint Configuration
 Add query parameters to the URL (`?parameter=value&otherparameter=value`):

client/canvasHandling.js

@@ -3,9 +3,9 @@ function resizeVisibleCanvas() {
 	var container = document.getElementById("container");
 
 	if (portrait) {
-		var aspectRatio = 1404 / 1872;
+		var aspectRatio = screenHeight / screenWidth;
 	} else {
-		var aspectRatio = 1872 / 1404;
+		var aspectRatio = screenWidth / screenHeight;
 	}
 
 	var containerWidth = container.offsetWidth;

client/glCanvas.js

@@ -131,16 +131,25 @@ const programInfo = {
 const textureCoordBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
 
-const textureCoordinates = [
-//	1.0,  0.0,  // Bottom right
-//	0.0,  0.0,  // Bottom left
-//	1.0,  1.0,  // Top right
-//	0.0,  1.0,  // Top left
-	1.0, 1.0,
-	0.0, 1.0,
-	1.0, 0.0,
-	0.0, 0.0,
-];
+const textureCoordinates = getTextureCoordinates();
+
+function getTextureCoordinates() {
+    if (DeviceModel === "Remarkable2") {
+        return [
+			1.0, 1.0,
+			0.0, 1.0,
+			1.0, 0.0,
+			0.0, 0.0,
+		];
+    } else {
+        return [
+			1.0, 0.0,
+			0.0, 0.0,
+			1.0, 1.0,
+			0.0, 1.0,
+		];
+    };
+};
 
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW);
 
@@ -160,7 +169,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 
 // Upload the image into the texture.
-let imageData = new ImageData(width, height);
+let imageData = new ImageData(screenWidth, screenHeight);
 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageData);
 
 // Draw the scene
@@ -208,8 +217,12 @@ drawScene(gl, programInfo, positionBuffer, textureCoordBuffer, texture);
 
 // Update texture
 function updateTexture(newRawData, shouldRotate, scaleFactor) {
+	if (useBGRA) {
+        convertBGRAtoRGBA(newRawData);
+    };
+
 	gl.bindTexture(gl.TEXTURE_2D, texture);
-	gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, newRawData);
+	gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, screenWidth, screenHeight, gl.RGBA, gl.UNSIGNED_BYTE, newRawData);
 
 	// Set rotation
 	const uRotationMatrixLocation = gl.getUniformLocation(shaderProgram, 'uRotationMatrix');
@@ -223,6 +236,14 @@ function updateTexture(newRawData, shouldRotate, scaleFactor) {
 	drawScene(gl, programInfo, positionBuffer, textureCoordBuffer, texture);
 }
 
+function convertBGRAtoRGBA(data) {
+    for (let i = 0; i < data.length; i += 4) {
+        const b = data[i];     // Blue
+        data[i] = data[i + 2]; // Swap Red and Blue
+        data[i + 2] = b;
+    }
+}
+
 // Call `updateTexture` with new data whenever you need to update the image
 
 // Let's create a function that resizes the canvas element. 
@@ -243,9 +264,8 @@ function resizeGLCanvas(canvas) {
 }
 
 function updateLaserPosition(x, y) {
-
-	laserX = x / 1872 * gl.canvas.width;
-	laserY = gl.canvas.height - (y / 1404 * gl.canvas.height);
+	laserX = x / screenWidth * gl.canvas.width;
+	laserY = gl.canvas.height - (y / screenHeight * gl.canvas.height);
 
     drawScene(gl, programInfo, positionBuffer, textureCoordBuffer, texture);
 }

client/index.html

@@ -5,6 +5,14 @@
 		<link rel="icon" type="image/x-icon" href="favicon.ico">
 		<!-- Including the CSS stylesheet -->
 		<link rel="stylesheet" href="style.css">
+        <script>
+            const screenWidth = {{ .ScreenWidth }};
+            const screenHeight = {{ .ScreenHeight }};
+			const MaxXValue = {{ .MaxXValue }};
+			const MaxYValue = {{ .MaxYValue }};
+			const UseRLE = {{ .UseRLE }};
+			const DeviceModel = {{ .DeviceModel }};
+        </script>
 	</head>
 	<body>
 		<div id="menuContainer">

client/main.js

@@ -1,15 +1,23 @@
-const width = 1872;
-const height = 1404;
-
-const rawCanvas = new OffscreenCanvas(width, height); // Define width and height as needed
+const rawCanvas = new OffscreenCanvas(screenWidth, screenHeight); // Define width and height as needed
 let portrait = getQueryParam('portrait');
 portrait = portrait !== null ? portrait === 'true' : false;
-let flip = getQueryParam('flip');
-flip = flip !== null ? flip === 'true' : false;
+
+defaultFlip = true;
+// If this is the Paper Pro, we don't need to flip the image.
+if (DeviceModel === 'RemarkablePaperPro') {
+	defaultFlip = false;
+}
+let flip = getBoolQueryParam('flip', defaultFlip);
+
 let withColor = getQueryParam('color', 'true');
 withColor = withColor !== null ? withColor === 'true' : true;
 let rate = parseInt(getQueryParamOrDefault('rate', '200'), 10);
 
+// Remarkable Paper Pro uses BGRA format.
+let useBGRA = false;
+if (DeviceModel === 'RemarkablePaperPro') {
+	useBGRA = true;
+};
 
 //let portrait = false;
 // Get the 'present' parameter from the URL
@@ -29,12 +37,22 @@ function getQueryParamOrDefault(param, defaultValue) {
     const value = urlParams.get(param);
     return value !== null ? value : defaultValue;
 }
-//let imageData = ctx.createImageData(width, height); // width and height of your canvas
+
+//let imageData = ctx.createImageData(screenWidth, screenHeight); // width and height of your canvas
 function getQueryParam(name) {
 	const urlParams = new URLSearchParams(window.location.search);
 	return urlParams.get(name);
 }
 
+function getBoolQueryParam(param, defaultValue = false) {
+    value = getQueryParam(param);
+
+    if (value === null) {
+        return defaultValue;
+    }
+
+    return value === 'true';
+}
 
 window.onload = function() {
 	// Function to get the value of a query parameter by name

client/worker_event_processing.js

@@ -5,8 +5,8 @@ let portrait;
 let draw; 
 let latestX;
 let latestY;
-const MAX_X_VALUE = 15725;
-const MAX_Y_VALUE = 20966;
+let maxXValue;
+let maxYValue;
 
 onmessage = (event) => {
 	const data = event.data;
@@ -17,6 +17,8 @@ onmessage = (event) => {
 			width = event.data.width;
 			eventURL = event.data.eventURL;
 			portrait = event.data.portrait;
+            maxXValue = event.data.maxXValue;
+            maxYValue = event.data.maxYValue;
 			initiateEventsListener();
 			break;
 		case 'portrait':
@@ -50,16 +52,16 @@ async function initiateEventsListener() {
 			// Code 3: Update and draw laser pointer
 			if (portrait) {
 				if (message.Code === 1) { // Horizontal position
-					latestX = scaleValue(message.Value, MAX_X_VALUE, width);
+					latestX = scaleValue(message.Value, maxXValue, width);
 				} else if (message.Code === 0) { // Vertical position
-					latestY = height - scaleValue(message.Value, MAX_Y_VALUE, height);
+					latestY = height - scaleValue(message.Value, maxYValue, height);
 				}
 			} else {
 				// wrong
 				if (message.Code === 1) { // Horizontal position
-					latestY = scaleValue(message.Value, MAX_X_VALUE, height);
+					latestY = scaleValue(message.Value, maxYValue, height);
 				} else if (message.Code === 0) { // Vertical position
-					latestX = scaleValue(message.Value, MAX_Y_VALUE, width);
+					latestX = scaleValue(message.Value, maxXValue, width);
 				}
 			}
 			if (draw) {