REPUBLIC OF THE PHILIPPINES

TECHNOLOGICAL UNIVERSITY OF THE PHILIPPINES

CAVITE CAMPUS
Carlos Q. Trinidad Avenue, Salawag, Dasmariñas City, Cavite, Philippines
Telefax: (046) 416-4920
Email: [email protected]| Website: www.tup.edu.ph

A Semi-Detailed Lesson Plan in

PyQt5 Interface and Widgets

Prepared by:

Princess Michaela Baleña

Student Teacher

Checked by:

Ms. Karen Nicole Ocampo

Cooperating Teacher
I. OBJECTIVES
At the end of the lesson, the students should be able to:
1.​ Identify the PyQt5 interface and widgets.
2.​ Value the importance of PyQt5 widgets in designing interactive and user-friendly interfaces.
3.​ Create an ordering interface collaboratively using various widget buttons and layouts with the
materials provided.

III. LEARNING ACTIVITIES

A.​ Preparatory Activities
1.​ Daily Routine
a.​ Greetings
Good day everyone, How was your day? Good to hear that,.. Now
b.​ Classroom Management
Before we start our discussion, make sure that did you already put your mobile device
on your bag at the back and Pick up some piece of paper under your chair, and make
sure that your area is CLEAN.

c.​ Prayer
Before we begin, everyone kidly stand up first and Ms. Apple, lead the prayer…
d.​ Checking Attendance ​
AlrightMs.Bea who are the abset today? ​
IF not, Good to hear that there is no absent today ​
IF MERON, Ms.BEa kindly send me a copy of their name who are the absent today.
Thank you!
e.​ Submit your Assignment
1. Did everyone already submit their assignment last time?
2.​ Review
​ What did we discuss last time alright good to hear that still remember the last topic last
time, and now before we begin to another discussion let’s have some game first.
3.​ Motivation
Activity: Guess the PICTURE

Instructions: Look at the picture and try to guess the correct icon. Raise your flag and say "QTPY!" before
answering the picture.

This game entitled “Guess the PICTURE, for the mechanics of this game… WHERE I will show you a a picture
and then once you guest the correct word of that particular picture you need to say QTPY while rasing your
hand. Alright​
​
Based on our game, what did you think class our next topic? Any guess? Other, designing, Maybe.. How about
additional guess Prado.. Any guess what do you think will be topic today… How about you migual since you
look like telling that you already guess our topic today… ​
​
Let’s combine your idea from designing and ddiscovering the widget or interface.. Today we will discuss the
PyQT5 Interface and Widget but before we begin to our discussion EVERYONE READ OUR GOAL
TODAY… ​
OBJECTIVE IBABA…
B.​ Presentation of the Lesson
1.​ Introduction
So to begin our discussion, CLASS OPEN YOUR LAPTOP AND YOUR QT DESIGNER APPLICATION TO
FOLLOW OPUR DISCUSSION…. ALRIGHT SO FIRST LET DEFINE WHAT IS PYQT5 INTERFACE
ANY ONE WHO WOULD LIKE TO READ?
What Is PyQT5 Interface?
➢​ The Qt5 interface refers to the set of tools and features provided by the Qt 5 framework for creating
graphical user interfaces (GUIs) for applications.Qt5 offers both traditional Qt Widgets and Qt Quick
(QML) technologies to design user interfaces
Using QT DESIGNER CLASS, you can create your own design for your own games or any applications app,
and here are some example of design app using qt designer, the right side its a Miggle words game, while the
RIGHT SIDE ITS A NUMBER PUZZLE GAME WHERE USING ARROW YOU NEED TO ARRANGED
THE SCRAMBLE NUMBER IN PROFER ALLIGNMENT.. FOR YOU TO FINISH THE GAME AS WELL
BASED OWN YOUR HOW QUICKLY YOU PLAY THOSE ARE YOUR SCORE. ​
​
BUT BEFORE WE PROCEED TO CREATING DESIGN FOR YOUR PROJECT FIRST LET’S QUICKLY
EXPLORE THE DIFFERENT PART OF QT DESIGN. SO FIRST IS THE “NEW FORM” ​

2.​ Lesson Profer

