Jayden/wayvr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

themes cleanup, ui improvements

Browse Source
This commit is contained in:
Aleksander
2025-11-12 17:49:05 +01:00
parent 6136a5aa43
commit 6e11c2cf87
15 changed files with 105 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dash-frontend/assets/gui/dashboard.xml
View File

@@ -40,7 +40,7 @@
<rectangle <rectangle
width="100%" width="100%"
round="100%" round="100%"
color="~menu_dark" color="~color_menu_dark"
flex_direction="column" flex_direction="column"
justify_content="center" justify_content="center"
align_items="center" align_items="center"
@@ -107,7 +107,7 @@
flex_direction="row" flex_direction="row"
align_items="center" align_items="center"
justify_content="space_between" justify_content="space_between"
color="~bottom_panel" color="~color_bottom_panel"
> >
<!-- left gradient --> <!-- left gradient -->
<div position="absolute" width="100%" height="100%" justify_content="start"> <div position="absolute" width="100%" height="100%" justify_content="start">

2
dash-frontend/assets/gui/t_menu_button.xml
View File

@@ -8,7 +8,7 @@
height="82" height="82"
color="#00000033" color="#00000033"
border_color="#FFFFFF77" border_color="#FFFFFF77"
hover_color="~accent" hover_color="~color_accent"
hover_border_color="#FFFFFF" hover_border_color="#FFFFFF"
round="8"> round="8">
<div gap="8" <div gap="8"

8
dash-frontend/assets/gui/theme.xml
View File

@@ -1,9 +1,7 @@
<layout> <layout>
<theme> <theme>
<var key="menu_dark" value="#0A0A0ACC" /> <var key="color_menu_dark" value="#0A0A0ACC" />
<var key="accent" value="#008cff" /> <var key="color_accent" value="#008cff" />
<var key="background_dark" value="#0d131acc" /> <var key="color_bottom_panel" value="#141e28" />
<var key="background_light" value="#244179aa" />
<var key="bottom_panel" value="#141e28" />
</theme> </theme>
</layout> </layout>

8
uidev/assets/gui/theme.xml
View File

@@ -1,8 +0,0 @@
<layout>
<theme>
<var key="menu_dark" value="#0A0A0ACC" />
<var key="background_dark" value="#0d131acc" />
<var key="background_light" value="#244179aa" />
<var key="bottom_panel" value="#141e28" />
</theme>
</layout>

6
uidev/assets/gui/wlx_theme.xml
View File

@@ -1,8 +1,8 @@
<layout> <layout>
<!-- TODO: deprecate this in favor of theme.xml -->
<theme> <theme>
<var key="bg_color" value="#24273a" /> <var key="color_bg" value="#24273a" />
<var key="bg_color_active" value="#44475a" /> <var key="color_bg_active" value="#44475a" />
<var key="device_color" value="#666666" />
<var key="text_color" value="#dddddd" /> <var key="text_color" value="#dddddd" />
</theme> </theme>
</layout> </layout>

2
wgui/src/globals.rs
View File

@@ -15,6 +15,7 @@ pub struct Defaults {
pub dark_mode: bool, pub dark_mode: bool,
pub text_color: drawing::Color, pub text_color: drawing::Color,
pub button_color: drawing::Color, pub button_color: drawing::Color,
pub accent_color: drawing::Color,
} }
impl Default for Defaults { impl Default for Defaults {
@@ -23,6 +24,7 @@ impl Default for Defaults {
dark_mode: true, dark_mode: true,
text_color: drawing::Color::new(1.0, 1.0, 1.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), button_color: drawing::Color::new(1.0, 1.0, 1.0, 0.05),
accent_color: drawing::Color::new(0.0, 0.54, 1.0, 1.0),
} }
} }
} }

8
wlx-overlay-s/src/assets/gui/bar.xml
View File

