Add more Diopser GUI scaffolding

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
+    VStack::new(cx, |cx| {
-    ZStack::new(cx, |cx| {
+        HStack::new(cx, move |cx| {
-        GenericUi::new(cx, Data::params).width(Auto).height(Auto);
+            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))
+    .top(Pixels(7.0))
-    .child_space(Stretch(1.0));
+    // This should take up all remaining space
+    .bottom(Stretch(1.0))
+    .child_space(Stretch(1.0))
+    .child_left(Stretch(1.0));
 }

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;