From d84b456edbec8dfbd8b106480526fa992f35b899 Mon Sep 17 00:00:00 2001
From: Robbert van der Helm <mail@robbertvanderhelm.nl>
Date: Mon, 21 Mar 2022 23:45:55 +0100
Subject: [PATCH] Draw ticks for the vizia PeakMeter

They are just slightly blurry.
---
 nih_plug_iced/src/widgets/peak_meter.rs       |  2 +-
 nih_plug_vizia/assets/theme.css               | 11 ++++
 nih_plug_vizia/src/widgets/peak_meter.rs      | 50 +++++++++++++++++--
 plugins/examples/gain-gui-vizia/src/editor.rs |  2 +-
 4 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/nih_plug_iced/src/widgets/peak_meter.rs b/nih_plug_iced/src/widgets/peak_meter.rs
index 211930ee..688d67d7 100644
--- a/nih_plug_iced/src/widgets/peak_meter.rs
+++ b/nih_plug_iced/src/widgets/peak_meter.rs
@@ -230,7 +230,7 @@ where
             Background::Color(Color::TRANSPARENT),
         );
 
-        // Beneat the bar we want to draw the names of the ticks
+        // Beneath the bar we want to draw the names of the ticks
         for tick_db in text_ticks {
             let x_coordinate = db_to_x_coord(tick_db as f32);
 
diff --git a/nih_plug_vizia/assets/theme.css b/nih_plug_vizia/assets/theme.css
index b7879892..c254d797 100644
--- a/nih_plug_vizia/assets/theme.css
+++ b/nih_plug_vizia/assets/theme.css
@@ -47,6 +47,17 @@ peak-meter .bar {
   border-width: 1px;
   border-color: #0a0a0a;
 }
+
 peak-meter .ticks {
   height: 50%;
 }
+peak-meter .ticks__tick {
+  background-color: #0a0a0a;
+  top: 0;
+  width: 1px;
+  height: 30%;
+}
+peak-meter .ticks__label {
+  top: 4px; /* In pixels in an attempt to get this to better align to the grid */
+  font-size: 10.5; /* 14px */
+}
diff --git a/nih_plug_vizia/src/widgets/peak_meter.rs b/nih_plug_vizia/src/widgets/peak_meter.rs
index f3edfb24..57e6aec9 100644
--- a/nih_plug_vizia/src/widgets/peak_meter.rs
+++ b/nih_plug_vizia/src/widgets/peak_meter.rs
@@ -16,6 +16,9 @@ const TICK_GAP: f32 = 1.0;
 const MIN_TICK: f32 = -90.0;
 /// The decibel value corresponding to the very right of the bar.
 const MAX_TICK: f32 = 20.0;
+/// The ticks that will be shown beneath the peak meter's bar. The first value is shown as
+/// -infinity, and at the last position we'll draw the `dBFS` string.
+const TEXT_TICKS: [i32; 6] = [-80, -60, -40, -20, 0, 12];
 
 /// A simple horizontal peak meter.
 ///
@@ -24,7 +27,7 @@ const MAX_TICK: f32 = 20.0;
 pub struct PeakMeter;
 
 /// The bar bit for the peak meter, manually drawn using vertical lines.
-struct PeakMeterInner<L, P>
+struct PeakMeterBar<L, P>
 where
     L: Lens<Target = f32>,
     P: Lens<Target = f32>,
@@ -76,15 +79,54 @@ impl PeakMeter {
                     .map(|_level| -> f32 { util::MINUS_INFINITY_DB }),
             };
 
-            PeakMeterInner {
+            PeakMeterBar {
                 level_dbfs,
                 peak_dbfs,
             }
             .build(cx)
             .class("bar");
 
-            // TODO: Ticks
+            ZStack::new(cx, |cx| {
+                const WIDTH_PCT: f32 = 50.0;
+                for tick_db in TEXT_TICKS {
+                    let tick_fraction = (tick_db as f32 - MIN_TICK) / (MAX_TICK - MIN_TICK);
+                    let tick_pct = tick_fraction * 100.0;
+
+                    ZStack::new(cx, |cx| {
+                        let first_tick = tick_db == TEXT_TICKS[0];
+                        let last_tick = tick_db == TEXT_TICKS[TEXT_TICKS.len() - 1];
+
+                        if !last_tick {
+                            // FIXME: This is not aligned to the pixel grid and some ticks will look
+                            //        blurry, is there a way to fix this?
+                            Element::new(cx).class("ticks__tick");
+                        }
+
+                        if first_tick {
+                            Label::new(cx, "-inf")
+                                .class("ticks__label")
+                                .class("ticks__label--inf");
+                        } else if last_tick {
+                            // This is only inclued in the array to make positioning this easier
+                            Label::new(cx, "dBFS")
+                                .class("ticks__label")
+                                .class("ticks__label--dbfs");
+                        } else {
+                            Label::new(cx, &tick_db.to_string()).class("ticks__label");
+                        };
+                    })
+                    .height(Stretch(1.0))
+                    .left(Percentage(tick_pct - (WIDTH_PCT / 2.0)))
+                    .width(Percentage(WIDTH_PCT))
+                    .child_left(Stretch(1.0))
+                    .child_right(Stretch(1.0))
+                    .overflow(Overflow::Visible);
+                }
+            })
+            .class("ticks")
+            .overflow(Overflow::Visible);
         })
+        .overflow(Overflow::Visible)
     }
 }
 
@@ -94,7 +136,7 @@ impl View for PeakMeter {
     }
 }
 
-impl<L, P> View for PeakMeterInner<L, P>
+impl<L, P> View for PeakMeterBar<L, P>
 where
     L: Lens<Target = f32>,
     P: Lens<Target = f32>,
diff --git a/plugins/examples/gain-gui-vizia/src/editor.rs b/plugins/examples/gain-gui-vizia/src/editor.rs
index a9259a9b..357d3ff9 100644
--- a/plugins/examples/gain-gui-vizia/src/editor.rs
+++ b/plugins/examples/gain-gui-vizia/src/editor.rs
@@ -26,7 +26,7 @@ impl Model for Data {}
 
 // Makes sense to also define this here, makes it a bit easier to keep track of
 pub(crate) fn default_state() -> Arc<ViziaState> {
-    ViziaState::from_size(200, 250)
+    ViziaState::from_size(200, 150)
 }
 
 pub(crate) fn create(