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

wgui to use srgb

Browse Source
This commit is contained in:
galister
2025-12-27 02:49:11 +09:00
parent 1364a5cb2e
commit a44aa2e426
10 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
wgui/src/globals.rs
View File

@@ -34,11 +34,11 @@ 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), accent_color: drawing::Color::new(0.13, 0.68, 1.0, 1.0),
danger_color: drawing::Color::new(0.8, 0.0, 0.0, 1.0), danger_color: drawing::Color::new(0.9, 0.0, 0.0, 1.0),
faded_color: drawing::Color::new(0.4, 0.5, 0.6, 1.0), faded_color: drawing::Color::new(0.67, 0.74, 0.80, 1.0),
bg_color: drawing::Color::new(0.0039, 0.0078, 0.0235, 0.8352), bg_color: drawing::Color::new(0.0, 0.07, 0.1, 0.75),
translucent_alpha: 0.25, translucent_alpha: 0.5,
animation_mult: 1.0, animation_mult: 1.0,
rounding_mult: 1.0, rounding_mult: 1.0,
} }

4
wgui/src/parser/mod.rs
View File

@@ -390,10 +390,10 @@ impl ParserContext<'_> {
&$field.with_alpha($alpha).to_hex(), &$field.with_alpha($alpha).to_hex(),
); );
$self.insert_var(concat!("color_", $name, "_50"), &$field.mult_rgb(0.50).to_hex()); $self.insert_var(concat!("color_", $name, "_50"), &$field.mult_rgb(0.50).to_hex());
$self.insert_var(concat!("color_", $name, "_40"), &$field.mult_rgb(0.40).to_hex());
$self.insert_var(concat!("color_", $name, "_30"), &$field.mult_rgb(0.30).to_hex());
$self.insert_var(concat!("color_", $name, "_20"), &$field.mult_rgb(0.20).to_hex()); $self.insert_var(concat!("color_", $name, "_20"), &$field.mult_rgb(0.20).to_hex());
$self.insert_var(concat!("color_", $name, "_10"), &$field.mult_rgb(0.10).to_hex()); $self.insert_var(concat!("color_", $name, "_10"), &$field.mult_rgb(0.10).to_hex());
$self.insert_var(concat!("color_", $name, "_5"), &$field.mult_rgb(0.05).to_hex());
$self.insert_var(concat!("color_", $name, "_1"), &$field.mult_rgb(0.01).to_hex());
}; };
} }

2
wgui/src/renderer_vk/shaders/image.frag
View File

@@ -13,6 +13,7 @@ layout(location = 0) out vec4 out_color;
#define UNIFORM_PARAMS_SET 0 #define UNIFORM_PARAMS_SET 0
#include "uniform.glsl" #include "uniform.glsl"
#include "srgb.glsl"
layout(set = 2, binding = 0) uniform sampler2D image; layout(set = 2, binding = 0) uniform sampler2D image;
@@ -52,4 +53,5 @@ void main() {
// rounding cutout alpha // rounding cutout alpha
out_color.a *= 1.0 - smoothstep(-pixel_size, 0.0, sdf); out_color.a *= 1.0 - smoothstep(-pixel_size, 0.0, sdf);
} }
out_color.rgb = to_srgb(out_color.rgb);
} }

2
wgui/src/renderer_vk/shaders/rect.frag
View File

@@ -14,6 +14,7 @@ layout(location = 0) out vec4 out_color;
#define UNIFORM_PARAMS_SET 0 #define UNIFORM_PARAMS_SET 0
#include "uniform.glsl" #include "uniform.glsl"
#include "srgb.glsl"
void main() { void main() {
float rect_aspect = in_rect_size.x / in_rect_size.y; float rect_aspect = in_rect_size.x / in_rect_size.y;
@@ -51,4 +52,5 @@ void main() {
// rounding cutout alpha // rounding cutout alpha
out_color.a *= 1.0 - smoothstep(-pixel_size, 0.0, sdf); out_color.a *= 1.0 - smoothstep(-pixel_size, 0.0, sdf);
} }
out_color.rgb = to_srgb(out_color.rgb);
} }

6
wgui/src/renderer_vk/shaders/srgb.glsl Normal file
View File

@@ -0,0 +1,6 @@
vec3 to_srgb(in vec3 in_color) {
bvec3 cutoff = lessThan(in_color, vec3(0.04045));
vec3 higher = pow((in_color + vec3(0.055))/vec3(1.055), vec3(2.4));
vec3 lower = in_color/vec3(12.92);
return mix(higher, lower, cutoff);
}

