diff --git a/nih_plug_vizia/assets/theme.css b/nih_plug_vizia/assets/theme.css new file mode 100644 index 00000000..c89965c7 --- /dev/null +++ b/nih_plug_vizia/assets/theme.css @@ -0,0 +1 @@ +/* Default styling for the widgets included in nih_plug_vizia */ diff --git a/nih_plug_vizia/src/assets.rs b/nih_plug_vizia/src/assets.rs index e0ca383a..4dbce57e 100644 --- a/nih_plug_vizia/src/assets.rs +++ b/nih_plug_vizia/src/assets.rs @@ -6,7 +6,8 @@ use vizia::Context; // This module provides a re-export and simple font wrappers around the re-exported fonts. pub use nih_plug_assets::*; -/// Register the fonts from this module so they can be used with VIZIA. +/// Register the fonts from this module so they can be used with VIZIA. This is automatically called +/// for you when using [`create_vizia_editor()`][super::create_vizia_editor()]. pub fn register_fonts(cx: &mut Context) { cx.add_font_mem(NOTO_SANS_REGULAR, fonts::NOTO_SANS_REGULAR); cx.add_font_mem(NOTO_SANS_REGULAR_ITALIC, fonts::NOTO_SANS_REGULAR_ITALIC); diff --git a/nih_plug_vizia/src/lib.rs b/nih_plug_vizia/src/lib.rs index b3daac9f..29ad64d2 100644 --- a/nih_plug_vizia/src/lib.rs +++ b/nih_plug_vizia/src/lib.rs @@ -5,7 +5,7 @@ use crossbeam::atomic::AtomicCell; use nih_plug::prelude::{Editor, GuiContext, ParamSetter, ParentWindowHandle}; use std::sync::atomic::{AtomicBool, Ordering}; use std::sync::Arc; -use vizia::{Application, Context, Model, WindowDescription}; +use vizia::{Application, Color, Context, Entity, Model, PropSet, WindowDescription}; // Re-export for convenience pub use vizia; @@ -89,6 +89,22 @@ impl Editor for ViziaEditor { let window = Application::new(window_description, move |cx| { let setter = ParamSetter::new(context.as_ref()); + // Set some default styles to match the iced integration + // TODO: Maybe add a way to override this behavior + // NOTE: vizia's font rendering looks way too dark and thick. Going one font weight + // lower seems to compensate for this. + assets::register_fonts(cx); + cx.set_default_font(assets::NOTO_SANS_LIGHT); + + // TOOD: `:root { background-color: #fafafa; }` in a stylesheet doesn't work + Entity::root().set_background_color(cx, Color::rgb(250, 250, 250)); + // VIZIA uses points instead of pixels, this is 20px + cx.add_theme("* { font-size: 15; }"); + + // There doesn't seem to be any way to bundle styles with a widget, so we'll always + // include the style sheet for our custom widgets at context creation + widgets::register_theme(cx); + // Any widget can change the parameters by emitting `ParamEvent` events. This model will // handle them automatically. widgets::ParamModel { diff --git a/nih_plug_vizia/src/widgets.rs b/nih_plug_vizia/src/widgets.rs index a311049d..bcbe075a 100644 --- a/nih_plug_vizia/src/widgets.rs +++ b/nih_plug_vizia/src/widgets.rs @@ -9,7 +9,13 @@ use nih_plug::param::internals::ParamPtr; use nih_plug::prelude::{GuiContext, Param}; use std::sync::Arc; -use vizia::{Message, Model}; +use vizia::{Context, Model}; + +/// Register the default theme for the widgets exported by this module. This is automatically called +/// for you when using [`create_vizia_editor()`][super::create_vizia_editor()]. +pub fn register_theme(cx: &mut Context) { + cx.add_theme(include_str!("../assets/theme.css")); +} /// An event that updates a parameter's value. Since NIH-plug manages the parameters, interacting /// with parameter values with VIZIA works a little different from updating any other state. These diff --git a/plugins/examples/gain-gui-vizia/src/editor.rs b/plugins/examples/gain-gui-vizia/src/editor.rs index 6592c995..ea7637dd 100644 --- a/plugins/examples/gain-gui-vizia/src/editor.rs +++ b/plugins/examples/gain-gui-vizia/src/editor.rs @@ -10,12 +10,7 @@ use crate::GainParams; /// VIZIA uses points instead of pixels for text const POINT_SCALE: f32 = 0.75; -const STYLE: &str = r#" -* { - /* VIZIA uses points instead of pixels */ - font-size: 15; /* 20px */ -} -"#; +const STYLE: &str = r#""#; // Makes sense to also define this here, makes it a bit easier to keep track of pub(crate) fn default_state() -> Arc { @@ -28,8 +23,6 @@ pub(crate) fn create( editor_state: Arc, ) -> Option> { create_vizia_editor(editor_state, |cx, setter| { - // TOOD: `:root { background-color: #fafafa; }` in a stylesheet doesn't work - Entity::root().set_background_color(cx, Color::rgb(250, 250, 250)); cx.add_theme(STYLE); // NOTE: vizia's font rendering looks way too dark and thick. Going one font weight lower