From 48ecf01e11e9bacb798dc03c7fc43927c276340b Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 1 Apr 2024 13:08:52 +0200 Subject: [PATCH] Rename "Color test" to "Rendering test", and restructure it slightly (#4298) Put the pixel-alignment test first, and hide the color test under a collapsing header. Screenshot 2024-04-01 at 13 01 43 --- crates/egui_demo_app/src/wrap_app.rs | 19 +++-- crates/egui_demo_lib/src/lib.rs | 4 +- .../src/{color_test.rs => rendering_test.rs} | 69 ++++++++++++------- 3 files changed, 60 insertions(+), 32 deletions(-) rename crates/egui_demo_lib/src/{color_test.rs => rendering_test.rs} (93%) diff --git a/crates/egui_demo_app/src/wrap_app.rs b/crates/egui_demo_app/src/wrap_app.rs index db3ee385..98e74d0d 100644 --- a/crates/egui_demo_app/src/wrap_app.rs +++ b/crates/egui_demo_app/src/wrap_app.rs @@ -79,15 +79,22 @@ impl eframe::App for ColorTestApp { #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))] enum Anchor { Demo, + EasyMarkEditor, + #[cfg(feature = "http")] Http, + #[cfg(feature = "image_viewer")] ImageViewer, + Clock, + #[cfg(any(feature = "glow", feature = "wgpu"))] Custom3d, - Colors, + + /// Rendering test + Rendering, } impl Anchor { @@ -101,7 +108,7 @@ impl Anchor { Self::Clock, #[cfg(any(feature = "glow", feature = "wgpu"))] Self::Custom3d, - Self::Colors, + Self::Rendering, ] } } @@ -147,7 +154,7 @@ pub struct State { #[cfg(feature = "image_viewer")] image_viewer: crate::apps::ImageViewer, clock: FractalClockApp, - color_test: ColorTestApp, + rendering_test: ColorTestApp, selected_anchor: Anchor, backend_panel: super::backend_panel::BackendPanel, @@ -229,9 +236,9 @@ impl WrapApp { } vec.push(( - "🎨 Color test", - Anchor::Colors, - &mut self.state.color_test as &mut dyn eframe::App, + "🎨 Rendering test", + Anchor::Rendering, + &mut self.state.rendering_test as &mut dyn eframe::App, )); vec.into_iter() diff --git a/crates/egui_demo_lib/src/lib.rs b/crates/egui_demo_lib/src/lib.rs index cf31ee8d..7dba93b4 100644 --- a/crates/egui_demo_lib/src/lib.rs +++ b/crates/egui_demo_lib/src/lib.rs @@ -13,12 +13,12 @@ #![cfg_attr(feature = "puffin", deny(unsafe_code))] #![cfg_attr(not(feature = "puffin"), forbid(unsafe_code))] -mod color_test; mod demo; pub mod easy_mark; +mod rendering_test; -pub use color_test::ColorTest; pub use demo::{DemoWindows, WidgetGallery}; +pub use rendering_test::ColorTest; /// View some Rust code with syntax highlighting and selection. pub(crate) fn rust_view_ui(ui: &mut egui::Ui, code: &str) { diff --git a/crates/egui_demo_lib/src/color_test.rs b/crates/egui_demo_lib/src/rendering_test.rs similarity index 93% rename from crates/egui_demo_lib/src/color_test.rs rename to crates/egui_demo_lib/src/rendering_test.rs index ebbb3076..2aa6194e 100644 --- a/crates/egui_demo_lib/src/color_test.rs +++ b/crates/egui_demo_lib/src/rendering_test.rs @@ -31,17 +31,43 @@ impl Default for ColorTest { impl ColorTest { pub fn ui(&mut self, ui: &mut Ui) { - ui.set_max_width(680.0); - ui.vertical_centered(|ui| { ui.add(crate::egui_github_link_file!()); }); ui.horizontal_wrapped(|ui|{ - ui.label("This is made to test that the egui painter backend is set up correctly."); + ui.label("This is made to test that the egui rendering backend is set up correctly."); ui.add(egui::Label::new("❓").sense(egui::Sense::click())) .on_hover_text("The texture sampling should be sRGB-aware, and every other color operation should be done in gamma-space (sRGB). All colors should use pre-multiplied alpha"); }); + + ui.separator(); + + pixel_test(ui); + + ui.separator(); + + ui.collapsing("Color test", |ui| { + self.color_test(ui); + }); + + ui.separator(); + + ui.heading("Text rendering"); + + text_on_bg(ui, Color32::from_gray(200), Color32::from_gray(230)); // gray on gray + text_on_bg(ui, Color32::from_gray(140), Color32::from_gray(28)); // dark mode normal text + + // Matches Mac Font book (useful for testing): + text_on_bg(ui, Color32::from_gray(39), Color32::from_gray(255)); + text_on_bg(ui, Color32::from_gray(220), Color32::from_gray(30)); + + ui.separator(); + + blending_and_feathering_test(ui); + } + + fn color_test(&mut self, ui: &mut Ui) { ui.label("If the rendering is done right, all groups of gradients will look uniform."); ui.horizontal(|ui| { @@ -134,24 +160,6 @@ impl ColorTest { ui.label("Linear interpolation (texture sampling):"); self.show_gradients(ui, WHITE, (RED, GREEN), Interpolation::Linear); - - ui.separator(); - - pixel_test(ui); - - ui.separator(); - ui.label("Testing text rendering:"); - - text_on_bg(ui, Color32::from_gray(200), Color32::from_gray(230)); // gray on gray - text_on_bg(ui, Color32::from_gray(140), Color32::from_gray(28)); // dark mode normal text - - // Matches Mac Font book (useful for testing): - text_on_bg(ui, Color32::from_gray(39), Color32::from_gray(255)); - text_on_bg(ui, Color32::from_gray(220), Color32::from_gray(30)); - - ui.separator(); - - blending_and_feathering_test(ui); } fn show_gradients( @@ -385,8 +393,17 @@ impl TextureManager { } } -fn pixel_test(ui: &mut Ui) { - ui.label("Each subsequent square should be one physical pixel larger than the previous. They should be exactly one physical pixel apart. They should be perfectly aligned to the pixel grid."); +/// A visual test that the rendering is correctly aligned on the physical pixel grid. +/// +/// Requires eyes and a magnifying glass to verify. +pub fn pixel_test(ui: &mut Ui) { + ui.heading("Pixel alignment test"); + ui.label("The first square should be exactly one physical pixel big."); + ui.label("They should be exactly one physical pixel apart."); + ui.label("Each subsequent square should be one physical pixel larger than the previous."); + ui.label("They should be perfectly aligned to the physical pixel grid."); + ui.label("If these squares are blurry, everything will be blurry, including text."); + ui.label("You might need a magnifying glass to check this test."); let color = if ui.style().visuals.dark_mode { egui::Color32::WHITE @@ -395,7 +412,7 @@ fn pixel_test(ui: &mut Ui) { }; let pixels_per_point = ui.ctx().pixels_per_point(); - let num_squares: u32 = 8; + let num_squares = (pixels_per_point * 10.0).round().max(10.0) as u32; let size_pixels = vec2( ((num_squares + 1) * (num_squares + 2) / 2) as f32, num_squares as f32, @@ -422,6 +439,10 @@ fn pixel_test(ui: &mut Ui) { } fn blending_and_feathering_test(ui: &mut Ui) { + ui.label("The left side shows how lines of different widths look."); + ui.label("The right side tests text rendering at different opacities and sizes."); + ui.label("The top and bottom images should look symmetrical in their intensities."); + let size = vec2(512.0, 512.0); let (response, painter) = ui.allocate_painter(size, Sense::hover()); let rect = response.rect;