From 10e9d768f12ef8c5624f90a7c1731737e1037cf5 Mon Sep 17 00:00:00 2001 From: Federico Lolli <federico.lolli@skywarder.eu> Date: Sat, 22 Mar 2025 17:37:48 +0100 Subject: [PATCH] CHECKPOINT UI design of valve buttons --- src/ui/app.rs | 2 +- src/ui/panes/valve_control.rs | 64 +++++++++++++++++++++++------------ 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/ui/app.rs b/src/ui/app.rs index a5a1ba1..806b0e4 100644 --- a/src/ui/app.rs +++ b/src/ui/app.rs @@ -429,7 +429,7 @@ impl Behavior<Pane> for AppBehavior { } fn min_size(&self) -> f32 { - 200.0 + 185.0 } } diff --git a/src/ui/panes/valve_control.rs b/src/ui/panes/valve_control.rs index 54a5502..29b6d4f 100644 --- a/src/ui/panes/valve_control.rs +++ b/src/ui/panes/valve_control.rs @@ -2,11 +2,16 @@ mod commands; mod icons; mod valves; -use std::time::{Duration, Instant}; +use std::{ + fmt::format, + time::{Duration, Instant}, +}; use egui::{ - Color32, DragValue, FontId, Frame, Grid, Label, Layout, Rect, Response, RichText, Sense, - Stroke, Ui, UiBuilder, Vec2, Widget, vec2, + Color32, DragValue, FontId, Frame, Grid, Label, Layout, Margin, Rect, Response, RichText, + Sense, Stroke, TextFormat, Ui, UiBuilder, Vec2, Widget, WidgetText, + text::{Fonts, LayoutJob}, + vec2, }; use egui_extras::{Size, StripBuilder}; use itertools::Itertools; @@ -142,7 +147,8 @@ impl PaneBehavior for ValveControlPane { // ┌────────────────────────┐ // │ UI METHODS │ // └────────────────────────┘ -const BTN_WIDTH: f32 = 200.0; +const BTN_WIDTH: f32 = 185.0; +const BTN_HEIGHT: f32 = 70.0; impl ValveControlPane { fn pane_ui(&mut self) -> impl FnOnce(&mut Ui) { |ui| { @@ -214,16 +220,16 @@ impl ValveControlPane { } valves::ParameterValue::Missing => "N/A".to_owned(), valves::ParameterValue::Invalid(err_id) => { - format!("ERROR: {}", err_id) + format!("ERROR({})", err_id) } }; let aperture_str = match aperture { valves::ParameterValue::Valid(value) => { - format!("{}", value) + format!("{:.2}", value) } valves::ParameterValue::Missing => "N/A".to_owned(), valves::ParameterValue::Invalid(err_id) => { - format!("ERROR: {}", err_id) + format!("ERROR({})", err_id) } }; let text_color = ui.visuals().text_color(); @@ -232,7 +238,7 @@ impl ValveControlPane { Label::new( RichText::new(valve_str.to_ascii_uppercase()) .color(text_color) - .size(16.0), + .size(15.0), ) .selectable(false) .ui(ui); @@ -247,7 +253,7 @@ impl ValveControlPane { let visuals = ui.style().interact(response); let number = RichText::new(number.to_string()) .color(text_color) - .font(FontId::monospace(25.)); + .font(FontId::monospace(20.)); let fill_color = if response.hovered() { visuals.bg_fill.gamma_multiply(0.8).to_opaque() @@ -258,7 +264,7 @@ impl ValveControlPane { Frame::canvas(ui.style()) .fill(fill_color) .stroke(Stroke::NONE) - .inner_margin(ui.spacing().menu_margin) + .inner_margin(Margin::same(5)) .corner_radius(visuals.corner_radius) .show(ui, |ui| { Label::new(number).selectable(false).ui(ui); @@ -267,23 +273,36 @@ impl ValveControlPane { } let labels_ui = |ui: &mut Ui| { - let icon_size = Vec2::splat(17.); + let icon_size = Vec2::splat(16.); + let text_format = TextFormat { + font_id: FontId::proportional(12.), + extra_letter_spacing: 0., + line_height: Some(12.), + color: text_color, + ..Default::default() + }; ui.vertical(|ui| { - ui.horizontal(|ui| { + ui.horizontal_top(|ui| { let rect = Rect::from_min_size(ui.cursor().min, icon_size); Icon::Timing.paint(ui, rect); ui.allocate_rect(rect, Sense::hover()); - Label::new(format!("Timing: {}", timing_str)) - .selectable(false) - .ui(ui); + let layout_job = LayoutJob::single_section( + format!("Timing: {}", timing_str), + text_format.clone(), + ); + let galley = ui.fonts(|fonts| fonts.layout_job(layout_job)); + Label::new(galley).selectable(false).ui(ui); }); - ui.horizontal(|ui| { + ui.horizontal_top(|ui| { let rect = Rect::from_min_size(ui.cursor().min, icon_size); Icon::Aperture.paint(ui, rect); ui.allocate_rect(rect, Sense::hover()); - Label::new(format!("Aperture: {}", aperture_str)) - .selectable(false) - .ui(ui); + let layout_job = LayoutJob::single_section( + format!("Aperture: {}", aperture_str), + text_format, + ); + let galley = ui.fonts(|fonts| fonts.layout_job(layout_job)); + Label::new(galley).selectable(false).ui(ui); }); }); }; @@ -297,7 +316,8 @@ impl ValveControlPane { ) -> impl FnOnce(&mut Ui) { |ui: &mut Ui| { StripBuilder::new(ui) - .sizes(Size::exact(20.), 2) + .size(Size::exact(10.)) + .size(Size::exact(15.)) .vertical(|mut strip| { strip.cell(valve_title_ui); strip.cell(|ui| { @@ -315,8 +335,8 @@ impl ValveControlPane { .id_salt("valve_".to_owned() + &valve_str) .sense(Sense::click()), |ui| { - ui.set_width(200.); - ui.set_height(80.); + ui.set_width(BTN_WIDTH); + ui.set_height(BTN_HEIGHT); let response = ui.response(); let visuals = ui.style().interact(&response); -- GitLab