@@ -2,14 +2,14 @@
<include src="wlx_theme.xml" /> <include src="wlx_theme.xml" />
<template name="TopButton"> <template name="TopButton">
<rectangle id="~id" color="~bg_color" padding="8" round="50%"> <rectangle id="~id" color="~color_bg" padding="8" round="50%">
<sprite color="~device_color" width="48" height="48" src="${src}" /> <sprite width="48" height="48" src="${src}" />
</rectangle> </rectangle>
</template> </template>
<elements> <elements>
<div box_sizing="content_box" flex_direction="column" justify_content="center"> <div box_sizing="content_box" flex_direction="column" justify_content="center">
<rectangle padding="10" gap="8" round="100%" color="~bg_color" justify_content="center"> <rectangle padding="10" gap="8" round="100%" color="~color_bg" justify_content="center">
<TopButton id="lock" src="bar/lock_open.svg" /> <TopButton id="lock" src="bar/lock_open.svg" />
<TopButton id="anchor" src="bar/anchor.svg" /> <TopButton id="anchor" src="bar/anchor.svg" />
<TopButton id="mouse" src="bar/mouse.svg" /> <TopButton id="mouse" src="bar/mouse.svg" />
@@ -19,7 +19,7 @@
<TopButton id="inout" src="bar/inout.svg" /> <TopButton id="inout" src="bar/inout.svg" />
<TopButton id="delete" src="bar/delete.svg" /> <TopButton id="delete" src="bar/delete.svg" />
</rectangle> </rectangle>
<rectangle padding="8" gap="8" round="100%" color="~bg_color_active" justify_content="center" align_items="center"> <rectangle padding="8" gap="8" round="100%" color="~color_bg_active" justify_content="center" align_items="center">
<label size="18" translation="BAR.OPACITY" color="~text_color" /> <label size="18" translation="BAR.OPACITY" color="~text_color" />
<Slider width="150" height="24" min_value="0" max_value="100" value="100" /> <Slider width="150" height="24" min_value="0" max_value="100" value="100" />
<CheckBox translation="BAR.ADDITIVE" color="~text_color" /> <CheckBox translation="BAR.ADDITIVE" color="~text_color" />

13
wlx-overlay-s/src/assets/gui/edit.xml
View File

@@ -1,8 +1,5 @@
<layout> <layout>
<theme> <include src="theme.xml" />
<var key="border" value="2" />
<var key="tint_color" value="#0044CC99" />
</theme>
<macro name="button_style" <macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center" margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
@@ -10,19 +7,19 @@
<template name="TopButton"> <template name="TopButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#0044CC" color="#000A1C" color2="#000002"> <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#0044CC" color="#000A1C" color2="#000002">
<sprite color="~device_color" width="48" height="48" src="${src}" /> <sprite width="48" height="48" src="${src}" />
</Button> </Button>
</template> </template>
<template name="TopButtonDanger"> <template name="TopButtonDanger">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#CC0000" color="#110000" color2="#020000"> <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#CC0000" color="#110000" color2="#020000">
<sprite color="~device_color" width="48" height="48" src="${src}" /> <sprite width="48" height="48" src="${src}" />
</Button> </Button>
</template> </template>
<template name="TopButtonFaded"> <template name="TopButtonFaded">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#707070" color="#202020" color2="#010101"> <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" border_color="#707070" color="#202020" color2="#010101">
<sprite color="~device_color" width="48" height="48" src="${src}" /> <sprite width="48" height="48" src="${src}" />
</Button> </Button>
</template> </template>
@@ -30,7 +27,7 @@
<div width="100%" height="100%"> <div width="100%" height="100%">
<rectangle width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="center" color="#000000DD" flex_direction="row"> <rectangle width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="center" color="#000000DD" flex_direction="row">
<div flex_direction="column"> <div flex_direction="column">
<rectangle padding="20" gap="8" round="100%" color="~bg_color" justify_content="center" > <rectangle padding="16" gap="8" round="32" color="~color_bg" border="2" border_color="~color_accent" justify_content="center">
<div flex_direction="column" gap="8"> <div flex_direction="column" gap="8">
<label align="center" translation="Point on a window to change its parameters.&#xA;Once done, leave edit mode using the button on the right." /> <label align="center" translation="Point on a window to change its parameters.&#xA;Once done, leave edit mode using the button on the right." />
<div flex_direction="row" gap="4"> <div flex_direction="row" gap="4">

