Application prototype #14

Merged
glen merged 101 commits from app-proto into main 2024-10-21 23:38:28 +00:00
2 changed files with 93 additions and 51 deletions
Showing only changes of commit b9370ceb41 - Show all commits

View File

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

View File

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