Building Desktop Applications with Python

Are you ready to start building your own desktop applications?

You've landed on the right video.

This is the course for you.

Over the next seven hours, we are going to be building five interactive applications with

Python.

This course is designed for those wanting to take their Python skills up a level and learn

Python, GUIs, or graphical user interfaces.

You're going to be exploring core technologies in Python, like the powerful PiQD framework

and SQL in map plot live, just to name a few.

Well without further ado, I don't want to keep you guys waiting.

Let's start building apps.

It's why you're here.

Are you ready?

Because I'm ready.

Let's dive in.

Welcome guys to another code with Josh special.

For super obvious reasons, I'm Josh.

If you guys don't want to hear me ramble out for the next few minutes, it is going to be

beneficial.

Here's the timestamp that just jumps into the course.

You can check that out.

But, as I mentioned, we're going to be building five interactive apps, a starter app,

a calculator app, expense tracker, an image editor, as well as an interest rate calculator

using map plot live, SQL.

Guys, this course is hosted absolutely free, right?

Show some love.

Smash that like button and subscribe, comment and engage.

Because that does help my course reach more students around the world, okay?

That is your way you can show support.

And guys, the first link in the description will use the links, okay?

But I'm hosting this course on my own platform for you guys, absolutely free.

Over there is the community, all my other free resources, all right?

So to show your support, just use the links in the description, all right?

Okay, enough chit chat.

Let's just jump into the course.

I'm really excited.

I hope you are, too.

Hi there, and welcome to our course.

Before we get started, I'd like to kick off my courses by going over the course structure

and what you can expect in this course.

Let's jump in and let's take a look.

Our initial overview is you can expect a project-based course

as this allows you to build your skills in a way that keeps you going,

but also challenges you and you can see a final product.

You will be building a strong foundation in the fundamental concepts

of building apps in Python with PICUTE and you will use your existing Python skills.

Now, you should have a basic understanding.

As this course and PICUTE is a class-based framework,

the knowledge you gain from this course will be key in your programming journey

and allow you to expand on what you already know.

We are going to talk about the setup for any PICUTE project.

We will look at ways to create our app widgets, design our GUI,

and add some app functionality throughout this course.

We will talk about PICUTE widgets, how we can create custom widgets,

how we can style our widgets and use in buttons and labels within our programs.

To break down our course overall,

we will begin with giving you a good understanding of how we use PICUTE to create applications.

We then build on working with layouts and designs for our overall apps

while introducing widgets in creating interactive GUIs.

Once you've built this solid foundation of creating your layouts, working with widgets,

we now have a basic understanding of PICUTE.

You will then be introduced to SQL,

and how we can use SQL to create databases in PICUTE.

Now, we're only brushing the surface here,

and you don't need to have any background in SQL.

You'll learn everything you need to know here to hit the ground running.

For our final project, you will learn data visualization

with a module called Matplotlib.

This will introduce you to data analysis and data visualization with Python.

You'll also see how we can use CSS to style our Python applications.

Throughout this course, you will have five projects in total.

The first project isn't here,

but it's a project to get you warmed up with the initial setup in the design for PICUTE.

Then we work with four projects that all build upon each other.

Our first one is going to be a calculator app,

and we will add styling to this app.

We then move on to an image editing application,

or I've nicknamed my app PhotoQT.

This app allows you to edit real photos in Python.

We then will progress into our third capstone project.

This is an expense tracker,

and here is where you'll learn how to create a database using SQL.

Our final project is going to be an interest rate calculator

with our data visualization.

This is where we will talk about how we can use charts and graphs in our applications.

Who is this course designed for?

Well, it's designed for a lot of you.

It's designed for programmers of all levels.

For those looking to grow their Python portfolio,

those looking who want complex tasks broken down

to a basic level of understanding.

That is what my courses and the zero-to-knowing series does.

Breakstown complex tasks into easily understandable topics.

This course is designed for project-based learners,

as well as all you visual learners out there.

Don't worry, you'll get access to all my slides,

live coding, projects, and more.

Now that you have an overall understanding

of what you can expect in this course,

and the overall structure, let's jump in

and let's start off with the installation

of what we need to hit the ground running.

I'll see you guys in the next video.

Music

All right, we're just about there.

Before we jump into the first lesson,

I want to get everything installed and set up here

within VS code.

Now, you may have already used VS code,

or this might be new to you.

Let's go through just one extension that we're going to be using,

and I'll give you mine as well.

The first extension that you should have,

please look for Python.

And just go through and make sure that you do have Python

within VS code.

You can install this here.

I am using a theme, as you can see here,

we have a few different things going on.

Now, if you wanted to follow along with my theme,

because color coordination works for me.

It might work for you.

I use synthwave 84 as my theme currently for the duration

of this course.

You are welcome to get it there too.

Okay, let's get that out of the way.

We have looked at our two extensions.

Now, going forward, we are going to be working

with a few different libraries throughout this course.

I want to install them all right now, so I have them.

We are going to be using Python.

We are going to be using Pillow,

and we are going to be using Matt Plotlib.

Let's get these all installed.

To open your terminal on a Mac,

you can press Command J or on a Windows Control J.

Down here, I just want to install,

so using the Python package installer.

I'm going to say Pip3 for yours.

You might say Pip, but with most updated newer versions of Python,

Pip3 seems to be the way to go.

I'm going to say Pip3 install PiQT5.

Enter.

Let it do its thing.

Now, as you can see, it says requirement already satisfied for mine.

That's because I already have it here.

For the Pillow library, I'm going to say Pip3 install Pillow.

Get that there.

Now, if none of these are working for you,

okay, you may need to try Python3-mPip install Pillow.

You can try using instead of Pip3 saying Python3.

This brings us to our final one, which is map plot lib,

so Pip3 install map plot lib.

As you can see, I also have that one already installed.

At this point, you're ready to go.

You have PiQT framework installed,

which we will be using for our course,

and then we will also introduce how to use Pillow and the Pillow library

as well as map plot lib at later stages.

I'm ready for the first lesson, and at this point, you are too.

I'll see you guys in lesson one of our course.

Hi, and welcome to the zero-to-knowing,

building apps in Python course.

In this course, we will be looking at how to create apps in Python

using the PiQT framework.

Before building any apps, let's jump in,

and let's talk about what is PiQT.

So, long story short, PiQT is a module that bridges.

It connects a popular framework in C++ and Python,

so it allows us to use this popular C++ framework

in the language we choose to use, which is Python.

And it enables us to create graphical user interfaces.

Now, you're gonna hear this a lot throughout this course.

And what you're gonna hear me say is,

you're gonna hear me say GUI.

GUI is a reference for graphical user interfaces.

PiQT allows us to do many different things,

such as creating databases with SQL,

or adding in embedded web browsers,

and even using its own collection of widgets

and a widget is what you see on the app screen.

And there's so much more that we can do with PiQT.

And these features make QT a comprehensive framework,

and it allows us to make all types of apps in Python.

Let's talk about, what is the difference

between PiQT-5 and PiQT-6?

Well, there is no major difference between these two.

In this course, we will specifically focus

on PiQT-5 as these two versions of framework

or so similar.

Anything you do in PiQT-5,

there are easy workarounds to any solutions

that may occur with PiQT-6.

And by learning and understanding,

just the last version, PiQT-5,

you're gonna be able to work with a wider range of applications.

You'll be able to work with older PiQT apps

as well as the new apps using PiQT-6.

The final question you may be asking yourselves now

is, why do we use PiQT?

Why do developers choose this framework over others?

I've put together a few popular reasons why.

Going through them,

PiQT allows for cross platform compatibility.

So it allows our apps to be run

on different operating systems, like I'm on a Mac,

but you yourself may be on a Windows or a Linux,

PiQT allows for this.

It also provides endless widgets.

You're gonna hear this a lot in our course.

What is a widget?

A widget is something you see on your app screen.

It could be buttons, text, menus, anything like that.

And PiQT provides these ready-made

or pre-built GUI elements.

They also offer a wide range beyond just these components.

Like I've mentioned in the previous slides,

we could include databases, graphics, like pictures,

networking, and a few of these,

we will actually be building projects

in this course using them.

PiQT also has something called QT designer.

And QT designer makes it significantly easier

to build a PiQT app.

It's kind of like Figma or Canva for building with PiQT.

We won't be addressing that in this course

because that's not programming,

that's not coding, that's not learning the logic.

In this course, most developers aren't going to use QT designer.

You're expected to know how to build out an app

and what things are doing within your app.

That's what we focus on here.

Finally, PiQT is based in Pithon, right?

We are bridging it and connecting it to Pithon,

which makes it very straightforward to us.

As Pithon is an easier language

and has easier syntax to understand.

Now that we understand what PiQT is and why we use it,

let's head over into our next video

and talk about windowed applications.

I'll see you guys in the next video.

Music

Here we are at the Introduction to our first app.

Before we start making our first app, we need to understand what is a windowed application.

And PICUTE is made to create these windowed applications.

We are here to touch on the Foundations we will use to construct and build your first app.

