Application prototype #14
@ -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;
|
||||
}
|
@ -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
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user