🎨 (ImagePlotter): add background color support

Added a `background_color` field to `ImagePlotter` and `AppContext` to allow setting and displaying a background color. Updated the UI to include a color picker for the background color, and added functionality to clear the background color.

Signed-off-by: Benign X <[email protected]>

Author: W-Mai

src/image_plotter.rs

@@ -11,6 +11,7 @@ pub struct ImagePlotter {
     anti_alias: bool,
     show_grid: bool,
     show_only: bool,
+    background_color: Color32,
 }
 
 impl ImagePlotter {
@@ -20,6 +21,7 @@ impl ImagePlotter {
             anti_alias: false,
             show_grid: false,
             show_only: false,
+            background_color: Default::default(),
         }
     }
 
@@ -41,6 +43,12 @@ impl ImagePlotter {
         s
     }
 
+    pub fn background_color(self, color: Color32) -> Self {
+        let mut s = self;
+        s.background_color = color;
+        s
+    }
+
     pub fn show(&mut self, ui: &mut egui::Ui, image_item: &Option<ImageItem>) {
         let color_data: Rc<RefCell<Option<Color32>>> = Default::default();
         let cursor_pos: Rc<RefCell<Option<[f64; 2]>>> = Default::default();
@@ -123,7 +131,13 @@ impl ImagePlotter {
                     .allow_zoom(!self.show_only)
                     .allow_drag(!self.show_only)
                     .show_x(!self.show_only)
-                    .show_y(!self.show_only);
+                    .show_y(!self.show_only)
+                    .show_background(self.background_color.is_additive());
+
+                if self.background_color.a() > 0 {
+                    let painter = ui.painter();
+                    painter.rect_filled(ui.min_rect(), 0.0, self.background_color);
+                }
 
                 plot.show(ui, |plot_ui| {
                     plot_ui.image(PlotImage::new(

src/image_shower.rs

@@ -1,6 +1,7 @@
 use crate::image_plotter::ImagePlotter;
 use eframe::egui;
 use eframe::egui::{Color32, DroppedFile, Sense};
+use eframe::egui::color_picker::Alpha;
 use icu_lib::midata::MiData;
 use serde::{Deserialize, Serialize};
 
@@ -101,13 +102,15 @@ struct MyEguiApp {
 struct AppContext {
     show_grid: bool,
     anti_alias: bool,
+    background_color: Color32,
 }
 
 impl Default for AppContext {
     fn default() -> Self {
         Self {
             show_grid: true,
             anti_alias: true,
+            background_color: Default::default(),
         }
     }
 }
@@ -139,10 +142,16 @@ impl eframe::App for MyEguiApp {
     fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
         egui::TopBottomPanel::top("top_panel").show(ctx, |ui| {
             ui.with_layout(egui::Layout::left_to_right(egui::Align::Center), |ui| {
+                ui.set_height(30.0);
                 egui::widgets::global_dark_light_mode_switch(ui);
                 ui.separator();
                 ui.toggle_value(&mut self.context.show_grid, "Show Grid");
                 ui.toggle_value(&mut self.context.anti_alias, "Anti-Aliasing");
+                ui.separator();
+                if ui.button("Clear").clicked() {
+                    self.context.background_color = self.context.background_color.linear_multiply(0.0);
+                }
+                egui::widgets::color_picker::color_edit_button_srgba(ui, &mut self.context.background_color, Alpha::BlendOrAdditive);
             });
         });
 
@@ -225,7 +234,8 @@ impl eframe::App for MyEguiApp {
         egui::CentralPanel::default().show(ctx, |ui| {
             let mut image_plotter = ImagePlotter::new("viewer")
                 .anti_alias(self.context.anti_alias)
-                .show_grid(self.context.show_grid);
+                .show_grid(self.context.show_grid)
+                .background_color(self.context.background_color);
 
             image_plotter.show(ui, &self.current_image);
         });