From b9370ceb41537e83efa45094a4da1bbb4d6b1496 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 26 Aug 2024 01:47:53 -0700
Subject: [PATCH] Ray-caster: label controls

---
 app-proto/inversive-display/main.css    |  12 ++-
 app-proto/inversive-display/src/main.rs | 132 +++++++++++++++---------
 2 files changed, 93 insertions(+), 51 deletions(-)

diff --git a/app-proto/inversive-display/main.css b/app-proto/inversive-display/main.css
index f79e62c..7cdc831 100644
--- a/app-proto/inversive-display/main.css
+++ b/app-proto/inversive-display/main.css
@@ -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;
 }
\ No newline at end of file
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index eceecd7..6b52a12 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/app-proto/inversive-display/src/main.rs
@@ -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
+                    )
+                }
             }
         }
     });