Rust code for UI

- Craete and display popup window
- Pass Slint component properties from Rust code
- Remove default values from Slint component

crates/popcorn/src/main.rs

@@ -1,3 +1,6 @@
-fn main() {
+mod show_popup;
-    println!("Hello, world!");
+
+fn main() -> Result<(), Box<dyn std::error::Error>> {
+    show_popup::show_popup()?;
+    Ok(())
 }

crates/popcorn/src/show_popup.rs

@@ -0,0 +1,97 @@
+use i_slint_backend_winit::{
+    Backend,
+    winit::{
+        platform::x11::{WindowAttributesExtX11, WindowType},
+        window::WindowAttributes,
+    },
+};
+use slint::{Color, LogicalPosition, LogicalSize, SharedString};
+slint::include_modules!();
+
+// Helper function to simplify color values (A, R, G, B)
+fn argb_col(color_hex: u32) -> Color {
+    Color::from_argb_encoded(color_hex)
+}
+
+/// Set Slint properties from config data  
+fn set_ui_props(ui: &OSDpopup) {
+    // Config values
+    let popup_width = 200;
+    let popup_height = 50;
+    let popup_border_radius = 5;
+    let popup_padding = 7;
+    let window_position_x = 1146;
+    let window_position_y = 35;
+
+    let osd_bg_color = argb_col(0x_67_5f_5f_5f);
+    let fill_color = argb_col(0x_ff_12_7a_9b);
+
+    let value_font_size = 35;
+    let value_font_color = argb_col(0x_ff_ff_ff_ff);
+    let value_font = "Iosevka Extrabold";
+    let percent_value = 35;
+
+    let icon_size = value_font_size;
+    let icon_font_color = value_font_color;
+    let icon_font = "IosevkaTermSlab Nerd Font Mono";
+    let icon_glyph = "";
+
+    // Config values -> Slint component properties
+    ui.set_popup_width(popup_width);
+    ui.set_popup_height(popup_height);
+    ui.set_popup_border_radius(popup_border_radius);
+    ui.set_popup_padding(popup_padding);
+
+    ui.set_osd_bg_color(osd_bg_color);
+    ui.set_fill_color(fill_color);
+
+    ui.set_value_font_size(value_font_size);
+    ui.set_value_font_color(value_font_color);
+    ui.set_value_font(SharedString::from(value_font));
+    ui.set_percent_value(percent_value);
+
+    ui.set_icon_size(icon_size);
+    ui.set_icon_font_color(icon_font_color);
+    ui.set_icon_font(SharedString::from(icon_font));
+    ui.set_icon_glyph(SharedString::from(icon_glyph));
+
+    // Window size (width, height): pixels
+    #[allow(clippy::cast_precision_loss)]
+    ui.window()
+        .set_size(LogicalSize::new(popup_width as f32, popup_height as f32));
+
+    // Window position (x,y): pixels
+    #[allow(clippy::cast_precision_loss)]
+    ui.window().set_position(LogicalPosition::new(
+        window_position_x as f32,
+        window_position_y as f32,
+    ));
+}
+
+/// Create and show the Window UI
+pub fn show_popup() -> Result<(), Box<dyn std::error::Error>> {
+    // Closure that adjusts winit WindowAttributes before Slint creates the window.
+    let window_attrs = |attrs: WindowAttributes| {
+        // Mark the X11 window as a Dock so the WM doesn't treat it as a normal window. Window type `Notification` didn't work. Fix later.
+        attrs.with_x11_window_type(vec![WindowType::Dock])
+    };
+
+    // Build a Slint backend that applies this attribute hook to all windows.
+    let backend = Backend::builder()
+        .with_window_attributes_hook(window_attrs) // Register the hook
+        .build()?; // Construct backend
+
+    // Activate this customized backend for all Slint window creation and events.
+    slint::platform::set_platform(Box::new(backend))?;
+
+    // Create window
+    let ui = OSDpopup::new()?;
+
+    // Send the data to the UI as properties
+    set_ui_props(&ui);
+
+    // Run the UI
+    ui.run()?;
+
+    Ok(())
+}

crates/popcorn/ui/osd-popup.slint

@@ -1,21 +1,21 @@
 export component OSDpopup inherits Window {
-    in property <int> popup_width: 200;
+    in property <int> popup_width;
-    in property <int> popup_height: 50;
+    in property <int> popup_height;
-    in property <int> popup_border_radius: 5;
+    in property <int> popup_border_radius;
-    in property <int> popup_padding: 7;
+    in property <int> popup_padding;
 
-    in property <color> osd_bg_color: #5f5f5f67;
+    in property <color> osd_bg_color;
-    in property <color> fill_color: #127a9bff;
+    in property <color> fill_color;
 
-    in property <int> value_font_size: 35;
+    in property <int> value_font_size;
-    in property <color> value_font_color: #ffffffff;
+    in property <color> value_font_color;
-    in property <string> value_font: "Iosevka Extrabold";
+    in property <string> value_font;
-    in property <int> percent_value: 0;
+    in property <int> percent_value;
 
-    in property <int> icon_size: self.value_font_size;
+    in property <int> icon_size;
-    in property <color> icon_font_color: self.value_font_color;
+    in property <color> icon_font_color;
-    in property <string> icon_font: "IosevkaTermSlab Nerd Font Mono";
+    in property <string> icon_font;
-    in property <string> icon_glyph: "";
+    in property <string> icon_glyph;
 
     no-frame: true;
     always-on-top: true;