app-proto/inversive-display/main.css

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

app-proto/inversive-display/src/main.rs

@@ -239,57 +239,89 @@ fn main() {
         view! {
             div(id="app") {
                 canvas(ref=display, width="600", height="600")
+                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
                     )
                 }
             }
+        }
     });
 }