|
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