wgui: customizable defaults

This commit is contained in:
Aleksander
2025-09-16 18:32:56 +02:00
parent 54767d75da
commit 129785daa7
20 changed files with 82 additions and 215 deletions

View File

@@ -101,7 +101,7 @@
<!-- Right bottom side -->
<div margin_right="16">
<label text="12:34" color="#FFFFFF" size="16" />
<label text="12:34" size="16" />
</div>
</rectangle>
</div>

View File

@@ -16,7 +16,7 @@
justify_content="center"
flex_direction="column">
<sprite src="${icon}" width="32" height="32" />
<label weight="bold" color="#FFFFFF" size="18" text="${text}" />
<label weight="bold" size="18" text="${text}" />
</div>
</Button>
</template>

View File

@@ -1,7 +1,7 @@
<layout>
<elements>
<label text="Apps" size="64" weight="bold" color="#FFFFFF" />
<label text="Apps" size="64" weight="bold" />
<label text="bottom text" size="16" weight="bold" color="#FFFFFF88" />
</elements>
</layout>

View File

@@ -1,5 +1,5 @@
<layout>
<elements>
<label text="Games" size="32" weight="bold" color="#FFFFFF" />
<label text="Games" size="32" weight="bold" />
</elements>
</layout>

View File

@@ -3,7 +3,7 @@
<elements>
<sprite src="dashboard/wayvr_dashboard.svg" min_width="96" min_height="96" />
<label text="Hello, user!" size="32" weight="bold" color="#FFFFFF" />
<label text="Hello, user!" size="32" weight="bold" />
<label text="Connected to wlx-overlay-s" size="16" weight="bold" color="#bbffbb" />
<!-- main button list -->

View File

@@ -1,5 +1,5 @@
<layout>
<elements>
<label text="Monado" size="32" weight="bold" color="#FFFFFF" />
<label text="Monado" size="32" weight="bold" />
</elements>
</layout>

View File

@@ -1,5 +1,5 @@
<layout>
<elements>
<label text="Processes" size="32" weight="bold" color="#FFFFFF" />
<label text="Processes" size="32" weight="bold" />
</elements>
</layout>

View File

@@ -1,5 +1,5 @@
<layout>
<elements>
<label text="Settings" size="32" weight="bold" color="#FFFFFF" />
<label text="Settings" size="32" weight="bold" />
</elements>
</layout>

View File

