So, let me hope so.
Oh, was it
was I think I'm going to start recording.
Okay.
Hello everyone. So, what I was mentioning is that.
There was some discussion about a Discord server.
It's great. They all are using a Discord server, I'm not going to specifically join it for class discussions.
If you all you need. If you want me to create channels for discussing specific things on teams I'm happy to. I would encourage you all to try to participate in the Team Server because for two reasons.
One is I can give you class participation works for it. But the other thing is, then I can actually respond to your questions on teams. So, I can't give you another give you any credit for anything that happens on discord if you're helping each other
out but I could give you credit on on teams. So, think about it so I've noticed most, a lot of you are not using teams I've hardly getting of the questions in the past.
I in other classes I answer lots of questions on teams. So,
up to you.
So we're right now at lecture seven those questions about the assignment assignment one is officially due tomorrow. But you can submit it until
I think another week. It's a when I forget when submissions closed on bright space but it's um, we talked about that last class. So that's how I've set it up so you can turn the other week with no penalty.
The reason I have the due date still tomorrow is because assignment one is based on the material from tutorials one and two. And we are now, I'm we talking about tutorial for, and I'm about to end you know once I put up the time at five I'll be putting
on assignment, too. So, if you're working on assignment one significantly after tomorrow you're behind.
So, there's time certainly for catch up, you know, catch up and things but you are running behind relative to where we're covering the material. So, you know, that's why I'm keeping these due dates here is because basically this is when you ideally do
get the stuff down so you're really, you know, all set. yeah.
Yeah, I know about that and that's why I added in the slack there but I'm just trying to say this is what you should be trying for. So, so if you're meeting these deadlines, you're doing great.
I am happy to answer questions about, you know, about assignment one, if anyone has any questions on that. Otherwise I'm not planning on talking about it, otherwise I want to talk about tutorial for
any, any questions about assignment one
is the final due date of the assignment tomorrow No, thank you. Yes.
Well, it's so the final due date was. When did I say it was.
So I said it was.
Yeah, until the 15th Yes.
So exactly what is, you know, it's your accepted on telephone solution discussed in class in the 16 basically, that's the hard deadline, whenever I discuss the solutions.
And it will be accepted until February 22, and then I'll post the solutions the 23rd and I'll discuss it in class and march 2.
So, this is how I'm sticking to the plan here has we figured out last class.
Well I read assignment to assignment to should be out by next week.
I'm one if I'm new I'm working on tutorial five right now. And then I'll work on the second assignment because the midterm.
to.
will be.
So
is the midterm going to be a bright space quiz, no.
That's the format for the midterms use.
It will be
split up for grading, so make sure you have.
So, just to.
I'm not going to guarantee I'm gonna give you this year grade but I'm going to be, but I will probably give out some zeros if people are not are just ignoring the things I'm, I've created a validator skill program for you to check.
So, you should be able to know what you know what is.
Will you get assignment to marks back before the midterm, hopefully, hopefully I mean it depends on how early things because we have, we should be able to do it because there's a week between.
When you submit it and then when the midterm is. So, we'll try to get will try to get you your grades before them.
So okay so that's.
This is basic logistics, but any specific questions about the way dm Simon one.
Okay, new material it is.
Scott.
So we're we're talking about in tutorial for. We're talking, so this is the program here.
And I will show you the program now what it does. But, and then we're going to start building up pieces of it so you can understand them before. As we do them.
So it's.
Okay, so let's go to the work.
fine.
Well, it's actually Russia Russia with the previous I haven't tried reading the preview for this should work.
So, by the way, if you go back and run the similar code for this from last year, it won't work.
And we will discuss that in a bit.
There we go.
Diagnostic D.
Okay, that's all.
Wow. Okay, yeah.
Okay, good.
So that's okay it shows that doesn't show you much okay that previews mostly useless.
But let's try. We'll build it here.
So, while that while that runs the simulator comes up.
The thing you should know is about this how to organize this we have.
We've a main content viewers before, this is our main view.
It has four state variables.
Here we know kittens move without this and then we have a helper function here, and then we have our main one which has a menu which has this thing called active image and some the menu has some buttons.
So this is all
up here shortly. So this.
And then if we look down further, we have the active image view, which has lots of bindings, to the main view.
Okay, good. There we go.
So here is here is this thing we can do this, we can move around. We can click it and rotate it.
We can do a long press and it will reset to where it was. And if you can zoom in. So if you hold on the Option key while you're in the simulator you get these two buttons.
And you can do and
you cannot do that. Yeah. So, and then if you go the main menu.
Do this.
And we can zoom in on Roshi, and we can click it to rotate them around upside down Roshi and panic and stuff.
So, And then we know, long press it.
And it goes back in the center.
So, so that's what this program does.
You know, It's not that complicated and again, you know.
But what's the answer. So the big the heart of this of course is this image, which is the active image view here.
And we had the most of this is this a single image thing.
And then we have this, You know, it's interesting.
And then we have a bunch of helper functions. And then, then there's the preview thing.
So, in order to understand this, I think it's let's start with building up stuff, I saw Whoa.
Um yeah I had a question for you. Yes, I'm right front line number 59, I'll tell you when you have added all of these textures and your program are all these gestures predefined.
Yes.
What well we know that hold on a sec with the like this like gesture here that's. These are predefined things. But this week, you don't have to explain to their program would gesture is right.
It's all predefined, the way that you've written over here on long breath gesture yeah yeah exactly yeah long press gesture, this is all provided for you.
Okay.
Right. You don't have to manually define what a long practice is part of swift UI to be specific. And, because of the way swift UI works because it's this declaration framework.
It really defining these, you can define these sort of things on your own, there are ways to do it but you generally have to get out of the declaration of mode, you have to start.
Yeah, you have to kind of go into into basically UI kit to do those things.
And it's so it's possible but it gets very messy as much harder. And that's one of the beautiful things about swift UI is look at how little code is required to declare these gestures, you know, and and we'll go through this and I'll build up and you
can see it but it's just ridiculously little amounts of code.
And let's make a new project here so we're going to call this new project.
So minimize this File, new
right there is my new project, just outside the new project real creative will call this
February to
recruit here.
class.
And there we go.
So we've got our normal hello world, I'm going to, in my view, I'm going to get rid of the Navigator because I do not need the navigator, and I do not need the inspector.
Probably don't even really need this, but we got this.
So, Oh, actually I do what the now here. So the first thing we're going to do actually is.
is. Well, yeah because easy. First thing to do is we're going to add an image to our assets here.
And then we're going to view the image.
So, back to the.
So if you look here, there is a thing called assets.
We can click on assets here. And if you like. Normally the app icon. If you want to add it in here there's all these places for filling in the different size app icons.
And you can define an accent color here, but we can also do this.
You also do drag and drop so go here.
Okay, we're move this to desktop to ok so now I've gotten like the images I had that there are hosted on the, on my website where you were downloading them directly in the other version here we're going to add them to our thing so I've got images.
Drag and then.
So you'll notice here I got kittens, and I got Roshi and they brought in like a defined as one.
So if you want to make a program view that image, we can now go to content view.
And we can now say
we'll make a beast Doc, because that way we have things, you know, one of the top of the other will keep the that there.
And we'll put below it, image.
And this should work, but be kind of ugly me see if I can see at the preview or
building to
anyone think what does it. So what this is going to do this will show Roshi, and this will show text, just
loading the simulator, I don't know I find on slow machines the preview doesn't work that well.
There you go.
So sure enough, it showed the image.
But,
but it takes up the whole screen, it's not scaled to the program. So if we look back at the other programs, other thing we can see that we had some other
windows let's go back to here.
You'll notice that when we do the image we have several things that we did to it.
And so the two things that we have to do here are those two things we want to do a recyclable and Scale to Fit.
So if we put those need that.
Let's go back
there.
Now we do this.
Resize will basically says that you can change the size and scale to fit makes it fit onto the screen.
And so now, there is.
What an aircraft the name of the image isn't in the assets.
That's a good thing to try.
So that's.
nothing happens there, but you do get this error here, no image name Roche found an asset catalog, so it didn't crash the app, but the debugger does notice that the image isn't there.
But yeah, so you can see we're already kind of.
Could you put things other than images in the assets. Um, I think you could probably put all kinds of things in there like i think i think that's where you would put like sound files, and I think even video clips and stuff I think they can all go and
assets, I have not honestly played much with those things but I'm pretty sure that you know it can handle things like that now of course remember assets here are,
you know, you know, the assets here let's see what, let's see.
I haven't played too much I nearly done images with the assets.
How do you add an asset, I literally just to add an asset I just dragged and dropped something from me I had a window here and I literally just did this.
I think there's another way to add it. I honestly, I think, add files to, I think you can do this but
I honestly the easiest way I found to add assets here is dragging and dropping.
And then you just call it using his name. Exactly. And so you can rename it here to whatever name you want.
Now, in the version I gave you though.
It doesn't have any built in images.
And so, what instead we have is this.
What do we have instead here is we have this thing, a sink image.
And so all a sync image does is you just give it a URL, which you specify a string, which is the thing you want.
And it puts up that image.
So, we can do something with it.
So at the very least we can do this thing of. Let's try doing that. Okay, so let's copy this
copy that over here.
Okay, so we're going here now, instead of image Roshi.
Should I copy coffee and.
Okay, we'll do,
we'll do this one.
So we're going to.
Okay, I got the desktop.
This pulled her picture of me
want to minimize this. So I'm just an image, oh no that's not that's not what I'm being stupid. That was all point.
I want to go here.
So, here's an image of my face is not in my Asset Library.
That's why why do because otherwise I'll be using the same image which we'd already added to it. So instead of image, we can say, a sync image
was a URL
URL.
can't we can't do this yet.
So let's see if that works.
So we'll explain the basic part in a second.
There we go.
So, Notice what happened there.
So, notice what happened at first. Hello World was at the top of the screen, and there was no image.
And then all of a sudden, it appeared, and then happened, so.
so basic image loads it in the background, and then displays it was in the background.
So this notion of synchronous versus asynchronous i o is very important. Most of the.
So know when you do most IO. When you go to the next line of your code you can say that previous operation finished tonight when I know open a file the next slide the file has been open when I do a read after that the read is finished, but actually those
operations, anything involving IO is much slower, especially for the network right it's slower than the computations that your program can do. So, it makes a lot of sense to start the operation and really typically as different thread.
I mean, there's different ways that's implemented underneath and we won't talk about how it's implement our need, but you can say it's in the background that somehow the operation is happening while your code is doing its own thing.
And so here with this image being loaded over the network the images being loaded from the server, while our system is already put up an interface.
Why did I have to add a JPEG to the my face, um, I did
a Why did I put, it's just a file name.
It's just whatever the file name was this file was called dot jpg, the other one had an extension jpg.
That's all.
It's just part of the file name there's nothing special about that that just tells you about the file format, which is a JPEG, which is an image format.
So you know the key difference.
What's the difference between jpg.
and and PNG images expandable No.
Okay.
No JPG can have clear backgrounds.
So, well it's not so p amp g know PNG, take up more space.
pn cheese or bigger, in general, for the same resolution and,
same resolution Bit Depth everything. png will be bigger than jpg. Because JPG can be compressed a lot more so.
So, you're a high quality jpg, when I mean well that will compress jpg, you will be able to tell that they've been compressed.
So you can come, so it's.
You basically never use PNG for anything photographic. I mean, you, you would say a raw image format is kind of like a PNG accepted has some more information about like how the sensor setup and things, but you'd always that's used for photo processing,
and then you would have some other format that you would actually use it any sort of application.
This is these are important to know because you're gonna have to choose when you build these apps, what kind of images, you're going to use, and essentially if it's a very simple image for something like you know straight lines or things you're going
to use a PNG, because those will compress very well.
But if it's a more complex like a photograph of some kind, some sort of image of the real world.
You'll want to generally use, you know, JPEG because you'll want the lossy compression, to make it smaller on, and if you do it right, you shouldn't be able to tell.
Notice that when you go to the assets here though, there are these different numbers beside things and here. It's
so.
So vector graphics.
Technically, everything's represented using factors basically their lines and you see the areas between them. And so because they're in an arbitrary coordinate space, you can scale them up or down arbitrarily and you have no loss of quality, so.
snow, Adobe Illustrator what's a good open source of vector escape.
Those the common formats.
So, up. This is sort of a little side diversion but it's it but this is important stuff if you don't know it for understand what we're talking about with these assets.
So anyway, going back here let's go to content view here, we've got our image here now know that there's some time.
Well, first one knows we can't do this recyclable and Scale to Fit immediately.
And the reason we can't do that.
Is there something like dot, then.
Yes. Essentially, but it's more like if you know it's more like callbacks. So we'll see this in 2406, but this is, so this is definitely a sync stuff and what we and this is part of what we're doing with the having closures, that we pass in.
So, if you look at the other code here.
You notice what we did was we had a sink image, we have the URL which specifies the image. And then we specify content and content is a closure. Here, that takes an image in as input.
And then processes and then does all the things to it.
And so this is so it's image dot here this is where we have so when we just do image, otherwise and use it to build an asset we can directly do these things, but here with a basic image we do it here.
And then we can also have a placeholder.
So, I'm first guy just do this.
And let's see if that, that's what let's see if we can make that work. And then we can do content.
I'm going to just hide this,
this angle here.
So.
not going to specify the position we don't care about the position.
Oh that's.
Oh, that's why.
why, why is my thing all broken. This is part of the frustrating part of a CG point just some point in vector Yes, exactly. I'm xy is no xy is a point, you know, a vector is always align with an angle or watch I guess.
Yeah, that was a vector is actually aligned with the direction on it.
So, um.
Let's go back to the other one.
I really like syntax for this is always kind of content image an image.
Okay URL is fine content placeholder
action all be fine.
What did I do wrong.
So, so let's try to figure this year so we've got text world we got a think image, you're all here a strings there.
That's fine content. Oh,
Comma.
Okay, now we made the image, basically trying to get it to fit in there.
And now it's happy.
We did find the image.
Yeah, please. It showed while the image like so. Progress view is just a standard thing, which shows the spinning wheel, you make your own custom placeholder.
But this we're just using the standard iOS placeholder for image loading.
There goes boom.
So you also you saw that see while it was loading we got the little Spinney dial, which shows as interesting but then it's.
Go. Well there now we could say, I'm not sure if it's a skill to fit with our Dubai. But yeah, but so if you look at the
way we're doing the other code so the other code I had it.
I put. So I have this code here which is defines what the position should be based on where it's been dragged to
just actually this isn't really i mean i.
This is actually not needed. This is actually I should fix this code this isn't actually needed here, or we, we actually, because this is the progress bar we just need
three new size and width.
Oh yeah.
This is basically the same thing, but it's just putting it in the, the progress bars just always in the center of the, you know, in the center of the area.
So,
okay, we're running out of time we'll probably will talk about the I'll talk about tapping first, and then we'll move on. So let's just bring over this top gesture.
Let's do this first.
So if I wanted to rotate the image.
I can add a rotation effect angle,
angle object.
Rotation effect.
And then we run this.
Let's see here.
To loading.
And we get a 45 degree angle.
And then we can, so that's all. Now what we can do now is we want to do something when we rotate this. We want to like be able to click on it effects.
So to click on it, we want to add in.
So this is on Jeff tap gesture.
And then we have to give it a
its own tab, so.
So, so, perform this action top gesture and I think it's.
What
did some autocomplete for me, which is a little confusing.
I don't want that I don't need the whole thing.
So I'm not going to use that. There's all there's inputs, you can get here but I'm not going to use use them I'm just going to do.
So we're gonna make this thing go.
So what self self refers to the basically the object you're in so because it was referred to, like if I say self here.
And no, it says angle.
So it's referring to this right here.
We don't need to use when we're in here. If the.
It depends on what the scope is and stuff so I can always to access these properties here, I can always do self.to access them but most the time I can just say angle.
equals, equals battle here itself dot angle that's kind of good.
So what I've done now is I've changed the on top gesture. I say, perform, I think.
So when do you you've tapped once perform this closure, which sets angle state to be the old, the old, you know self angle degrees plus 45.
Why did I make it a state variable.
What does it say here.
I think it's taps said on tap gesture.
Why is it not
Oh count,
count equals one in there.
Yeah, thank you.
So, why they make a state variable. Well, first let's check to make sure the code and then we can works. So I did this right.
If I did this right then we can.
So, question, why does have to be a state.
Why can I get rid of this
getting there. What's the year cannot assign property, assigned to property self is immutable.
So here's the weird thing in.
So understand that regular.
When you do regularly just things as properties inside of a struct, even if you define whether you say var or let doesn't really matter because it's part of a struct, and so its value can't change it has to be the same.
When you put this decorator in.
You get essentially what angle turns into is an immutable reference to a mutable object.
And that immutable object represents some state, and that state will can be, you know, has a lot of functionality associated with it because whenever the value changes the entire view is redrawn on the screen.
So, just having a some variable that just changes you might think well don't I want a variable that changes inside of here. Well, don't you, well if you're going to have anything inside of a view that's mutable, you probably want it to be some sort of
state variable there's there's fancier version of state variables which we won't go through, but like there's things that basically are detecting when they change the update the view.
That's all you should have interview, don't have mutable state in there, that doesn't affect the display because then why is it in the view.
So, so you have to declare So since we're going to do an assignment to it. like this.
It has to be declared just at state. If this was in some other contact like inside of a function, we could have a VAR and then it's just a mutable variable, but no, there's no weird machinery of updating the view.
Anyway, I've been talking now for a good while trying to say, Well,
I want to show. Okay, I'm going to show.
I want to show the drag event, nothing first and then we can, so.
So let's look at this dragon here.
No will do this next time I think I feel like I've given you enough to digest. Oh, no. the last thing I will talk about is this.
Some of you have been building your apps as Mac OS, as well as iOS things.
One thing you should know is that a single image.
So.
so this is important to know the available mac os 12 thing. I explained the magnification, I'm not going to discuss the magnification and drag stuff. I'm going to discuss that all on Friday.
So I'm going to go through all that and try and lecture, I think you can probably figure out much of it, it by looking at the code.
But if you can't, that's okay, we're going to talk about it Friday so I my plan today is I was going to end things I'll stick around and do check offs for past tutorials.
If you've gotten tutorial for done. Sure, I can check you off. I'm, I'm guessing most of you won't have done that yet and that's okay.
But tutorials one through three and answer questions about the assignment as best I can without giving away answers.
Can you still have the assignments, after tomorrow, you can hand in assignments, until submissions close on bright space.
Yes, so you can submit until the 15th. As I said at the beginning of class.