From 3fbc06e819be289585c2c79dd3e3f835da73f274 Mon Sep 17 00:00:00 2001
From: Robbert van der Helm <mail@robbertvanderhelm.nl>
Date: Fri, 11 Nov 2022 17:09:53 +0100
Subject: [PATCH] Add more Diopser GUI scaffolding

---
 plugins/diopser/src/editor.rs | 66 +++++++++++++++++++++++++++++++----
 plugins/diopser/src/theme.css |  9 +++++
 2 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/plugins/diopser/src/editor.rs b/plugins/diopser/src/editor.rs
index dcb2bfd0..6a9ef180 100644
--- a/plugins/diopser/src/editor.rs
+++ b/plugins/diopser/src/editor.rs
@@ -29,6 +29,8 @@ mod button;
 const EDITOR_WIDTH: u32 = 600;
 const EDITOR_HEIGHT: u32 = 490;
 
+const SPECTRUM_ANALYZER_HEIGHT: u32 = 260;
+
 #[derive(Lens)]
 struct Data {
     params: Arc<DiopserParams>,
@@ -77,7 +79,7 @@ fn top_bar(cx: &mut Context) {
     HStack::new(cx, |cx| {
         Label::new(cx, "Diopser")
             .font(assets::NOTO_SANS_THIN)
-            .font_size(40.0)
+            .font_size(37.0)
             .top(Pixels(-2.0))
             .left(Pixels(7.0));
 
@@ -101,16 +103,66 @@ fn top_bar(cx: &mut Context) {
 /// This shows a spectrum analyzer for the plugin's output, and also acts as an X-Y pad for the
 /// frequency and resonance parameters.
 fn spectrum_analyzer(cx: &mut Context) {
-    Label::new(cx, "When I grow up, I want to be a spectrum analyzer!");
+    const LABEL_HEIGHT: u32 = 20;
+
+    HStack::new(cx, |cx| {
+        Label::new(cx, "Resonance")
+            .font_size(18.0)
+            // HACK: Rotating doesn't really work in vizia, but with text wrap disabled this at
+            //       least visually does the right thing
+            .text_wrap(false)
+            .rotate(270.0f32)
+            .width(Pixels(LABEL_HEIGHT as f32))
+            .height(Pixels(SPECTRUM_ANALYZER_HEIGHT as f32))
+            // HACK: The `.space()` on the HStack doesn't seem to work correctly here
+            .left(Pixels(10.0))
+            .right(Pixels(-5.0))
+            .child_space(Stretch(1.0));
+
+        VStack::new(cx, |cx| {
+            Label::new(cx, "When I grow up, I want to be a spectrum analyzer!")
+                .child_space(Stretch(1.0))
+                .width(Percentage(100.0))
+                .background_color(Color::rgb(0xc4, 0xc4, 0xc4))
+                .height(Pixels(SPECTRUM_ANALYZER_HEIGHT as f32));
+
+            Label::new(cx, "Frequency")
+                .font_size(18.0)
+                .width(Stretch(1.0))
+                .height(Pixels(20.0))
+                .child_space(Stretch(1.0));
+        })
+        .space(Pixels(10.0))
+        .width(Stretch(1.0));
+    });
 }
 
 /// The area below the spectrum analyzer that contains all of the other parameters.
 fn other_params(cx: &mut Context) {
-    // Just to center the old generic UI for now
-    ZStack::new(cx, |cx| {
-        GenericUi::new(cx, Data::params).width(Auto).height(Auto);
+    VStack::new(cx, |cx| {
+        HStack::new(cx, move |cx| {
+            Label::new(cx, "Filter Stages").class("param-label");
+            ParamSlider::new(cx, Data::params, |params| &params.filter_stages);
+        })
+        .bottom(Pixels(10.0));
+
+        HStack::new(cx, move |cx| {
+            Label::new(cx, "Frequency Spread").class("param-label");
+            ParamSlider::new(cx, Data::params, |params| &params.filter_spread_octaves);
+        })
+        .bottom(Pixels(10.0));
+
+        HStack::new(cx, move |cx| {
+            Label::new(cx, "Spread Style").class("param-label");
+            ParamSlider::new(cx, Data::params, |params| &params.filter_spread_style)
+                .set_style(ParamSliderStyle::CurrentStepLabeled { even: true });
+        });
     })
+    .id("param-sliders")
     .width(Percentage(100.0))
-    .height(Stretch(1.0))
-    .child_space(Stretch(1.0));
+    .top(Pixels(7.0))
+    // This should take up all remaining space
+    .bottom(Stretch(1.0))
+    .child_space(Stretch(1.0))
+    .child_left(Stretch(1.0));
 }
diff --git a/plugins/diopser/src/theme.css b/plugins/diopser/src/theme.css
index 48effdd0..25a4ab06 100644
--- a/plugins/diopser/src/theme.css
+++ b/plugins/diopser/src/theme.css
@@ -4,6 +4,15 @@
   width: 100%;
 }
 
+#param-sliders .param-label {
+  width: 140px;
+  height: 30px;
+  child-top: 1s;
+  child-right: 10px;
+  child-bottom: 1s;
+  child-left: 1s;
+}
+
 /* The safe mode button reuses the param-button element's style with a different class */
 param-button.safe-mode {
   background-color: #fff28000;