Add width and height sliders
continuous-integration/drone/push Build is passing Details

This commit is contained in:
ekkie 2024-01-17 19:57:48 +01:00
parent 96b881fe31
commit 5c2edeeede
1 changed files with 20 additions and 2 deletions

View File

@ -68,6 +68,12 @@
<label for="mirror">Mirror</label>
<input type="checkbox" id="mirror" name="mirror">
<br>
<label for="heightmod">Height %</label>
<input type="range" id="heightmod" name="heightmod" min="0" max="1" step="0.01" value="1">
<br>
<label for="widthmod">Width %</label>
<input type="range" id="widthmod" name="widthmod" min="0" max="1" step="0.01" value="1">
<br>
<button id="fullscreen">Toggle Fullscreen</button>
<a href="?"><button>Reset</button></a>
</div>
@ -155,6 +161,8 @@ var imirrored = document.getElementById("mirror");
var ioffset = document.getElementById("offset");
var isupersample = document.getElementById("supersample");
var iduo = document.getElementById("duo");
var iheight = document.getElementById("heightmod");
var iwidth = document.getElementById("widthmod");
function updatevars() {
data.color1 = hextorgb(icolor1.value);
@ -170,6 +178,8 @@ function updatevars() {
data.supersample = parseFloat(isupersample.value);
data.mirrored = imirrored.checked ? -1 : 1;
data.duo = iduo.checked;
data.height = iheight.value;
data.width = iwidth.value;
history.replaceState(null, "", "?" + encodeURIComponent(JSON.stringify(data)))
}
@ -221,6 +231,10 @@ function initScene() {
imirrored.checked = data.mirrored == -1;
if (data.duo !== undefined)
iduo.checked = data.duo;
if (data.height !== undefined)
iheight.value = data.height;
if (data.width !== undefined)
iwidth.value = data.width;
} catch(e) {}
icolor1.oninput = updatevars;
icolor2.oninput = updatevars;
@ -235,6 +249,10 @@ function initScene() {
isupersample.oninput = updatevars;
imirrored.oninput = updatevars;
iduo.oninput = updatevars;
iheight.onchange = updatevars;
iheight.oninput = resize;
iwidth.onchange = updatevars;
iwidth.oninput = resize;
updatevars();
@ -312,8 +330,8 @@ function resize() {
//vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
vp_size = [window.innerWidth, window.innerHeight];
//vp_size = [256, 256]
canvas.width = vp_size[0];
canvas.height = vp_size[1];
canvas.width = vp_size[0] * iwidth.value;
canvas.height = vp_size[1] * iheight.value;
}
function render(deltaMS) {