These are two current and popular examples of windowed applications.

I took these off my Mac and you see a calculator and we have the System Preferences tab.

They pop out when we need them and we close them when we do not need them anymore.

As we break this down further, let's examine and take a look at the System Preferences app that you see here in the left.

We have a main window and inside this main window, we have app widgets or objects.

These work together to create the GUI of our app.

And if you think about the main window as like a jar, right?

And then all of the widgets are the coins and the money inside the jar.

They all represent something different, but they're all inside the same jar.

This jar is like the parent, it's like the main window of our app.

Within the app, you also see many widgets, which is a word that I also keep using.

In this app, we see a text input box, a checkbox, text, push buttons, a list.

All of these are a type of widget or an object that we create and then we later add into the app.

Remember this word later, but these are widgets from a class called QT widgets.

If I asked you to design this app, what comes to mind?

What type of layout would you use? Would you draw this out? Would you put it in rows?

How could we design it? It's a great question.

And as we start looking further at apps, it's a question that you should be asking yourself.

How I would design this app is yes, rows and columns exactly.

What can we store in a row? And what can I store in a column?

Can I store columns in a row?

Let's look at that.

This has two rows and two columns.

We use the layouts in by QT to build our design, okay?

Widgets, they are automatically aligned either vertically or horizontally.

So my two rows are horizontal and my two columns are vertical.

In row one, I have one, two, three, four buttons.

They're in their own row at the top of my app.

In the second row, I actually have two columns, one column, two columns with some text and a button.

These columns are added into a row at the end. Interesting.

So start thinking about how can we break an app down to the design basics of rows and columns.

Moving forward, let's take a look at what exactly the PiQT framework is and how it all ties together.

PiQT is a massive framework. And within this framework, we have modules.

So for example, you may have used other popular Python modules like the built-in ones, time and random,

or maybe you've used other external modules frameworks like pandas, or plot-lead,

or others like that. Well, PiQT is like that.

It is one main framework. And then within that, there are many modules.

Within each module, there are many classes, many functions, all of that stuff.

Here, I've put just a few of the popular PiQT modules. Will we use all of these in our course?

No, will we use some of them? Absolutely. Are there going to be others?

Also, yes, there will be others. These are just a few popular ones.

Starting off. I'm going to talk about QT widgets because we actually saw this earlier.

Remember, everything on the app screen is considered a widget.

And this really provides us with GUI elements or objects that we can add into our app screen.

Another module that we will start off with using early on is a module called QT Core.

QT Core essentially holds the miscellaneous elements that we need within certain elements of our app.

As we grow in our fundamentals and understanding of app development,

you can expect to learn a little bit of SQL in this course in creating databases,

as well as learning some GUI and design elements.

Something that I've created that I love to teach the order of in this pattern is the code burger.

All right? I'm going to put this at stages throughout this course.

If you take notes, which not really if you should be taking notes,

and if you do, you should write this down or screenshot the code burger.

This is the order of steps we must take in order to design an app and PiQT and get it to open and run accordingly.

Number one, we need to make sure all of our imports are at the top of our burger at the top of the code.

Once we import everything we need, I will then create my main app objects and all my app settings like the size of my app,

the tile of my app, things like that.

Once we get everything set up,

I can then create all the widgets that I want to have in my app.

They can be stored at the top, all the buttons, all the text, anything like that can be stored in this step.

Once we create all these widgets, we need to add them to our design.

We need to design our app or design our layout and add all those widgets to the main window, our screen.

Once we finalize that design, it's the good idea to set our final layout, we want to set the final design to our main window,

ending with showing and executing our app.

PiQT is a class-based language.

Now, at this point in your programming journey, you should understand the fundamental concepts of Python and programming in general.

Python has a core concept of object-oriented program.

That is where we create objects in classes and the class can store fundamental information about those objects.

If we do a quick class flashback, pause the video, read through this code and understand what's happening.

Do you understand everything?

What things do you not quite understand?

And then answer the question for me, what is a method and what is a property?

To touch on these very briefly, we defined a class called app.

Remember, a class name is one of the only things in Python that is capitalized.

My class is called app.

I have three methods, one, two, three.

A method is a function in a class.

I then create an object.

The value of an object is a class.

In this case, is app.

I'm giving app three arguments, one, two, three, because my app has one, two, three parameters.

These parameters are used as the value to my properties.

What is a property?

A property is a variable in a class.

I can then use these throughout parts of my class.

When it comes time to use a method, a method must be linked to your object.

So a method is a function in a class.

You must link it to an object of that class in order to use it.

All right, that was a lot.

But don't worry, because I've color coordinated a part of it.

And I want you to take a look at that now.

Making an object, we're giving the three arguments to our class.

Now these arguments we are giving to in it.

In it is what we call our constructor method.

Constructor, construction, build.

We use in it to build our class.

Now, PICUT is a framework that has modules.

Each module has classes.

These classes we can import into our projects to allow us to use them in our apps.

Each class has methods and properties of its own that we can use when we link it to an object of that class.

That's a lot.

But this flashback, it should get the gears turning.

It should bring back memories in the core concepts of how we use object-oriented programming and Python.

Brilliant.

Let's talk about how we can connect to PICUT to set our app up.

Remember, step number one of the code burger.

We want to import everything we need.

Now, PICUT, you can see I am linking to one of the modules.

PICUT is the framework.

CUT core and CUT widgets are a module from our framework.

CUT is a class from my module QT core.

I am importing something called QT.

You'll find out more about this very soon.

Then, we import all of the QT widgets we need.

These widgets are the objects that we want to see within our app.

Do you want to see buttons?

Do you want to see an input field?

Text?

What do you want to see in your app?

That's what we import here.

The two most important classes that we must import in order to get a working app are Q application and Q widget.

Q application allows us to create and execute our app.

Q widget on the other hand allows us to actually create that main window.

The parent that all the other objects are dropped into.

Great, we need those two.

That's why I always like to import them first.

Next is anything you want to see in your app.

Anytime you want to see text on the screen of your app, text in PICUT is called a Q label.

Anytime you want to submit style button, that is called a Q push button.

That's like a click button or a submit button.

And then the other one we're going to take a look at here.

You visibly cannot see this.

But for the design of our app, we need to use layouts.

Now, what we're going to be looking at in this first app is a vertical layout V.

And we will also be looking at a horizontal layout.

These give our app alignment.

In the case of Q V box layout, this is going to be vertical alignment.

We have just introduced a few classes that come with QT Core and QT widgets.

Remember, QT widgets provides us the GUI elements, the widgets or the objects you want to see on the screen of your app.

In QT Core, it kind of contains some miscellaneous things that we can use throughout our programs.

Mainly, for us, what we're going to be using is the QT tool for alignment, like a line left, a line right, a line center,

to help us structure our app in a more visually appealing way.

We're getting super close to starting to code.

But before we do, I've just introduced some important classes that we will be importing.

But we need to talk about a few of those important methods you're going to be using with these classes.

What is a method? Remember, it is a function in a class.

What is a property? A variable in a class?

How do we use them? A method in property must be linked to an object in order to work?

Let's take a look at some popular ones we will start off with today.

In order to add an object to our screen, we use the method add widget.

This allows us to add our object specifically to a layout, so to a column or a row.

We can change or set the text of an existing object by using the set text method.

Remember this for later, change the text of something. That's where it's really useful.

When we want to add two layouts together, we cannot use add widget because a layout is not a widget.

In order to add a column to a row, for example, we can use add layout and this adds two layouts together.

Once we have one final master layout, where everything is held, we can take that master layout and we can set that as the final layout to the main window.

Here is the method we can use to set the final design to our main window.

Our last two methods we will use throughout our course is show and hide, and this allows you to show or hide an object when something happens.

Let's take a look at your first app that we're about to put together.

This is our first application. It's rather basic, but it does everything we want it to do to hit the ground running and understand the fundamentals.

It allows us to add objects on the screen. We will be creating functions as well as programming these buttons to do something.

Let's get comfortable with the foundations of app design in piqt5.

What do we see here? I have a main window, I have a title text, I have some text for some random words, and I have clickable buttons.

Can you locate them? Here they are.

Now, I want you to think about, I introduced important classes that we will import earlier.

What classes will we need to import in order to build this app? I want you to think about that.

Well, in order to create our main window, our main window uses the class q widget.

Any text on the screen is known as a q label, 1, 2, 3, 4.

I will have 4 q label objects, and then a submit style button is known as a q push button.

You may be noticing two things.

One, everything starts with q. Yes, that's true.

Also, everything is camel-caste.

camel-casing means it's one word, but every word, the first letter, is capitalized.

That is very important if you spell one of these wrong, you're going to get an error and it's going to say undefined.

Next up, how will you design the app? How can we solve this?

What design elements should we think about here? You can pause, try and use those clues to help you.

It's not completed yet. What we couldn't do is we could start with three rows.

That's the most basic form of design in this app.

These three rows are like the base layers, and I'm going to stack them like cake in a column.

