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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thanks!