22
wlx-overlay-s/src/assets/gui/keyboard.xml
View File

@@ -1,7 +1,9 @@
<layout> <layout>
<include src="theme.xml" />
<macro name="keycap_rect" <macro name="keycap_rect"
margin="2" width="100%" overflow="hidden" box_sizing="border_box" margin="2" width="100%" overflow="hidden" box_sizing="border_box"
border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
align_items="center" justify_content="center" /> align_items="center" justify_content="center" />
<macro name="keycap_div" <macro name="keycap_div"
@@ -15,7 +17,7 @@
<template name="KeySpecial"> <template name="KeySpecial">
<div macro="keycap_div"> <div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect"> <rectangle id="${id}" macro="keycap_rect">
<sprite color="#FFFFFF" width="32" height="32" src="keyboard/${text}.svg" /> <sprite width="32" height="32" src="keyboard/${text}.svg" />
</rectangle> </rectangle>
</div> </div>
</template> </template>
@@ -25,7 +27,7 @@
<template name="KeyLetter"> <template name="KeyLetter">
<div macro="keycap_div"> <div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect"> <rectangle id="${id}" macro="keycap_rect">
<label color="#FFFFFF" text="${text}" size="24" /> <label text="${text}" size="24" />
</rectangle> </rectangle>
</div> </div>
</template> </template>
@@ -35,8 +37,8 @@
<template name="KeyLetterAltGr"> <template name="KeyLetterAltGr">
<div macro="keycap_div"> <div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" gap="4"> <rectangle id="${id}" macro="keycap_rect" gap="4">
<label color="#FFFFFF" text="${text}" size="24" /> <label text="${text}" size="24" />
<label color="#FFFFFF70" text="${text_altgr}" size="24" /> <label color="~color_text_translucent" text="${text_altgr}" size="24" />
</rectangle> </rectangle>
</div> </div>
</template> </template>
@@ -46,8 +48,8 @@
<template name="KeySymbol"> <template name="KeySymbol">
<div macro="keycap_div"> <div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" gap="4"> <rectangle id="${id}" macro="keycap_rect" gap="4">
<label color="#FFFFFF70" text="${text_shift}" size="24" /> <label color="~color_text_translucent" text="${text_shift}" size="24" />
<label color="#FFFFFF" text="${text}" size="24" /> <label text="${text}" size="24" />
</rectangle> </rectangle>
</div> </div>
</template> </template>
@@ -58,14 +60,14 @@
<div macro="keycap_div"> <div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" flex_direction="row" flex_wrap="wrap"> <rectangle id="${id}" macro="keycap_rect" flex_direction="row" flex_wrap="wrap">
<div width="50%" height="50%" align_items="center" justify_content="center"> <div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF70" text="${text_shift}" size="24" /> <label color="~color_text_translucent" text="${text_shift}" size="24" />
</div> </div>
<div width="50%" height="50%" align_items="center" justify_content="center" /> <div width="50%" height="50%" align_items="center" justify_content="center" />
<div width="50%" height="50%" align_items="center" justify_content="center"> <div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF" text="${text}" size="24" /> <label text="${text}" size="24" />
</div> </div>
<div width="50%" height="50%" align_items="center" justify_content="center"> <div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF70" text="${text_altgr}" size="24" /> <label color="~color_text_translucent" text="${text_altgr}" size="24" />
</div> </div>
</rectangle> </rectangle>
</div> </div>

