GUI Hidden Password

The following example demonstrates how to make use of the experimental widget.

Screen shot
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()