assets: update example.conf

[davc0n]

Includes examples from wiki with minor modifications. Date and time labels inspired by https://github.com/catppuccin/hyprlock

Aims to improve out-of-the-box experience and basic stuff reference.

[PointerDilemma]

Thanks! I like the idea of having a default config that looks good and is usable.

Additional things to discuss/improve:

• dots spacing and their default animation. (My config feels a bit smoother. I have animation=inputFieldDots, 1, 2, linear)
• pick one syntax to define colors? Not a big deal. Showing multiple different ways to specify colors is also ok, but I think declaring all with rgb(a)(r, g, b[, a]) is cleaner.

[PointerDilemma]

@alba4k also adding you for your opinion on the looks, since I think you have a pretty config :)

[alba4k]

@PaideiaDilemma ahah damn, thanks, that's a funny but nice reason to be added :)

I think this looks great! It also fits the theme of the default Hyprland configuration, which is good.

let's not include disable_loading_bar. I want to remove this setting at some point. Doesn't really do anything most configs, as assets usually load quickly.

Agree, I never even saw that loading bar (can't see it even if I lock my cpu at 400 mHz).

I think the check color could be improved. It's orange/red at the top of the input field which looks like it could mean "fail".

Also agree, something like a lighter yellow would probably be better, although I suppose the idea was having it half orange and half green (as to make the unclear state of "is it going to unlock?" obvious). What about

check_color = rgba(00ff99ee) rgba(ffee33ee) 120deg

I think it would be a good idea to add auth:fingerprint:enabled = true, as it is a great feature that most hyprlock alternatives do not have. Not sure if enabling it without a fingerprint reader causes issues, tho. Maybe it would also just make sense to have this be enabled by default, though.

[davc0n]

@PaideiaDilemma

dots spacing and their default animation. (My config feels a bit smoother. I have animation=inputFieldDots, 1, 2, linear)

sure let me know what should be added, tbh idc about animations so I just picked whatever was in the previous example and kept that

pick one syntax to define colors? Not a big deal. Showing multiple different ways to specify colors is also ok, but I think declaring all with rgb(a)(r, g, b[, a]) is cleaner.

don't know which one is more convenient. Personally I would opt for the hexadecimal one, is more concise:

    inner_color = rgba(00000000) # no fill

    outer_color = rgba(33ccffee) rgba(00ff99ee) 45deg
    check_color = rgba(00ff99ee) rgba(ff6633ee) 120deg
    fail_color = rgba(ff6633ee) rgba(ff0066ee) 40deg

    font_color = rgba(8f8f8fff)

alternatively we could use the one you suggested:

    inner_color = rgba(0, 0, 0, 0.0) # no fill

    outer_color = rgba(51, 204, 255, 0.93) rgba(0, 255, 153, 0.93) 45deg
    check_color = rgba(0, 255, 153, 0.93) rgba(255, 102, 51, 0.93) 120deg
    fail_color = rgba(255, 102, 51, 0.93) rgba(255, 0, 102, 0.93) 40deg

    font_color = rgba(143, 143, 143, 1.0)

@alba4k

something like a lighter yellow would probably be better

the one you posted looks good, but if we opt for that the green part at the bottom should change to yellow too (smthing similar to the fail color which is entirely red)

I think it would be a good idea to add auth:fingerprint:enabled = true, as it is a great feature that most hyprlock alternatives do not have. Not sure if enabling it without a fingerprint reader causes issues, tho. Maybe it would also just make sense to have this be enabled by default, though.

dunno if can cause issues, by default is not enabled... eventually I'd keep it commented out

[alba4k]

the one you posted looks good, but if we opt for that the green part at the bottom should change to yellow too (smthing similar to the fail color which is entirely red)

fail color is a gradient with red and orange, so not sure what you mean?

[davc0n]

was talking about check_color, the one you posted is yellow and green, maybe we could replace the green part with a darker yellow or orange... otherwise if we want to keep the green for the current sort of transition effect, the current value looks more consistent imho

[PointerDilemma]

@alba4k @davc0n sorry was busy in the last two days.

I think it would be a good idea to add auth:fingerprint:enabled = true, as it is a great feature that most hyprlock alternatives do not have.

I like I that idea. I have it in some of the configs I test and besides an error in your logs it shouldn't really cause any issues.

Regarding check color.
I think what alba suggested already looks better. Although in that case I would swap the fail colors around.
Other options:
Just make it green, no gradient:

    check_color = rgba(00ff99ee) 120deg

Make check color be the exact colors in between outer and fail:

    check_color = rgba(b789ffee) rgba(c1c100ee) 120deg

Pick whatever you think looks best.

Color syntax wise, if we want to decide on one, I would go full decimal, because it is the easiest to understand for newbies. But there are also benefits in showcasing both formats, so let's just leave it mixed like it is now?

[alba4k]

Just make it green, no gradient

mhhh no, I think that would make it confusing in case it fails, as it would seem to suggest that you were authenticated successfully

[PointerDilemma]

mhhh no, I think that would make it confusing in case it fails, as it would seem to suggest that you were authenticated successfully

Ok yeah you are 100% right.

[davc0n]

But there are also benefits in showcasing both formats, so let's just leave it mixed like it is now?

Left it mixed.

Latest commit should solve most of the points, remaining stuff is animation and colors, let me know which values do you prefer for those.

[PointerDilemma]

@davc0n @alba4k 941a3f7

My suggestions. I can't push on your main, but you can just cherry pick this if you want.

This is what it adds for the gradients:

    outer_color = rgba(33ccff44) rgba(00ff9944) 315deg
    check_color = rgba(33ccffee) rgba(00ff99ee) 45deg

I think that looks nice. Let me know if you like it as well.

[PointerDilemma]

Also maybe this if we want. Then the gaps would scale with monitor dimensions as well.

diff --git a/assets/example.conf b/assets/example.conf
index 660cb20..38faf2f 100644
--- a/assets/example.conf
+++ b/assets/example.conf
@@ -63,7 +63,7 @@ input-field {
     placeholder_text = Input password...
     fail_text = $PAMFAIL
 
-    position = 0, -20
+    position = 0, -2%
     halign = center
     valign = center
 }
@@ -75,7 +75,7 @@ label {
     font_size = 90
     font_family = $font
 
-    position = -30, 0
+    position = -3%, 0
     halign = right
     valign = top
 }
@@ -87,7 +87,7 @@ label {
     font_size = 25
     font_family = $font
 
-    position = -30, -150
+    position = -3%, -14%
     halign = right
     valign = top
 }

[davc0n]

@PaideiaDilemma

I've tested both but the overall result with the current configuration looks better.

The proposed colors looks too much greyed out compared with the date/clock widget, making the overall lock window inconsistent.

The scale proposal causes different spacing between clock and date, and between them and the corner across the monitors (while the goal is to keep the clock/date on top right corner, and keep the look consistent across monitors).
I've experienced this on a dual monitor configuration: laptop fhd@1.25 and external 2k@1.25

Maybe we could merge this as it is for now and get feedback from users after the next release? Then we can better evaluate futher improvements.

[PointerDilemma]

I've tested both but the overall result with the current configuration looks better.
The proposed colors looks too much greyed out compared with the date/clock widget, making the overall lock window inconsistent.

Fine, that was just a proposal. I think it does look/feel better than the current configuration, but I don't have a strong opinion on it. We can leave the colors like they are now, but I still think check_color could be improved.

The scale proposal causes different spacing between clock and date, and between them and the corner across the monitors (while the goal is to keep the clock/date on top right corner, and keep the look consistent across monitors).
I've experienced this on a dual monitor configuration: laptop fhd@1.25 and external 2k@1.25

I did take the wrong monitor dimension to calculate the percentages...
3% offset means 57px on 1920 width and 76 on 2560 width.
What I should have written is like -1.5% which would result in 28px and 76px.
But... let's leave it like it is now. It does not really accomplish anything because the labels are not scaled with respect to the monitor size yet.

Maybe we could merge this as it is for now and get feedback from users after the next release? Then we can better evaluate further improvements.

I at least want the rest of the changes in the commit (the animation for dots+the commented suggestions in the input-field. Thanks!

[davc0n]

I at least want the rest of the changes in the commit (the animation for dots+the commented suggestions in the input-field. Thanks!

Sure, can I ask you the dots animation? If you shared a commit already, I missed that (sry).

About the commented suggestion, pango markup is described on top:

# rendered text in all widgets supports pango markup (e.g. <b> or <i> tags)
# ref. https://wiki.hyprland.org/Hypr-Ecosystem/hyprlock/#general-remarks
#
# shortcuts to clear password buffer: ESC, Ctrl+U, Ctrl+Backspace

Imho that's enough and points out that can be used in any widget (not just input-field) but if you want I'll add an example after a configuration value too.

[PointerDilemma]

diff --git a/assets/example.conf b/assets/example.conf
index 5d4b845..6023268 100644
--- a/assets/example.conf
+++ b/assets/example.conf
@@ -27,6 +27,7 @@ animations {
     bezier = linear, 1, 1, 0, 0
     animation = fadeIn, 1, 5, linear
     animation = fadeOut, 1, 5, linear
+    animation = inputFieldDots, 1, 2, linear
 }
 
 background {
@@ -49,6 +50,14 @@ input-field {
     fade_on_empty = false
     rounding = 15
 
+    # uncomment to use a letter instead of a dot to indicate the typed password.
+    # dots_text_format = *
+    # dots_size = 0.4
+    dots_spacing = 0.3
+
+    # uncomment to use an input indicator that does not show the password length (similar to swaylock's input indicator)
+    # hide_input = true
+
     font_family = $font
     placeholder_text = Input password...
     fail_text = $PAMFAIL
@@ -80,4 +89,4 @@ label {
     position = -30, -150
     halign = right
     valign = top
-}
\ No newline at end of file
+}

[davc0n]

Thanks!

[PointerDilemma]

Thank you @davc0n
I am thinking works and looks decent. Merging now :)