Ray-caster: label controls

This commit is contained in:
Aaron Fenyes 2024-08-26 01:47:53 -07:00
parent 85db7b9be0
commit b9370ceb41
2 changed files with 93 additions and 51 deletions

View File

@ -18,6 +18,16 @@ canvas {
margin-top: 5px;
}
.control {
display: flex;
flex-direction: row;
width: 600px;
}
label {
width: 150px;
}
input {
margin-top: 5px;
flex-grow: 1;
}

View File

@ -239,56 +239,88 @@ fn main() {
view! {
div(id="app") {
canvas(ref=display, width="600", height="600")
input(
type="range",
min=-1.0,
max=1.0,
step=0.001,
bind:valueAsNumber=ctrl_x
)
input(
type="range",
min=-1.0,
max=1.0,
step=0.001,
bind:valueAsNumber=ctrl_y
)
input(
type="range",
min=0.5,
max=1.5,
step=0.001,
bind:valueAsNumber=radius_x
)
input(
type="range",
min=0.5,
max=1.5,
step=0.001,
bind:valueAsNumber=radius_y
)
input(
type="range",
max=1.0,
step=0.001,
bind:valueAsNumber=opacity
)
input(
type="range",
max=1.0,
step=0.001,
bind:valueAsNumber=highlight
)
input(
type="range",
max=5.0,
step=1.0,
bind:valueAsNumber=layer_threshold
)
input(
type="checkbox",
bind:checked=use_test_construction
)
div(class="control") {
label(for="ctrl-x") { "Sphere 0 depth" }
input(
type="range",
id="ctrl-x",
min=-1.0,
max=1.0,
step=0.001,
bind:valueAsNumber=ctrl_x
)
}
div(class="control") {
label(for="ctrl-y") { "Sphere 1 depth" }
input(
type="range",
id="ctrl-y",
min=-1.0,
max=1.0,
step=0.001,
bind:valueAsNumber=ctrl_y
)
}
div(class="control") {
label(for="radius-x") { "Sphere 0 radius" }
input(
type="range",
id="radius-x",
min=0.5,
max=1.5,
step=0.001,
bind:valueAsNumber=radius_x
)
}
div(class="control") {
label(for="radius-y") { "Sphere 1 radius" }
input(
type="range",
id="radius-y",
min=0.5,
max=1.5,
step=0.001,
bind:valueAsNumber=radius_y
)
}
div(class="control") {
label(for="opacity") { "Opacity" }
input(
type="range",
id="opacity",
max=1.0,
step=0.001,
bind:valueAsNumber=opacity
)
}
div(class="control") {
label(for="highlight") { "Highlight" }
input(
type="range",
id="highlight",
max=1.0,
step=0.001,
bind:valueAsNumber=highlight
)
}
div(class="control") {
label(for="layer-threshold") { "Layer threshold" }
input(
type="range",
id="layer-threshold",
max=5.0,
step=1.0,
bind:valueAsNumber=layer_threshold
)
}
div(class="control") {
label(for="use-test-construction") { "Use test values" }
input(
type="checkbox",
id="use-test-construction",
bind:checked=use_test_construction
)
}
}
}
});