13
wlx-overlay-s/src/assets/gui/theme.xml
View File

@@ -1,9 +1,12 @@
<layout> <layout>
<theme> <theme>
<var key="menu_dark" value="#0A0A0ACC" /> <var key="color_text" value="#FFFFFF" />
<var key="background_dark" value="#0d131acc" /> <var key="color_text_translucent" value="#FFFFFF40" />
<var key="background_light" value="#244179aa" />
<var key="bottom_panel" value="#141e28" /> <var key="color_accent" value="#008cff" />
<var key="color_accent_translucent" value="#008cff40" />
<var key="color_accent_20" value="#001c33" /> <!-- 20% brightness -->
<var key="color_accent_5" value="#00070d" /> <!-- 5% brightness -->
<var key="color_accent_1" value="#000103" /> <!-- 1% brightness -->
</theme> </theme>
</layout> </layout>

2
wlx-overlay-s/src/assets/gui/toolbox.xml
View File

@@ -18,7 +18,7 @@
<elements> <elements>
<div width="400" height="200"> <div width="400" height="200">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~bg_color"> <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
<label text="Select set to edit" size="48" color="#ffffff" weight="bold" /> <label text="Select set to edit" size="48" color="#ffffff" weight="bold" />
<div width="100%" flex_direction="row"> <div width="100%" flex_direction="row">
<div id="sets"> <div id="sets">

4
wlx-overlay-s/src/assets/gui/watch.xml
View File

@@ -19,7 +19,7 @@
border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" /> border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" />
<template name="Device"> <template name="Device">
<sprite color="~device_color" width="${size}" height="${size}" src="${src}" /> <sprite width="${size}" height="${size}" src="${src}" />
<div position="absolute" margin_top="10" margin_left="9"> <div position="absolute" margin_top="10" margin_left="9">
<label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" /> <label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" />
</div> </div>
@@ -36,7 +36,7 @@
<elements> <elements>
<div width="460" height="260" padding="30" interactable="0"> <div width="460" height="260" padding="30" interactable="0">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~bg_color"> <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg">
<div width="100%" flex_direction="row"> <div width="100%" flex_direction="row">
<Device src="watch/hmd.svg" size="40" device="0" /> <Device src="watch/hmd.svg" size="40" device="0" />
<Device src="watch/controller_l.svg" size="36" device="1" /> <Device src="watch/controller_l.svg" size="36" device="1" />

9
wlx-overlay-s/src/main.rs
View File