So my final design is a column.

And within that column, I have row one, two, and row three, bringing together the final application design.

How cool? Alright, let's tie everything together.

The real question we need to know to get started is what do we need in order to set up our main window screen to get our app started?

Here we are.

If you memorize any code in this first part of the lesson, memorize this because we will use this every time we start creating an app.

At the top of my code, you can see all of our imports. I'm importing QT from QT Core.

Next, I'm importing all the widgets I need to build the app from QT widgets.

Our two most important Q application, QWidget. Everything else is optional based on what you are trying to build.

After our imports, according to the code burger, we have our app settings and our app main objects.

These main objects are app and main window.

They should always be called app. This is a generic name that's used across the world by other developers.

App is equal to Q application. Q application is our class, remember the parentheses, and it also takes an empty list as an argument.

Next, I like to use the name main window. You do not need to use that.

The value of main window is QWidget that allows us to create this windowed app.

Once we have our main window object, you can go forth and you can start to style or give your app the settings.

If you want to give your app a title, you can do that with the set window title method.

That's linked to our main window.

If you want to give your app a starting size, what size will the app be when it first opens?

You can resize with a width, 300, and a height of 200.

You can choose any width and height you would like.

Soon, we will be creating all the objects that will be adding to our app.

But the last two lines in order to get our app template already to go is we need to show our main window and we need to execute our app.

Great! Let's put together our starting app and head over to VS Code.

I'll see you guys in our next video.

Alright, here we are in VS Code.

Before we jump in to start coding, let's take the code burger and let's put it in here to VS Code to give us a starting template.

What was number one again? Well, number one was we want to import our modules.

Then we have our main app objects and all of our settings.

Great! Once we have our main app objects, which should we do, we should create all app objects.

So anything we want to see in this app.

Finally, we can have all of our events, and then we want to show slash run our app.

These would be the things inside. Now, we do want to design.

Where do we want to design in our app?

Well, we want to design right here.

So all of our design can be done after we create the main object.

So I'll just say all of these design.

Alrighty, to kick things off, let's go up and let's work through and get a basic template going for the foundation of our app.

So, importing our modules.

We can say from PiQT5, that's our framework.

Now I can attach the module.

I want to go QT Core, import class.

So I want QT class from the QT Core module from the framework PiQT5.

Alrighty, now we can get our GUI going.

You can get all of the widgets we want on the screen.

So let's import those.

I like to start with the two most important ones, which are Q application and Q widget.

So right here, Q application, Q widget.

What else do we want to see in the app?

Well, I know that I want text, so we can say Q label.

I know I want some buttons, so let's say Q push button.

Finally, what type of design are we going to be doing?

Well, we're going to try to do some rows inside of a column, which we're going to actually check out here in our next lesson.

So before we do that, let's just say QV box.

That gives us one initial layout.

Now that we have everything imported, let's work on our two main objects.

So I'm going to say app equals our Q application class.

And remember that this takes an empty list as our argument.

Next up to kick things off.

Let's make a main window, and we can say here Q widget.

You can name this anything you want.

My names are going to be to help you further your understanding.

So this is my main window.

I'm going to call it my main window.

Now the other final settings we can do is we could set a title for our app.

And we could say random word maker.

And then we could set the initial size.

What size do we want the app to open with?

I could say a width of 300 at a height of 200.

Great.

Alrighty, to close things off for our start.

All we need to do is we need to take our main window

and we want to show the main window.

While the main window is showing,

we can execute or run our app.

Let's run our code and observe what happens.

There we are our starting template.

You can see that the initial size is 300 200.

But you can make it smaller and you can make it bigger.

And then you can also see the app title is random word maker,

which we gave it here.

Now this is great because every app we make will start with this.

This is the foundation.

It's like you're pouring the concrete to build the home.

So we can now build on top of this.

Now remember, there are many ways to do a certain task.

Don't be afraid to try your way.

I'm breaking this down so we understand the key fundamentals

to build apps with PICUT.

Let's head over to our next video and in that lesson

we are going to address the design of our app

and how we can do that.

I'll see you guys in the next lesson.

Welcome to our next video.

Now that we have our starting template ready to go,

it's time to design our app.

How can we use our app?

How can we use our app?

How can we use our app?

How can we use our app?

How can we use our app?

How can we use our app?

How can we achieve this look?

We have our three rows and these rows are held in one master column.

So the layout tools we'll be using are going to be our QV box layout,

V for vertical and our QH box layout or H for horizontal.

These will be used to build our rows and the columns.

How will our code look?

Well, now that we have our app ready to go,

we need to create all of the objects or widgets

that we want to store in this app.

On my screen you see 1, 2, 3, 4, 5, 6, 7 objects.

Therefore we should be creating seven different objects.

They each have their own name,

but the value can still be from the same class.

They're different objects from the same class.

My title text?

Well, that's just text.

Remember, in PiQT any time you want text,

we can say Q label.

When my app first starts,

all of these should actually be a question mark,

right?

Until we start clicking the button,

so I can create those here.

To end with, I will create three push buttons.

Each button is a different object,

but they all say, click me.

Now that we have created all these objects,

you're going to use in your app.

It's now time to design the app.

You won't be able to see any of the objects

if you were to run your code now.

It's because we can't see these objects

until we add them to our layout.

And we set that to our main window.

As I go through this course,

remember, there are many ways to solve a problem in coding.

I'm showing you one way,

and I'm breaking that down to a way

that you guys can easily understand.

If you find a different way,

or you want to try it yourself,

I encourage you to do so.

Here you can see each of those correspond to

an element on the app screen,

and that's held in our final QV box column.

Now that we created those objects,

I need to get them on my screen.

Here I have made my master layout,

which I know at the end,

everything will be added to.

But I also know that I'm going to have one, two, three rows.

So I can create three row layout objects right here.

Next up, it's time to add things to the row.

So I can start with row one,

because I know it's going to be at the top.

What do I want to do?

I want to say row one,

I want to add the title text to it.

It's going to do just that.

If I want,

I can give alignment to the text,

and I can say,

I want it to align in the center.

You can see I'm using the QT class from QT Core

that we import it.

Now that I know row one is done, check.

I can move on to row two,

and I can do the same thing.

Row two,

I want to add the widget,

text one,

which corresponds to that,

and I can also give that alignment.

Row two's done.

We can add the buttons to row three.

This is adding all of the objects you just made into each row.

Now,

if you're running your app,

no,

what do we need to do now?

What's the next step in the code burger?

Now that we have our rows,

we need to add them to our master column.

I can take that and I can say master layout,

I want to add row one.

It's important to add these rows in the order that you want to see them.

Remember, Python reads top to bottom.

We need to code like that, too.

Once we have everything in one place,

or should I say in one master layout,

I can take my main window,

and I can set the final layout to be my master layout.

If I break that down one step further,

here is what that would look like.

We're creating our master layout,

that everything eventually will be added to.

I can create three rows because that is how I'm choosing to design my project.

Then we just need to go through,

and we add each row once we've added the widgets to it,

we add each row to that master layout.

Finally, you can use set layout to set the final design of your app

to your main window, screen.

This ties together perfectly.

The codeburger, you guessed it.

You probably didn't guess it,

but it does bring in the codeburger.

I've just gone through each step individually

in how they align and how they work together.

You have a design app now,

but let's just touch on the final elements.

What is this app going to be doing?

Well, it's going to be generating a random word

and displaying that on the screen.

Every time you click a button,

how could we do that?

Pause the video, take a minute.

Just think, how could you do that?

You heard the word random,

you should have thought the random module.

I want to import the function choice from random.

Now, choice takes a list as an argument

and it randomly chooses one of the elements from that list.

So, I have a list called My Words,

and I've just put these random words in here.

I then have a function, and when this function is called,

I have a word variable.

And this choice function is going to choose one of these random words.

So word equals one of these.

I can then take my text one object,

which we already made in your app,

and I can now set the text to be that random word.

That is how I can use the set text method with our app

to set the text of an existing object on our screen.

The final question that we are going to address is event handling.

How do we connect a button?

How do we activate a button to work in our code?

What event could we possibly use in PIQT?

In PIQT to kick things off,

you're going to be focusing on one event.

Now, you can see that I have my object button,

and that is a Q push button.

That object is created here.

I then have a function, and every time this function is called,

it's just going to print this button is working.

That's all the function is doing.

I take my button objects,

and I say when the button is clicked,

we want to run the test function.

Click, that's the event type in PIQT.

Let me translate this now.

The event with literally translate to when this button is clicked,

I want to connect to this function.

That is how we handle events in PIQT.

In our first app, we are just going to be looking at the click event,

but in other projects that we do in this course,

we will be learning about other events as well.

All right, let's head over to VS Code,

and let's finish off our app.

I'll see you guys in the next video.

Here we are in our next video.

In the lesson, we introduced how we can create a layout

in design our app the way we want it to.

We also addressed how to get the objects to appear on our screens,

because we now know that after we create an object,

we then need to add it to our design.

Let's start off by creating all the app objects that we need.

