TRY-80 UI optimierung

src/ui/mod.rs

@@ -11,15 +11,15 @@ use egui::{
     mutex::Mutex, pos2, Align, CursorIcon, Frame, Layout, ProgressBar, Rect, Rounding, Stroke, Vec2,
 };
 use egui::{
-    Align2, Button, CentralPanel, Color32, ColorImage, ImageData, Key, Sense, TextStyle,
+    Align2, Button, CentralPanel, Color32, ColorImage, ImageData, Key, RichText, Sense, TextStyle,
     TextureHandle, TextureOptions, Ui,
 };
 use egui_file::FileDialog;
 use image::{ImageBuffer, RgbImage};
 use log::{info, warn};
 use nalgebra::OPoint;
 use std::path::PathBuf;
-use std::sync::atomic::{AtomicBool, AtomicU16, Ordering};
+use std::sync::atomic::{AtomicBool, AtomicU16, AtomicU32, Ordering};
 use std::sync::Arc;
 use std::thread::JoinHandle;
 
@@ -65,7 +65,6 @@ impl std::fmt::Display for RenderSize {
         }
     }
 }
-
 pub struct App {
     current_tab: usize,
     scene: Scene,
@@ -78,6 +77,7 @@ pub struct App {
     save_image_dialog: Option<FileDialog>,
     render_size: RenderSize,
     rendering_progress: Arc<AtomicU16>,
+    rendering_time: Arc<AtomicU32>,
     preview_zoom: f32,
     preview_position: Vec2,
     preview_activate_movement: bool,
@@ -132,6 +132,7 @@ impl App {
             save_image_dialog: None,
             render_size,
             rendering_progress: Arc::new(AtomicU16::new(0)),
+            rendering_time: Arc::new(AtomicU32::new(0)),
             rendering_cancel: Arc::new(AtomicBool::new(false)),
             render_image: image_buffer,
             preview_activate_movement: false,
@@ -193,8 +194,15 @@ impl App {
     }
 
     fn preview(&mut self, ui: &mut Ui) {
+        ui.vertical(|ui| {
+        let available_size = ui.available_size();
+        let width = available_size.x;
+        let size = self.render_size.as_size();
+        let height = (width / size.0 as f32) * size.1 as f32;
+        ui.allocate_space(Vec2::new(0.0, (available_size.y - height - 20.0) / 2.0));
         Frame::canvas(ui.style())
             .outer_margin(10.0)
+            .inner_margin(0.0)
             .fill(match self.scene.settings.skybox {
                     Skybox::Image { ..} => Color32::GRAY,
                     Skybox::Color(c) => Color32::from_rgb(
@@ -205,15 +213,15 @@ impl App {
                 })
             .show(ui, |ui| {
                 let (response, painter) =
-                    ui.allocate_painter(ui.available_size(), Sense::click_and_drag());
+                    ui.allocate_painter(Vec2 { x: width - 20.0, y: height }, Sense::click_and_drag());
                 painter.add(Preview::paint(response.rect, &self.scene));
                 if response.hover_pos().is_some() && !self.preview_activate_movement {
                     egui::show_tooltip(ui.ctx(), egui::Id::new("preview_tooltip"), |ui| {
                         ui.label("Click to change camera position");
                     });
                 }
                 if response.clicked() {
-                   self.change_preview_movement(ui, &response, true);
+                    self.change_preview_movement(ui, &response, true);
                 }
                 if self.preview_activate_movement {
                     painter.debug_text(
@@ -230,7 +238,7 @@ impl App {
                 // exit movement mode when tabbed out
                 self.change_preview_movement(ui, &response, false);
             }
-            });
+            })});
     }
 
     fn move_camera(&mut self, ui: &mut Ui, response: &egui::Response) {
@@ -477,15 +485,26 @@ impl eframe::App for App {
                 ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
                     self.export_button(ui);
                     self.render_button(ui);
-
+                    let progress = f32::from(self.rendering_progress.load(Ordering::Relaxed))
+                        / f32::from(u16::MAX);
+                    #[allow(clippy::float_cmp)]
                     ui.add(
-                        ProgressBar::new(
-                            f32::from(self.rendering_progress.load(Ordering::Relaxed))
-                                / f32::from(u16::MAX),
-                        )
-                        .desired_width(ui.available_width() / 3.0)
-                        .show_percentage()
-                        .fill(Color32::DARK_BLUE),
+                        ProgressBar::new(progress)
+                            .desired_width(ui.available_width() / 3.0)
+                            .text(
+                                RichText::new(if progress == 1.0 {
+                                    format!(
+                                        "Done in: {:.2} s",
+                                        self.rendering_time.load(Ordering::Relaxed) as f32 / 1000.0
+                                    )
+                                } else if progress > 0.0 {
+                                    format!("{:.1}%", progress * 100.0)
+                                } else {
+                                    String::new()
+                                })
+                                .color(Color32::WHITE),
+                            )
+                            .fill(Color32::DARK_BLUE),
                     );
 
                     ui.label("Rendering progress");
@@ -499,7 +518,6 @@ impl eframe::App for App {
             match self.current_tab {
                 0 => {
                     self.properties(ui);
-
                     self.preview(ui);
                 }
 

src/ui/properties.rs

@@ -18,6 +18,10 @@ use crate::{
 
 use super::{App, RenderSize};
 
+pub const SMALL_SPACE: f32 = 2.5;
+pub const MEDIUM_SPACE: f32 = 5.0;
+pub const LARGE_SPACE: f32 = 10.0;
+
 fn xyz_drag_value(ui: &mut Ui, value: &mut XYZ<f32>) {
     ui.horizontal(|ui| {
         ui.add(DragValue::new(&mut value.x).speed(0.1).prefix("x: "));
@@ -36,12 +40,17 @@ impl App {
                         ui.heading("Properties");
 
                         ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
+                            let tint_color = if ui.visuals().dark_mode {
+                                hex_color!("#ffffff")
+                            } else {
+                                hex_color!("#000000")
+                            };
                             ui.add_sized(
                                 [20.0, 20.0],
                                 ImageButton::new(include_image!(
                                     "../../res/icons/floppy-disk-solid.svg"
                                 ))
-                                .tint(hex_color!("#ffffff")),
+                                .tint(tint_color),
                             )
                             .on_hover_text("Save Scene")
                             .clicked()
@@ -51,21 +60,23 @@ impl App {
                         });
                     });
 
-                    ui.add_space(5.0);
+                    ui.add_space(MEDIUM_SPACE);
 
                     self.camera_settings(ui);
 
-                    ui.add_space(10.0);
+                    ui.add_space(LARGE_SPACE);
 
                     self.scene_settings(ui);
 
-                    ui.add_space(10.0);
+                    ui.add_space(LARGE_SPACE);
 
                     self.lights(ui);
 
-                    ui.add_space(10.0);
+                    ui.add_space(LARGE_SPACE);
 
                     self.objects(ui);
+
+                    ui.add_space(SMALL_SPACE);
                 });
             });
     }
@@ -80,18 +91,26 @@ impl App {
 
             ui.vertical(|ui| {
                 ui.label("Position:");
+                ui.add_space(SMALL_SPACE);
                 xyz_drag_value(ui, &mut self.scene.camera.position);
 
+                ui.add_space(MEDIUM_SPACE);
+
                 ui.label("Look at:");
+                ui.add_space(SMALL_SPACE);
                 xyz_drag_value(ui, &mut self.scene.camera.look_at);
 
+                ui.add_space(MEDIUM_SPACE);
+
                 ui.label("Field of View:");
+                ui.add_space(SMALL_SPACE);
                 ui.add(
                     Slider::new(&mut self.scene.camera.fov, 0.0..=std::f32::consts::PI)
                         .step_by(0.01)
                         .custom_formatter(|x, _| format!("{:.2}°", x.to_degrees()))
                         .clamp_to_range(true),
                 );
+                ui.add_space(SMALL_SPACE);
             });
         });
     }
@@ -106,11 +125,11 @@ impl App {
 
             self.render_options(ui);
 
-            ui.separator();
+            ui.add_space(MEDIUM_SPACE);
 
             self.skybox_options(ui);
 
-            ui.separator();
+            ui.add_space(MEDIUM_SPACE);
 
             ui.label("Ambient Color:");
             color_picker::color_edit_button_rgb(ui, self.scene.settings.ambient_color.as_mut());
@@ -121,7 +140,7 @@ impl App {
                     .clamp_to_range(true),
             );
 
-            ui.separator();
+            ui.add_space(MEDIUM_SPACE);
         });
     }
 
@@ -296,6 +315,7 @@ impl App {
                                 .size(14.0)
                                 .family(FontFamily::Monospace),
                         );
+                        ui.add_space(SMALL_SPACE);
                         ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
                             remove = ui
                                 .add_sized(
@@ -310,14 +330,23 @@ impl App {
                     });
 
                     ui.label("Position:");
+                    ui.add_space(SMALL_SPACE);
                     xyz_drag_value(ui, &mut light.position);
 
+                    ui.add_space(MEDIUM_SPACE);
+
                     ui.label("Intensity:");
+                    ui.add_space(SMALL_SPACE);
                     ui.add(Slider::new(&mut light.intensity, 0.0..=100.0).clamp_to_range(true));
 
+                    ui.add_space(MEDIUM_SPACE);
+
                     ui.label("Color:");
+                    ui.add_space(SMALL_SPACE);
                     color_picker::color_edit_button_rgb(ui, light.color.as_mut());
 
+                    ui.add_space(MEDIUM_SPACE);
+
                     remove.then_some(n)
                 })
                 .collect::<Vec<_>>()
