From 4afdde179360183349cd7639243c541c695d102c Mon Sep 17 00:00:00 2001 From: Aleksander Date: Sun, 21 Sep 2025 20:25:57 +0200 Subject: [PATCH] UI tweaks, use B8G8R8A8_UNORM in wgui --- dash-frontend/assets/gui/dashboard.xml | 8 +++- dash-frontend/assets/gui/tab/apps.xml | 14 ++++++ dash-frontend/src/lib.rs | 9 +--- uidev/src/testbed/testbed_any.rs | 5 +- uidev/src/testbed/testbed_generic.rs | 5 +- uidev/src/vulkan.rs | 15 +++--- wgui/src/components/button.rs | 63 ++++++++++++++++++-------- wgui/src/gfx/mod.rs | 53 +++++----------------- wgui/src/globals.rs | 4 +- wgui/src/parser/component_button.rs | 26 ++++------- 10 files changed, 97 insertions(+), 105 deletions(-) diff --git a/dash-frontend/assets/gui/dashboard.xml b/dash-frontend/assets/gui/dashboard.xml index 46078b50..0147008e 100644 --- a/dash-frontend/assets/gui/dashboard.xml +++ b/dash-frontend/assets/gui/dashboard.xml @@ -62,14 +62,18 @@ overflow_x="scroll"> + +
+ +
+ + + + + + +
\ No newline at end of file diff --git a/dash-frontend/src/lib.rs b/dash-frontend/src/lib.rs index 94e9d905..198d5a19 100644 --- a/dash-frontend/src/lib.rs +++ b/dash-frontend/src/lib.rs @@ -4,7 +4,6 @@ use chrono::Timelike; use glam::Vec2; use wgui::{ components::button::ComponentButton, - drawing, event::{CallbackDataCommon, EventAlterables, EventListenerCollection}, globals::WguiGlobals, i18n::Translation, @@ -50,13 +49,7 @@ pub struct FrontendParams<'a> { impl Frontend { pub fn new(params: FrontendParams) -> anyhow::Result<(RcFrontend, RcLayout)> { - let globals = WguiGlobals::new( - Box::new(assets::Asset {}), - wgui::globals::Defaults { - dark_mode: true, - text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0), - }, - )?; + let globals = WguiGlobals::new(Box::new(assets::Asset {}), wgui::globals::Defaults::default())?; let (layout, state) = wgui::parser::new_layout_from_assets( params.listeners, diff --git a/uidev/src/testbed/testbed_any.rs b/uidev/src/testbed/testbed_any.rs index 6700bff1..2e4f2775 100644 --- a/uidev/src/testbed/testbed_any.rs +++ b/uidev/src/testbed/testbed_any.rs @@ -23,10 +23,7 @@ impl TestbedAny { let globals = WguiGlobals::new( Box::new(assets::Asset {}), - wgui::globals::Defaults { - dark_mode: true, - text_color: wgui::drawing::Color::new(1.0, 1.0, 1.0, 1.0), - }, + wgui::globals::Defaults::default(), )?; let (layout, state) = wgui::parser::new_layout_from_assets( diff --git a/uidev/src/testbed/testbed_generic.rs b/uidev/src/testbed/testbed_generic.rs index ecbdd3aa..f86f2123 100644 --- a/uidev/src/testbed/testbed_generic.rs +++ b/uidev/src/testbed/testbed_generic.rs @@ -61,10 +61,7 @@ impl TestbedGeneric { let globals = WguiGlobals::new( Box::new(assets::Asset {}), - wgui::globals::Defaults { - text_color: wgui::drawing::Color::new(1.0, 1.0, 1.0, 1.0), - dark_mode: true, - }, + wgui::globals::Defaults::default(), )?; let extra = ParseDocumentExtra { diff --git a/uidev/src/vulkan.rs b/uidev/src/vulkan.rs index 69bebc54..92d26de2 100644 --- a/uidev/src/vulkan.rs +++ b/uidev/src/vulkan.rs @@ -5,7 +5,6 @@ use vulkano::{ physical::{PhysicalDevice, PhysicalDeviceType}, }, instance::{Instance, InstanceCreateInfo}, - swapchain::SurfaceInfo, }; use wgui::gfx::WGfx; @@ -85,12 +84,6 @@ pub fn init_window() -> anyhow::Result<( log::info!("img_filter_cubic!"); } - let surface_format = physical_device - .surface_formats(&surface, SurfaceInfo::default()) - .unwrap()[0] // want panic - .0; - log::info!("Using surface format: {surface_format:?}"); - let (device, queues) = Device::new( physical_device, DeviceCreateInfo { @@ -113,7 +106,13 @@ pub fn init_window() -> anyhow::Result<( let (queue_gfx, queue_xfer, _) = unwrap_queues(queues.collect()); - let me = WGfx::new_from_raw(instance, device, queue_gfx, queue_xfer, surface_format); + let me = WGfx::new_from_raw( + instance, + device, + queue_gfx, + queue_xfer, + vulkano::format::Format::B8G8R8A8_UNORM, + ); Ok((me, event_loop, window, surface)) } diff --git a/wgui/src/components/button.rs b/wgui/src/components/button.rs index 57bc8005..79c9cfbe 100644 --- a/wgui/src/components/button.rs +++ b/wgui/src/components/button.rs @@ -6,6 +6,7 @@ use crate::{ components::{Component, ComponentBase, ComponentTrait, InitData}, drawing::{self, Color}, event::{CallbackDataCommon, EventListenerCollection, EventListenerKind, ListenerHandleVec}, + globals::Globals, i18n::Translation, layout::{Layout, WidgetID}, renderer_vk::text::{FontWeight, TextStyle}, @@ -18,10 +19,10 @@ use crate::{ pub struct Params { pub text: Translation, - pub color: drawing::Color, - pub border_color: drawing::Color, - pub hover_border_color: drawing::Color, - pub hover_color: drawing::Color, + pub color: Option, + pub border_color: Option, + pub hover_border_color: Option, + pub hover_color: Option, pub round: WLength, pub style: taffy::Style, pub text_style: TextStyle, @@ -31,10 +32,10 @@ impl Default for Params { fn default() -> Self { Self { text: Translation::from_raw_text(""), - color: drawing::Color::new(0.7, 0.7, 0.7, 1.0), - hover_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0), - border_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0), - hover_border_color: drawing::Color::new(0.25, 0.25, 0.25, 1.0), + color: None, + hover_color: None, + border_color: None, + hover_border_color: None, round: WLength::Units(4.0), style: Default::default(), text_style: TextStyle::default(), @@ -93,7 +94,7 @@ fn get_color2(color: &drawing::Color) -> drawing::Color { } fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool) { - let mult = pos * if pressed { 1.25 } else { 1.0 }; + let mult = pos * if pressed { 1.5 } else { 1.0 }; let bgcolor = data.initial_color.lerp(&data.initial_hover_color, mult); rect.params.color = bgcolor; @@ -220,6 +221,7 @@ fn register_event_mouse_release( } pub fn construct( + globals: &mut Globals, layout: &mut Layout, listeners: &mut EventListenerCollection, parent: WidgetID, @@ -232,28 +234,51 @@ pub fn construct( style.justify_content = Some(JustifyContent::Center); style.padding = length(1.0); - let globals = layout.state.globals.clone(); + // update colors to default ones if they are not specified + let color = if let Some(color) = params.color { + color + } else { + globals.defaults.button_color + }; + + let border_color = if let Some(border_color) = params.border_color { + border_color + } else { + Color::new(color.r, color.g, color.b, color.a + 0.4) + }; + + let hover_color = if let Some(hover_color) = params.hover_color { + hover_color + } else { + Color::new(color.r + 0.25, color.g + 0.25, color.g + 0.25, color.a + 0.25) + }; + + let hover_border_color = if let Some(hover_border_color) = params.hover_border_color { + hover_border_color + } else { + Color::new(color.r + 0.5, color.g + 0.5, color.g + 0.5, color.a + 0.5) + }; let (id_root, _) = layout.add_child( parent, WidgetRectangle::create(WidgetRectangleParams { - color: params.color, - color2: get_color2(¶ms.color), + color, + color2: get_color2(&color), gradient: drawing::GradientMode::Vertical, round: params.round, - border_color: params.border_color, + border_color, border: 2.0, }), style, )?; let id_rect = id_root; - let light_text = (params.color.r + params.color.g + params.color.b) < 1.5; + let light_text = (color.r + color.g + color.b) < 1.5; let (id_label, _node_label) = layout.add_child( id_rect, WidgetLabel::create( - &mut globals.get(), + globals, WidgetLabelParams { content: params.text, style: TextStyle { @@ -273,10 +298,10 @@ pub fn construct( let data = Rc::new(Data { id_label, id_rect, - initial_color: params.color, - initial_border_color: params.border_color, - initial_hover_color: params.hover_color, - initial_hover_border_color: params.hover_border_color, + initial_color: color, + initial_border_color: border_color, + initial_hover_color: hover_color, + initial_hover_border_color: hover_border_color, }); let state = Rc::new(RefCell::new(State { diff --git a/wgui/src/gfx/mod.rs b/wgui/src/gfx/mod.rs index 1ddd4ed8..1545aaac 100644 --- a/wgui/src/gfx/mod.rs +++ b/wgui/src/gfx/mod.rs @@ -13,19 +13,14 @@ use vulkano::{ AutoCommandBufferBuilder, CommandBufferUsage, allocator::{StandardCommandBufferAllocator, StandardCommandBufferAllocatorCreateInfo}, }, - descriptor_set::allocator::{ - StandardDescriptorSetAllocator, StandardDescriptorSetAllocatorCreateInfo, - }, + descriptor_set::allocator::{StandardDescriptorSetAllocator, StandardDescriptorSetAllocatorCreateInfo}, device::{Device, Queue}, format::Format, image::{Image, ImageCreateInfo, ImageType, ImageUsage, sampler::Filter}, instance::Instance, memory::{ MemoryPropertyFlags, - allocator::{ - AllocationCreateInfo, GenericMemoryAllocatorCreateInfo, MemoryTypeFilter, - StandardMemoryAllocator, - }, + allocator::{AllocationCreateInfo, GenericMemoryAllocatorCreateInfo, MemoryTypeFilter, StandardMemoryAllocator}, }, pipeline::graphics::{ color_blend::{AttachmentBlend, BlendFactor, BlendOp}, @@ -128,19 +123,14 @@ impl WGfx { ..Default::default() }, AllocationCreateInfo { - memory_type_filter: MemoryTypeFilter::PREFER_DEVICE - | MemoryTypeFilter::HOST_SEQUENTIAL_WRITE, + memory_type_filter: MemoryTypeFilter::PREFER_DEVICE | MemoryTypeFilter::HOST_SEQUENTIAL_WRITE, ..Default::default() }, capacity, )?) } - pub fn new_buffer( - &self, - usage: BufferUsage, - contents: Iter<'_, T>, - ) -> anyhow::Result> + pub fn new_buffer(&self, usage: BufferUsage, contents: Iter<'_, T>) -> anyhow::Result> where T: BufferContents + Clone, { @@ -151,21 +141,14 @@ impl WGfx { ..Default::default() }, AllocationCreateInfo { - memory_type_filter: MemoryTypeFilter::PREFER_DEVICE - | MemoryTypeFilter::HOST_SEQUENTIAL_WRITE, + memory_type_filter: MemoryTypeFilter::PREFER_DEVICE | MemoryTypeFilter::HOST_SEQUENTIAL_WRITE, ..Default::default() }, contents.cloned(), )?) } - pub fn new_image( - &self, - width: u32, - height: u32, - format: Format, - usage: ImageUsage, - ) -> anyhow::Result> { + pub fn new_image(&self, width: u32, height: u32, format: Format, usage: ImageUsage) -> anyhow::Result> { Ok(Image::new( self.memory_allocator.clone(), ImageCreateInfo { @@ -202,10 +185,7 @@ impl WGfx { )?)) } - pub fn create_gfx_command_buffer( - self: &Arc, - usage: CommandBufferUsage, - ) -> anyhow::Result { + pub fn create_gfx_command_buffer(self: &Arc, usage: CommandBufferUsage) -> anyhow::Result { self.create_gfx_command_buffer_with_queue(self.queue_gfx.clone(), usage) } @@ -214,11 +194,8 @@ impl WGfx { queue: Arc, usage: CommandBufferUsage, ) -> anyhow::Result { - let command_buffer = AutoCommandBufferBuilder::primary( - self.command_buffer_allocator.clone(), - queue.queue_family_index(), - usage, - )?; + let command_buffer = + AutoCommandBufferBuilder::primary(self.command_buffer_allocator.clone(), queue.queue_family_index(), usage)?; Ok(GfxCommandBuffer { graphics: self.clone(), queue, @@ -227,10 +204,7 @@ impl WGfx { }) } - pub fn create_xfer_command_buffer( - self: &Arc, - usage: CommandBufferUsage, - ) -> anyhow::Result { + pub fn create_xfer_command_buffer(self: &Arc, usage: CommandBufferUsage) -> anyhow::Result { self.create_xfer_command_buffer_with_queue(self.queue_gfx.clone(), usage) } @@ -239,11 +213,8 @@ impl WGfx { queue: Arc, usage: CommandBufferUsage, ) -> anyhow::Result { - let command_buffer = AutoCommandBufferBuilder::primary( - self.command_buffer_allocator.clone(), - queue.queue_family_index(), - usage, - )?; + let command_buffer = + AutoCommandBufferBuilder::primary(self.command_buffer_allocator.clone(), queue.queue_family_index(), usage)?; Ok(XferCommandBuffer { graphics: self.clone(), queue, diff --git a/wgui/src/globals.rs b/wgui/src/globals.rs index 6ca76120..035fff73 100644 --- a/wgui/src/globals.rs +++ b/wgui/src/globals.rs @@ -8,13 +8,15 @@ use crate::{assets::AssetProvider, drawing, i18n::I18n}; pub struct Defaults { pub dark_mode: bool, pub text_color: drawing::Color, + pub button_color: drawing::Color, } impl Default for Defaults { fn default() -> Self { Self { dark_mode: true, - text_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0), + text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0), + button_color: drawing::Color::new(1.0, 1.0, 1.0, 0.05), } } } diff --git a/wgui/src/parser/component_button.rs b/wgui/src/parser/component_button.rs index 872cbb4e..9921ff49 100644 --- a/wgui/src/parser/component_button.rs +++ b/wgui/src/parser/component_button.rs @@ -5,7 +5,7 @@ use crate::{ layout::WidgetID, parser::{ ParserContext, ParserFile, iter_attribs, parse_children, process_component, - style::{parse_color, parse_color_opt, parse_round, parse_style, parse_text_style}, + style::{parse_color_opt, parse_round, parse_style, parse_text_style}, }, widget::util::WLength, }; @@ -16,7 +16,7 @@ pub fn parse_component_button<'a, U1, U2>( node: roxmltree::Node<'a, 'a>, parent_id: WidgetID, ) -> anyhow::Result { - let mut color = Color::new(1.0, 1.0, 1.0, 1.0); + let mut color: Option = None; let mut border_color: Option = None; let mut hover_color: Option = None; let mut hover_border_color: Option = None; @@ -39,7 +39,7 @@ pub fn parse_component_button<'a, U1, U2>( parse_round(&value, &mut round); } "color" => { - parse_color(&value, &mut color); + parse_color_opt(&value, &mut color); } "border_color" => { parse_color_opt(&value, &mut border_color); @@ -54,28 +54,18 @@ pub fn parse_component_button<'a, U1, U2>( } } - // slight border outlines by default - if border_color.is_none() { - border_color = Some(Color::lerp(&color, &Color::new(0.0, 0.0, 0.0, color.a), 0.3)); - } - - if hover_color.is_none() { - hover_color = Some(color.add_rgb(0.5)); - } - - if hover_border_color.is_none() { - hover_border_color = Some(border_color.unwrap().add_rgb(0.75)); - } + let globals = ctx.layout.state.globals.clone(); let (new_id, component) = button::construct( + &mut globals.get(), ctx.layout, ctx.listeners, parent_id, button::Params { color, - border_color: border_color.unwrap(), - hover_border_color: hover_border_color.unwrap(), - hover_color: hover_color.unwrap(), + border_color, + hover_border_color, + hover_color, text: translation, style, text_style,