First up, I'm going to create a title,

because I know I'm going to have a title that is going to be text on the screen.

According to my app, I can just put random keywords,

because that's what I want the title to be.

I will then have three different text.

So as long as they all have a different name,

because they're all different objects, that's fine,

and they can still all use the same class.

Initially, when the app starts,

I want my text to be a question mark.

When we click a button, this is going to change to a random word.

Great, we have our text objects.

What other objects do we want?

The buttons, so for each button, you should create a Q push button.

The Q push button, that can say click me.

We need to give them different names. Great.

We now have our seven objects, all of these we want to see on our screen.

Now that we've created these objects,

it's now time to move into our design.

We got to get these onto our layouts onto our screen.

The first thing we can do for our design is let's create all the layouts we want.

Now, I know that my final layout, my master layout,

I want everything to be held in a column.

So I'm going to make that.

Within this master layout column, I know I'm going to stack some rows.

It's going to be like cake.

So I want to have row one, row two, row three.

In order to get that, I need my Q H box layout.

Therefore, let's go up and let's just add that onto our imports.

Let's say Q H box layout.

Now that we have that, I can go forth and I can say, okay,

I am going to make a row one.

Let's make a row two and row three.

These are the designs in the app.

Great.

We can start to add our objects.

How do we add these widgets to our screen?

Well, do you remember the method we learned?

Add widget.

What is that going to be linked to?

Well, let's say, hey, Python.

In row one, I would like to add my title to the screen.

I would like my title to have the alignment of the center of the screen.

So I can pop that in just like so.

That's what that translates to.

Row one, I would like to add my title.

My title is a widget Q label.

And then my row is the layout.

Great.

That's row one.

I can move on to row two.

In row two, we are going to have more.

I'm going to have text one.

Text one is going to have its alignment again.

And I can say once again, a line center.

But row two is also going to have our other two texts.

So I can say text two, text three.

Remembering that Python reads like a book.

Left to right top to bottom.

So the order we add these to our rows,

it's going to go left to right.

Text one, text two, text three.

That concludes with the final of adding our buttons to the screen.

Our buttons do not need alignment.

So I can just take it and we can just add the button.

How it is.

Button two, button three.

Awesome.

Look at our design.

Okay.

If any of that is confusing, go back through some of our slides.

We watched the last two minutes of this video.

Right?

We create our layouts and we simply just go in order.

All right.

I've made my layout.

I'll just start with row one.

We do what we need to do.

row two and row three.

Now that we have all these rows,

I just want to drop them into my master layout.

Here's us using the ad layout method.

Now remember that we use the ad layout method because a row in this example is not a widget.

It's a layout.

If we want to add rows or columns together, we need to use ad layout.

So how we could translate this is master layout.

We want to add row one at the top.

Master layout.

I would like to add row two under row one.

And then master layout.

We can add row three under row two.

Now that everything is stacked in our master layout, let's just say, okay.

I have my final design ready to go.

Main window.

I want to set the final layout to be my master layout.

Incredible.

Let's give our code a run.

There we are.

You can see our app.

I have the title, which we've given it right here.

I have my three question marks ready to go for my random words.

And then we have all the buttons we added.

Now if you try the buttons, we have not connected any events yet.

That's what's yet to come.

In the next video, we will implement our random words as well as the events for each button.

I'll see you guys in the next video.

All righty.

Welcome back.

Let's get this app finished.

Now we need to introduce random words and link our buttons with our events.

First things first.

Let's create some random words.

So when you hear the word random, you should immediately be thinking of the Python random module.

If you're not familiar with this, do a little reading on the documentation.

It's one of the built-in Python modules like random or time or math.

Python has these modules.

And choice is going to allow us to choose a random word from a list.

Speaking of lists, let's go down here with all of our objects and let's make one.

Let's just say in my words equals a list.

I've already prepared some words.

You guys be creative.

Choose a hobby that you're passionate about and use those words here.

All righty.

So let's see.

Let me mark these.

We've imported choice.

We have a list of words.

We're now ready to make some functions.

I'm going to add one additional content.

Add functions.

I like to create my functions down here in the box.

Okay.

After our design, after the design elements of our app,

there are many ways to do this again.

And if you think of a different way, go with your way, try your way.

The way I'm about to do it is to make it more readable for you.

And easier to understand in the big picture of things.

It doesn't matter if you do the same problem in three lines of code or 15 lines of code.

Were you able to solve the problem?

If the answer is yes.

Awesome.

That's great.

And you should be proud of that.

Let's make a function.

Now, to be exact, I'm actually going to make three functions.

They're all going to be the same thing.

But they're going to be linked to different events.

So random word.

When I call this function,

I would like to get a random word from my list of words.

So I'm going to use the choice function here.

And I'm going to insert my list.

So now word is going to be one of the random words from my list.

It could be hello, goodbye, test app, any of those.

I can then take my object text one.

Remember, we created three of these, one, two, three.

Currently, text one is a question mark.

I want to update that value or change that value.

Who remembers what method do we use to change the value of an existing object?

Set text.

So I can link set text method because I want to change the value of text one.

And what do I want the text to be?

Whatever random word was chosen.

That's what we want.

Great.

I'm going to use this now a few times.

So let's just take this.

What do we need to change?

Well, random word two.

We now want to change text two.

And then random three would like to change text three.

Great.

We have our three functions.

One, two, and three.

To close things off, we need our PICUT events.

And remember, we have just learned our first event of clicked.

Clicked is linked to a button object.

So let's say button one.

When button one is clicked.

I want to connect with my random word.

One function.

When my button two is clicked.

I want to connect with my random word two.

And I'm just going to take that for the last one.

And we can say button three and random word three.

Great.

Run your apps.

Play with your apps.

Experiment and review our code.

What did we just do?

Save this code somewhere as it's going to help you build our future projects.

It is the code burger structure.

It's what we're going to be using in this course.

I'm going to give my app a run.

There we are.

Click.

Ah, look at that.

All different.

That's great.

We have it working exactly how we wanted it to.

Very well done.

We have put together our first app.

But fear not because what we've learned here we are going to use in the remaining projects of this course.

I'll see you guys in the next lesson where we're going to introduce our next project.

Welcome back to our next project.

In this project, you're going to be putting your knowledge of QT widgets to the test as we build an interactive calculator with PICUT.

Before we dive into this project, let's take a look at the famous code burger one more time.

Remember the structure of what we're trying to do here.

We will use this structure within this project as well.

Remembering all of our imports, our main app objects with the settings.

Once we have those two, feel free to create all the widgets you want to see in your app.

Once you have those, we can then design the app with our layouts and set that to our main window.

When everything is set, it's time to run and execute your app.

This is the code burger.

So in the past, we have been using QVBox layout in QHBox layout.

And remember that V is for vertical for a column and H is for horizontal and row.

You've got some practice with these in the last project.

Looking at this calculator app, how would you design this?

Do you see rows and columns? Does that make sense?

What other options do we have?

Well, what I see is a grid.

What if there was a way to create a grid for us?

There is.

With PICUT, we have a layout called QGrid Layout.

And you can see that I have my object grid in the value is QGrid Layout.

Which I'm going to use instead of creating four columns in five rows.

That seems really repetitive.

I can create one grid and add things to my grid, which becomes incredibly useful for us.

But how do we add things to this grid?

Do we still use add widget?

Yes, we are adding an object to a layout.

We still will use add widget.

But now add widget actually takes two additional arguments.

We create our grid objects.

Then we say grid, we want to add a button where we need to specify the row in the column.

If we translate this, layout add this object to this row in this column.

Now, for this to work, we do need to create some type of index or current position.

In this example, I've said row equals two in column equals one.

That would actually give us the number five button.

If you're thinking how that doesn't make sense, remember programming languages start on zero.

So I'm actually saying row zero one two column zero one that gives us number five.

We are trying to take our knowledge from an idea all the way to a completed application.

Currently, we are on number one.

You know how to get to number two.

And after the last two slides, you should have a rough idea on how we can achieve number three.

You do see a new object in our calculator.

This little guy is called a queue line edit tool.

And this is where we will see all of our expressions being entered and evaluated.

Number four is like a final bonus redesign.

And it's a way for us to add slightly more details to our app.

We can change the font, change the color, things like that.

That's our goal for this app to go from design one all the way to design three.

If we can get here, this is a completed product.

We can then worry about getting to number four.

Looking at this calculator now.

This whole grid system it seems like it's going to take a while because I have,

I think at least 17 buttons, maybe 18 buttons.

So it seems really repetitive.

How can we deal with repetitiveness in coding?

What do we have for this?

Loops.

What are the two types of loops you know in Python?

The while loop and the for loop.

The for loop is used to iterate to go through something else.

Let me propose that we actually loop through to create our grid.

So let me break that down to plain English in general tasks before you see any code.

I'm making a for loop and I'm going to go through this list.

This list will be all the string elements that I want my buttons to say.

What do I want to see on my buttons?

Like the letter C, the less than sign the number four.

All of those I could add to a list.