3
wgui/src/renderer_vk/shaders/text.frag
View File

@@ -12,6 +12,8 @@ layout(location = 0) out vec4 out_color;
layout(set = 0, binding = 0) uniform sampler2D color_atlas; layout(set = 0, binding = 0) uniform sampler2D color_atlas;
layout(set = 1, binding = 0) uniform sampler2D mask_atlas; layout(set = 1, binding = 0) uniform sampler2D mask_atlas;
#include "srgb.glsl"
void main() { void main() {
if (in_content_type == 0u) { if (in_content_type == 0u) {
out_color = texture(color_atlas, in_uv) * in_color; out_color = texture(color_atlas, in_uv) * in_color;
@@ -19,4 +21,5 @@ void main() {
out_color.rgb = in_color.rgb; out_color.rgb = in_color.rgb;
out_color.a = in_color.a * texture(mask_atlas, in_uv).r; out_color.a = in_color.a * texture(mask_atlas, in_uv).r;
} }
out_color.rgb = to_srgb(out_color.rgb);
} }

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

@@ -1,7 +1,7 @@
<layout> <layout>
<macro name="button_style" <macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box" margin="2" overflow="hidden" box_sizing="border_box"
border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical" border_color="~color_accent" border="2" round="8" color="~color_accent_50" color2="~color_accent_10" gradient="vertical"
align_items="center" justify_content="center" /> align_items="center" justify_content="center" />
<macro name="button_style" <macro name="button_style"
@@ -9,25 +9,25 @@
border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" /> border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
<template name="TopButton"> <template name="TopButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_5" color2="~color_accent_1"> <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
<sprite id="${id}_sprite" width="48" height="48" src="${src}" /> <sprite id="${id}_sprite" width="48" height="48" src="${src}" />
</Button> </Button>
</template> </template>
<template name="TopButtonDanger"> <template name="TopButtonDanger">
<Button macro="button_style" tooltip="${tooltip}" _long_release="${long_release}" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1"> <Button macro="button_style" tooltip="${tooltip}" _long_release="${long_release}" border_color="~color_danger_translucent" color="~color_danger_50" color2="~color_danger_10">
<sprite width="48" height="48" src="${src}" /> <sprite width="48" height="48" src="${src}" />
</Button> </Button>
</template> </template>
<template name="TopButtonFaded"> <template name="TopButtonFaded">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_5" color2="~color_faded_1"> <Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_50" color2="~color_faded_10">
<sprite width="48" height="48" src="${src}" /> <sprite width="48" height="48" src="${src}" />
</Button> </Button>
</template> </template>
<template name="PosButton"> <template name="PosButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_5" color2="~color_accent_1"> <Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
<sprite id="${id}_sprite" width="40" height="40" src="${src}" /> <sprite id="${id}_sprite" width="40" height="40" src="${src}" />
</Button> </Button>
</template> </template>

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

@@ -6,7 +6,7 @@
padding="16" padding="16"
flex_direction="column" flex_direction="column"
gap="8" gap="8"
color="#000000c0" border_color="~color_accent" border="2" round="8"> color="~color_bg" border_color="~color_accent" border="2" round="8">
<div flex_direction="row" padding="8" justify_content="space_between"> <div flex_direction="row" padding="8" justify_content="space_between">
<div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160"> <div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">

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

@@ -1,7 +1,7 @@
<layout> <layout>
<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="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical" border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
align_items="center" justify_content="center" /> align_items="center" justify_content="center" />
<macro name="keycap_div" <macro name="keycap_div"

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

@@ -1,9 +1,5 @@
<layout> <layout>
<theme> <theme>
<var key="set_color" value="#cad3f5" />
<var key="bgcolor" value="#010206d5" />
<var key="clock0_color" value="#cad3f5" />
<var key="clock0_size" value="46" /> <var key="clock0_size" value="46" />
<var key="clock0_date_size" value="16" /> <var key="clock0_date_size" value="16" />
<var key="clock0_dow_size" value="16" /> <var key="clock0_dow_size" value="16" />
@@ -14,12 +10,12 @@
</theme> </theme>
<macro name="decorative_rect" <macro name="decorative_rect"
padding="8" color="~bgcolor" padding="8" color="~color_bg"
border="2" border_color="~color_accent" round="8" /> border="2" border_color="~color_accent" round="8" />
<macro name="button_style" <macro name="button_style"
padding="8" padding="8"
border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical" border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
align_items="center" justify_content="center" /> align_items="center" justify_content="center" />
<template name="Device"> <template name="Device">
@@ -41,7 +37,7 @@
<template name="Set"> <template name="Set">
<Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top"> <Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
<sprite width="40" height="40" color="~set_color" src_builtin="watch/set2.svg" /> <sprite width="40" height="40" color="~text_color" src_builtin="watch/set2.svg" />
<div position="absolute" margin_top="9"> <div position="absolute" margin_top="9">
<label text="${display}" size="24" color="#00050F" weight="bold" /> <label text="${display}" size="24" color="#00050F" weight="bold" />
</div> </div>
@@ -74,7 +70,7 @@
<!-- Clock, date and various timezones --> <!-- Clock, date and various timezones -->
<div gap="8"> <div gap="8">
<div flex_direction="column"> <div flex_direction="column">
<label text="23:59" _source="clock" _display="time" color="~clock0_color" size="~clock0_size" weight="bold" /> <label text="23:59" _source="clock" _display="time" color="~text_color" size="~clock0_size" weight="bold" />
<div padding="2" gap="2" flex_direction="column"> <div padding="2" gap="2" flex_direction="column">
<label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" /> <label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
<label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" /> <label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
@@ -97,18 +93,18 @@
<div flex_direction="column" gap="8"> <div flex_direction="column" gap="8">
<div gap="8"> <div gap="8">
<Button macro="button_style" _press="::NewMirror" tooltip="WATCH.MIRROR" tooltip_side="left"> <Button macro="button_style" _press="::NewMirror" tooltip="WATCH.MIRROR" tooltip_side="left">
<sprite width="40" height="40" color="~set_color" src="edit/mirror.svg" /> <sprite width="40" height="40" color="~text_color" src="edit/mirror.svg" />
</Button> </Button>
<Button macro="button_style" _press="::CleanupMirrors" tooltip="WATCH.CLEANUP_MIRRORS" tooltip_side="left"> <Button macro="button_style" _press="::CleanupMirrors" tooltip="WATCH.CLEANUP_MIRRORS" tooltip_side="left">
<sprite width="40" height="40" color="~set_color" src="watch/mirror-off.svg" /> <sprite width="40" height="40" color="~text_color" src="watch/mirror-off.svg" />
</Button> </Button>
</div> </div>
<div gap="8"> <div gap="8">
<Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left"> <Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
<sprite width="40" height="40" color="~set_color" src="watch/recenter.svg" /> <sprite width="40" height="40" color="~text_color" src="watch/recenter.svg" />
</Button> </Button>
<Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left"> <Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
<sprite width="40" height="40" color="~set_color" src="watch/fix-floor.svg" /> <sprite width="40" height="40" color="~text_color" src="watch/fix-floor.svg" />
</Button> </Button>
</div> </div>
</div> </div>
@@ -137,11 +133,11 @@
<!-- Bottom buttons --> <!-- Bottom buttons -->
<div flex_direction="row" gap="4"> <div flex_direction="row" gap="4">
<Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top" > <Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top" >
<sprite color="~set_color" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" /> <sprite color="~text_color" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
</Button> </Button>
<div id="edit_delete" display="none"> <div id="edit_delete" display="none">
<Button macro="button_style" _long_release="::EditModeDeleteSet" tooltip="WATCH.LONG_PRESS_TO_DELETE_SET" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1"> <Button macro="button_style" _long_release="::EditModeDeleteSet" tooltip="WATCH.LONG_PRESS_TO_DELETE_SET" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_40" color2="~color_danger_10">
<sprite color="~set_color" width="40" height="40" src="edit/delete.svg" /> <sprite color="~text_color" width="40" height="40" src="edit/delete.svg" />
</Button> </Button>
</div> </div>
<div id="sets"> <div id="sets">
@@ -150,11 +146,11 @@
</div> </div>
<div id="edit_add" display="none"> <div id="edit_add" display="none">
<Button macro="button_style" _press="::EditModeAddSet" tooltip="WATCH.ADD_NEW_SET" tooltip_side="top"> <Button macro="button_style" _press="::EditModeAddSet" tooltip="WATCH.ADD_NEW_SET" tooltip_side="top">
<sprite color="~set_color" width="40" height="40" src="edit/add.svg" /> <sprite color="~text_color" width="40" height="40" src="edit/add.svg" />
</Button> </Button>
</div> </div>
<Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="top"> <Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="top">
<sprite color="~set_color" width="40" height="40" src="watch/edit.svg" /> <sprite color="~text_color" width="40" height="40" src="watch/edit.svg" />
</Button> </Button>
</div> </div>
</div> </div>