@@ -3,6 +3,7 @@ use std::{cell::RefCell, collections::VecDeque, rc::Rc};
use glam::Vec2;
use wgui::{
components::button::ComponentButton,
drawing,
event::EventListenerCollection,
globals::WguiGlobals,
layout::{LayoutParams, RcLayout},
@@ -41,7 +42,12 @@ pub struct FrontendParams<'a> {
impl Frontend {
pub fn new(params: FrontendParams) -> anyhow::Result<(RcFrontend, RcLayout)> {
let globals = WguiGlobals::new(Box::new(assets::Asset {}))?;
let globals = WguiGlobals::new(
Box::new(assets::Asset {}),
wgui::globals::Defaults {
text_color: drawing::Color::new(1.0, 1.0, 1.0, 1.0),
},
)?;
let (layout, state) = wgui::parser::new_layout_from_assets(
params.listeners,

View File

@@ -1,123 +1,5 @@
<layout>
<include src="theme.xml" />
<theme>
<var key="side_sprite_size" value="26" />
</theme>
<elements>
<!-- background for testing -->
<rectangle position="absolute" color="#333333" width="100%" height="100%" />
<!-- left/right separator (menu and rest) -->
<div flex_direction="row" width="100%" height="100%" gap="8">
<!-- LEFT MENU -->
<div id="menu" width="48" min_width="48" max_width="48" height="100%" align_items="center" justify_content="center">
<rectangle
width="100%"
round="100%"
color="~menu_dark"
flex_direction="column"
justify_content="center"
align_items="center"
gap="24"
padding_top="16"
padding_bottom="16"
>
<sprite src="dashboard/wayvr_dashboard_mono.svg" width="~side_sprite_size" height="~side_sprite_size" />
<sprite src="dashboard/apps.svg" width="~side_sprite_size" height="~side_sprite_size" />
<sprite src="dashboard/games.svg" width="~side_sprite_size" height="~side_sprite_size" />
<sprite src="dashboard/monado.svg" width="~side_sprite_size" height="~side_sprite_size" />
<sprite src="dashboard/window.svg" width="~side_sprite_size" height="~side_sprite_size" />
<rectangle height="2" color="#FFFFFF33" width="~side_sprite_size" />
<sprite src="dashboard/settings.svg" width="~side_sprite_size" height="~side_sprite_size" />
</rectangle>
</div>
<!-- REST -->
<!-- content/bottom panel separator -->
<div flex_direction="column" gap="8" flex_grow="1">
<!-- CONTENT -->
<rectangle
color2="#0d131acc" color="#244179aa" gradient="vertical" round="8" overflow_y="hidden"
justify_content="center"
flex_grow="1"
>
<div
id="content"
overflow_x="scroll"
overflow_y="scroll"
align_items="center"
justify_content="center"
flex_direction="column"
gap="24"
>
<sprite src="dashboard/wayvr_dashboard.svg" min_width="96" min_height="96" />
<label text="Hello, user!" size="32" weight="bold" color="#FFFFFF" />
<label text="Connected to wlx-overlay-s" size="16" weight="bold" color="#bbffbb" />
<!-- main button list -->
<div flex_direction="row" gap="8" margin_top="32">
<rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
<sprite src="dashboard/apps.svg" width="32" height="32" />
<label weight="bold" color="#FFFFFF" size="18" text="Apps" />
</rectangle>
<rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
<sprite src="dashboard/games.svg" width="32" height="32" />
<label weight="bold" color="#FFFFFF" size="18" text="Games" />
</rectangle>
<rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
<sprite src="dashboard/monado.svg" width="32" height="32" />
<label weight="bold" color="#FFFFFF" size="18" text="Monado" />
</rectangle>
<rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
<sprite src="dashboard/window.svg" width="32" height="32" />
<label weight="bold" color="#FFFFFF" size="18" text="Processes" />
</rectangle>
<rectangle width="120" height="82" round="8" border="2" border_color="#FFFFFF77" color="#00000033" align_items="center" justify_content="center" flex_direction="column" gap="8">
<sprite src="dashboard/settings.svg" width="32" height="32" />
<label weight="bold" color="#FFFFFF" size="18" text="Settings" />
</rectangle>
</div>
</div>
</rectangle>
<!-- BOTTOM PANEL -->
<rectangle
width="100%"
height="48"
box_sizing="border_box"
round="8"
flex_direction="row"
align_items="center"
justify_content="space_between"
color="~bottom_panel"
>
<!-- left gradient -->
<div position="absolute" width="100%" height="100%" justify_content="start">
<rectangle position="absolute" width="40%" height="100%" color="#0a0a0a" color2="#0a0a0a00" round="8" gradient="horizontal" />
</div>
<!-- right gradient -->
<div position="absolute" width="100%" height="100%" justify_content="end">
<rectangle position="absolute" width="40%" height="100%" color2="#0a0a0a" color="#0a0a0a00" round="8" gradient="horizontal" />
</div>
<!-- top shine -->
<div position="absolute" width="100%" height="100%" justify_content="center">
<rectangle position="absolute" width="99%" height="2" color="#FFFFFF66" round="4" />
</div>
<!-- Left bottom side -->
<div margin_left="8">
<sprite src="dashboard/volume.svg" width="24" height="24" margin="8" />
<sprite src="dashboard/recenter.svg" width="24" height="24" margin="8" />
</div>
<!-- Right bottom side -->
<div margin_right="16">
<label text="12:34" color="#FFFFFF" size="16" />
</div>
</rectangle>
</div>
</div>
<!-- TODO -->
</elements>
</layout>

View File

@@ -21,7 +21,7 @@ impl TestbedAny {
pub fn new(name: &str, listeners: &mut EventListenerCollection<(), ()>) -> anyhow::Result<Self> {
let path = format!("gui/{name}.xml");
let globals = WguiGlobals::new(Box::new(assets::Asset {}))?;
let globals = WguiGlobals::new(Box::new(assets::Asset {}), Default::default())?;
let (layout, state) = wgui::parser::new_layout_from_assets(
listeners,

View File

@@ -60,7 +60,7 @@ impl TestbedGeneric {
pub fn new(listeners: &mut EventListenerCollection<(), ()>) -> anyhow::Result<Self> {
const XML_PATH: &str = "gui/various_widgets.xml";
let globals = WguiGlobals::new(Box::new(assets::Asset {}))?;
let globals = WguiGlobals::new(Box::new(assets::Asset {}), Default::default())?;
let extra = ParseDocumentExtra {
on_custom_attrib: Some(Box::new(move |par| {

View File

@@ -82,11 +82,9 @@ impl ComponentButton {
pub fn set_text(&self, state: &LayoutState, alterables: &mut EventAlterables, text: Translation) {
let globals = state.globals.clone();
state
.widgets
.call(self.data.id_label, |label: &mut WidgetLabel| {
label.set_text(&mut globals.i18n(), text);
});
state.widgets.call(self.data.id_label, |label: &mut WidgetLabel| {
label.set_text(&mut globals.i18n(), text);
});
alterables.mark_redraw();
alterables.mark_dirty(self.data.node_label);
@@ -107,9 +105,7 @@ fn anim_hover(rect: &mut WidgetRectangle, data: &Data, pos: f32, pressed: bool)
rect.params.color = bgcolor;
rect.params.color2 = get_color2(&bgcolor);
rect.params.border_color = data
.initial_border_color
.lerp(&data.initial_hover_border_color, mult);
rect.params.border_color = data.initial_border_color.lerp(&data.initial_hover_border_color, mult);
rect.params.border = 2.0;
}
@@ -151,11 +147,9 @@ fn register_event_mouse_enter<U1, U2>(
EventListenerKind::MouseEnter,
Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
common.alterables.animate(anim_hover_in(
data.clone(),
state.clone(),
event_data.widget_id,
));
common
.alterables
.animate(anim_hover_in(data.clone(), state.clone(), event_data.widget_id));
state.borrow_mut().hovered = true;
Ok(())
}),
@@ -174,11 +168,9 @@ fn register_event_mouse_leave<U1, U2>(
EventListenerKind::MouseLeave,
Box::new(move |common, event_data, _, _| {
common.alterables.trigger_haptics();
common.alterables.animate(anim_hover_out(
data.clone(),
state.clone(),
event_data.widget_id,
));
common
.alterables
.animate(anim_hover_out(data.clone(), state.clone(), event_data.widget_id));
state.borrow_mut().hovered = false;
Ok(())
}),
@@ -283,7 +275,7 @@ pub fn construct<U1, U2>(
let (id_label, node_label) = layout.add_child(
id_rect,
WidgetLabel::create(
&mut globals.i18n(),
&mut globals.get(),
WidgetLabelParams {
content: params.text,
style: TextStyle {

View File

@@ -80,11 +80,7 @@ const COLOR_UNCHECKED: Color = Color::new(0.1, 0.5, 1.0, 0.0);
fn set_box_checked(widgets: &layout::WidgetMap, data: &Data, checked: bool) {
widgets.call(data.id_inner_box, |rect: &mut WidgetRectangle| {
rect.params.color = if checked {
COLOR_CHECKED
} else {
COLOR_UNCHECKED
}
rect.params.color = if checked { COLOR_CHECKED } else { COLOR_UNCHECKED }
});
}
@@ -92,11 +88,9 @@ impl ComponentCheckbox {
pub fn set_text(&self, state: &LayoutState, alterables: &mut EventAlterables, text: Translation) {
let globals = state.globals.clone();
state
.widgets
.call(self.data.id_label, |label: &mut WidgetLabel| {
label.set_text(&mut globals.i18n(), text);
});
state.widgets.call(self.data.id_label, |label: &mut WidgetLabel| {
label.set_text(&mut globals.i18n(), text);
});
alterables.mark_redraw();
alterables.mark_dirty(self.data.node_label);
@@ -321,11 +315,7 @@ pub fn construct<U1, U2>(
id_outer_box,
WidgetRectangle::create(WidgetRectangleParams {
round: WLength::Units(5.0),
color: if params.checked {
COLOR_CHECKED
} else {
COLOR_UNCHECKED
},
color: if params.checked { COLOR_CHECKED } else { COLOR_UNCHECKED },
..Default::default()
}),
taffy::Style {
@@ -340,7 +330,7 @@ pub fn construct<U1, U2>(
let (id_label, node_label) = layout.add_child(
id_container,
WidgetLabel::create(
&mut globals.i18n(),
&mut globals.get(),
WidgetLabelParams {
content: params.text,
style: TextStyle {

View File

@@ -7,10 +7,7 @@ use crate::{
animation::{Animation, AnimationEasing},
components::{Component, ComponentBase, ComponentTrait, InitData},
drawing::{self},
event::{
self, CallbackDataCommon, EventAlterables, EventListenerCollection, EventListenerKind,
ListenerHandleVec,
},
event::{self, CallbackDataCommon, EventAlterables, EventListenerCollection, EventListenerKind, ListenerHandleVec},
i18n::{I18n, Translation},
layout::{Layout, LayoutState, WidgetID},
renderer_vk::{
@@ -133,19 +130,10 @@ impl State {
fn update_text(i18n: &mut I18n, text: &mut WidgetLabel, value: f32) {
// round displayed value, should be sufficient for now
text.set_text(
i18n,
Translation::from_raw_text(&format!("{}", value.round())),
);
text.set_text(i18n, Translation::from_raw_text(&format!("{}", value.round())));
}
fn set_value(
&mut self,
state: &LayoutState,
data: &Data,
alterables: &mut EventAlterables,
value: f32,
) {
fn set_value(&mut self, state: &LayoutState, data: &Data, alterables: &mut EventAlterables, value: f32) {
//common.call_on_widget(data.slider_handle_id, |_div: &mut Div| {});
self.values.value = value;
let mut style = state.tree.style(data.slider_handle_node).unwrap().clone();
@@ -153,11 +141,9 @@ impl State {
alterables.mark_dirty(data.slider_handle_node);
alterables.mark_redraw();
alterables.set_style(data.slider_handle_node, style);
state
.widgets
.call(data.slider_text_id, |label: &mut WidgetLabel| {
Self::update_text(&mut state.globals.i18n(), label, value);
});
state.widgets.call(data.slider_text_id, |label: &mut WidgetLabel| {
Self::update_text(&mut state.globals.i18n(), label, value);
});
}
}
@@ -178,8 +164,7 @@ fn get_anim_transform(pos: f32, widget_size: Vec2) -> Mat4 {
fn anim_rect(rect: &mut WidgetRectangle, pos: f32) {
rect.params.color = drawing::Color::lerp(&HANDLE_COLOR, &HANDLE_COLOR_HOVERED, pos);
rect.params.border_color =
drawing::Color::lerp(&HANDLE_BORDER_COLOR, &HANDLE_BORDER_COLOR_HOVERED, pos);
rect.params.border_color = drawing::Color::lerp(&HANDLE_BORDER_COLOR, &HANDLE_BORDER_COLOR_HOVERED, pos);
}
fn on_enter_anim(common: &mut event::CallbackDataCommon, handle_id: WidgetID) {
@@ -364,8 +349,7 @@ pub fn construct<U1, U2>(
};
// invisible outer handle body
let (slider_handle_id, slider_handle_node) =
layout.add_child(body_id, WidgetDiv::create(), slider_handle_style)?;
let (slider_handle_id, slider_handle_node) = layout.add_child(body_id, WidgetDiv::create(), slider_handle_style)?;
let (slider_handle_rect_id, _) = layout.add_child(
slider_handle_id,
@@ -393,12 +377,11 @@ pub fn construct<U1, U2>(
};
let globals = layout.state.globals.clone();
let mut i18n = globals.i18n();
let (slider_text_id, _) = layout.add_child(
slider_handle_id,
WidgetLabel::create(
&mut i18n,
&mut globals.get(),
WidgetLabelParams {
content: Translation::default(),
style: TextStyle {

View File

@@ -3,21 +3,34 @@ use std::{
rc::Rc,
};
use crate::{assets::AssetProvider, i18n::I18n};
use crate::{assets::AssetProvider, drawing, i18n::I18n};
pub struct Defaults {
pub text_color: drawing::Color,
}
impl Default for Defaults {
fn default() -> Self {
Self {
text_color: drawing::Color::new(0.0, 0.0, 0.0, 1.0),
}
}
}
pub struct Globals {
pub assets: Box<dyn AssetProvider>,
pub i18n: I18n,
pub defaults: Defaults,
}
#[derive(Clone)]
pub struct WguiGlobals(Rc<RefCell<Globals>>);
impl WguiGlobals {
pub fn new(mut assets: Box<dyn AssetProvider>) -> anyhow::Result<Self> {
pub fn new(mut assets: Box<dyn AssetProvider>, defaults: Defaults) -> anyhow::Result<Self> {
let i18n = I18n::new(&mut assets)?;
Ok(Self(Rc::new(RefCell::new(Globals { assets, i18n }))))
Ok(Self(Rc::new(RefCell::new(Globals { assets, i18n, defaults }))))
}
pub fn get(&self) -> RefMut<Globals> {

View File

@@ -31,12 +31,10 @@ pub fn parse_widget_label<'a, U1, U2>(
}
let globals = ctx.layout.state.globals.clone();
let mut i18n = globals.i18n();
let (new_id, _) =
ctx
.layout
.add_child(parent_id, WidgetLabel::create(&mut i18n, params), style)?;
let (new_id, _) = ctx
.layout
.add_child(parent_id, WidgetLabel::create(&mut globals.get(), params), style)?;
parse_widget_universal(file, ctx, node, new_id);
parse_children(file, ctx, node, new_id)?;

View File

@@ -5,6 +5,7 @@ use taffy::AvailableSpace;
use crate::{
drawing::{self, Boundary},
globals::Globals,
i18n::{I18n, Translation},
renderer_vk::text::{FONT_SYSTEM, TextStyle},
};
@@ -24,7 +25,11 @@ pub struct WidgetLabel {
}
impl WidgetLabel {
pub fn create(i18n: &mut I18n, params: WidgetLabelParams) -> WidgetState {
pub fn create(globals: &mut Globals, mut params: WidgetLabelParams) -> WidgetState {
if params.style.color.is_none() {
params.style.color = Some(globals.defaults.text_color);
}
let metrics = Metrics::from(&params.style);
let attrs = Attrs::from(&params.style);
let wrap = Wrap::from(&params.style);
@@ -36,7 +41,7 @@ impl WidgetLabel {
buffer.set_wrap(wrap);
buffer.set_rich_text(
[(params.content.generate(i18n).as_ref(), attrs)],
[(params.content.generate(&mut globals.i18n).as_ref(), attrs)],
&Attrs::new(),
Shaping::Advanced,
params.style.align.map(Into::into),
@@ -78,11 +83,7 @@ impl WidgetObj for WidgetLabel {
self.last_boundary = boundary;
let mut font_system = FONT_SYSTEM.lock();
let mut buffer = self.buffer.borrow_mut();
buffer.set_size(
&mut font_system,
Some(boundary.size.x),
Some(boundary.size.y),
);
buffer.set_size(&mut font_system, Some(boundary.size.x), Some(boundary.size.y));
}
state.primitives.push(drawing::RenderPrimitive {
@@ -111,11 +112,9 @@ impl WidgetObj for WidgetLabel {
buffer.set_size(&mut font_system, width_constraint, None);
// Determine measured size of text
let (width, total_lines) = buffer
.layout_runs()
.fold((0.0, 0usize), |(width, total_lines), run| {
(run.line_w.max(width), total_lines + 1)
});
let (width, total_lines) = buffer.layout_runs().fold((0.0, 0usize), |(width, total_lines), run| {
(run.line_w.max(width), total_lines + 1)
});
let height = total_lines as f32 * buffer.metrics().line_height;
taffy::Size { width, height }
}

View File

@@ -170,7 +170,6 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
let mut panel = GuiPanel::new_blank(app, ()).ok()?;
let globals = panel.layout.state.globals.clone();
let mut i18n = globals.i18n();
let (rect, _) = panel
.layout
@@ -196,7 +195,7 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
let _ = panel.layout.add_child(
rect,
WidgetLabel::create(
&mut i18n,
&mut globals.get(),
WidgetLabelParams {
content: Translation::from_raw_text(&title),
style: TextStyle {
@@ -218,7 +217,7 @@ fn new_toast(toast: Toast, app: &mut AppState) -> Option<(OverlayState, Box<dyn
let _ = panel.layout.add_child(
rect,
WidgetLabel::create(
&mut i18n,
&mut globals.get(),
WidgetLabelParams {
content: Translation::from_raw_text(&toast.body),
style: TextStyle {

View File

@@ -90,7 +90,12 @@ impl AppState {
screens: smallvec![],
anchor: Affine3A::IDENTITY,
toast_sound: toast_sound_wav,
wgui_globals: WguiGlobals::new(Box::new(gui::asset::GuiAsset {}))?,
wgui_globals: WguiGlobals::new(
Box::new(gui::asset::GuiAsset {}),
wgui::globals::Defaults {
text_color: wgui::drawing::Color::new(1.0, 1.0, 1.0, 1.0),
},
)?,
#[cfg(feature = "osc")]
osc_sender,