And I could loop through and say for every button text in my list.

Every time I loop through one I want to create a new push button object with the current text I'm on.

Two, for that object I will create an event only for that button.

Great.

Then I want to add this new button to my grid layout.

One, two, and three all work for one button.

Number four, before I make the next button I should change my row and or change my column.

So think about this.

How can you achieve this and how can you achieve this with using a for loop as well as counter variables?

If you're up for a little challenge pause the video here.

Give it a try and then come back to continue watching.

Putting this into code on the outside of my for loop I have two counter variables responsible for keeping track of my row in column.

I'm going through my list of buttons and every time I'm creating a new button object.

A new event for that button.

And then I am adding, I'm taking my button and we're adding it to our button grid.

Every button is being added at an index a position row column.

Once we add one button I want to increase my column or change my column.

If I get to four columns then I want to reset my columns and I want to go down to the next row.

This remember we start on zero so it's actually zero one two three.

Increase row zero one two three and I'm repeating myself amazing very well done.

I would love it if you took the knowledge that we just learned in this lesson and you go on and you create your design and create the initial product for our app.

I'll see you guys over in VS code where we are going to put all of our knowledge to the test.

Welcome to our next video.

In this video we are going to put together our initial design here in VS code for our calculator app.

Let's get started.

So who remembers the code burger?

Let's go through those steps.

What will we need in order to complete this project?

Well, we really just need some widgets.

Okay, so I'm going to say from piQt5.Qt widgets.

Let's import the two most important ones.

So Q application.

Q widget.

What else will we need to create this?

Well, we need our new tool, our Q line edit.

We will be using push buttons.

Then our layouts.

We have our QH, which we can use for row if we need it.

We have our QV box for columns.

And our new tool is our Q grid layout, which I can import up top like so.

Looking good.

Alrighty.

Now that we have those, we can create our starting template.

So our app, which is our Q application, then we can say our main window.

Amazing.

Who remembers how to give the main window error title?

Let's say main window dot set window title.

Here I can put Calculator app.

Then we can take our main window and we can resize.

So the initial resize, let's say the width can be 250.

And the height can be 300.

We can see how that plays out when we run out.

App.

Let's put in the final two lines.

What do we need to show our starting template?

Well, heading down here, our final two lines.

We can show our main window.

And we can secure our app.

Great.

Let's give it a run.

Alrighty.

There we are.

Our starting template.

What do we need on here?

We need to now design the layout using our Q grid box.

Our Q line edit and then our push buttons that we want for our clear and delete.

As a starting template.

So this is what we're aiming for.

Alright.

And I'll bring this back up as we work through this project.

But this is the goal.

Up top in a column.

We have a Q line edit.

This is like where I enter something.

Then we have our Q grid layout.

We're at all of our buttons.

And the last one could be a row here that I may put.

And that contains our final two Q push buttons.

So to get our row in our design.

Well, let's create all of our objects first.

So even before my design.

Let's go back and let's say something like all objects or widgets.

Alright?

Because that's what they are.

What do we need here?

Well, I need a place for my input.

So let's say like a text box because that's what it can be.

This is our Q line edit.

Now, Q line edit does not take anything.

I will make my grid which is a layout.

So Q grid layout.

Now, the way we looked at this in the lesson is we have a for loop that can go through a list

and every element in that list or every position.

It can append or put that into our grid layout.

So I need a list of buttons.

Now, what order do they need to go in?

And we need to think about that.

Let me bring up our example of the app again.

I'm going to loop through.

So either we want to do it in columns 740

or I could do 789 slash 456 star.

Let's go with the rows.

So how about we start by making this?

I could probably keep this up as a template.

So let's say 789 slash, right?

And then I'm coming down the row.

We have four, five, six.

Let me enter the rest of these here.

There is our list of button text.

Now, this makes it really difficult to see.

So let me refactor this.

And I'm just going to make it look more pretty

so that it's how it would appear on the calculator.

So there is the same list.

I've just put it in rows now.

And this is essentially what we want to see on our app screen.

Right?

When the app fires up, it appears and you can see how each row of this list

is corresponding to the row in our calculator.

Now, I just made this look like the calculator will

but one long list is the same.

This is easier to understand in interpret.

Now, the final two buttons we can make outside of our list

and those can be our push buttons.

Let me close the app.

Let's create a clear button and this will

delete everything in the box.

I'll put C.

And then we'll say delete and delete could be a push button

like we could do that for delete.

We could also right clear and delete.

That might be fine.

Clear?

Let's keep this simple for delete.

Alrighty.

So we have everything that we want to see on our screen at this point.

Let's go through and let's map this out and get our design.

We have our objects.

We need our design to start flowing.

How could we get our design started here?

Well, let's create our layouts.

So I'm going to say master layout.

I know in the end everything will be held in a column.

That makes sense.

At the top of my column, I would like my text box.

Right?

That input.

So I'm going to put that right there.

Directly under this.

I would like to actually add my grid of buttons,

which I don't quite have those yet.

So I'm thinking out loud here.

Then at the bottom we want to have, I actually want to have a row.

So let's also say add layout and let's say button row.

While I'm here, let's create that button row.

So I'll say button row.

And within that button row, I would like to add my widgets.

So from left to right, let's say the clear button.

And then we have the delete button.

Let's focus on our grid.

We have everything going.

And so we can see that.

Let me turn off the grid.

Let's set the master layout to the main window.

Because that's our final design.

I'm going to run my program.

This is what it looks like currently.

We have that box to top.

We want we have clear and delete.

I want to get the buttons between those two now.

So here is where I'm about to implement that loop.

And remember, every time we loop over, we are creating a new object with a new event.

While also increasing the row and the column as well.

I'm going to shut the app down, trash the terminal.

We are going to go right here before our design.

This looks like a good place.

Before our design, this is where our for loop is going to take form.

Now, I'm going to create my two counters.

So row in column.

And this will keep track of how many buttons are in each row as well as each column.

I can say for every text in this list.

So I have my list of buttons.

And I want to say for every string for every text in here.

So let's say for every text in my list of buttons.

I want to create an object for the current button I'm on.

So I'll say button equals Q push button.

What do we want it to say?

Well, I wanted to say whatever the current text is in the loop.

When this loop first takes off, text is going to be the number seven.

Number seven will be the text value of the first push button we create.

For this button, it has the object name button.

I can create my event.

And I'm going to say I want to connect it to some type of function,

which actually I don't have yet.

Okay, so let's keep that empty.

While we have our button created, we have the event created,

which I could say none.

While it's also none, let's turn it off.

We can now add this to our grid.

Let's take our grid.

Let's add the widget.

What widget do you want to add?

I want to add the current button at the current row at the current column.

Looking great.

Alrighty.

Before we go on any further, I now need to increase the column.

I want to move to the next button on the right.

So column plus equals one.

If my column is greater than three,

I want to reset my column.

So column now equals zero.

And I can increase my row because it's time for a new row.

This puts together exactly what we want to see in our calculator app.

The final step is let's just turn this back on again.

We can add our grid to our master layout design.

When we give the app a run, we should see our basic template with all of our buttons.

Looking great.

This is the basic form of the app.

Now notice it doesn't do anything yet,

but we have everything ready to go for adding our functionality.

I'll see you guys in the next lesson where we're going to discuss how we can add functionality to our app.

Great.

Now we have our design for our calculator app completed.

But what's the problem?

It doesn't do anything yet.

It's fine.

Because adding the functionality to our applications comes after we create our initial design.

So in this lesson, we are going to learn how to create that functionality,

as well as learning how to evaluate our expressions.

For example, 2 plus 2, evaluate 2, 4.

In order to do this, we could do this a few ways.

Now what are you thinking about right now in this moment?

How would you add functionality to our app?

You may be thinking a few things and that's okay.

Before watching this lesson, you may want to try and implement your own ideas in the logic,

which I highly encourage you to try.

I'm going to show you one of the many ways to solve this.

In the way I'm going to show you is actually done through one sole function.

I am creating one function called button click.

This is the only function that's actually required to run our app.

You could make a function for each button, sure.

That's just a lot of code, but would that work?

Absolutely, it would work.

What we're doing is going down, we are checking if the text of the button is the equal sign.

If it is, then we set the value of this variable to be the equal sign.

If I press the button that has the letter C on it,

I would like to clear my Q line edit object.

If we press the less than button, we would like to cut the last element of our current text.

Do you know how to solve any of these currently?

Well, let's take a look at some of them.

Our first one, let's begin with this.

So when we click a button, I want to get the text value off of that button object.

Do you remember how we can do this?

Well, we can use the text method.

And this method is linked to an object, and it gets the text value of that object, which is pretty cool.

You can see here that I'm getting the text value of the button.

I'm getting the text value of the input box, the Q line edit box.

And I'm doing that here, here, and here, pretty cool.

All right, now that we've collected the text from the button,

we need to evaluate the expression that we enter into the input field.

For example, if you clicked 3 plus 5, we need to now evaluate that.

We want to change that 15.

Any thoughts on how we can do this in Python?

