All language subtitles for 18. Our First GUI

All right.

Your head must be spinning because of all these looping.

That's.

That's a really bad joke.

But I thought it was funny because I've been recording for hours now and I think I'm going a little

kooky.

So this is going to be my last video for the day.

Now for the course.

But we're gonna do a little fun exercise.

Now I call all exercise is fun.

Obviously I'm biased but this one this one's especially fun.

Where are we going to do well.

We're going to simulate what a computer does when when we have something like a graphical user interface

that is a computer is able to display let's say even an image over here right.

I can see the robot over here I can see the mouse.

This is a graphical user interface.

I see pictures I see images on my screen.

These pixels on my screen and I can control them.

Well we're going to create a basic version of this to show you how a computer would work just from the

stuff that we've learned up until now.

Using loops and using conditional logic.

So what are we going to do.

Well this is the exercise.

And you can check out the reptile here or you can recreate this or again in this video you should have

resources attached that you can play with it yourself.

And what I want you to do is I want you to loop through this list of lists.

And every time you encounter a zero I want you to display on the screen over here an empty space because

zero in a computer denotes nothing right.

We want a blank on the screen.

However when I see a one I want to simulate a pixel right that tiny tiny dot on our computers that can

be full of colors it could be green.

It can be blue can be orange.

But for our case I want it to be a star and using that.

I want you to create a program that takes this picture that let's say is in our database or in our computers

hard harddrive and displays it on the screen using space for multiply.

And all I want you to do is when I click Run I want you to display that image right here.

All right.

This is a little tough one and I'm kind of letting you figure out on your own.

But trust me you've learned all the tools necessary to do this.

Pause the video.

Give it a go.

Otherwise I'm going to show you how it's done.

So the very first thing I like to do is to think about what I'm about to do.

I want to make sure that we have a plan in mind.

So I'm going to comment first and I'm going to say well we definitely want to iterate over a picture.

Right.

So we're going to do some sort of iteration here.

So that's number one and then in here I want to say that if it's a zero then I want to print an empty

space and if it's a one I want to print a star.

All right.

So that's the plan.

OK.

So this shouldn't be too hard actually.

Before you get started in order for this to work you need to google a special parameter or special option

that you can give the print function and as a matter of fact the print function that you need to add

or the option that you need to add is this and option.

And if we scroll down it doesn't display that well I can see here string appended after the last value.

So the default when we print something is a new line.

But ideally we might not want a new line.

So when that happens you might have to use this and option.

Now I know I left it really vague.

I want to.

I want you to practice googling this and and figuring out from your mistake you're gonna have a bug

when you create this code when you try to display this information but try to solve it using the tools

that you have of problem solving.

All right enough talk.

Let's get to it so the first thing I want to do is iterate over the picture.

I'm going to say for image in the picture because well this is one picture right here.

So this is the picture but it's inside of a list because we can have multiple pictures and then I'm

going to loop once again over this individual list.

So once again I need to do a for loop and this time I want to say for pixel because each one of this

is a pixel in the image.

So this is a nested for loop.

Now I'm going to add a conditional and say if pixel equals one then I'm going to

a star.

Otherwise

I'm going to print an empty string.

Well maybe not empty right.

Because we do want a space a blank space in the image.

All right so let's see if this works.

If I click Run that's not really why I wanted.

I want a clear image here but I'm just getting things one in line.

And remember this was the little trick where a print every time it prints it creates a new line the

default again if we close this you'll see is that end equals to this escape sequence of new line.

So we can change that by simply saying star comma end and then I'm going to say for the end I don't

want a new line I just want well a string but an empty string and same over here I do comma

and and if I click Run All right.

It's getting a little bit better but now I have an issue where we don't have any new lines.

Everything is on one line.

That's not good.

How can we solve this.

Well ideally the end of this first loop where we're just going.

The image or the line in the image at the end of this.

We create a new line right here.

Right.

So again looking at the indentation I don't want a new line on every pixel which we had the first time.

But I also want to add a line between the lists of rows so maybe a better name for this will be a row

in picture and in here I'm going to add the end of this for loop.

So after we're done looping through the entire row at the bottom here I'm going to print an empty line.

But remember the default is going to be a new line.

So again an empty string.

It's going to default to a new line.

And we're still going to have this code if I run this so I get an error because image is not defined

because I've just changed this to a row.

So let's do row here click Run and look at that.

We have our beautiful Christmas tree.

If you don't think this is beautiful.

This is the best I could but this is a Christmas tree and we finally have a display.

We've used loops we've used conditional logic and we used a little googling to figure out hey we we

need this option.

Now our code works.

But I want to do something better here and in the next video I want to clean up this code a little bit

and cover a very important topic when it comes to programming.

I'll see on that one by.