Create GUI App with PyQt5 - PART 1
177.1 هزار بار بازدید -
3 سال پیش
-
In this video we'll use
In this video we'll use PyQt5 to create the graphic interface of "Who Wants to be a Programmer???";
a computer science trivia game, which determines who is truly worthy of the title!
We'll design the first two frames of this game and learn how to switch from one to the other effortlessly.
We'll also discuss in detail all the important widgets (text, image, button) , we'll go over styling and layout commands, as well as adding interactivity to clickable elements (this is probably my favourite part of PyQt5 - it allows you to create hover events and utilize your pro CSS skills to their full extent!).
This is PART 1 of the complete project, where we focus on creating the GUI.
In the upcoming PART 2, we will load a database of trivia questions and connect all its functionality to our interface.
😍 WATCH PYQT5 TRIVIA APP - PART 2 😍
Open Trivia Database for PyQt5 GUI Ap...
********************************************
DOWNLOAD STARTER FILES:
https://github.com/MariyaSha/TriviaGa...
PyQt5 Documentation:
https://www.riverbankcomputing.com/st...
COMPLETE PROJECT:
https://github.com/MariyaSha/TriviaGame
MY NEW BLOG:
https://www.mariyasha.com/
(also pythonsimplified.ca)
CONNECT ON LINKEDIN:
LinkedIn: mariyasha888
FOLLOW ON INSTAGRAM:
Instagram: mariyasha888
************************************
⭐⭐⭐ TIMESTAMPS ⭐⭐⭐
************************************
00:00 - Intro
00:59 - Starter files walkthrough
************************************
1. CREATE WINDOW OBJECT
************************************
01:15 - initialize GUI app
01:31 - create QWidget window
01:46 - set window title
02:09 - set window width
02:22 - set window background color
02:58 - open window
03:05 - terminate app
************************************
2. RUN APP WITH TERMINAL
************************************
03:25 - open Anaconda or other terminal
03:29 - activate working environment
03:35 - change directory
03:57 - run app
04:12 - initialize grid layout
04:23 - apply grid layout
************************************
3. CREATE LOGO WIDGET
************************************
04:36 - load png image
05:00 - create label widget
05:10 - place image inside label
05:23 - place logo on grid
05:48 - set window position (fix)
06:36 - align label to center
06:56 - set label margin
************************************
4. CREATE BUTTON WIDGET
************************************
07:33 - create button widget
07:53 - set button cursor
08:32 - set button CSS style
10:05 - place button on grid
11:09 - set button padding and margin
12:02 - mouse hover event
************************************
5. CREATE FRAME FUNCTION
************************************
13:10 - create frame function
13:39 - call frame function
13:52 - create global dictionary of empty lists
14:40 - append local widgets to global dictionary
15:12 - place global variables on the grid
************************************
6. DESIGN FRAME 2
************************************
15:55 - define frame 2 function
16:09 - create text widget
16:53 - create wrapping text widget
17:36 - set word wrap
18:45 - place label on grid
19:26 - set column span
19:58 - fix typos and parameters
************************************
7. CREATE IDENTICAL BUTTONS
************************************
20:28 - create a button widget
21:05 - store button widget in a function
21:51 - return button from function
22:09 - add buttons to global dictionary
22:18 - call button function many times
23:17 - customize parameters for each button
24:20 - update function call with new parameters
************************************
8. SWITCH FRAMES
************************************
26:02 - define callback function
26:13 - hide all widgets
26:43 - reset global dictionary
27:49 - button callback
28:23 - switch frames continuously
************************************
29:54 - THANKS FOR WATCHING!
************************************
#python #pythonprogramming #learnpython #creategui #gui #graphicuserinterface #pythontutorial #programming #createapp #createpythonapp #interface #designinterface
a computer science trivia game, which determines who is truly worthy of the title!
We'll design the first two frames of this game and learn how to switch from one to the other effortlessly.
We'll also discuss in detail all the important widgets (text, image, button) , we'll go over styling and layout commands, as well as adding interactivity to clickable elements (this is probably my favourite part of PyQt5 - it allows you to create hover events and utilize your pro CSS skills to their full extent!).
This is PART 1 of the complete project, where we focus on creating the GUI.
In the upcoming PART 2, we will load a database of trivia questions and connect all its functionality to our interface.
😍 WATCH PYQT5 TRIVIA APP - PART 2 😍
Open Trivia Database for PyQt5 GUI Ap...
********************************************
DOWNLOAD STARTER FILES:
https://github.com/MariyaSha/TriviaGa...
PyQt5 Documentation:
https://www.riverbankcomputing.com/st...
COMPLETE PROJECT:
https://github.com/MariyaSha/TriviaGame
MY NEW BLOG:
https://www.mariyasha.com/
(also pythonsimplified.ca)
CONNECT ON LINKEDIN:
LinkedIn: mariyasha888
FOLLOW ON INSTAGRAM:
Instagram: mariyasha888
************************************
⭐⭐⭐ TIMESTAMPS ⭐⭐⭐
************************************
00:00 - Intro
00:59 - Starter files walkthrough
************************************
1. CREATE WINDOW OBJECT
************************************
01:15 - initialize GUI app
01:31 - create QWidget window
01:46 - set window title
02:09 - set window width
02:22 - set window background color
02:58 - open window
03:05 - terminate app
************************************
2. RUN APP WITH TERMINAL
************************************
03:25 - open Anaconda or other terminal
03:29 - activate working environment
03:35 - change directory
03:57 - run app
04:12 - initialize grid layout
04:23 - apply grid layout
************************************
3. CREATE LOGO WIDGET
************************************
04:36 - load png image
05:00 - create label widget
05:10 - place image inside label
05:23 - place logo on grid
05:48 - set window position (fix)
06:36 - align label to center
06:56 - set label margin
************************************
4. CREATE BUTTON WIDGET
************************************
07:33 - create button widget
07:53 - set button cursor
08:32 - set button CSS style
10:05 - place button on grid
11:09 - set button padding and margin
12:02 - mouse hover event
************************************
5. CREATE FRAME FUNCTION
************************************
13:10 - create frame function
13:39 - call frame function
13:52 - create global dictionary of empty lists
14:40 - append local widgets to global dictionary
15:12 - place global variables on the grid
************************************
6. DESIGN FRAME 2
************************************
15:55 - define frame 2 function
16:09 - create text widget
16:53 - create wrapping text widget
17:36 - set word wrap
18:45 - place label on grid
19:26 - set column span
19:58 - fix typos and parameters
************************************
7. CREATE IDENTICAL BUTTONS
************************************
20:28 - create a button widget
21:05 - store button widget in a function
21:51 - return button from function
22:09 - add buttons to global dictionary
22:18 - call button function many times
23:17 - customize parameters for each button
24:20 - update function call with new parameters
************************************
8. SWITCH FRAMES
************************************
26:02 - define callback function
26:13 - hide all widgets
26:43 - reset global dictionary
27:49 - button callback
28:23 - switch frames continuously
************************************
29:54 - THANKS FOR WATCHING!
************************************
#python #pythonprogramming #learnpython #creategui #gui #graphicuserinterface #pythontutorial #programming #createapp #createpythonapp #interface #designinterface
3 سال پیش
در تاریخ 1399/12/22 منتشر شده
است.
177,100
بـار بازدید شده