QT Designer Interface
1.​ New Form
➢​ In Qt Designer, the "New Form" is a dialog window that allows you to choose a template to start
creating a graphical user interface (GUI) layout for your application. Here’s the list of
templates/Forn:
ONCE YOU OPEN YOUR QT DESIGNER THIS IS
YOUR INTERFACE AND THE FIRST THING WILL
POP OP ON YOUR DEVICE IS NEW FORM OR
DIFFERENT TEMPLATE THAT IF YOU CHOOSE
ANY TEMPLATE CLASS YOU WILL NOTICE THAT
YOU CAN’T CLICK THE OTHER PART OF QT
DESIGNER, RIGHT? .. ALRIGHT GOOD.. NOW
CLASS SO WHAT IS NEW FORM CAN ANYONE
WHO W=LIKE RO READ…
●​ Dialog with Buttons Bottom:
For confirmation dialogs with
buttons at the bottom.
-​ MOSTLY USE FOR
START THE GAME
THE MOSTLY YOU
CAN NOTICE THIS
ONE IN BOTTOM OF YOUR APPLICATION.
●​ Dialog with Buttons Right: For settings or options dialogs with buttons on the right
side.
 -​ WHILE DIALOG WITH RIGHT BUTTON IN YOUR DEVICE, THIS IS
WHEN YOU EDIT THE VOLUME OR SOUND EFFECT AS WELL THE
BRIGHTNESS OF YOUR DEVICE..
●​ Dialog without Buttons: Blank dialog form for custom designs without default buttons.-
-​ WHILE DIALOG BUTTON MOSTLY USE FOR HELP OR INSTRUCTION
OF THE GAME THAT NO NEED ANY TRIGGER ACTION OF A
BUTTON.
●​ Main Window: Comprehensive application window with menu bar, toolbar, and status
bar.
●​ Widget: Basic building block for custom components or embedding in other forms
-​ THIS WIDGET IS MOSTLY USE FOR EMBEDDING IN OTHER FORM OR
TEMPLATES AND ​
AND TODAY WE WILL USE THE MAIN WINDOW… WHERE IF YOU
CHOOSE THE MAIN WINDOW YOU NEED TO CLICK FIRST THE MAIN
WINDOW SHOULD BE HIGHLTED LIKE THIS AND CLICK THE
CREATE BUTTON.
-​ ONCE YOU ARE DONE CLICKING THE CREATE BUTTON THIS IS
YOUR MAIN WINDOW SO WHY DO WE NEED TO USE THIS
TEMPLATE EXCEPT OTHER TEMPLATES?.. ANYONE FROM THE
CLASS WHO WOULD LIKE TO READ FIRST THE MAIN WINDOW.. ​
​
FROM THE WORD COMPREHENSIVE TEMPLATE THIS MOSTLY USE
FOR CREATE AND DESIGNING FOR YOUR GAME OR EVEN MENU
ORDERING…
-​ AND NOW FOR PART OF QT DESIGNER IS THE.. TOOL BAR ​

Figure No.1 New Form

2.​ Tool Bar
➢​ A toolbar in Qt Designer is a graphical user interface element that provides quick access to
commonly used tools and actions.
➢​ It contains icons and buttons for tasks like creating new projects, opening files, or aligning
widgets within the design interface. It streamlines workflow and improves user productivity by
providing direct shortcuts to specific tasks.

Figure No.2 Tool Bar

let me explain the toolbar. The toolbar contains icons and buttons for common tasks,
such as creating new projects, opening files, and aligning widgets. It's an essential part of
Qt Designer because it helps you quickly access the tools you need,

3.​ Object Inspector

➢​ The Object Inspector in Qt Designer is a panel that provides a hierarchical view of all objects
 Figure No.3 Object Inspector
IN Qt Designer class is a panel that displays all the widgets and layouts in your current
form, organized in a list. It allows you to quickly navigate and manage the elements of
your design.

4.​ Property Editor

➢​ The Property Editor in Qt Designer allows users to modify the properties of UI elements
(widgets) such as text, font, size, color, and layout. However, it comes with some limitations,
particularly regarding the fonts and styles available.