@@ -1,6 +1,7 @@
#![warn(clippy::all, clippy::pedantic, clippy::nursery, clippy::cargo)] #![warn(clippy::all, clippy::pedantic, clippy::nursery, clippy::cargo)]
#![allow( #![allow(
dead_code, dead_code,
clippy::suboptimal_flops,
clippy::default_trait_access, clippy::default_trait_access,
clippy::cast_precision_loss, clippy::cast_precision_loss,
clippy::cast_possible_truncation, clippy::cast_possible_truncation,
@@ -31,8 +32,8 @@ mod config_wayvr;
use std::{ use std::{
path::PathBuf, path::PathBuf,
sync::{ sync::{
atomic::{AtomicBool, Ordering},
Arc, Arc,
atomic::{AtomicBool, Ordering},
}, },
}; };
@@ -40,7 +41,7 @@ use clap::Parser;
use subsystem::notifications::DbusNotificationSender; use subsystem::notifications::DbusNotificationSender;
use sysinfo::Pid; use sysinfo::Pid;
use tracing::level_filters::LevelFilter; use tracing::level_filters::LevelFilter;
use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt, EnvFilter}; use tracing_subscriber::{EnvFilter, layer::SubscriberExt, util::SubscriberInitExt};
/// The lightweight desktop overlay for OpenVR and OpenXR /// The lightweight desktop overlay for OpenVR and OpenXR
#[derive(Default, Parser, Debug)] #[derive(Default, Parser, Debug)]
@@ -135,7 +136,7 @@ fn auto_run(running: Arc<AtomicBool>, args: Args) {
#[cfg(feature = "openxr")] #[cfg(feature = "openxr")]
if !args_get_openvr(&args) { if !args_get_openvr(&args) {
use crate::backend::{openxr::openxr_run, BackendError}; use crate::backend::{BackendError, openxr::openxr_run};
tried_xr = true; tried_xr = true;
match openxr_run(running.clone(), args.show, args.headless) { match openxr_run(running.clone(), args.show, args.headless) {
Ok(()) => return, Ok(()) => return,
@@ -149,7 +150,7 @@ fn auto_run(running: Arc<AtomicBool>, args: Args) {
#[cfg(feature = "openvr")] #[cfg(feature = "openvr")]
if !args_get_openxr(&args) { if !args_get_openxr(&args) {
use crate::backend::{openvr::openvr_run, BackendError}; use crate::backend::{BackendError, openvr::openvr_run};
tried_vr = true; tried_vr = true;
match openvr_run(running, args.show, args.headless) { match openvr_run(running, args.show, args.headless) {
Ok(()) => return, Ok(()) => return,

66
wlx-overlay-s/src/overlays/keyboard/builder.rs
View File

@@ -1,37 +1,37 @@
use std::{collections::HashMap, rc::Rc}; use std::{collections::HashMap, rc::Rc};
use glam::{vec2, vec3, Affine3A, Mat4, Quat, Vec2, Vec3}; use glam::{Affine3A, FloatExt, Mat4, Quat, Vec2, Vec3, vec2, vec3};
use wgui::{ use wgui::{
animation::{Animation, AnimationEasing}, animation::{Animation, AnimationEasing},
assets::AssetPath, assets::AssetPath,
drawing::Color, drawing::{self, Color},
event::{self, CallbackMetadata, EventListenerKind}, event::{self, CallbackMetadata, EventListenerKind},
layout::LayoutParams, layout::LayoutParams,
parser::Fetchable, parser::Fetchable,
renderer_vk::util, renderer_vk::util,
taffy::{self, prelude::length}, taffy::{self, prelude::length},
widget::{ widget::{
EventResult,
div::WidgetDiv, div::WidgetDiv,
rectangle::{WidgetRectangle, WidgetRectangleParams}, rectangle::{WidgetRectangle, WidgetRectangleParams},
util::WLength, util::WLength,
EventResult,
}, },
}; };
use crate::{ use crate::{
gui::panel::GuiPanel, gui::panel::GuiPanel,
state::AppState, state::AppState,
subsystem::hid::{XkbKeymap, ALT, CTRL, META, SHIFT, SUPER}, subsystem::hid::{ALT, CTRL, META, SHIFT, SUPER, XkbKeymap},
windowing::window::{OverlayWindowConfig, OverlayWindowState, Positioning}, windowing::window::{OverlayWindowConfig, OverlayWindowState, Positioning},
}; };
use super::{ use super::{
handle_press, handle_release, KEYBOARD_NAME, KeyButtonData, KeyState, KeyboardBackend, KeyboardState, handle_press,
handle_release,
layout::{self, AltModifier, KeyCapType}, layout::{self, AltModifier, KeyCapType},
KeyButtonData, KeyState, KeyboardBackend, KeyboardState, KEYBOARD_NAME,
}; };
const BACKGROUND_PADDING: f32 = 4.; const BACKGROUND_PADDING: f32 = 16.0;
const PIXELS_PER_UNIT: f32 = 80.; const PIXELS_PER_UNIT: f32 = 80.;
#[allow(clippy::too_many_lines, clippy::significant_drop_tightening)] #[allow(clippy::too_many_lines, clippy::significant_drop_tightening)]
@@ -55,11 +55,16 @@ pub fn create_keyboard(
let mut panel = GuiPanel::new_blank(app, state, false)?; let mut panel = GuiPanel::new_blank(app, state, false)?;
let globals = app.wgui_globals.clone();
let accent_color = globals.get().defaults.accent_color;
let (background, _) = panel.layout.add_child( let (background, _) = panel.layout.add_child(
panel.layout.content_root_widget, panel.layout.content_root_widget,
WidgetRectangle::create(WidgetRectangleParams { WidgetRectangle::create(WidgetRectangleParams {
color: wgui::drawing::Color::new(0., 0., 0., 0.6), color: wgui::drawing::Color::new(0., 0., 0., 0.75),
round: WLength::Units(4.0), round: WLength::Units(16.0),
border: 2.0,
border_color: accent_color,
..Default::default() ..Default::default()
}), }),
taffy::Style { taffy::Style {
@@ -76,7 +81,7 @@ pub fn create_keyboard(
} }
let parse_doc_params = wgui::parser::ParseDocumentParams { let parse_doc_params = wgui::parser::ParseDocumentParams {
globals: app.wgui_globals.clone(), globals,
path: AssetPath::BuiltIn("gui/keyboard.xml"), path: AssetPath::BuiltIn("gui/keyboard.xml"),
extra: Default::default(), extra: Default::default(),
}; };
@@ -182,6 +187,7 @@ pub fn create_keyboard(
color: rect.params.color, color: rect.params.color,
color2: rect.params.color2, color2: rect.params.color2,
border_color: rect.params.border_color, border_color: rect.params.border_color,
border: rect.params.border,
drawn_state: false.into(), drawn_state: false.into(),
}) })
}; };
@@ -193,7 +199,7 @@ pub fn create_keyboard(
let k = key_state.clone(); let k = key_state.clone();
move |common, data, _app, _state| { move |common, data, _app, _state| {
common.alterables.trigger_haptics(); common.alterables.trigger_haptics();
on_enter_anim(k.clone(), common, data); on_enter_anim(k.clone(), common, data, accent_color);
Ok(EventResult::Pass) Ok(EventResult::Pass)
} }
}), }),
@@ -205,7 +211,7 @@ pub fn create_keyboard(
let k = key_state.clone(); let k = key_state.clone();
move |common, data, _app, _state| { move |common, data, _app, _state| {
common.alterables.trigger_haptics(); common.alterables.trigger_haptics();
on_leave_anim(k.clone(), common, data); on_leave_anim(k.clone(), common, data, accent_color);
Ok(EventResult::Pass) Ok(EventResult::Pass)
} }
}), }),
@@ -295,23 +301,36 @@ fn get_anim_transform(pos: f32, widget_size: Vec2) -> Mat4 {
) )
} }
fn set_anim_color(key_state: &KeyState, rect: &mut WidgetRectangle, pos: f32) { fn set_anim_color(
let br1 = pos * 0.25; key_state: &KeyState,
let br2 = pos * 0.15; rect: &mut WidgetRectangle,
pos: f32,
accent_color: drawing::Color,
) {
// fade to accent color
rect.params.color.r = key_state.color.r.lerp(accent_color.r, pos);
rect.params.color.g = key_state.color.g.lerp(accent_color.g, pos);
rect.params.color.b = key_state.color.b.lerp(accent_color.b, pos);
rect.params.color.r = key_state.color.r + br1; // fade to accent color
rect.params.color.g = key_state.color.g + br1; rect.params.color2.r = key_state.color2.r.lerp(accent_color.r, pos);
rect.params.color.b = key_state.color.b + br1; rect.params.color2.g = key_state.color2.g.lerp(accent_color.g, pos);
rect.params.color2.b = key_state.color2.b.lerp(accent_color.b, pos);
rect.params.color2.r = key_state.color2.r + br2; // fade to white
rect.params.color2.g = key_state.color2.g + br2; rect.params.border_color.r = key_state.border_color.r.lerp(1.0, pos);
rect.params.color2.b = key_state.color2.b + br2; rect.params.border_color.g = key_state.border_color.g.lerp(1.0, pos);
rect.params.border_color.b = key_state.border_color.b.lerp(1.0, pos);
rect.params.border_color.a = key_state.border_color.a.lerp(1.0, pos);
rect.params.border = key_state.border.lerp(key_state.border * 1.5, pos);
} }
fn on_enter_anim( fn on_enter_anim(
key_state: Rc<KeyState>, key_state: Rc<KeyState>,
common: &mut event::CallbackDataCommon, common: &mut event::CallbackDataCommon,
data: &event::CallbackData, data: &event::CallbackData,
accent_color: drawing::Color,
) { ) {
common.alterables.animate(Animation::new( common.alterables.animate(Animation::new(
data.widget_id, data.widget_id,
@@ -319,7 +338,7 @@ fn on_enter_anim(
AnimationEasing::OutBack, AnimationEasing::OutBack,
Box::new(move |common, data| { Box::new(move |common, data| {
let rect = data.obj.get_as_mut::<WidgetRectangle>().unwrap(); let rect = data.obj.get_as_mut::<WidgetRectangle>().unwrap();
set_anim_color(&key_state, rect, data.pos); set_anim_color(&key_state, rect, data.pos, accent_color);
data.data.transform = get_anim_transform(data.pos, data.widget_boundary.size); data.data.transform = get_anim_transform(data.pos, data.widget_boundary.size);
common.alterables.mark_redraw(); common.alterables.mark_redraw();
}), }),
@@ -330,6 +349,7 @@ fn on_leave_anim(
key_state: Rc<KeyState>, key_state: Rc<KeyState>,
common: &mut event::CallbackDataCommon, common: &mut event::CallbackDataCommon,
data: &event::CallbackData, data: &event::CallbackData,
accent_color: drawing::Color,
) { ) {
common.alterables.animate(Animation::new( common.alterables.animate(Animation::new(
data.widget_id, data.widget_id,
@@ -337,7 +357,7 @@ fn on_leave_anim(
AnimationEasing::OutQuad, AnimationEasing::OutQuad,
Box::new(move |common, data| { Box::new(move |common, data| {
let rect = data.obj.get_as_mut::<WidgetRectangle>().unwrap(); let rect = data.obj.get_as_mut::<WidgetRectangle>().unwrap();
set_anim_color(&key_state, rect, 1.0 - data.pos); set_anim_color(&key_state, rect, 1.0 - data.pos, accent_color);
data.data.transform = get_anim_transform(1.0 - data.pos, data.widget_boundary.size); data.data.transform = get_anim_transform(1.0 - data.pos, data.widget_boundary.size);
common.alterables.mark_redraw(); common.alterables.mark_redraw();
}), }),

3
wlx-overlay-s/src/overlays/keyboard/mod.rs
View File

@@ -12,7 +12,7 @@ use crate::{
backend::input::{HoverResult, PointerHit}, backend::input::{HoverResult, PointerHit},
gui::panel::GuiPanel, gui::panel::GuiPanel,
state::AppState, state::AppState,
subsystem::hid::{KeyModifier, VirtualKey, WheelDelta, ALT, CTRL, META, SHIFT, SUPER}, subsystem::hid::{ALT, CTRL, KeyModifier, META, SHIFT, SUPER, VirtualKey, WheelDelta},
windowing::backend::{FrameMeta, OverlayBackend, RenderResources, ShouldRender}, windowing::backend::{FrameMeta, OverlayBackend, RenderResources, ShouldRender},
}; };
@@ -91,6 +91,7 @@ struct KeyState {
color: drawing::Color, color: drawing::Color,
color2: drawing::Color, color2: drawing::Color,
border_color: drawing::Color, border_color: drawing::Color,
border: f32,
drawn_state: Cell<bool>, drawn_state: Cell<bool>,
} }