Well, in fact, you may have seen this Python function around before.

Python has a function called Eval.

This function is made to evaluate expressions.

So if the expression is true, if the expression is allowed, it's going to run.

Next, if we press C, we want to clear the input field.

How can we do that? Well, thanks to PiQT, PiQT has a method called clear.

We can link clear to any object that we want to simply put clear.

Great. This brings us to our final one.

If we press the delete button, we want to delete the last item that we entered.

Any thoughts on how we can cut an element from a string.

You should know this from working with strings and string manipulation, as well as working with lists.

In order to cut, I have a variable called current text.

And that is the text value of whatever is in my input field.

So I'm going to take that text and I'm going to cut using our square brackets to index the last position of the string minus 1.

This is a key fundamental of string manipulation that you should already feel relatively comfortable with.

This takes us to our last method.

Now, a current problem we actually have is all the buttons have the same event or the same target of event.

And we need a way to tell them apart.

But don't worry, because PiQT has actually got us covered for this as well.

We only need to do this if we are making one function for our entire application.

Which in this lesson, that's what I'm doing.

We can use the sender method.

And I'm going to link sender with our app object.

The sender method was created specifically to tell the difference between multiple events in PiQT.

So that's the first thing we do.

I created a variable called button.

And I am tracking which button did I click?

Which button sent the event to me?

Amazing.

The last thing we can do here is I'm going to throw in a try statement because I could potentially get an error.

I would like to try to evaluate the expression.

If that's not possible, then I just want to set the text of the input to error.

Why is this useful?

Why would this happen?

Well, if you pull out your iPhone right now, any phone you have.

And you pick any number.

And you say, I don't know, 20 divided by 5.

You're going to get 4.

But if you say 20 divided by 0, you're going to get error.

That is what could happen.

What if the user tries to divide by 0?

We want to anticipate what could the user do wrong?

And I'm going to catch that right here.

So as a final precaution, I am going to add my try and accept statement to catch any potential errors.

Amazing.

Before heading back into the S code to implement our app functionality, you are going to see the next few videos.

In the next video, we will finalize our app.

Then I have prepared two remaster challenges for you that we should be getting comfortable with.

Here are your two challenges for this project.

Once you have a working product, your first challenge is to remaster your app into a class-based application.

So I want you to try to build your own class and refactor all your code to get it in your own class.

All right?

If you're able to do that, why don't you try to add some designs and styles to your app?

As a hint, you can check out the Q font module from PiQT.

This will allow you to play with your fonts.

And for all the styling, check out the method set style sheet.

If you have ever worked with CSS, you're going to be ahead of the game.

Because we can add CSS to our apps.

I'll see you guys over in VS Code, where we are about to finish our calculator app.

We're going to do the same thing.

Amazing. Now we've addressed the functionality that we will be adding to our application.

Here is where we left off.

I've cleaned some things up a little bit as we're getting ready to add in our function.

The question becomes, where should this go?

So if I take away all of our spacing here, based on our last app, we put the function at the end.

But I am going to get an issue because right here, we need to connect to some button in order to create this event.

So it has to go before our point here, because this needs to go before our layout.

Our function can rest just up here.

Right after we create all the elements, we'll use all those widgets.

I'm going to create my function.

And this function is going to be responsible for any time of button is clicked.

So remember, we have all those buttons on the screen.

And each button really has the same function call.

So we need to check what is the face value of that button.

What text is currently on the button?

What we can do is I can create a variable and I'm going to listen to who sent the message.

Who was clicked? That's what it's listening for.

Then I can take that button of who was clicked.

And I can take the text value of it.

So those two are working together right there.

First, I'm listening to what button was clicked.

Then based on that button, I'm getting the text value from it.

We can then check if that text value is actually the equal side.

If it is, then we want to get the text that is within our object text box.

Let's get that.

We can then try to evaluate.

So remember that this is an expression.

And I'm going to have a result.

In this result, we want to evaluate the equation.

So like 2 plus 2, my result should equal 4.

I can set my text box as the updated value of whatever my result was,

making sure that I convert that to a string.

What does every try statement need?

Well, every try statement, we want to have an accept.

We want to catch that.

So how can I catch that for every exception?

I don't just want to say accept.

I want to say exceptions overall and I can give them a nickname.

And I'm just going to refer to them as E.

E means every exception.

So I can just print off and I'm just going to say error.

Let's put two dots and I'm going to say E.

So then I can get that type of error as well.

If we press the equal sign, we evaluate that expression.

Let's check if the original button text is actually clear.

Right?

Does the text value say clear?

If it does, we can take our text box and we just want to clear the value that's within it.

That's where the piqt handy clear method comes in.

What is the last button that needs its own as well?

Well, our delete button.

Right?

If we press delete, we would like to be able to backspace.

So if the face value of our button is that sign that we set,

we can then try and do a few things.

We would like to get the current text within our text box.

Whatever it is, it could be 85-2.

I want to get 85-2.

I want that value.

It could be 100.

I want to get 100 from there.

So let's say current value.

It's the current value within that box.

And that is equal to my text box, the text within.

Looking good.

In order to update this now, every time I click,

I want to update the text box.

So I can say set text because I want to change the current value of that.

And I want it to be the current value, but I want to take off the last position.

So I can do that by signaling this as the index.

Great.

And to touch up, I want one more, but it's going to trigger no matter what.

So if I put an else here, now that we understand that each of these are a condition,

we also need to understand that I can only press one button at one time.

All of these are a part of one condition.

Instead of saying, if, let's say, also if, or eliff,

our final else, we can say the current value,

is going to be the text box value.

And let's just say our text box, set text, our current value, plus text.

Now, remember, text is going to be a button value.

So if it's not an equal sign, if it's not the clear button, if it's not the delete button,

then it's going to be a number or an addition symbol, a subtraction symbol.

We want those to appear in the text box.

That is what this else is doing.

This is adding numbers to the text box as we click them.

This is our overall function and the functionality to it.

We just need to connect our buttons to this function and we have a working app.

Going down now, let's take away all this space.

We can turn back on this event and I'm going to put in here the name of our function,

which is button click.

At the bottom here, right before we execute our app,

let's take the clear button that we made.

Let's say when that's clicked, I want to connect also to button click.

And when the delete button is clicked, that can also connect to our function.

But in clicked, looking great, amazing.

All within 80 lines of code, just about.

We have a working calculator app.

Well, let's check that it's working.

That was our final stage of the basic form of this app.

All right, let's go down here, let's say 55 times 62 equals.

Wow, there we go.

Looking good.

Minus 36 equals.

Great.

Clear?

That works.

Two's.

We can delete.

Amazing.

Well done.

Coming from the first warm-up app that we created,

you were introduced to these basic concepts of design

and how we set up a template app in PiQT.

This is your first real-world application in your first project,

this calculator app.

Very nicely done.

What we've learned here, we're going to continue to build on.

In the next video, we are going to learn how to re-factor this code

as a class-based application.

I'll see you guys in the next lesson.

As we enter this lesson, let's address what we did in the last lesson.

We completed the basic functionality of our calculator app,

a fully working app in Pithon with PiQT using this framework.

Now, in this video, we are going to learn how to re-factor our code

into a class-based application.

Why is this so important?

Well, PiQT is already structured in classes.

As you can see here with QT widgets, it's everything we already have.

So, you should feel confident and comfortable creating your own classes, methods, and properties.

The second point is, as we go forward in our projects,

they are going to become more class-based focused.

As this course is designed to take your basic programming skills of Pithon,

an object-oriented programming, and grow on that idea,

that concept of OOP, or object-oriented programming.

As I've introduced how this framework is class-based,

it's now time to start making our projects in a class.

Right here is where we left off in our last video.

Our app still functions.

I haven't added any more code.

It's now time to re-factor.

We looked at this very briefly in the introduction lessons of this course.

But, if there's anything that your hesitant about,

feel free to check out my other object-oriented programming course,

or just go back a few slides and review what we looked at.

In order to do this, let's create some space here.

So, pretty much everything I want to have in a class.

And the last two things, I'm actually going to remove our app and main window,

because those will automatically run here at the end.

So, I'm just going to store them down here for now.

Going up to our top, let's try and keep everything.

So, I'm going to create a class, and I can call this Cal app.

That's my Calculator app.

Everything below, we pretty much want inside of this class.

All right.

I am now storing all of our original code in a place called class app.

Now, we still need a main window.

And as you saw, I just removed my main window.

So, how can I pass in a main window that my class can use?

Well, the obvious one that we may be thinking is,

why did you just remove that?

Well, what I can do is, I don't actually want to do this.

I can take first off, let's uppercase that.

I can take Q widget, and I'm actually going to inherit Q widget.

Why can I do this?

Well, remember, in PICUT, all of these are classes.

So, a class can inherit a class.

I'm using this Q widget as a super class.

Can now take that away.

I'm inheriting that.

I'm left with all of our starting code, and this code starts as soon as the app starts.

So, what is that special constructor method that automatically runs when an object is called?

