11# Pygame Widgets
22
3- A helper module for common widgets that may be required in developing applications with Pygame.
4- It supports fully customisable buttons, collections of buttons, textboxes and sliders.
5- If there are any widgets that you would like to see added, please create an issue!
3+ A helper module for common widgets that may be required in developing applications with Pygame. It supports fully
4+ customisable buttons, collections of buttons, textboxes and sliders. If there are any widgets that you would like to see
5+ added, please create an issue!
66
77## NEW FEATURES
8+
89* Dropdown: Select options from a list that appears when hovered over
910* Progress Bar: Shows a percentage of completeness, great for loading screens and health bars
1011* Toggle: Allows switching between two values, great for settings
@@ -28,6 +29,7 @@ Open a Python console and run the following command.
2829If you receive no error, the installation was successful.
2930
3031## Usage
32+
3133* [ Common] ( #common )
3234* [ Button] ( #button )
3335* [ ButtonArray] ( #buttonarray )
@@ -57,19 +59,21 @@ _Note: Mandatory parameters must be supplied in order._
5759A customisable button
5860
5961#### Example Usage
62+
6063``` Python
6164import pygame
6265from pygame_widgets import Button
66+
6367pygame.init()
6468win = pygame.display.set_mode((600 , 600 ))
6569
6670button = Button(
67- win, 100 , 100 , 300 , 150 , text = ' Hello' ,
68- fontSize = 50 , margin = 20 ,
69- inactiveColour = (255 , 0 , 0 ),
70- pressedColour = (0 , 255 , 0 ), radius = 20 ,
71- onClick = lambda : print (' Click' )
72- )
71+ win, 100 , 100 , 300 , 150 , text = ' Hello' ,
72+ fontSize = 50 , margin = 20 ,
73+ inactiveColour = (255 , 0 , 0 ),
74+ pressedColour = (0 , 255 , 0 ), radius = 20 ,
75+ onClick = lambda : print (' Click' )
76+ )
7377
7478run = True
7579while run:
@@ -88,11 +92,12 @@ while run:
8892 pygame.display.update()
8993```
9094
91- This button will be placed at (100, 100) with a width of 300 and a height of 150,
92- display the text 'Hello' with font size 50, leaving a margin of 20 and a radius of 20.
93- When clicked, the button will change colour from red to green and ' Click' will be printed to the console.
95+ This button will be placed at (100, 100) with a width of 300 and a height of 150, display the text 'Hello' with font
96+ size 50, leaving a margin of 20 and a radius of 20. When clicked, the button will change colour from red to green and '
97+ Click' will be printed to the console.
9498
9599#### Optional Parameters
100+
96101| Parameter | Description | Type | Default |
97102| :---: | --- | :---: | :---: |
98103| inactiveColour | Default colour when not pressed or hovered over. | (int, int, int) | (150, 150, 150) |
@@ -116,7 +121,6 @@ When clicked, the button will change colour from red to green and 'Click' will b
116121| imageVAlign | Vertical alignment of image. Can be 'centre', 'top' or 'bottom'. | str | 'centre' |
117122| radius | Border radius. Set to half of width for circular button. Set to 0 for no radius. | int | 0 |
118123
119-
120124### ButtonArray
121125
122126A collection of similar buttons
@@ -132,7 +136,7 @@ win = pygame.display.set_mode((600, 600))
132136
133137buttonArray = ButtonArray(win, 50 , 50 , 500 , 500 , (2 , 2 ),
134138 border = 100 , texts = (' 1' , ' 2' , ' 3' , ' 4' )
135- )
139+ )
136140
137141run = True
138142while run:
@@ -185,10 +189,12 @@ A box for text input or display
185189import pygame
186190from pygame_widgets import TextBox
187191
192+
188193def output ():
189194 # Get text in the textbox
190195 print (textbox.getText())
191196
197+
192198pygame.init()
193199win = pygame.display.set_mode((1000 , 600 ))
194200
@@ -228,7 +234,6 @@ while run:
228234| fontSize | Size of text. | int | 20 |
229235| font | Font of text. | pygame.font.Font | Calibri
230236
231-
232237### Slider
233238
234239A slider for discrete numeric value selection
@@ -268,10 +273,10 @@ while run:
268273 pygame.display.update()
269274```
270275
271- As you can see, TextBox can be used to display text as well,
272- by not calling its listen method.
276+ As you can see, TextBox can be used to display text as well, by not calling its listen method.
273277
274278#### Optional Parameters
279+
275280| Parameter | Description | Type | Default |
276281| :---: | --- | :---: | :---: |
277282| min | Minimum value of the slider (left). | int or float | 0 |
@@ -286,52 +291,32 @@ by not calling its listen method.
286291### Dropdown
287292
288293``` Python
289-
290- from pygame_widgets import Dropdown, Button
291-
292294import pygame
295+ from pygame_widgets import Button, Dropdown
293296
294297pygame.init()
295298win = pygame.display.set_mode((400 , 280 ))
296- width, height = pygame.display.get_window_size()
297299
298300dropdown = Dropdown(
299- win,
300- 120 ,
301- 10 ,
302- 100 ,
303- 50 ,
304- name = " *color*" ,
301+ win, 120 , 10 , 100 , 50 , name = ' Select Color' ,
305302 choices = [
306- " Red" ,
307- " Blue" ,
308- " Yellow" ,
303+ ' Red' ,
304+ ' Blue' ,
305+ ' Yellow' ,
309306 ],
310- borderRadius = 3 ,
311- colour = pygame.Color(" green" ),
312- values = [1 , 2 , 3 ],
313- direction = " down" ,
314- textHAlign = ' left'
307+ borderRadius = 3 , colour = pygame.Color(' green' ), values = [1 , 2 , ' true' ], direction = ' down' , textHAlign = ' left'
315308)
316309
310+
317311def print_value ():
318312 print (dropdown.getSelected())
319313
314+
320315button = Button(
321- win,
322- 10 ,
323- 10 ,
324- 100 ,
325- 50 ,
326- text = " Print Value" ,
327- fontSize = 30 ,
328- margin = 20 ,
329- inactiveColour = (255 , 0 , 0 ),
330- pressedColour = (0 , 255 , 0 ),
331- radius = 5 ,
332- onClick = print_value,
333- font = pygame.font.SysFont(" calibri" , 10 ),
334- textVAlign = " bottom" ,
316+ win, 10 , 10 , 100 , 50 , text = ' Print Value' , fontSize = 30 ,
317+ margin = 20 , inactiveColour = (255 , 0 , 0 ), pressedColour = (0 , 255 , 0 ),
318+ radius = 5 , onClick = print_value, font = pygame.font.SysFont(' calibri' , 10 ),
319+ textVAlign = ' bottom'
335320)
336321
337322run = True
@@ -352,36 +337,42 @@ while run:
352337
353338 pygame.display.update()
354339```
355- This is a classic dropdown, but with a twist : if you right click on the top, it reset itself.
356- To get the current value of the dropdown, we use the ` getSelected() ` methods.
340+
341+ This is a classic dropdown, but with a twist: if you right-click on the top, it reset itself. To get the current value
342+ of the dropdown, we use the ` getSelected() ` methods.
357343
358344It returns:
359- - ` None ` if nothing is selected
360- - A string with the choice you selected if the optional arg ` value ` is not set
361- - if the optional arg ` value ` is set, we return the value corresponding to the choice.
362345
363- For the exemple above :
346+ - ` None ` if nothing is selected
347+ - A string with the choice you selected if the optional arg ` value ` is not set
348+ - If the optional arg ` value ` is set, we return the value corresponding to the choice.
349+
350+ For the example above:
364351
365352| Choice | Value |
366353| :---: | :---: |
367- | Red| 1 |
368- | Blue| 2 |
369- | Yellow| 3 |
354+ | Red | 1 |
355+ | Blue | 2 |
356+ | Yellow | 3 |
370357
371- #### Exemple
358+ #### Example
372359
373360![ ] ( images/dropdown.gif )
374361
375- #### Positional Parameters
362+ #### Mandatory Parameters
363+
364+ _ Note: Mandatory parameters must be supplied in order._
365+
376366| Parameter | Description | Type |
377367| :---: | --- | :---: |
378368| name | Main name of the dropdown | str |
379369| choices | Choices to display | list of str |
380370
381371#### Optional Parameters
372+
382373| Parameter | Description | Type | Default |
383374| :---: | --- | :---: | :---: |
384- | direction | Expension direction. Can be 'down', 'up', 'left' or 'right'. | str | down |
375+ | direction | Expansion direction. Can be 'down', 'up', 'left' or 'right'. | str | down |
385376| values | optional return value corresponding to the choices. Must be the same length as ` choices ` | list| a copy of choices|
386377| inactiveColour | Default colour when not pressed or hovered over. | (int, int, int) | (150, 150, 150) |
387378| pressedColour | Colour when pressed. | (int, int, int) | (100, 100, 100) |
@@ -400,8 +391,8 @@ For the exemple above :
400391
401392### Animations
402393
403- Create an animation by using the default Translate or Resize,
404- inheriting from AnimationBase, or using AnimationBase directly.
394+ Create an animation by using the default Translate or Resize, inheriting from AnimationBase, or using AnimationBase
395+ directly.
405396
406397#### Example Usage
407398
@@ -434,7 +425,6 @@ while run:
434425 pygame.display.update()
435426```
436427
437- Over 3 seconds, the width of the button was changed from 300 to 200 and
438- its height from 150 to 200. Since it is performed on a separate thread,
439- the button is still able to function during the animation.
428+ Over 3 seconds, the width of the button was changed from 300 to 200 and its height from 150 to 200. Since it is
429+ performed on a separate thread, the button is still able to function during the animation.
440430
0 commit comments