YOU
Figure No.4 Property Editor
While property editor, who would like to read
And using proferty editor class, YOU CAN EDIT YOUR FONT AND TEXT WHATEVER FONT DO YOU
WHAT AS MUSH AS POSSIBLE ITS READABLE. HOWOVER IN QT DESIGNER LIMITED OF FONT
THAT ARE AVAILABLE THAT WHY YOU NEED TO DOWNLOAD FIRST YOUR FONT THAT YOU
WANT AND THEN SAME WITH MICROSFT WHERE IT EASY TO CONNECR THE FONT THAT YOU
DOWNLOAD…

IN THE RIGHT SIDE CORNER IS THE WIDGET BOX.. SO WHAT IS WDIGETS BOX..
5.​ Widget Box

➢​ The Widget Box in Qt Designer is a panel containing various widgets and layouts that you can
drag and drop into your form to design the user interface (UI). It provides building blocks like
buttons, labels, and input fields, along with layout options to organize these widgets within the
interface.
You can notice class there a lot of widget that you can use on creating applications but today we will focus on 3
part of widget box which is layout, spacers and button so clas first let look first the layout how many layout do
we have based on your device?
We have four layout so what are those four layout.

5.1 Layouts

➢​ Layouts are used to arrange widgets within a container in a structured way. Here are the four (4)
types of layouts:

1.​ Vertical Layout -

➢​ Stacks widgets vertically.
➢​ Useful when you want to stack elements like buttons or labels one on top of the other.
For example, a list of settings options where each row contains a single widget.
2.​ Horizontal Layout
➢​ Aligns widgets horizontally.
➢​ Useful for placing widgets side by side, such as a row of buttons (e.g., "OK" and
"Cancel") or input fields with labels.
3.​ Grid Layout
➢​ Organizes widgets in a grid of rows and columns.
➢​ deal for creating a structured form with multiple rows and columns, like a calculator
interface or a menu where items are laid out in a matrix.
GRID LAYOUT USE FOR A GAME WITH PUZZLE OR EVEN LIKE SODUKO
GAME ARE FAMILIAR WITH SODUKO GAME? SO EVEN CALCULATOR
THOSE ARE EXAMPLE OF GRID LAYOUT, WHAT ABOUT FORM LAYOUT…
4.​ Form Layout:
➢​ Two-column layout for labels and fields, ideal for forms.

"The labels ask for personal details like name, address, and phone number, while the
fields are where the user inputs their information. For example, if the label asks for a
name or address, the user will input their name or address in the corresponding field.
➢​ Commonly used for data entry forms, where the left column contains labels and the
right column contains corresponding input fields, creating a clean, readable structure.
AGAIN WHAT ARE THE FOUR LAYOUT WITHOUT LOOKING TO OUR IMS AND YOUR
DEVICE. ?
​
WHAT ABOUT SPACER, ANYONE WHO WOULD LIKE TO READ???
5.2 Spacers
➢​ Spacers are elements used to create empty space between widgets or components within a
layout. There are two (2) types of spacers:
WHICH WE HAVE….
1.​ Horizontal Spacer
➢​ A horizontal spacer is a blank area that stretches horizontally to create space between
components. It essentially adds horizontal space within a layout to separate elements
without adding any visual content. It will expand to fill the available width.
2.​ Vertical Spacer
➢​ A vertical spacer functions similarly to a horizontal one, but it stretches vertically to
create space between components. It adds vertical gaps without any visual content.
 ANYONE WHO WOULD LIKE TO READ THE HORIZONTAL SPACERS AND
VERTICAL SPACERS… SO HERE ARE SOEM EXAMPLE OF SPACERS AND THIS IS
HOW TO INSERT THE SPACERS… USING DIFFERENT LAYOUT.\
"Instead of placing the widgets closely together, we will use spacers to add space
between each widget.".

Figure No.5 Widget Box

5.3 Buttons
SO NEXT IS BUTTON RIGHT… SO BASED
ON YOUR DEVICE HOW MANY BUTTON DO WE
HAVE? WE HAVE 6 GOODS. BUT TODAY WE
WILL FOCUS ON 4 TYOES OF BUTTON THAT
MOSTY USE FOR CREATING APPLICATION .,
➢​ In Qt Designer, buttons are interactive
components used to trigger actions or
events in your application. Here’s a
breakdown of the different types of
buttons

