GUI Advanced Buttons

Screen shot of advanced button usage
3_buttons.py
  1"""Customizing buttons with text & textures.
  2
  3This example showcases Arcade's range of different built-in button types
  4and how they can be used to customize a UI. A UIGridLayout is used to
  5arrange buttons.
  6
  7If Arcade and Python are properly installed, you can run this example with:
  8python -m arcade.examples.gui.3_buttons
  9"""
 10
 11from __future__ import annotations
 12
 13import arcade
 14from arcade.gui import (
 15    UIAnchorLayout,
 16    UIFlatButton,
 17    UIGridLayout,
 18    UIImage,
 19    UIOnChangeEvent,
 20    UITextureButton,
 21    UITextureToggle,
 22    UIView,
 23)
 24
 25
 26# Preload textures, because they are mostly used multiple times, so they are not
 27# loaded multiple times
 28ICON_SMALLER = arcade.load_texture(":resources:gui_basic_assets/icons/smaller.png")
 29ICON_LARGER = arcade.load_texture(":resources:gui_basic_assets/icons/larger.png")
 30
 31TEX_SWITCH_GREEN = arcade.load_texture(":resources:gui_basic_assets/toggle/green.png")
 32TEX_SWITCH_RED = arcade.load_texture(":resources:gui_basic_assets/toggle/red.png")
 33TEX_RED_BUTTON_NORMAL = arcade.load_texture(":resources:gui_basic_assets/button/red_normal.png")
 34TEX_RED_BUTTON_HOVER = arcade.load_texture(":resources:gui_basic_assets/button/red_hover.png")
 35TEX_RED_BUTTON_PRESS = arcade.load_texture(":resources:gui_basic_assets/button/red_press.png")
 36
 37
 38class MyView(UIView):
 39    def __init__(self):
 40        super().__init__()
 41        self.background_color = arcade.uicolor.BLUE_PETER_RIVER
 42
 43        grid = UIGridLayout(
 44            column_count=3,
 45            row_count=4,
 46            size_hint=(0, 0),
 47            vertical_spacing=10,
 48            horizontal_spacing=10,
 49        )
 50
 51        self.ui.add(UIAnchorLayout(children=[grid]))
 52
 53        # simple UIFlatButton with text
 54        grid.add(UIFlatButton(text="UIFlatButton", width=200), row=0, column=0)
 55
 56        # UIFlatButton change text placement right
 57        flat_with_more_text = UIFlatButton(text="text placed right", width=200)
 58        flat_with_more_text.place_text(anchor_x="right")
 59        grid.add(flat_with_more_text, row=1, column=0)
 60
 61        # UIFlatButton change text placement right
 62        flat_with_more_text = UIFlatButton(text="text placed top left", width=200)
 63        flat_with_more_text.place_text(anchor_x="left", anchor_y="top")
 64        grid.add(flat_with_more_text, row=2, column=0)
 65
 66        # UIFlatButton with icon on the left
 67        flat_with_icon_left = UIFlatButton(text="UIFlatButton with icon", width=200)
 68        flat_with_icon_left.place_text(align_x=+20)
 69        flat_with_icon_left.add(
 70            child=UIImage(
 71                texture=ICON_LARGER,
 72                width=30,
 73                height=30,
 74            ),
 75            anchor_x="left",
 76            align_x=10,
 77        )
 78        grid.add(flat_with_icon_left, row=0, column=1)
 79
 80        # UIFlatButton with icon on the right
 81        flat_with_icon_right = UIFlatButton(text="UIFlatButton with icon", width=200)
 82        flat_with_icon_right.place_text(align_x=-20)
 83        flat_with_icon_right.add(
 84            child=UIImage(
 85                texture=ICON_SMALLER,
 86                width=30,
 87                height=30,
 88            ),
 89            anchor_x="right",
 90            align_x=-10,
 91        )
 92        grid.add(flat_with_icon_right, row=1, column=1)
 93
 94        # UIFlatButton with icon on both sides
 95        flat_with_icon_right = UIFlatButton(text="UIFlatButton", width=200)
 96        flat_with_icon_right.add(
 97            child=UIImage(
 98                texture=ICON_SMALLER,
 99                width=30,
100                height=30,
101            ),
102            anchor_x="left",
103            align_x=10,
104        )
105        flat_with_icon_right.add(
106            child=UIImage(
107                texture=ICON_SMALLER,
108                width=30,
109                height=30,
110            ),
111            anchor_x="right",
112            align_x=-10,
113        )
114        grid.add(flat_with_icon_right, row=2, column=1)
115
116        # UITextureButton
117        texture_button = UITextureButton(
118            text="UITextureButton",
119            width=200,
120            texture=TEX_RED_BUTTON_NORMAL,
121            texture_hovered=TEX_RED_BUTTON_HOVER,
122            texture_pressed=TEX_RED_BUTTON_PRESS,
123        )
124        grid.add(texture_button, row=0, column=2)
125
126        # UITextureButton with icon left
127        texture_button_with_icon_left = UITextureButton(
128            text="UITextureButton",
129            width=200,
130            texture=TEX_RED_BUTTON_NORMAL,
131            texture_hovered=TEX_RED_BUTTON_HOVER,
132            texture_pressed=TEX_RED_BUTTON_PRESS,
133        )
134        texture_button_with_icon_left.add(
135            child=UIImage(
136                texture=ICON_SMALLER,
137                width=25,
138                height=25,
139            ),
140            anchor_x="left",
141            align_x=10,
142        )
143        grid.add(texture_button_with_icon_left, row=1, column=2)
144
145        # UITextureButton with multiline text
146        texture_button_with_icon_left = UITextureButton(
147            text="UITextureButton\nwith a second line",
148            multiline=True,
149            width=200,
150            texture=TEX_RED_BUTTON_NORMAL,
151            texture_hovered=TEX_RED_BUTTON_HOVER,
152            texture_pressed=TEX_RED_BUTTON_PRESS,
153        )
154        texture_button_with_icon_left.place_text(anchor_x="left", align_x=45)
155        texture_button_with_icon_left.add(
156            child=UIImage(
157                texture=ICON_SMALLER,
158                width=25,
159                height=25,
160            ),
161            anchor_x="left",
162            align_x=10,
163        )
164        grid.add(texture_button_with_icon_left, row=2, column=2)
165
166        # UIFlatButtons with toggle
167        texture_button_with_toggle = UIFlatButton(
168            text="Just get crazy now!",
169            width=630,
170        )
171        texture_button_with_toggle.place_text(anchor_x="left", align_x=45)
172        texture_button_with_toggle.add(
173            child=UIImage(
174                texture=ICON_SMALLER,
175                width=25,
176                height=25,
177            ),
178            anchor_x="left",
179            align_x=10,
180        )
181        toggle = texture_button_with_toggle.add(
182            child=UITextureToggle(
183                on_texture=TEX_SWITCH_RED,
184                off_texture=TEX_SWITCH_GREEN,
185                width=60,
186                height=30,
187            ),
188            anchor_x="right",
189            align_x=-10,
190        )
191
192        @toggle.event
193        def on_change(event: UIOnChangeEvent):
194            texture_button_with_toggle.disabled = event.new_value
195
196        grid.add(texture_button_with_toggle, row=3, column=0, column_span=3)
197
198
199def main():
200    window = arcade.Window(800, 600, "GUI Example: Buttons", resizable=True)
201    window.show_view(MyView())
202    window.run()
203
204
205if __name__ == "__main__":
206    main()