In it, we need our initializer function.

So, let's say, in it, I'm going to put self.

I'm going to activate my super class.

So, with our super function, we can initialize the super class.

Now that we have that, let's take all of this.

We're just going to put that right there inside.

Main window is nothing.

But now that I'm working with a class, these are not variables.

They are now properties.

Self is referring to the Q widget.

Remember that originally, I had said, main window equals Q widget.

I'm inheriting Q widget.

So, instead of saying main window, it's kind of like saying self.

My self is a Q widget.

I am a Q widget.

So, I can say self dot set window title instead.

All righty, all the widgets we originally made.

I'm just going to come down here, and let's turn those into properties.

So, self, self, and self.

Looking good.

All righty.

Let's continue down.

You can see that I'm given an error here in my method.

This has become a method.

It's now a function in a class.

Everywhere it says text box.

I don't have text box anymore.

That has become a property, correct?

So, let's just add our keyword, self.

Just like so, and then pass in self as a parameter.

Looking great.

Miss one, self.

Going down this, where we create our buttons, that should be done at the start.

That's done through the initialization process.

So, I can refactor that by putting that just directly inside our constructor in it.

There we go, looking good.

I'm going to give it self here, so self button click.

My grid has become a property, self grid, and our button list is now self buttons.

Already going down, our design, once again, when the app fires up,

in order to start the app, everything should be done at the beginning.

So, all of our design now that we're working with classes, I can remove this.

And I can put this inside in it once again.

I'm going to drop down here, and let's just drop it right there.

All of these, we can tab over.

Remember that anywhere we have main window, we don't have that.

It's now self.

All of these guys have become properties going away from the variable form.

So, let's add self.

Looking great.

All right, so our class has been restructured and refactor.

Let me clean that up.

So, now in it, initialize start.

When the app starts, everything is done.

All the design is done.

All right, because that should be happening.

We then have our method now button click.

That's only triggered when we click the buttons.

And the reason that I can put my design before now is because

this is a class.

The word self unlocks everything in our class that we can use anywhere we want.

We can go to our bottom.

Now, for this to work, if we ran it, well, let's run it.

And let's watch what happens.

It'll make for a better explanation.

I got this massive window blank screen.

That doesn't look right.

Okay, let's close out.

What we need is we can use the Python condition.

That we like to say.

So, if the name, if you're running the main file,

is what this translates to.

If that's the case, then I want my app to run or execute.

I want to create an object.

I want to show that object.

Now, I am using QWage.

Remember, we don't need QWage anymore.

Because we gave this as the super class to our calculator app.

So, this really should be CalCap.

Main window is fine.

I can use that outside here.

Running our app.

It's now brought back to life.

78 minus 35 equals.

There we are.

A refactored form of that app through classes.

Heading over to our last video now.

If you're up for the additional bonus challenge,

we will be learning a new class that I gave you the hint

of using QFont as well as the method of set style sheet

to design your app a little bit more.

I'll see you guys in the next video.

Alright, let's add some design fonts in color to our application.

In order to change the font of our Qline edit and other tools,

let's import QFont.

So I can say from Pi QT5,

this is from the QTGUI module.

I can import QFont.

And QFont, I want to use that to set the font of the text box.

So I can use the method set font.

And inside here, you can see it actually says QFont.

So let's say let's put our QFont class in there

as the argument to our method set font.

And I can actually put the type of font I want.

So let's say a Helvetica as my font.

And then I'm going to style it as let's say a size of 32.

Alright, so that's step one.

We've styled that.

Let's go down a little bit and style the buttons.

So here, we create a button here.

We create a button event.

Before we add it to our layout, let's style it.

So let's use the method set style sheet.

So this is going to allow us to essentially use like CSS in Pi QT,

which is quite cool.

And wherever you are in your programming journey,

you have probably come across CSS in HTML before.

If not, this will be a great time to just briefly read through

some of the CSS guidelines.

So within this method set style sheet,

I'm going to specify a few things.

And I'm going to specify all this as a string.

This is going to be just like normal CSS.

So within any CSS file,

we would typically put the name of the element that we want to affect.

So I want to affect a Q push button.

That would be followed by a set of brackets or curly braces.

The first thing that I want to affect is I'm going to say font.

And I want to give it a font.

And I'm going to say this font is going to have

be 25 pixels or a font size of 25.

And let's be creative here.

Let's say comic sands as our font style.

And then I would like to give a padding as well

of let's say 10 pixels to each button.

So I can specify that like that.

Great.

So each button is going to have this styling to it.

All right.

We haven't added the color.

We've given it a font size, a font family, as well as padding.

Going down to each button now.

Let's take our master layout and let's set our margins.

So this is going to be a small amount of spacing

in between all of our buttons.

And let's say I want there to be 25.

The right left top and bottom.

That's the margins that I'm giving each button.

And I can justify it just like that.

Finally to end things off.

Let's go down to our bottom right here.

I create my main window object.

Before I show my main window,

let's set some styling to this.

Now the question becomes, what do we want to style?

I want to style my entire app.

And our entire main window is our queue widget.

So I can set that like so.

In here, let's just say background color.

And let's give it a background color.

So let's say like, oh, I don't know these.

Let's say one, two, three.

Interesting color.

It's like going to be a really darkish black blue.

Let's try it.

Let's run our code.

Okay.

So unknown background color.

And that's because I spelled background wrong.

You can see the comic sands taking place.

That's really cool.

Let's go down.

Background.

And I also noticed one more thing that we didn't put in.

Oh, okay.

So far too dark.

Right.

I'm not a fan of that.

I'm going to change a few details.

Let's give it like a lighter color.

And I actually have a color right here.

And also, my delete button in my clear button.

They did not have any styling to them.

I'm going to go up.

So I actually create them right here.

I have my self-doctor property in my self-doctor delete.

And both of these are going to be our buttons.

For each button, let's say self-doctor.

Let's say set style sheet.

I'm going to actually take this because I want the same properties as my other styling.

Great.

We can copy this.

And for our last one, let's just set our delete button.

Running our application.

There we are.

It looks amazing.

It looks much better than the last product we had.

Congratulations.

That is the completed calculator application for our course.

Going into the next project.

Let's take what we've built here and build on top of that.

And create an app that's going to add even more functionality that we can use in real world situations.

I will see you guys in the next lesson for our second project.

Welcome to our next project.

In this project, you're going to learn how to combine multiple modules to build an interactive photo editing app in Python with PiQT and the Pill module.

Let's dive in and let's take a look at what this app is going to look like and what it's going to be able to do.

Here's the final product of what we want to get our app to look like.

What can this app do?

Well, we can select an image from a folder from the desktop.

We can apply filters to the image before we edit it.

We can edit all of our photos using the tools that we implement.

And finally, we want to be able to save the photo we edit to our desktop.

Pretty cool.

Now looking at the app, what widgets do you see in this app?

What widgets do you think we're going to import from PiQT to build our design?

Here we go.

How many of these were you able to get right?

Hopefully, all of them.

If you happen to miss any, it would most likely be the Q combo box and the Q list widget.

As we haven't used these widgets yet.

Our Q list widget allows us to have a list of things within our app.

And then the Q combo box is essentially a drop down box.

And the box drops down and it allows you to select an item from that box.

All the other ones you're familiar with.

And you may be thinking, Josh, this is a picture.

Why did you say Q label?

Well, we're going to look at that closely.

But in the initial design of the app, it's easiest if we just set this area to something that's not the picture yet.

So I'm going to say Q label.

In the future, we are going to change the value of this Q label to become a picture.

The final point we need to think about now.

How would you like to design this app?

What's going through your head right now?

Well, so far, you've learned three layouts.

We have our QV box, which is for vertical or columns.

We have our QH box horizontal row.

And then from the last project, you were actually introduced to Q grid layout.

What do you see? How would you design our app?

How I've put it together is I have a master row.

This master row, everything will be added to.

But instead of adding it individually, we can create one, two columns.

We can add the items we need to these columns, then we can append it or add it to our row.

Pretty cool.

Now, before we get into this new module, pill, which is going to help us edit photos with Python,

and before we implement any functionality to our app,

we need to focus on the design of our app.

So far, we have created two projects.

You were introduced to PIQT with our warmup random keyword app.

In the last project, you created your own interactive calculator.

I want you to use the two projects and everything you've learned in these last two

to create our initial design for our app here.

Let me go back. Here is a refresh of what you need to add.

Let's head over to the next video.

But before you do, I want you to at least spend the next 20 minutes.

And I want you to try to design what you see here in VS Code.

I'll see you guys in the next video.

Here we are in VS Code.

In this lesson, we are going to set up our initial project for our app.

Let's jump in and let's set up our initial design.

Starting things off, what do we need to import here?

Well, let's start with our design.

From PIQT5, what widgets do we want to import?

Well, our two most important, we have our Q application.

Let's say Q widget.

What else do we need for this app?

Well, based off what we discussed in our lesson, we'll need a Q label.

We will put in some Q push buttons.

We have a Q list widget.