1.​ Push Button

➢​ A standard button that, when
clicked, triggers a specific
action.
FOR EXAMPLE CLASS OF PUSH BUTTON, IS
THE SAVE ORDER, IN YOUR FACE ACCOUNT
LOG IN BUTTON AE EXAMPLE OF PUSH
BUTTON REMEMBER FROM THE WORD
OUSH…

2.​ Tool Button

➢​ A button used to represent tool actions, often with icons or small text labels.
TOOL BAR CLASS, REMEMBER THAT SMALL ICON OR TEXT FOR EXAMPLE IN YOUR GOOGLE
DOCS OR MICROSOFT WORDS THERE’S A LOT OF EXAMPLE OF TOOLBUTTON FOR INSTANCES
REDU AND UNDO BUTTON IS EXAMPLE OF ICON OR TOOL BUTTON… WHAT ABOUT
ADDITIONAL TOOL BUTTON THAT YOU CAN NOTICE IN MICROSOFT WORDS HAVE A SMALL
ICON.. YES ITS A BOLD AND ITALIC AND EVEN UNDERLIND ARE EXAMPLE OF TOOL BUTTON
3.​ Check Button (Checkbox)
➢​ A button that allows users to make binary choices (checked or unchecked).​
WHERE IN YOU CAN UNCHECKED OR CHECKED THE ITEM OR CLASS JUST
REMEMBER CHECK BUTTON YOU CAN CLICK 2 OR MORE BUTTON OR
MUIPLE CLICK IN THAT PARTICULAR BUTTON FOR EXAMPLE ADDS ON IS
THE BEST EXAMPLE FOR CHECK BUTTON ..
4.​ Radio Button
➢​ A button that is part of a group, where only one option can be selected at a time.
 ​
NOTE FOR RADIO BUTTON CLASS REMEMBER THAT YOU CAN ONLY
CLICK ONE…. BECAUSE YOU HAVE DIFFERENT CHOICE LIKE IN GOOGLE
FORM YOU ARE ASKING MALE OR FEMALE, WHICH ONE DO YOU CHOICE?
ALRIGHT WHERE YOU NEED TO CHOICE ONY ONE BUT CLASS AS YOU
CAN NOTICE LOOK LIKE RADIO BUTTON AND PUSH BUTTON ARE SIMPLE,
BUT LET ME TELL YOU THE DIFFEREN WHICH CLAS, PUSH BUTTON IS FOR
SAVE ORDER LOG IN BUTTON STAR THE GAME BUTTON OR STOP THAT
GAME. UNLIKE RADIO BUTTON CLASS YOU HAVE DIFFERENT CHOICES
LIKE CHOOSE A CHARACTER FOR YOUR GAME IS EXAMPLE OF RADIO
BUTTON BUT YOU ONLY CHOICE ONLY ONE… ALRIGHT? ​
​
NOW LETS TRY TO MAKE OF PIZZA MENU USING LAYOUT, BUTTON AND
SPACERS.. SO CLASS WATCH THE VIDEO…​
​

3.​ Application ​
Group Activity: Widget Box Interface Creation
Task:
1.​ Each group will be assigned to a team: Pink, Yellow, Green, Red, Violet, or black Team,
and each member will assigned a task
2.​ Design a Menu Interface
3.​ 5 minutes ONLY. finish or NOT finish you need to submit your project to flash drive
provided. (SCREENSHOT ONLY)
DONT FORGET TO COMPLET THE WIDGET BOX THAT WE DISCUSS TODAY… CRITERIA..
AND TEAM STRUCTURE…
​ Radio buttons - users select size and flavor.
​ Check buttons - for additional
toppings or add-ons.
​ Include layouts (vertical,
horizontal, or grid) and spacers to
organize your design.
​ Add a Save button for finalizing
selections.

Figure No.6 Criteria for activity

Team Structure:

To complete this quickly and efficiently, divide tasks as follows:

​ Interface Conceptualizer - Responsible for understanding and outlining what the final
interface should look like.
​ Sketch Artist - Draws a quick layout sketch as a reference for the team.
 ​ Interface Builders (2 members) - Work together to implement the design in Qt Design

