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
15from __future__ import annotations
16
17import arcade
18from arcade.gui import UIInputText, UIOnClickEvent, UIView
19from arcade.gui.experimental.password_input import UIPasswordInput
20from arcade.gui.widgets.buttons import UIFlatButton
21from arcade.gui.widgets.layout import UIGridLayout, UIAnchorLayout
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 = UIAnchorLayout() # to center grid on screen
86 anchor.add(grid)
87
88 self.add_widget(anchor)
89
90 # activate username input field
91 self.username_input.activate()
92
93 def on_key_press(self, symbol: int, modifiers: int) -> bool | None:
94 # if username field active, switch fields with enter
95 if self.username_input.active:
96 if symbol == arcade.key.TAB:
97 self.username_input.deactivate()
98 self.password_input.activate()
99 return True
100 elif symbol == arcade.key.ENTER:
101 self.username_input.deactivate()
102 self.on_login(None)
103 return True
104 # if password field active, login with enter
105 elif self.password_input.active:
106 if symbol == arcade.key.TAB:
107 self.username_input.activate()
108 self.password_input.deactivate()
109 return True
110 elif symbol == arcade.key.ENTER:
111 self.password_input.deactivate()
112 self.on_login(None)
113 return True
114 return False
115
116 def on_login(self, event: UIOnClickEvent | None):
117 username = self.username_input.text.strip()
118 password = self.password_input.text.strip()
119 print(f"User logged in with: {username} {password}")
120
121
122def main():
123 window = arcade.Window(title="GUI Example: Hidden Password")
124 window.show_view(MyView())
125 window.run()
126
127
128if __name__ == "__main__":
129 main()