initial commit

Author: m6c7l

README.md

@@ -1,2 +1,61 @@
-# rm2-screen
-Another Remarkable 2 Screen Share
+# reMarkable Screen Share
+
+![](canvas.png)
+
+This is a web-based and very minimalistic screen share tool for the reMarkable device for creating interactive presentations, slides, simple sketches, flip books, and whatever else comes to your mind. This tool provides at least some of the functionality as introduced with the native *Screen Share* [1] from reMarkable, but does not need a subscription nor an online account to work. The repository *Awesome reMarkable* [2] lists many options and approaches to avoid the need for a paid subscription when it comes to screen share, e.g. *reStream* [3]. However, *Pipes and Papers* [4] seemed to be the most promising one, thus this work is heavily inspired by that one.
+
+> * tested with reMarkable 2, Version 2.12.1.527
+> * no subscription nor account for Connect needed
+> * after installation the feature-rich screen share frontend is accessible in a web browser
+
+## Features
+
+* dark and bright page theme (toggle with **TAB**)
+* landscape and portrait view (toggle with **ENTER**)
+* different pen colors (set with letter keys: **W**hite, **R**ed, **G**reen, blac**K**, **Y**ellow, **C**yan, **B**lue, **M**agenta)
+* clear current page (with **SPACE**)
+* navigate between pages (**PAGE_UP** goes back to previous page, and **PAGE_DOWN** jumps to next page or creates a new one)
+* undo and redo on current page (press **LEFT_ARROW** to undo, and **RIGHT_ARROW** to redo)
+
+## Installation
+
+### Preparation
+
+1. Clone this repository or get the screen share service files from this repository (`canvas.py`, `canvas.service`, `canvas.html`) and download the archive (`python-3.9.9-armhf.tar.xz`) from releases.
+2. Note the IP address and password for your reMarkable device as shown under Menu - Settings - Help - Copyright and licenses.
+3. Open a terminal for execution of the subsequent commands.
+
+> Make sure that your device does not go to sleep while doing the rest of the installation.
+
+### Python
+ 
+1. Copy the archive to your device:
+   `scp -oHostKeyAlgorithms=+ssh-rsa python-3.9.9-armhf.tar.xz root@remarkable:/home/root`
+2. Extract the archive on the device:
+   `ssh -oHostKeyAlgorithms=+ssh-rsa root@remarkable "tar xvf ~/python-3.9.9-armhf.tar.xz"`
+3. Create a link on your device to the Python runtime environment and delete the archive:
+   `ssh -oHostKeyAlgorithms=+ssh-rsa root@remarkable "ln -s python-3.9.9 python3 && rm ~/python-3.9.9-armhf.tar.xz"`
+
+> The Python runtime environment has been compiled on a RPi 4 and includes a little more modules than needed for this particular service - perhaps a good starting point for further development of server-side features - check it out.
+
+### Service
+
+7. Create a directory to host the screen share files on your device:
+   `ssh -oHostKeyAlgorithms=+ssh-rsa root@remarkable "mkdir ~/canvas"`
+8. Copy the screen share files to your device:
+   `scp -oHostKeyAlgorithms=+ssh-rsa canvas.* root@remarkable:/home/root/canvas`
+9. Add the screen share service to systemd to make it available after reboot:
+   `ssh -oHostKeyAlgorithms=+ssh-rsa root@remarkable "cp ~/canvas/canvas.service /etc/systemd/system && systemctl enable canvas && systemctl start canvas"`
+
+> The service file cannot be linked (and thus needs to be copied) as the root and home partitions are separate.
+
+## Usage
+
+Make sure your reMarkable is not sleeping. Open a web browser on your computer and request the service on `{IP address}:12345`. If your computer is in your local home network and your router hosts a DHCP server, you should be even able to access the service on `remarkable:12345`. If the service is up and running on your reMarkable is accessible from your computer, you will see a canvas in your browser which reflects the pen of your reMarkable.
+
+## References
+
+* [[1](https://support.remarkable.com/hc/en-us/articles/4403721327377)] Original reMarkable Screen Share - A subscription feature of Connect.
+* [[2](https://github.com/reHackable/awesome-reMarkable)] Awesome reMarkable - A curated list of projects related to the reMarkable tablet.
+* [[3](https://github.com/rien/reStream)] reStream - Stream your reMarkable screen over SSH. 
+* [[4](https://gitlab.com/afandian/pipes-and-paper)] Pipes and Papers - Experiment to reproduce the ReMarkable tablet screen on the desktop for white-boarding.

canvas.html

@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <title>Remarkable Canvas</title>
+  </head>
+  
+  <style>
+    canvas {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+    }
+  </style>
+  
+  <body>
+
+    <canvas width="1404" height="1053" id="main"></canvas>
+
+    <script>
+
+      var csMain = document.getElementById("main");
+
+
+      var csDraw = document.createElement("canvas");
+      [csDraw.width, csDraw.height] = [csMain.width, csMain.height];
+      document.body.appendChild(csDraw);
+
+      var overlays = [];
+      var index = -1;
+      var page = -1;
+
+      var landscape = true;
+      var dark = false;
+      var active = false;
+
+      var color = null;
+
+      var COL_BG = ["rgb(235, 237, 239)", "rgb(35, 37, 39)"];
+      var COL_PEN = ["rgb(200, 210, 220)", "rgb(80, 90, 100)"];
+      var COL_DRAW = ["rgb(255, 255, 255)", "rgb(0, 0, 0)"];
+      var COL_STROKE = ["black", "white"];
+      var COL_BORDER = ["rgb(200, 210, 220)", "rgb(80, 90, 100)"];
+
+
+      function paint(pen) {
+
+        csOver = overlays[page].at(index);
+        cxOver = csOver.getContext("2d");
+
+        cxOver.lineWidth = Math.exp(pen.z) - 1;
+        cxOver.strokeStyle = color;
+
+        cxOver.lineTo(pen.x, pen.y);
+        cxOver.closePath();
+        cxOver.stroke();
+
+        cxOver.beginPath();
+        cxOver.moveTo(pen.x, pen.y);
+
+      }
+
+      function addOverlay() {
+
+        var i = overlays[page].length;
+        while (i--) {
+          if (overlays[page][i].hidden) { 
+            document.body.removeChild(overlays[page][i]);
+            overlays[page].splice(i, 1);
+          } 
+        }
+
+        var csOver = document.createElement("canvas");
+        [csOver.width, csOver.height] = [csDraw.width, csDraw.height];
+        [csOver.style.backgroundColor, csOver.style.opacity] = ["transparent", 1];
+        document.body.appendChild(csOver);
+
+        overlays[page].push(csOver);
+
+        index = -1;
+
+      }
+
+      function onPenMove(pen, hovering) {
+
+        cxDraw = csDraw.getContext("2d");
+
+        if (hovering) {
+          
+          active = false;
+          
+          cxDraw.closePath();
+          cxDraw.clearRect(0, 0, csDraw.width, csDraw.height);
+
+          csOver = overlays[page].at(index);
+          cxOver = csOver.getContext("2d");
+          cxOver.moveTo(pen.x, pen.y);
+
+        } else {
+
+          if (!active) {
+            
+            active = true;
+
+            addOverlay();
+
+            csOver = overlays[page].at(index);
+            cxOver = csOver.getContext("2d");
+            cxOver.moveTo(pen.x, pen.y);
+
+          }
+
+        }
+
+        cxDraw.fillStyle = COL_PEN[Number(dark)];
+        cxDraw.beginPath();
+        cxDraw.arc(pen.x, pen.y, 6, 0, 2*Math.PI);
+        cxDraw.fill();
+
+      }
+
+      function addPage() {
+
+        overlays.push([]);
+        page = overlays.length - 1;
+
+        addOverlay();
+
+      }
+
+      function resetPage() {
+
+        for (let i = 0; i < overlays[page].length; i++) { 
+          document.body.removeChild(overlays[page][i]);
+        }
+        overlays[page].length = 0;
+
+        addOverlay();
+
+      }
+
+      function applyTheme() {
+
+        document.body.style.backgroundColor = COL_BG[Number(dark)];
+
+        cxDraw = csDraw.getContext("2d");
+        csDraw.style.border = COL_BORDER[Number(dark)];
+        csDraw.style.backgroundColor = COL_DRAW[Number(dark)];
+
+        if (COL_STROKE.includes(color) || color == null) {
+          color = COL_STROKE[Number(dark)];
+        }
+
+      }
+
+      function toggleView() {
+
+        landscape = !landscape;
+
+        [csDraw.width, csDraw.height] = [csMain.height, csMain.width];
+        [csMain.width, csMain.height] = [csDraw.width, csDraw.height];
+
+        resetPage();
+
+      }
+
+      function setOverlay(visible) {
+
+        csOver = overlays[page].at(index);
+        csOver.hidden = !visible;
+
+      }
+
+      function setPage(visible) {
+
+        for (let i = 0; i < overlays[page].length; i++) {
+          csOver = overlays[page].at(i);
+          csOver.hidden = !visible;
+        }
+
+      }
+
+      function keyDown(e) {
+
+        if (e.keyCode == 13) { // enter: toggle landscape/portrait
+          toggleView();
+
+        } else if (e.keyCode ==  9) { // tab: toggle dark/bright
+          dark = !dark;
+          applyTheme();
+
+        } else if (e.keyCode == 32) { // space: clear canvas
+          resetPage();
+
+        } else if (e.keyCode == 75) { // blac*k*
+          color = "black";
+
+        } else if (e.keyCode == 87) { // *w*hite
+          color = "white";
+
+        } else if (e.keyCode == 82) { // *r*ed
+          color = "red";
+
+        } else if (e.keyCode == 71) { // *g*reen
+          color = "green";
+
+        } else if (e.keyCode == 66) { // *b*lue
+          color = "blue";
+
+        } else if (e.keyCode == 89) { // *y*ellow
+          color = "yellow";
+
+        } else if (e.keyCode == 67) { // *c*yan
+          color = "cyan";
+
+        } else if (e.keyCode == 77) { // *m*agenta
+          color = "magenta";
+          
+        } else if (e.keyCode == 37) { // left
+          setOverlay(false);
+          index = index - 1;
+          
+        } else if (e.keyCode == 39) { // right
+          index = Math.min(index + 1, -1);
+          setOverlay(true);
+          
+        } else if (e.keyCode == 33) { // page-up
+          setPage(false);
+          page = Math.max(page - 1, 0);
+          setPage(true);
+
+        } else if (e.keyCode == 34) { // page-down
+          setPage(false);
+          if (page + 1 == overlays.length) {
+            addPage();
+          } else {
+            page = page + 1;
+            setPage(true);
+          }
+
+        }
+
+        e.preventDefault();
+
+      }
+
+      function setup() {
+        
+        var SCREEN = Object.freeze({width: 1872*11.2, height: 1404*11.2, pressure: 4095});
+
+        let scaleX = csDraw.width / SCREEN.width;
+        let scaleY = csDraw.height / SCREEN.height;
+        let scaleZ = 1 / SCREEN.pressure;
+
+        let websocket = new WebSocket("ws://" + location.host + "/pen");
+
+        websocket.onmessage = function(event) {
+
+          let data = JSON.parse(event.data); // [x, y, pressure]
+
+          if (landscape) {
+            pen = Object.freeze({x: data[0]*scaleX, y: data[1]*scaleY, z: data[2]*scaleZ});
+          } else {
+            pen = Object.freeze({x: (data[1])*scaleY, y: (SCREEN.width-data[0])*scaleX, z: data[2]*scaleZ});
+          }
+
+          drawing = pen.z > 0.01;
+
+          console.log(data[0], data[1], data[2]);
+
+          onPenMove(pen, !drawing);
+          
+          if (drawing) {
+            paint(pen);
+          }
+
+        }
+        
+        addPage();
+        applyTheme();
+
+        document.addEventListener('keydown', keyDown);
+
+      }
+
+      setup();
+
+      function download() {
+        //alert("not implemented");
+      }
+
+      function onclick(e) {
+        download();
+      }
+
+      window.addEventListener('click', onclick);
+      
+    </script>
+
+  </body>
+
+</html>