This will allow us to add the items we select to a list.

We have something called a Q combo box.

Let's start to think about our design.

For the design, we know we're going to have some rows.

And we're going to have some columns.

Great.

I think that's a good starting point for our widgets.

For our alignment tools, who remembers the module for alignment.

We can say QT core.

Specifically, I would like QT.

And we can start with that for our setup.

Great.

I'm going to begin by creating the two objects that we need to start things off here.

So app and let's say main window.

That's our Q widget.

Great.

I would like to set my app title, so set window title.

And let's call this a photo QT.

My version of Photoshop.

Let's set our initial size.

And I can say 907.

Great.

I'm going to jump down and let's get our template shown.

So main window.

Show.

App.execute.

I'm going to give it a quick run to make sure everything checks out before we jump into our design.

There we go.

Great.

Working.

This is the size of our app.

And my template is all ready to go.

We are ready for the next part of our code burger.

Speaking of the code burger, let's label a few things out to prepare us.

All right.

Now that I have things labeled, I'm going to jump here and I'm going to create all the widgets

we want to see in the app.

Now this can be in any order you want as long as we have them all.

So based on the app we're trying to create, I'm going to work left to right.

At the top we have, let's keep it with good name.

So I have a button for my folder.

And this will allow me to click and access my desktop.

So that button will say folder.

Under that, we have our, let's call it our file list.

And this is our queue list widget that's going to contain all the files within the folder that we select.

We are going to have all of our editing buttons.

So now comes the question of what editing tools would you like to add in your project?

You can read some of the documentation and be creative to what you would like to add.

I have selected the following.

So I'm going to create a rotate left button, a rotate right button.

Let's have a mirror.

Let's have a sharpness.

Let's say gray is easier than black and white.

We have a saturation.

And we have a contrast.

I could say blur as well.

That gives our tools more ability.

For each of these, they're each going to be a queue push button.

And each of those will have a string.

So let's just go down and let's add those.

For hate, we have our objects ready to go.

What would you like your buttons to say?

So let's initially say left.

Right.

We can keep all these variable names that we initially use.

We can just keep those.

That brings us to our next widget that we need to add.

I need a drop down box essentially.

So I'm going to call this, let's say drop down box.

And in order to get this into PiQT when you're working with this widget,

this is our combo box.

So let's call this filter box.

And I can say Q combo box.

Now, we need to add the items.

What do you want to see in the drop down box?

Ideally, I want to see all of these in the box.

To do that, we can take our newly created object,

filter box.

And let's use the method add item.

I want to add a single item to my drop down box.

The first one will be my original.

So I need that because when I apply a filter,

I would like to have the ability to revert or go back to my original photo.

So let's say original.

I am just going to go down through each button I created.

And I'm going to add that in here as well.

I now have my combo box with each of my buttons added in there,

which we will use to apply a filter with later.

Very good.

My final item is I want to create an object for my picture.

And this is the actual area in the app that our picture is going to appear.

But initially, we don't have a photo.

So I just want to create an object that I can set as the initial

placement in my app.

Later, changing to insert a photo.

Initially, let's just say Q label.

And the label is going to say image will appear here.

We can just put that text like so.

Awesome.

All of our objects have been created, which leads us down to our app design.

The master layout for my app.

So I'm going to create a master layout.

And I want it to be a row.

So I will set it as a Q H box layout.

Within my master layout, I know that I'm going to have two columns.

So I can create column one and column two.

Let's begin with our first column.

What do we want to see in this column starting at the top?

I want to see the folder button.

And let me show you guys our app.

So this is what we're aiming for in our design.

I want to see this button up top above my Q list widget, my dropdown box,

then all my buttons.

Let's add those two our column one.

The first thing we want is the button for folder.

Next up we would like our file list.

This is the Q list widget.

I would like to see our filter box.

And directly under that, I'm just going to go through.

And I'm going to add each button that we've created up here to our screen.

All of our buttons are here in their added.

So column one is completed.

And column one contains most of our objects.

The only thing that we want to see in column two is currently,

it's just going to be our Q label or the picture box.

Because I want to give my picture as much space as we can.

So we have more editing space.

column one in column two is completed.

What is the next step of our code burger?

Well, let's take our master layout, which is a row.

And we can use add layout to add column one as well as column two

to our master row or the master layout.

The final piece of the puzzle, let's take our main window

and let's set the final layout to become our master layout.

Let's give our app a run.

Here's the app when it's loaded.

Now, it looks a bit strange and that's because this left column

is actually taking up the most room.

That only leaves a little bit for our image.

When in reality, we want to flip this.

We want to have this the opposite way.

I want the first column to take up the least amount of room possible

and give our image the most space we can.

Let's close our app.

I'm going to kill my terminal in here.

I'm going to justify how wide do I want column one to be out of 100%.

Let's say column one is going to be 20% of the entire screen.

This argument is called stretch.

It allows us to justify how much of the screen we want that column to stretch

when we run our app again.

We now have it exactly how we want it to.

All of our buttons are on the left, our editing tools.

And our drop down box has the options that we've added to it.

When we click one, we will have this apply a special filter

to our image to see if we like it before we go and we click the black and white button.

Great.

Our design is done and we're ready to add the functionality to our app.

I'll see you guys in our next lesson where we are going to discuss just how to do so.

Now that we have our app all set up and ready to go,

it's now time to introduce to you this new module that we are going to be working with.

This new module is called the pill module or more specifically the python image library.

Now before we implement any of this code within our project,

I want to take some time to just play with the pill library in its own file.

We can break that down, understand that, then we can take what we learn and use that within our app.

Let's take a look at how this new module is broken down.

The python image library allows us to work with real photos and python.

So imagine the photos you take on your phone or your camera.

We can take those photos and we can edit them in python.

And if you broke this down, this is like a really basic version of Photoshop.

But the more we build on the more advanced we can make our apps.

And if you notice here, I've actually put this how I structured the breakdown of the python framework.

And the pill library is actually quite similar.

Pill is like a massive library or module.

And within pill, we have other modules that we can import individually to achieve a certain task.

Each of these modules contain functions and properties of their own.

This is very similar to how PyQT is working.

We will be using three modules from the pill library.

The first one is called Image.

And this is a class that holds properties and methods specifically for working with pictures as files.

So you should start to think now.

How do we work with files in Python?

How do I load a text file or a JSON file in Python?

Think about that and get ahead start.

The next class that we can look at is Image Filter.

And this is a group of constant variables that we can use to apply filters or rotate our images.

Apply filters or rotate our images.

Remember that.

And the last one is called Image Enhance.

We can use Image Enhance to enhance our images.

So if you're used to Photoshop or the editing tools on let's say Instagram,

there are tools for saturation, contrast and vibrance.

We can use these with Python and we can get those from the image enhance module.

Now that we understand these three modules that we will use from the pill library,

let's take a look at a few code examples in what they actually do behind the scenes.

Here is some of the code that we're going to be using and it's not in any particular order.

Except the first one and the last one.

Because this is the overall structure we will use in the app going forward.

To kick things off, we can import pill, but remember, pill is massive.

And just like PiQT, we don't want to say import star.

There's too much happening.

So be more specific.

What do you want to import and what will you be using in your app?

I can say from the pillow library,

import the image module, class, image filter and image enhance.

And this is the structure to import the classes we are going to be using in this app.

We have a method called convert, convert takes an argument of an L.

Don't ask me why? That's what it is.

And what convert does is it converts this image pick to a black and white image.

Pretty handy, pretty short, and that can be done very quickly.

Next up, we could increase the sharpness of your picture.

Now, by changing the sharpness, this is actually a filter we are applying to the original photo pick.

What do we want to filter?

Well, I want to apply the sharp and filter that is a part of my image filter module.

And it's stored in a variable called sharp.

All right? Now, we've seen the basic image module.

We've seen the image filter module.

Now, let's look at the image enhance module.

If I want to make my picture more saturated or add color, I can do so.

And how we do this is we create our variable and the value is we take our class image enhance and we apply a subclass color.

What do we want to add color to this pick, this original picture?

And I can enhance that by 1.2.

I say 1.2 because the picture begins at 1.

So I'm increasing it by more or less 20% 1.2.

If you want to mirror an image, you can use your image class and you can use something called flip left right.

And finally to save a picture, you can just use the pill save method.

We can link that to our new picture name, and then our picture is actually saved within our desktop or within the escode.

Now, I asked earlier how do we open text files in Python?

And I wanted to get you to think about that because we can do the same thing with an image in Python.

We can use the Python open function.

Take a look at our code, try and interpret what's happening.

If you need to pause the video, please do.

At the top, we always import everything we are going to be needing in our code.

So because I'm using pill and images, I'm going to import the pill elaborate.

Then we can use the open function just like we do with text files with open.

The only difference we need to do is I need to specify what am I opening.

So with open, I want to open a picture called selfie.jpg.

And this picture I load, I'm going to give it a nickname and reference it as pick.

So now, anywhere I use this variable pick, the value of pick is actually the picture we decide to open.