Weylus custom active area

index.html.diff

diff --git a/index.html.bak b/index.html
index 2befa8f..469037a 100644
--- a/index.html.bak
+++ b/index.html
@@ -57,6 +57,14 @@
                 </label>
                 <label>Min pressure to generate: <br><input type="range" id="min_pressure" min="0" max="1" step="0.01"
                         value="0" /></label>
+                <label>Horizontal area scaling: <br><input type="range" id="scale_horizontal" min="0.3" max="1"
+                        step="0.01" value="1" /><output>100%</output></label>
+                <label>Vertical area scaling: <br><input type="range" id="scale_vertical" min="0.3" max="1" step="0.01"
+                        value="1" /><output>100%</output></label>
+                <label>X offset: <br><input type="range" id="x_offset" min="-1" max="1" step="0.01"
+                        value="0" /><output></output></label>
+                <label>Y offset: <br><input type="range" id="y_offset" min="-1" max="1" step="0.01"
+                        value="0" /><output></output></label>
             </section>
             <section {{#if (not uinput_enabled)}}class="hide" {{/if}}>
                 <label><span>Client Name:</span><br><input type="text" id="client_name" /><br><span>Optional, useful to

lib.js.diff

diff --git a/lib.js.bak b/lib.js
index 5b95586..452e97e 100644
--- a/lib.js.bak
+++ b/lib.js
@@ -13,6 +13,7 @@ let fps_out;
 let frame_count = 0;
 let last_fps_calc = performance.now();
 let check_video;
+let canvas_border_timeout = null;
 function run(access_code, websocket_port, level) {
     window.onload = () => {
         log_pre = document.getElementById("log");
@@ -68,6 +69,7 @@ function fresh_canvas() {
     canvas.id = canvas_old.id;
     canvas_old.classList.forEach((cls) => canvas.classList.add(cls));
     canvas_old.replaceWith(canvas);
+    scale_canvas();
     return canvas;
 }
 function toggle_energysaving(energysaving) {
@@ -77,6 +79,7 @@ function toggle_energysaving(energysaving) {
         ctx.fillStyle = "#000";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
+    document.body.style.backgroundColor = energysaving ? "#000000" : "initial";
     if (settings) {
         if (energysaving) {
             settings.checks.get("enable_video").checked = false;
@@ -101,6 +104,14 @@ class Settings {
         this.scale_video_output = this.scale_video_input.nextElementSibling;
         this.range_min_pressure = document.getElementById("min_pressure");
         this.client_name_input = document.getElementById("client_name");
+        this.scale_horizontal_input = document.getElementById("scale_horizontal");
+        this.scale_horizontal_output = this.scale_horizontal_input.nextElementSibling;
+        this.scale_vertical_input = document.getElementById("scale_vertical");
+        this.scale_vertical_output = this.scale_vertical_input.nextElementSibling;
+        this.x_offset_input = document.getElementById("x_offset");
+        this.x_offset_output = this.x_offset_input.nextElementSibling;
+        this.y_offset_input = document.getElementById("y_offset");
+        this.y_offset_output = this.y_offset_input.nextElementSibling;
         this.frame_update_limit_input.oninput = (e) => {
             this.frame_update_limit_output.value = Math.round(frame_update_scale(this.frame_update_limit_input.valueAsNumber)).toString();
         };
@@ -155,6 +166,11 @@ class Settings {
         };
         this.frame_update_limit_input.onchange = () => this.save_settings();
         this.range_min_pressure.onchange = () => this.save_settings();
+        this.scale_horizontal_input.oninput = this.scale_vertical_input.oninput =
+            this.x_offset_input.oninput = this.y_offset_input.oninput = () => {
+                this.save_settings();
+                scale_canvas();
+            };
         // server
         let upd_server_config = () => { this.save_settings(); this.send_server_config(); };
         this.checks.get("uinput_support").onchange = upd_server_config;
@@ -187,6 +203,11 @@ class Settings {
         settings["scale_video"] = this.scale_video_input.value;
         settings["min_pressure"] = this.range_min_pressure.value;
         settings["client_name"] = this.client_name_input.value;
+        // Maybe these could be a tuple instead?
+        settings["scale_horizontal"] = this.scale_horizontal_input.value;
+        settings["scale_vertical"] = this.scale_vertical_input.value;
+        settings["x_offset"] = this.x_offset_input.value;
+        settings["y_offset"] = this.y_offset_input.value;
         localStorage.setItem("settings", JSON.stringify(settings));
     }
     load_settings() {
@@ -228,6 +249,11 @@ class Settings {
                 document.getElementById("video").classList.add("vanish");
                 document.getElementById("canvas").classList.remove("vanish");
             }
+            this.scale_horizontal_input.value = settings["scale_horizontal"];
+            this.scale_vertical_input.value = settings["scale_vertical"];
+            this.x_offset_input.value = settings["x_offset"];
+            this.y_offset_input.value = settings["y_offset"];
+            scale_canvas();
             if (this.checks.get("energysaving").checked) {
                 toggle_energysaving(true);
             }
@@ -714,8 +740,7 @@ function init(access_code, websocket_port) {
     webSocket.onclose = () => handle_disconnect("Connection closed.");
     window.onresize = () => {
         stretch_video();
-        canvas.width = window.innerWidth * window.devicePixelRatio;
-        canvas.height = window.innerHeight * window.devicePixelRatio;
+        scale_canvas();
         let [w, h] = calc_max_video_resolution(settings.scale_video_input.valueAsNumber);
         settings.scale_video_output.value = w + "x" + h;
         if (authed)
@@ -753,3 +778,21 @@ function stretch_video() {
         video.style.transform = "scale(" + scale + ")";
     }
 }
+function scale_canvas() {
+    let canvas = document.getElementById("canvas");
+    canvas.style.borderStyle = "solid";
+    canvas.style.borderColor = "#ababab";
+    clearInterval(canvas_border_timeout);
+    canvas_border_timeout = setInterval(() => {
+        canvas.style.borderStyle = "none";
+    }, 2000);
+    let scale_x = settings.scale_horizontal_input.value, scale_y = settings.scale_vertical_input.value,
+        x_offset = settings.x_offset_input.value * 100 + "%", y_offset = settings.y_offset_input.value * 100 + "%";
+    canvas.style.transform = "scaleX(" + scale_x + ") scaleY(" + scale_y + ")";
+    canvas.style.transform = `scaleX(${scale_x}) scaleY(${scale_y})
+        translate(${x_offset}, ${y_offset})`
+    settings.scale_horizontal_output.value = scale_x * 100 + "%";
+    settings.scale_vertical_output.value = scale_y * 100 + "%";
+    settings.x_offset_output.value = x_offset;
+    settings.y_offset_output.value = y_offset;
+}
\ No newline at end of file

how do I use this?

how do I use this?

It's .diff files, essentially a patch. You can apply the patch to the original index.html and lib.js files but it was a while ago. I'm not sure if it still works.

I still have the files, so if you want them, let me know.

Apparently, there has only been 1 commit ever since, so it shouldn't be an issue applying these diffs.

cant figure out how to patch either of the files, providing them would be helpful.

https://gist.github.com/norinorin/5a979fb6c3a713f63498bc41cbdc47bb

To run you can just simply do <weylus executable> --custom-index-html <path to index.html> --custom-lib-js <path to lib.js>.

Additionally, to reduce latency you can adb reverse both the HTTP and WS ports (make sure to install ADB and connect your mobile to your PC via USB):

adb reverse tcp:1701 tcp:1701
adb reverse tcp:9001 tcp:9001

and just go to http://127.0.0.1:1701 on your mobile browser.

https://gist.github.com/norinorin/5a979fb6c3a713f63498bc41cbdc47bb

To run you can just simply do <weylus executable> --custom-index-html <path to index.html> --custom-lib-js <path to lib.js>.

Additionally, to reduce latency you can adb reverse both the HTTP and WS ports (make sure to install ADB and connect your mobile to your PC via USB):

adb reverse tcp:1701 tcp:1701
adb reverse tcp:9001 tcp:9001

and just go to http://127.0.0.1:1701 on your mobile browser.

thanks!