Theming

empty.yml

···
+uuid: fb3e046d-c883-4c5f-b36e-3d5c6c8fbe26
+name: ''
+theme:
+  highlight_color:
+  - 255
+  - 255
+  - 255
+  - 255
+  midtone_color:
+  - 160
+  - 160
+  - 160
+  - 255
+  lowlight_color:
+  - 96
+  - 96
+  - 96
+  - 255
+  accent_color:
+  - 255
+  - 215
+  - 0
+  - 255
+  text_color:
+  - 160
+  - 160
+  - 160
+  - 255
+size: U1
+visuals: {}
+devices: {}
+connections: {}

prefab_modules/gigas1.yml

···
 size: Q1
 uuid: 911f4d08-18ff-4f85-a7e7-70244fab87b4
+name: Gigas1
+theme:
+  highlight_color:
+  - 255
+  - 255
+  - 255
+  - 255
+  midtone_color:
+  - 160
+  - 160
+  - 160
+  - 255
+  lowlight_color:
+  - 96
+  - 96
+  - 96
+  - 255
+  accent_color:
+  - 255
+  - 215
+  - 0
+  - 255
+  text_color:
+  - 160
+  - 160
+  - 160
+  - 255
 visuals:
   0:
     uuid: 0f96dbae-aa7e-4316-a956-e1467ae07780

prefab_modules/moogsimple.yml

···
 size: U1
 uuid: 5066f806-2fb2-4cfe-b70d-dcd7d7c4ed38
+name: Moogsimple
+theme:
+  highlight_color:
+  - 255
+  - 255
+  - 255
+  - 255
+  midtone_color:
+  - 160
+  - 160
+  - 160
+  - 255
+  lowlight_color:
+  - 96
+  - 96
+  - 96
+  - 255
+  accent_color:
+  - 255
+  - 215
+  - 0
+  - 255
+  text_color:
+  - 160
+  - 160
+  - 160
+  - 255
 visuals:
   0:
     uuid: 8093ddaf-9403-48c8-98e7-a3595cd8080a

prefab_modules/simpleout.yml

···
 size: U1
 uuid: 4761ac0d-f7ce-4bb0-84ba-8f707e92962c
+name: simpleout
+theme:
+  highlight_color:
+  - 255
+  - 255
+  - 255
+  - 255
+  midtone_color:
+  - 160
+  - 160
+  - 160
+  - 255
+  lowlight_color:
+  - 96
+  - 96
+  - 96
+  - 255
+  accent_color:
+  - 255
+  - 215
+  - 0
+  - 255
+  text_color:
+  - 160
+  - 160
+  - 160
+  - 255
 visuals:
   0:
     uuid: 8093ddaf-9403-48c8-98e7-a3595cd8080a

rack-designer/src/app.rs

···
     devices::description::Param,
     pos_drag_value,
     two_drag_value,
-    visuals::templates::WidgetTemplate,
+    visuals::{
+        templates::WidgetTemplate,
+        VisualTheme,
+    },
     widget_description::{
         ModuleDescription,
         WidgetKind,
···
         .resizable(false)
         .min_width(256.)
         .show(ctx, |ui| {
+            ui.collapsing("Theme", |ui| {
+                ui.horizontal(|ui| {
+                    ui.label("Accent");
+                    ui.color_edit_button_srgba(&mut state.module.theme.accent_color);
+                });
+                ui.horizontal(|ui| {
+                    ui.label("Highlight");
+                    ui.color_edit_button_srgba(&mut state.module.theme.highlight_color);
+                });
+                ui.horizontal(|ui| {
+                    ui.label("Lowlight");
+                    ui.color_edit_button_srgba(&mut state.module.theme.lowlight_color);
+                });
+                ui.horizontal(|ui| {
+                    ui.label("Midtone");
+                    ui.color_edit_button_srgba(&mut state.module.theme.midtone_color);
+                });
+                ui.horizontal(|ui| {
+                    ui.label("Text");
+                    ui.color_edit_button_srgba(&mut state.module.theme.text_color);
+                });
+            });
+
             ScrollArea::vertical().id_source("widgets").show(ui, |ui| {
                 widgets_editor(ui, &mut state, loader);
             });
···
     CentralPanel::default().show(ctx, |ui| {
         let r = ui.available_rect_before_wrap();
         paint_module_bg(ui.painter(), r.center(), current.module.size);
-        paint_module_widgets(ui, r.center(), &current.module.visuals);
+        paint_module_widgets(
+            ui,
+            r.center(),
+            &current.module.visuals,
+            current.module.theme,
+        );
     });
     next_state
 }
···
     );
 }
 