SA LAST 2 MINUTES…. So class, please give me a 1/4 sheet of paper with the list of your group
members along with your team or menu. The first three groups to submit the 1/4 sheet of paper do not
need to present their group activity but must complete their assigned task and later submit it to the
provided Google Drive. The last group to submit their 1/4 sheet of paper will present their group
activity."
PAG LAST 3 MINUTES… REMOVE IMS…..​

4. Generalization
In this lesson, we studied at the PyQt5 interface and Widget Box, demonstrating to
learners how to create a GUI layout using the interface functions and different widgets. Through
practical experience with key features such as buttons, spacers, and layouts, they learned how to
use Qt Designer to construct interactive and structured pieces. Students put these ideas to use in
a cooperative group project by creating a menu interface, showcasing buttons, spacers, and
layout structures in practical settings, and highlighting the usefulness of PyQt5 in GUI creation.​
​
LET’S HAVE SOME RECAPS FIRST HOW MANY WIDGET BOX DID WE DISCUSS
TODAY? WHAT ARE THOSE? WHAT ARE THE FOUR LAYOUT? WHAT ABOUT
SPACERS WHAT ABOUT BUTTON… AND THE INTERFACE OF QT DESIGNER.. TOOL
BAR AND OBJECT INSPECTIR.. AND PROPERTY EDITOR.. AND NEW FORM.. ​
IV. Evaluation
Multiple Choice
CLASS DON’T FORGET TO CLOSE YOUR LAPTOP PUT YOUR NOTEBOOK AND YELLOWPAD
UNDER YOUR TABLE AND ONLY BALLPEN AND TEST QUESTIONNAIRE ON YOUR DESK..
UNDERSTAND.. LET ME CHECK FIRST.. OKAY ​
​
GET ONE PAST… ​
​
MAKE SURE CLASS TO NO ERASURE… ​
DON’T FORGET TO WRITE YOUR NAME AND EVERYONE BEFORE START ANSWERING
YOUR QUIZ READ THE DIRECTIONS… ​
BEFORE ANSWER THE QUIZ EVERYONE RAISE YOUR HANDS… ​

Direction: Select the best answer for each question by choosing the letter (A, B, C, or D). Only one option is
correct. Encircle your answer. If you are unsure of an answer, make your best guess, and do not leave any
questions unanswered. You have only 5 minutes to finish this quiz.

1.​ This is a layout that Organizes widgets in a grid of rows and columns.
a.​ Horizontal Layout
b.​ Vertical Layout
c.​ Grid Layout
d.​ Form Layout
2.​ In Qt Designer, users can modify the properties of UI elements (widgets) such as text, font, size, color,
and layout.
a.​ Object Inspector
b.​ Property Editor
c.​ Object Editor
d.​ Property Inspector
 3.​ ___________ are interactive components used to trigger actions or events in your application.
a.​ Buttons
b.​ Layout
c.​ Spacers
d.​ Object Inspector
4.​ The normal button has the ability to start a specific action when it is clicked.
a.​ Tool button
b.​ Radio Button
c.​ Check Button
d.​ Push Button
5.​ Widgets are arranged in a systematic manner inside a container using _________.
a.​ Buttons
b.​ Layout
c.​ Spacers
d.​ Object Inspector
6.​ Elements called ______ are used to provide white space in a layout between widgets or other parts.
a.​ Buttons
b.​ Layout
c.​ Spacers
d.​ Object Inspector
7.​ In Qt Designer is a panel containing various widgets and layouts that you can drag and drop into your
form to design the user interface (UI)
a.​ Object Inspector
b.​ Widget Box
c.​ Wedgets Panel
d.​ Property Editor
8.​ Two-column layout for labels and fields, ideal for forms.
a.​ Form Layout
b.​ Vertical Layout
c.​ Grid Layout
d.​ Horizontal Layout
9.​ In Qt Designer, a __________ is a graphical user interface widget that offers easy access to frequently
used actions and tools.
a.​ Object Inspector
b.​ Widget Box
c.​ Toolbar
d.​ Property Editor
10.​ List of new forms or templates that include a status bar, toolbar, and menu bar in a comprehensive
application window.
a.​ Widget
b.​ Main Window
c.​ Dialog with Buttons Right
d.​ Dialog with Buttons Bottom

