|
1 |
| -from goopylib.imports import * |
2 |
| - |
3 |
| -""" |
4 |
| -textures have been designed by Freepik, https://www.freepik.com/free-vector/modern-web-design-button-collection-with-flat-design_3099377.htm |
5 |
| -
|
6 |
| -This is a very simple program that creates a modern, light, login page which demonstrates the |
7 |
| -capabilities of using Checkboxes, Entries, and Buttons. |
8 |
| -
|
9 |
| -To run this, simply download the entire folder in which this is placed, and run the program! |
10 |
| -
|
11 |
| -""" |
12 |
| - |
13 |
| -# Creating a window |
14 |
| -# We set the dimensions relative to the height of the screen because resolutions across screen can vary. |
15 |
| -window = Window(title="Example GUI Design", width=800, height=1000) |
16 |
| - |
17 |
| -background = Checkbox(Image([400, 500], "RegisterPage.png"), |
18 |
| - Image([400, 500], "LoginPage.png"), autoflush=False).draw() # This is the background image |
19 |
| - |
20 |
| -# Creating the entry boxes |
21 |
| -email_entry = Entry([360, 465], 24, fill=WHITE, font_face="century gothic", justify="left", font_colour=LIGHT_GREY, |
22 |
| - font_size=30, prompt_text="Email Address").draw() |
23 |
| -password_entry = Entry([360, 600], 24, fill=WHITE, font_face="century gothic", justify="left", font_colour=LIGHT_GREY, |
24 |
| - font_size=30, prompt_text="Password", password=True).draw() |
25 |
| - |
26 |
| -# Creating the options tab. The Enter & Settings button are checkboxes too because we want to display different textures_other based on 2 states: register or signin |
27 |
| -# A checkbox takes 2 graphics: true & false |
28 |
| - |
29 |
| -# Here, we specify the first graphic (true) to be a button. A button also takes in a graphic to display which can be any other Graphics Object. |
30 |
| -# The 2nd parameter of the button (optional) is the graphic to display while hovering. In this case, we take the same image and resize it to 102% |
31 |
| -options_tab = Checkbox(Button(Image([415, 320], "OptionsTab-Register.png"), |
32 |
| - Image([415, 320], "OptionsTab-Register.png").resize_factor(1.02)), |
33 |
| - |
34 |
| - # The false graphic is very similar |
35 |
| - Button(Image([415, 320], "OptionsTab-SignIn.png"), |
36 |
| - Image([415, 320], "OptionsTab-SignIn.png").resize_factor(1.02)), layer=1).draw() |
37 |
| - |
38 |
| -# Setting autoflush to false for the Checkbox means that it will not automatically update its state (go from True->False, or vice-versa) |
39 |
| -# We want this because we want to control the state to be that of the options page. |
40 |
| -# If the options page is True (Register Page) then this should be Register Button, if it is False, this should be the Login Button |
41 |
| - |
42 |
| -enter_button = Checkbox(Button(Image([365, 750], "RegisterButton.png"), |
43 |
| - Image([365, 750], "RegisterButton.png").resize_height_factor(1.05)), |
44 |
| - |
45 |
| - Button(Image([365, 750], "LoginButton.png"), |
46 |
| - Image([365, 750], "LoginButton.png").resize_height_factor(1.05)), |
47 |
| - autoflush=False, layer=1).draw() |
48 |
| - |
49 |
| -settings_button = Checkbox(Button(Image([698, 750], "SettingsButton-Light.png"), |
50 |
| - Image([698, 750], "SettingsButton-Light.png").resize_height_factor(1.05)), |
51 |
| - |
52 |
| - Button(Image([698, 750], "SettingsButton-Dark.png"), |
53 |
| - Image([698, 750], "SettingsButton-Dark.png").resize_height_factor(1.05)), |
54 |
| - autoflush=False, layer=1).draw() |
55 |
| - |
56 |
| -# We are creating a blank text object to display information to the user if needed |
57 |
| -info_text = Text([400, 850], "", font_size=15, font_face="century gothic", font_colour=DARK_NAVY_BLUE, layer=1).draw() |
58 |
| - |
59 |
| -next_page = "Home Page" |
60 |
| - |
61 |
| -# The mainloop |
62 |
| -while True: |
63 |
| - background.set_state(options_tab.get_state()) |
64 |
| - enter_button.set_state(options_tab.get_state()) # Updating the textures_other of these checkboxes to be that of the OptionsTab |
65 |
| - settings_button.set_state(options_tab.get_state()) |
66 |
| - |
67 |
| - mouse_pos = window.check_left_mouse_click() # Getting the position of a mouse click if there was one |
68 |
| - |
69 |
| - if enter_button.is_clicked(mouse_pos): # Checking if the enter button was clicked |
70 |
| - email = email_entry.get_text() |
71 |
| - password = password_entry.get_text() |
72 |
| - if email != "Email Address" and password != "Password": # Checking if the details are valid. |
73 |
| - break |
74 |
| - else: |
75 |
| - info_text.set_text("Invalid Details Entered...") # If the details are invalid, we tell the user! |
76 |
| - |
77 |
| - elif settings_button.is_clicked(mouse_pos): |
78 |
| - next_page = "Settings Page" |
79 |
| - break |
80 |
| - |
81 |
| - window.update() # Updating the window |
82 |
| - |
83 |
| -window.close() # Closing the window |
84 |
| - |
85 |
| -if next_page == "Home Page": |
86 |
| - print( |
87 |
| - f"User has {['Signed-In', 'Registered'][enter_button.get_state()]} with the email: {email} and password: {password}") |
88 |
| -else: |
89 |
| - print("Settings Page") |
| 1 | +from goopylib.imports import * |
| 2 | + |
| 3 | +""" |
| 4 | +textures have been designed by Freepik, https://www.freepik.com/free-vector/modern-web-design-button-collection-with-flat-design_3099377.htm |
| 5 | +
|
| 6 | +This is a very simple program that creates a modern, light, login page which demonstrates the |
| 7 | +capabilities of using Checkboxes, Entries, and Buttons. |
| 8 | +
|
| 9 | +To run this, simply download the entire folder in which this is placed, and run the program! |
| 10 | +
|
| 11 | +""" |
| 12 | + |
| 13 | +# Creating a window |
| 14 | +# We set the dimensions relative to the height of the screen because resolutions across screen can vary. |
| 15 | +window = Window(title="Example GUI Design", width=800, height=1000) |
| 16 | + |
| 17 | +background = Checkbox(Image([400, 500], "RegisterPage.png"), |
| 18 | + Image([400, 500], "LoginPage.png"), autoflush=False).draw() # This is the background image |
| 19 | + |
| 20 | +# Creating the entry boxes |
| 21 | +email_entry = Entry([360, 465], 24, fill=WHITE, font_face="century gothic", justify="left", font_colour=LIGHT_GREY, |
| 22 | + font_size=30, prompt_text="Email Address").draw() |
| 23 | +password_entry = Entry([360, 600], 24, fill=WHITE, font_face="century gothic", justify="left", font_colour=LIGHT_GREY, |
| 24 | + font_size=30, prompt_text="Password", password=True).draw() |
| 25 | + |
| 26 | +# Creating the options tab. The Enter & Settings button are checkboxes too because we want to display different textures_other based on 2 states: register or signin |
| 27 | +# A checkbox takes 2 graphics: true & false |
| 28 | + |
| 29 | +# Here, we specify the first graphic (true) to be a button. A button also takes in a graphic to display which can be any other Graphics Object. |
| 30 | +# The 2nd parameter of the button (optional) is the graphic to display while hovering. In this case, we take the same image and resize it to 102% |
| 31 | +options_tab = Checkbox(Button(Image([415, 320], "OptionsTab-Register.png"), |
| 32 | + Image([415, 320], "OptionsTab-Register.png").resize_factor(1.02)), |
| 33 | + |
| 34 | + # The false graphic is very similar |
| 35 | + Button(Image([415, 320], "OptionsTab-SignIn.png"), |
| 36 | + Image([415, 320], "OptionsTab-SignIn.png").resize_factor(1.02)), layer=1).draw() |
| 37 | + |
| 38 | +# Setting autoflush to false for the Checkbox means that it will not automatically update its state (go from True->False, or vice-versa) |
| 39 | +# We want this because we want to control the state to be that of the options page. |
| 40 | +# If the options page is True (Register Page) then this should be Register Button, if it is False, this should be the Login Button |
| 41 | + |
| 42 | +enter_button = Checkbox(Button(Image([365, 750], "RegisterButton.png"), |
| 43 | + Image([365, 750], "RegisterButton.png").resize_height_factor(1.05)), |
| 44 | + |
| 45 | + Button(Image([365, 750], "LoginButton.png"), |
| 46 | + Image([365, 750], "LoginButton.png").resize_height_factor(1.05)), |
| 47 | + autoflush=False, layer=1).draw() |
| 48 | + |
| 49 | +settings_button = Checkbox(Button(Image([698, 750], "SettingsButton-Light.png"), |
| 50 | + Image([698, 750], "SettingsButton-Light.png").resize_height_factor(1.05)), |
| 51 | + |
| 52 | + Button(Image([698, 750], "SettingsButton-Dark.png"), |
| 53 | + Image([698, 750], "SettingsButton-Dark.png").resize_height_factor(1.05)), |
| 54 | + autoflush=False, layer=1).draw() |
| 55 | + |
| 56 | +# We are creating a blank text object to display information to the user if needed |
| 57 | +info_text = Text([400, 850], "", font_size=15, font_face="century gothic", font_colour=DARK_NAVY_BLUE, layer=1).draw() |
| 58 | + |
| 59 | +next_page = "Home Page" |
| 60 | + |
| 61 | +# The mainloop |
| 62 | +while True: |
| 63 | + background.set_state(options_tab.get_state()) |
| 64 | + enter_button.set_state(options_tab.get_state()) # Updating the textures_other of these checkboxes to be that of the OptionsTab |
| 65 | + settings_button.set_state(options_tab.get_state()) |
| 66 | + |
| 67 | + mouse_pos = window.check_left_mouse_click() # Getting the position of a mouse click if there was one |
| 68 | + |
| 69 | + if enter_button.is_clicked(mouse_pos): # Checking if the enter button was clicked |
| 70 | + email = email_entry.get_text() |
| 71 | + password = password_entry.get_text() |
| 72 | + if email != "Email Address" and password != "Password": # Checking if the details are valid. |
| 73 | + break |
| 74 | + else: |
| 75 | + info_text.set_text("Invalid Details Entered...") # If the details are invalid, we tell the user! |
| 76 | + |
| 77 | + elif settings_button.is_clicked(mouse_pos): |
| 78 | + next_page = "Settings Page" |
| 79 | + break |
| 80 | + |
| 81 | + window.update() # Updating the window |
| 82 | + |
| 83 | +window.close() # Closing the window |
| 84 | + |
| 85 | +if next_page == "Home Page": |
| 86 | + print( |
| 87 | + f"User has {['Signed-In', 'Registered'][enter_button.get_state()]} with the email: {email} and password: {password}") |
| 88 | +else: |
| 89 | + print("Settings Page") |
0 commit comments