wgui to use srgb

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

View File

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

View File

@@ -390,10 +390,10 @@ impl ParserContext<'_> {
&$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, "_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, "_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());
};
}

View File

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

View File

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

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);
}

View File

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

View File

@@ -1,7 +1,7 @@
<layout>
<macro name="button_style"
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" />
<macro name="button_style"
@@ -9,25 +9,25 @@
border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
<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}" />
</Button>
</template>
<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}" />
</Button>
</template>
<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}" />
</Button>
</template>
<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}" />
</Button>
</template>

View File

@@ -6,7 +6,7 @@
padding="16"
flex_direction="column"
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="column" align_items="center" gap="8" max_width="160" min_width="160">

View File

@@ -1,7 +1,7 @@
<layout>
<macro name="keycap_rect"
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" />
<macro name="keycap_div"

View File

@@ -1,9 +1,5 @@
<layout>
<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_date_size" value="16" />
<var key="clock0_dow_size" value="16" />
@@ -14,12 +10,12 @@
</theme>
<macro name="decorative_rect"
padding="8" color="~bgcolor"
padding="8" color="~color_bg"
border="2" border_color="~color_accent" round="8" />
<macro name="button_style"
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" />
<template name="Device">
@@ -41,7 +37,7 @@
<template name="Set">
<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">
<label text="${display}" size="24" color="#00050F" weight="bold" />
</div>
@@ -74,7 +70,7 @@
<!-- Clock, date and various timezones -->
<div gap="8">
<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">
<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" />
@@ -97,18 +93,18 @@
<div flex_direction="column" gap="8">
<div gap="8">
<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 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>
</div>
<div gap="8">
<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 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>
</div>
</div>
@@ -137,11 +133,11 @@
<!-- Bottom buttons -->
<div flex_direction="row" gap="4">
<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>
<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">
<sprite color="~set_color" width="40" height="40" src="edit/delete.svg" />
<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="~text_color" width="40" height="40" src="edit/delete.svg" />
</Button>
</div>
<div id="sets">
@@ -150,11 +146,11 @@
</div>
<div id="edit_add" display="none">
<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>
</div>
<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>
</div>
</div>