KEY TO CORRECTION
1.​ C 6. C
2.​ B 7. B
3.​ A 8. A
4.​ D 9. C
5.​ B 10. B
"Check your own paper, write 'Corrected by' along with your name and signature.​
Once you're done checking, write your score on the right side (out of 10).

Now, pass your paper to the center aisle and forward it while passing the papers in class.

So, class, are all the quiz papers here?

Who got a score of 10? 9? 8? 7? 6? 5 or below?

For those who scored 5 or below, make sure to improve next time on the next quiz!"

V. ASSIGNMENT

A.​ Follow-up Assignment

Title: Create a Design for Your Own STORE Interface
Instructions: Using Qt Designer, design a unique and creative
menu interface based on your chosen theme (e.g., food ordering,
travel booking, or clothing). Your design must include layouts,
spacers, and buttons. Focus on originality and creativity, creating
a menu interface that is visually appealing.
Submission Details:
❖​ Submission Type:
Submit a screenshot of your design in Qt Designer,
renamed in this format:
​ SurnameFirstname_QtWidgets.png or jpg
Figure No.7 Criteria for Follow-up
and Advance Assignment
​ Upload the file to Google Classroom.
❖​ Deadline: December 6, 2024, by 12:00 PM.​
​
"For your take-home assignment, first, you need to create your own store interface. What
I want to see in your assignment is the complete set of widgets we discussed, especially the
layout, spacers, and buttons. You should be more creative this time, as this is an individual
assignment. I want to see how creative you are. Our criteria for grading are as follows:
●​ Creativity: 45%
●​ Originality: 40%
●​ On-time submission: 15%

This adds up to a total of 100%. So class, make sure you submit on time. If you submit your assignment
late, your score will be below 85%.

For submission, kindly take a screenshot of your interface with your design and object inspector visible.
Rename your screenshot to your surname, followed by your first name, then underscore
"QTDESIGNER_WIDGETS." You can submit your assignment as either a PNG or JPG file. The
deadline for submission is December 15th, by 12 PM ONLY. Understood, class?"

B.​ Advance Assignment

 Instruction:, study the other categories in the Widget Box that were not yet discussed, specifically Item
Views (Model-Based), Item Widgets (Item-Based), Container Widgets, Input Widgets, and Display
Widgets. Choose at least 5 widgets from these categories, explore their usage, and try creating them in
Qt Designer. Provide a short explanation of each widget, including its purpose and how it is used. If
possible, give an example or application scenario for each widget.

Submission Details:
❖​ Submission Type:
Document your findings and examples in a PDF file. Rename your file as:
​ SurnameFirstname_QtDesignerWidgets.pdf
❖​ Submission Platform:​
​ Upload your PDF file to Google Classroom.
❖​ Deadline: December 05, 12pm

Additional Assignment, Class:

Study the other parts of widgets. For this assignment, you need to choose 5 widgets except those widgets
we’ve already discussed. In your assignment, tell me the usage of each widget you selected, where you can
use it, and provide an example for each.

Submit your assignment in PDF format, with the following file name format:​
[Surname][First Name]_qtdesignerwidgets.pdf (e.g., DoeJohn_qtdesignerwidgets.pdf).

The submission deadline is the same as the first assignment: December 15th by 12 PM only.

Understood, class?

YOU CAN USE THIS REFERENCES CLASS FOR YOUR ASSIGNMENT AS WELL ADDITIONAL
REVIEW FOR OUR DISCUSS TODAY. SO CLASS BEFORE WE END OUR DISCUSSION TODAY I have
some short message to everyone dear student, never stop learning because life never stop teaching you. GOOD
BYE CLASS SEE YOU WHEN I SEE YOUR DON’T FORGET TO CLEAN YOUR AREA BEFORE YOUR
LEAVE OUR CLASSROOM.. AND CLASS DISMISS YOU MAY NOW GOW WITH NEXT CLASS. ​
​

References
Qt Widgets Designer's Widget Editing Mode | Qt Widgets Designer Manual. (n.d.). Qt Documentation., from

https://doc.qt.io/qt-6/designer-widget-mode.html#the-object-inspector