@@ -327,6 +356,7 @@ impl App {
                 });
 
             ui.separator();
+            ui.add_space(SMALL_SPACE);
             ui.vertical_centered(|ui| {
                 ui.add(Button::new(RichText::new("+ Add Light")).frame(false))
                     .clicked()
@@ -351,15 +381,19 @@ impl App {
 
             let mut objects_to_remove = Vec::new();
 
+            #[allow(clippy::out_of_bounds_indexing)]
             for (n, o) in self.scene.objects.iter_mut().enumerate() {
                 ui.separator();
 
+                ui.add_space(SMALL_SPACE);
+
                 ui.horizontal(|ui| {
                     ui.label(
                         RichText::new(format!("Object {} ({} ▲)", n, o.triangles.len()))
                             .size(14.0)
                             .family(FontFamily::Monospace),
                     );
+                    ui.add_space(SMALL_SPACE);
                     ui.with_layout(Layout::right_to_left(Align::Center), |ui| {
                         if ui
                             .add_sized(
@@ -375,9 +409,12 @@ impl App {
                 });
 
                 ui.label("Position");
+                ui.add_space(SMALL_SPACE);
                 xyz_drag_value(ui, &mut o.translation);
+                ui.add_space(MEDIUM_SPACE);
 
                 ui.label("Rotation");
+                ui.add_space(SMALL_SPACE);
                 ui.horizontal(|ui| {
                     let (mut x, mut y, mut z) = o.rotation.euler_angles();
 
@@ -397,15 +434,20 @@ impl App {
                         })
                 });
 
+                ui.add_space(MEDIUM_SPACE);
+
                 ui.label("Scale");
+                ui.add_space(SMALL_SPACE);
                 xyz_drag_value(ui, &mut o.scale);
+                ui.add_space(MEDIUM_SPACE);
             }
 
             for o in objects_to_remove {
                 self.scene.objects.remove(o);
             }
 
             ui.separator();
+            ui.add_space(SMALL_SPACE);
             ui.vertical_centered(|ui| {
                 if ui
                     .add(Button::new(RichText::new("+ Add Object")).frame(false))

src/ui/render.rs

@@ -28,11 +28,13 @@ impl super::App {
         let block_size = [render_size.0 / 20, render_size.1 / 20];
 
         let rendering_progress = self.rendering_progress.clone();
+        let rendering_time = self.rendering_time.clone();
         let rendering_cancel = self.rendering_cancel.clone();
 
         let image_buffer = self.render_image.clone();
 
         rendering_progress.store(0, Ordering::Relaxed);
+        rendering_time.store(0, Ordering::Relaxed);
 
         self.rendering_thread = Some(std::thread::spawn(move || {
             let start = std::time::Instant::now();
@@ -115,6 +117,7 @@ impl super::App {
                 });
 
             rendering_progress.store(u16::MAX, Ordering::Relaxed);
+            rendering_time.store(start.elapsed().as_millis() as u32, Ordering::Relaxed);
 
             info!("rendering finished: {:?}", start.elapsed());
         }));