Last active
April 21, 2023 00:49
-
-
Save norinorin/a2d71fbf5c7085fdc47b88d3fd463ab8 to your computer and use it in GitHub Desktop.
Weylus custom active area
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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):
and just go to
http://127.0.0.1:1701
on your mobile browser.