Simplify control labeling
This commit is contained in:
parent
0173b63e19
commit
69ab888d5b
@ -51,7 +51,7 @@ input[type="radio"] {
|
|||||||
background-color: #333;
|
background-color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
.control > span {
|
||||||
width: 170px;
|
width: 170px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -484,44 +484,40 @@ fn main() {
|
|||||||
div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
|
div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
|
||||||
canvas(ref=display, width="600", height="600")
|
canvas(ref=display, width="600", height="600")
|
||||||
div(ref=gen_controls) {
|
div(ref=gen_controls) {
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="ctrl-x") { "Sphere 0 depth" }
|
span { "Sphere 0 depth" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="ctrl-x",
|
|
||||||
min=-1.0,
|
min=-1.0,
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=ctrl_x
|
bind:valueAsNumber=ctrl_x
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="ctrl-y") { "Sphere 1 depth" }
|
span { "Sphere 1 depth" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="ctrl-y",
|
|
||||||
min=-1.0,
|
min=-1.0,
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=ctrl_y
|
bind:valueAsNumber=ctrl_y
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="radius-x") { "Sphere 0 radius" }
|
span { "Sphere 0 radius" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="radius-x",
|
|
||||||
min=0.5,
|
min=0.5,
|
||||||
max=1.5,
|
max=1.5,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=radius_x
|
bind:valueAsNumber=radius_x
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="radius-y") { "Sphere 1 radius" }
|
span { "Sphere 1 radius" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="radius-y",
|
|
||||||
min=0.5,
|
min=0.5,
|
||||||
max=1.5,
|
max=1.5,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
@ -530,66 +526,60 @@ fn main() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
div(ref=low_curv_controls) {
|
div(ref=low_curv_controls) {
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="off-1") { "Sphere 1 offset" }
|
span { "Sphere 1 offset" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="off-1",
|
|
||||||
min=-1.0,
|
min=-1.0,
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=off1
|
bind:valueAsNumber=off1
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="off-2") { "Sphere 2 offset" }
|
span { "Sphere 2 offset" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="off-2",
|
|
||||||
min=-1.0,
|
min=-1.0,
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=off2
|
bind:valueAsNumber=off2
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="off-3") { "Sphere 3 offset" }
|
span { "Sphere 3 offset" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="off-3",
|
|
||||||
min=-1.0,
|
min=-1.0,
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=off3
|
bind:valueAsNumber=off3
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="curv-1") { "Sphere 1 curvature" }
|
span { "Sphere 1 curvature" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="curv-1",
|
|
||||||
min=0.0,
|
min=0.0,
|
||||||
max=2.0,
|
max=2.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=curv1
|
bind:valueAsNumber=curv1
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="curv-2") { "Sphere 2 curvature" }
|
span { "Sphere 2 curvature" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="curv-2",
|
|
||||||
min=0.0,
|
min=0.0,
|
||||||
max=2.0,
|
max=2.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=curv2
|
bind:valueAsNumber=curv2
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="curv-3") { "Sphere 3 curvature" }
|
span { "Sphere 3 curvature" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="curv-3",
|
|
||||||
min=0.0,
|
min=0.0,
|
||||||
max=2.0,
|
max=2.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
@ -597,49 +587,44 @@ fn main() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="opacity") { "Opacity" }
|
span { "Opacity" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="opacity",
|
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=opacity
|
bind:valueAsNumber=opacity
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="highlight") { "Highlight" }
|
span { "Highlight" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="highlight",
|
|
||||||
max=1.0,
|
max=1.0,
|
||||||
step=0.001,
|
step=0.001,
|
||||||
bind:valueAsNumber=highlight
|
bind:valueAsNumber=highlight
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="turntable") { "Turntable" }
|
span { "Turntable" }
|
||||||
input(
|
input(
|
||||||
type="checkbox",
|
type="checkbox",
|
||||||
id="turntable",
|
|
||||||
bind:checked=turntable
|
bind:checked=turntable
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="layer-threshold") { "Layer threshold" }
|
span { "Layer threshold" }
|
||||||
input(
|
input(
|
||||||
type="range",
|
type="range",
|
||||||
id="layer-threshold",
|
|
||||||
max=5.0,
|
max=5.0,
|
||||||
step=1.0,
|
step=1.0,
|
||||||
bind:valueAsNumber=layer_threshold
|
bind:valueAsNumber=layer_threshold
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
div(class="control") {
|
label(class="control") {
|
||||||
label(for="debug-mode") { "Debug mode" }
|
span { "Debug mode" }
|
||||||
input(
|
input(
|
||||||
type="checkbox",
|
type="checkbox",
|
||||||
id="debug-mode",
|
|
||||||
bind:checked=debug_mode
|
bind:checked=debug_mode
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user