-
-
Save norinorin/a2d71fbf5c7085fdc47b88d3fd463ab8 to your computer and use it in GitHub Desktop.
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 |
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?
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!
how do I use this?