GUI Hidden Password
The following example demonstrates how to make use of the experimental widget.
exp_hidden_password.py
1"""Creating a hidden password field
2
3This example demonstrates how to create a custom text input
4which hides the contents behind a custom character, as often
5required for login screens.
6
7Due to a bug in the current version of pyglet, the example uses ENTER to switch
8fields instead of TAB. This will be fixed in future versions.
9(https://github.com/pyglet/pyglet/issues/1197)
10
11If Arcade and Python are properly installed, you can run this example with:
12python -m arcade.examples.gui.exp_hidden_password
13"""
14
15import arcade
16from arcade.experimental.controller_window import ControllerWindow
17from arcade.gui import UIInputText, UIOnClickEvent, UIView
18from arcade.gui.experimental.focus import UIFocusGroup
19from arcade.gui.experimental.password_input import UIPasswordInput
20from arcade.gui.widgets.buttons import UIFlatButton
21from arcade.gui.widgets.layout import UIGridLayout
22from arcade.gui.widgets.text import UILabel
23from arcade import resources
24
25# Load kenny fonts shipped with arcade
26resources.load_kenney_fonts()
27
28
29class MyView(UIView):
30 def __init__(self):
31 super().__init__()
32 self.background_color = arcade.uicolor.BLUE_BELIZE_HOLE
33
34 grid = UIGridLayout(
35 size_hint=(0, 0), # wrap children
36 row_count=5, # title | user, pw | login button
37 column_count=2, # label and input field
38 vertical_spacing=10,
39 horizontal_spacing=5,
40 )
41 grid.with_padding(all=50)
42 grid.with_background(color=arcade.uicolor.GREEN_GREEN_SEA)
43
44 title = grid.add(
45 UILabel(text="Login", width=150, font_size=20, font_name="Kenney Future"),
46 column=0,
47 row=0,
48 column_span=2,
49 )
50 title.with_padding(bottom=20)
51
52 grid.add(UILabel(text="Username:", width=80, font_name="Kenney Future"), column=0, row=1)
53 self.username_input = grid.add(
54 UIInputText(width=150, font_name="Kenney Future"), column=1, row=1
55 )
56
57 grid.add(UILabel(text="Password:", width=80, font_name="Kenney Future"), column=0, row=2)
58 self.password_input = grid.add(
59 UIPasswordInput(width=150, font_name="Kenney Future"), column=1, row=2
60 )
61 self.password_input.with_background(color=arcade.uicolor.GREEN_GREEN_SEA)
62 # set background to prevent full render on blinking caret
63
64 self.login_button = grid.add(
65 UIFlatButton(text="Login", height=30, width=150, size_hint=(1, None)),
66 column=0,
67 row=3,
68 column_span=2,
69 )
70 self.login_button.on_click = self.on_login
71
72 # add warning label
73 self.warning_label = grid.add(
74 UILabel(
75 text="Use 'TAB' to switch fields, then enter to login",
76 width=150,
77 font_size=10,
78 font_name="Kenney Future",
79 ),
80 column=0,
81 row=4,
82 column_span=2,
83 )
84
85 anchor = UIFocusGroup() # to center grid on screen
86 anchor.add(grid)
87
88 self.add_widget(anchor)
89
90 # activate username input field
91 anchor.detect_focusable_widgets()
92 anchor.set_focus()
93
94 def on_key_press(self, symbol: int, modifiers: int) -> bool | None:
95 # make the example close with the escape key
96 if symbol == arcade.key.ESCAPE:
97 self.window.close()
98 return True
99
100 # if username field active, switch fields with enter
101 elif self.username_input.active or self.password_input.active:
102 if symbol == arcade.key.ENTER:
103 self.username_input.deactivate()
104 self.password_input.deactivate()
105 self.on_login(None)
106 return True
107 return False
108
109 def on_login(self, event: UIOnClickEvent | None):
110 username = self.username_input.text.strip()
111 password = self.password_input.text.strip()
112 print(f"User logged in with: {username} {password}")
113
114
115def main():
116 window = ControllerWindow(title="GUI Example: Hidden Password")
117 window.show_view(MyView())
118 window.run()
119
120
121if __name__ == "__main__":
122 main()