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.gui import UIInputText, UIOnClickEvent, UIView
17from arcade.gui.experimental.password_input import UIPasswordInput
18from arcade.gui.widgets.buttons import UIFlatButton
19from arcade.gui.widgets.layout import UIGridLayout, UIAnchorLayout
20from arcade.gui.widgets.text import UILabel
21from arcade import resources
22
23# Load kenny fonts shipped with arcade
24resources.load_kenney_fonts()
25
26
27class MyView(UIView):
28 def __init__(self):
29 super().__init__()
30 self.background_color = arcade.uicolor.BLUE_BELIZE_HOLE
31
32 grid = UIGridLayout(
33 size_hint=(0, 0), # wrap children
34 row_count=5, # title | user, pw | login button
35 column_count=2, # label and input field
36 vertical_spacing=10,
37 horizontal_spacing=5,
38 )
39 grid.with_padding(all=50)
40 grid.with_background(color=arcade.uicolor.GREEN_GREEN_SEA)
41
42 title = grid.add(
43 UILabel(text="Login", width=150, font_size=20, font_name="Kenney Future"),
44 column=0,
45 row=0,
46 column_span=2,
47 )
48 title.with_padding(bottom=20)
49
50 grid.add(UILabel(text="Username:", width=80, font_name="Kenney Future"), column=0, row=1)
51 self.username_input = grid.add(
52 UIInputText(width=150, font_name="Kenney Future"), column=1, row=1
53 )
54
55 grid.add(UILabel(text="Password:", width=80, font_name="Kenney Future"), column=0, row=2)
56 self.password_input = grid.add(
57 UIPasswordInput(width=150, font_name="Kenney Future"), column=1, row=2
58 )
59 self.password_input.with_background(color=arcade.uicolor.GREEN_GREEN_SEA)
60 # set background to prevent full render on blinking caret
61
62 self.login_button = grid.add(
63 UIFlatButton(text="Login", height=30, width=150, size_hint=(1, None)),
64 column=0,
65 row=3,
66 column_span=2,
67 )
68 self.login_button.on_click = self.on_login
69
70 # add warning label
71 self.warning_label = grid.add(
72 UILabel(
73 text="Use 'TAB' to switch fields, then enter to login",
74 width=150,
75 font_size=10,
76 font_name="Kenney Future",
77 ),
78 column=0,
79 row=4,
80 column_span=2,
81 )
82
83 anchor = UIAnchorLayout() # to center grid on screen
84 anchor.add(grid)
85
86 self.add_widget(anchor)
87
88 # activate username input field
89 self.username_input.activate()
90
91 def on_key_press(self, symbol: int, modifiers: int) -> bool | None:
92 # if username field active, switch fields with enter
93 if self.username_input.active:
94 if symbol == arcade.key.TAB:
95 self.username_input.deactivate()
96 self.password_input.activate()
97 return True
98 elif symbol == arcade.key.ENTER:
99 self.username_input.deactivate()
100 self.on_login(None)
101 return True
102 # if password field active, login with enter
103 elif self.password_input.active:
104 if symbol == arcade.key.TAB:
105 self.username_input.activate()
106 self.password_input.deactivate()
107 return True
108 elif symbol == arcade.key.ENTER:
109 self.password_input.deactivate()
110 self.on_login(None)
111 return True
112 return False
113
114 def on_login(self, event: UIOnClickEvent | None):
115 username = self.username_input.text.strip()
116 password = self.password_input.text.strip()
117 print(f"User logged in with: {username} {password}")
118
119
120def main():
121 window = arcade.Window(title="GUI Example: Hidden Password")
122 window.show_view(MyView())
123 window.run()
124
125
126if __name__ == "__main__":
127 main()