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, @@ -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| ¶ms.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| ¶ms.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| ¶ms.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;