add weylus custom area patch

[sw882882]

useful for games like osu, or if your tablet is just huge. I found the patch here and it still seems to work with the --custom cli arguments, and providing the patched html and script files.

My only issue with this patch is that if you aren't streaming video, unless you are resizing, it will only show the border of the custom area when resizing, but deleting the timeout in scale_canvas seems to make the border permanent.

Would it be possible to merge this patch?

[Diordany]

Would it be possible to merge this patch?

Yes, it would be possible to merge it @sw882882, but I personally recommend against it.

First of all, the patch for index.html seems to be broken while attempting to apply it to https://github.com/H-M-H/Weylus/tree/master, however, applying it won't be necessary because @norinorin provided the source here.

Second, the ~.gitignore doesn't allow changes to~ repo doesn't track ~lib.js~ .js files (can be bypassed easily though).

I recommend just treating it as an addon and take @norinorin's approach by downloading the template and running <weylus executable> --custom-index-html <path to index.html> --custom-lib-js <path to lib.js> as explained here (which you seem to have done successfully already).

In conclusion: it can be merged by overriding the default template, or by adding the template to the repo (in which case you would still have to point to the files with --custom-index-html and --custom-lib-js). Let's wait to hear what @electronstudio thinks about this, and I hope this answers your question.

[Diordany]

In the meanwhile, if you want to apply it yourself (overriding the default one), this one should work on the official master branch:

Patch

```diff diff --git a/www/static/lib.js b/www/static/lib.js index 5b95586..080eca3 100644 --- a/www/static/lib.js +++ b/www/static/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 diff --git a/www/templates/index.html b/www/templates/index.html index 411ef40..fde38bc 100644 --- a/www/templates/index.html +++ b/www/templates/index.html @@ -51,6 +51,14 @@ Enable uinput Min pressure to generate:
+ Horizontal area scaling:

100%

+ Vertical area scaling:

100%

+ X offset:

+ Y offset:

Client Name:

Optional, useful to distinguish multiple devices. ```

git apply <patch-file>

Note: it doesn't take .gitignore into account. It's just based on @norinorin's template. So make sure to back up www/static/lib.js.

[Diordany]

Yes, it would be possible to merge it @sw882882, but I personally recommend against it.

Also, another thing to keep in mind is that lib.js is generated during the building process, so merging this might complicate things in the future if Weylus would depend on a different version. I don't know the details on that.

[electronstudio]

Yes lib.js is not source code, it's generated from lib.ts. (That's why it is ignored by git.) So to create a PR that actually would one day be accepted by Weylus upstream would require the changes be made to lib.ts. That would be my preferred way of doing things, so that if Weylus original author returns or a new maintainer who is fluent in Rust steps forward the work done here can be incorporated.

[electronstudio]

Idea for @H-M-H