-fn paint_module_widgets(ui: &mut Ui, center: Pos2, visuals: &BTreeMap<usize, WidgetTemplate>) {
-    visuals.values().for_each(|visual| {
-        visual.preview(
-            ui,
-            center + visual.position.to_vec2(),
-            Default::default(),
-            0.0,
-        )
-    });
+fn paint_module_widgets(
+    ui: &mut Ui,
+    center: Pos2,
+    visuals: &BTreeMap<usize, WidgetTemplate>,
+    theme: VisualTheme,
+) {
+    visuals
+        .values()
+        .for_each(|visual| visual.preview(ui, center + visual.position.to_vec2(), theme, 0.0));
 }

rack-designer/src/app/state.rs

···
-use rack::widget_description::ModuleDescription;
+use rack::{
+    visuals::VisualTheme,
+    widget_description::ModuleDescription,
+};
 
 use rack::container::sizing::ModuleSize;
 use uuid::Uuid;
···
             device_adder: None,
             module: ModuleDescription {
                 uuid: Uuid::new_v4(),
+                name: String::new(),
+                theme: VisualTheme::default(),
                 size,
                 visuals: Default::default(),
                 devices: Default::default(),

rack/src/graph/modules.rs

···
         Param,
     },
     graph::Graph,
-    visuals::templates::WidgetTemplate,
+    visuals::{
+        templates::WidgetTemplate,
+        VisualTheme,
+    },
     widget_description::ModuleDescription,
     widgets::{
         SlotWidget,
···
     pub size: ModuleSize,
     pub devices: Vec<DeviceId>,
     pub visuals: SlotMap<VisualId, SlotWidget>,
+    theme: VisualTheme,
     pub values: SecondaryMap<VisualId, Connector>,
     /// Maps inputs to their visuals
     pub ins: SecondaryMap<InputId, VisualId>,
···
         graph: &mut Graph,
         size: ModuleSize,
         visual_descs: BTreeMap<usize, WidgetTemplate>,
+        theme: VisualTheme,
         devices: BTreeMap<usize, DeviceKind>,
         mut connections: BTreeMap<(usize, usize), usize>,
     ) -> ModuleId {
···
             size,
             devices,
             visuals,
+            theme,
             values,
             ins,
             outs,
···
     pub fn insert_from_description(graph: &mut Graph, description: ModuleDescription) -> ModuleId {
         let ModuleDescription {
             uuid: _,
+            name: _,
+            theme,
             size,
             visuals,
             devices,
             connections,
         } = description;
-        Self::insert_new(graph, size, visuals, devices, connections)
+        Self::insert_new(graph, size, visuals, theme, devices, connections)
     }
 
     fn ui_for(&mut self, position: Pos2, ui: &mut Ui) -> ModuleResponse {
···
         for (vid, w) in visuals.iter_mut() {
             let pos = w.pos() + position.to_vec2();
             ui.put(Rect::from_min_size(pos, w.size()), |ui: &mut Ui| {
-                let InnerResponse { inner, response } = w.show(ui);
+                let InnerResponse { inner, response } = w.show(ui, self.theme);
                 if let Some(connected_plug) = self.values.get(vid).copied() {
                     match inner {
                         WidgetResponse::None => {}

rack/src/visuals.rs

···
     Text(Pos2, String, FontFamily),
 }
 
-#[derive(Serialize, Deserialize, Clone, Copy)]
+#[derive(Serialize, Deserialize, Clone, Copy, Debug)]
 pub struct VisualTheme {
-    highlight_color: Color32,
-    midtone_color: Color32,
-    lowlight_color: Color32,
-    accent_color: Color32,
-    text_color: Color32,
+    pub highlight_color: Color32,
+    pub midtone_color: Color32,
+    pub lowlight_color: Color32,
+    pub accent_color: Color32,
+    pub text_color: Color32,
 }
 
 impl Default for VisualTheme {

rack/src/widget_description.rs

···
 use crate::{
     container::sizing::ModuleSize,
     devices::description::DeviceKind,
-    visuals::templates::WidgetTemplate,
+    visuals::{
+        templates::WidgetTemplate,
+        VisualTheme,
+    },
     widgets::KnobRange,
     Uuidentified,
 };
···
 #[derive(Debug, Serialize, Deserialize, Clone)]
 pub struct ModuleDescription {
     pub uuid: Uuid,
+    pub name: String,
+    pub theme: VisualTheme,
     pub size: ModuleSize,
     pub visuals: BTreeMap<usize, WidgetTemplate>,
     pub devices: BTreeMap<usize, DeviceKind>,

rack/src/widgets.rs

···
 use std::ops::RangeInclusive;
 
 use crate::{
-    visuals::templates::WidgetTemplate,
+    visuals::{
+        templates::WidgetTemplate,
+        VisualTheme,
+    },
     Tooltipable,
 };
 
···
         }
     }
 
-    pub fn show(&mut self, ui: &mut Ui) -> InnerResponse<WidgetResponse> {
+    pub fn show(&mut self, ui: &mut Ui, theme: VisualTheme) -> InnerResponse<WidgetResponse> {
         match self {
-            SlotWidget::Knob(k) => k.show(ui),
+            SlotWidget::Knob(k) => k.show(ui, theme),
             SlotWidget::Fader(_f) => todo!(),
-            SlotWidget::Port(p) => p.show(ui),
+            SlotWidget::Port(p) => p.show(ui, theme),
         }
     }
 

rack/src/widgets/connector/ports.rs

···
     visuals::{
         templates::WidgetTemplate,
         VisualComponent,
+        VisualTheme,
     },
     widget_description::WidgetKind,
     widgets::WidgetResponse,
···
 }
 
 impl Port {
-    pub fn show(&mut self, ui: &mut Ui) -> InnerResponse<WidgetResponse> {
+    pub fn show(&mut self, ui: &mut Ui, theme: VisualTheme) -> InnerResponse<WidgetResponse> {
         let (rect, response) = ui.allocate_exact_size(self.size, Sense::click());
 
         ui.painter().debug_rect(rect, Color32::DEBUG_COLOR, "");
         let center = rect.center();
         if ui.is_rect_visible(rect) {
             for visual in &self.visuals {
-                visual.show(ui, center, Default::default());
+                visual.show(ui, center, theme);
             }
         }
         let inner = if response.clicked_by(PointerButton::Primary) {

rack/src/widgets/knob.rs

···
     visuals::{
         templates::WidgetTemplate,
         VisualComponent,
+        VisualTheme,
     },
     widget_description::{
         KnobKind,
···
         ui.allocate_response(self.size, Sense::click_and_drag())
     }
 
-    fn update(&mut self, ui: &mut Ui) -> Response {
+    fn update(&mut self, ui: &mut Ui, theme: VisualTheme) -> Response {
         let old_value = self.value;
         let old_angle = self.angle;
 
···
             self.angle = angle;
         }
 
-        self.draw(ui, &res);
+        self.draw(ui, &res, theme);
 
         res.changed = self.value != old_value;
 
         res
     }
 
-    fn draw(&mut self, ui: &mut Ui, res: &Response) {
+    fn draw(&mut self, ui: &mut Ui, res: &Response, theme: VisualTheme) {
         let rect = res.rect;
         let center = rect.center();
         ui.painter().debug_rect(rect, Color32::GOLD, "");
 
         if ui.is_rect_visible(rect) {
             for visual in &self.visuals {
-                visual.show_with_value(ui, center, Default::default(), self.angle)
+                visual.show_with_value(ui, center, theme, self.angle)
             }
         }
     }
 
-    pub fn show(&mut self, ui: &mut Ui) -> InnerResponse<WidgetResponse> {
-        let response = self.update(ui);
+    pub fn show(&mut self, ui: &mut Ui, theme: VisualTheme) -> InnerResponse<WidgetResponse> {
+        let response = self.update(ui, theme);
         let wr = if response.changed() {
             WidgetResponse::Changed
         } else {

src/pcmg_ui/module_adder.rs

···
     Sense,
     Window,
 };
-use rack::{
-    visuals::VisualTheme,
-    widget_description::ModuleDescription,
-};
+use rack::widget_description::ModuleDescription;
 use uuid::Uuid;
 
 pub struct ModuleAdder {
···
             ui.horizontal(|ui| {
                 ui.vertical(|ui| {
                     for (uuid, module) in self.modules.iter() {
-                        ui.selectable_value(&mut self.selection, Some(*uuid), uuid.to_string());
-                        let (r, _) = ui.allocate_exact_size(module.size.size(), Sense::hover());
-                        for vis in module.visuals.values() {
-                            vis.preview(
-                                ui,
-                                r.center() + vis.position.to_vec2(),
-                                VisualTheme::default(),
-                                0.0,
-                            )
-                        }
+                        ui.selectable_value(&mut self.selection, Some(*uuid), &module.name);
                     }
                     closing = ui.button("Add").clicked();
                 });
···
                         let m = &self.modules[&uuid];
                         let (r, _) = ui.allocate_exact_size(m.size.size(), Sense::hover());
                         for w in m.visuals.values() {
-                            w.preview(
-                                ui,
-                                r.center() + w.position.to_vec2(),
-                                Default::default(),
-                                0.0,
-                            );
+                            w.preview(ui, r.center() + w.position.to_vec2(), m.theme, 0.0);
                         }
                     }
                 });