1
0
Fork 0

Add default styling for nih_plug_vizia GUIs

This commit is contained in:
Robbert van der Helm 2022-03-18 19:12:38 +01:00
parent f43d209a60
commit e2c691ba55
5 changed files with 28 additions and 11 deletions

View file

@ -0,0 +1 @@
/* Default styling for the widgets included in nih_plug_vizia */

View file

@ -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);

View file

@ -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 {

View file

@ -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

View file

@ -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<ViziaState> {
@ -28,8 +23,6 @@ pub(crate) fn create(
editor_state: Arc<ViziaState>,
) -> Option<Box<dyn Editor>> {
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