So will come back again in this exercise you're supposed to produce an ad that draws a chart or a group
of graphs.
Imagine this is an app that takes a lot of statistics and based on that draws differing graphs with
different heights or different weights.
Now I've done one variation of that.
I'm going to show you and then you can build either that or something similar to that.
Or you can just get an expression of that and draw your own version.
So what they have done is this when you go in here you type it just throws a bunch of graphs up.
The numbers are put to use randomly.
But I'm sure you understand how to take those random numbers and feed the numbers that you want with
the software and also Currently it has only 10 boards and I'm sure you can find out how to change those
numbers make your app a little bit more dynamic so it can take on.
So it can take on five bars or maybe 10 bars or depending on the number of the statistics that you have.
Now for me for the sake of simplifying things and having less code to show you guys get it right the
way that is random and for you guys you can just you know build on top of that.
Also the colors that I have are being chosen randomly each time that I touch you could essentially put
the specific colors in that I I've seen a few libraries out there that people have written charts and
graphs and pie graphs and things of the sort.
And this is essentially one of those that draws some graphs where you guys.
Now I could always suggest that you pause the video at this point wait for a little while or give it
a shot on your own and then follow me.
Or if you want you can have a look at what I'm going to do and then based on that rebuild the app to
produce something that you might find useful for some of your applications in the future.
Now here is a little requirement that I want to pose to you guys and that is I wanted to set up to be
done programmatically like I don't want us to go to a storyboard not even once do I do everything within
the body of the View Controller.
So everything programmatically that chart application that takes on a certain number of balls and draws
them based on a certain weight or height or whether you want to think of our let's get started.
Good luck with it.
And you can follow me with my solution in just a few seconds.
So let's go ahead and get started the next court.
I'm going to go in here to start a new application.
I'm going to call it chart graph up and here is something I will tell you sometime in the beginning
essentially and that is I have obviously done this code before I could just go through the code line
by line for you or I could do another approach which is what I'm thinking of doing and that is to develop
the app as if this was the first time I'm doing it and I would just go to the different challenges and
I might write something that later turns out that I have to change it.
So prepare yourself for going back and forth between different pieces of the code so keep that in mind
please.
I'm going to go in here.
Get us started.
And from what I remember the good news is this is not usually the case but they do have the option here.
You can have a look at it and try to figure out what they want to do.
Apparently I have this white background that I have to be able to draw everything on it.
I'm going to call that canvas that Scambos for drawing everything.
So I'm going to go ahead and say I have a valuable called Canvas.
It is of the type you view and the commerce is going to be a new eye view and that view is initialising
with a frame and that frame is got x y Witan height.
A lot of this code I'm going to write them a little bit faster I'm not going to really pay so much attention
to it or there Witan height effect.
However I have to be self dot dot lbs dot that I'm going to say for that.
It's up to 40 feet that is 20 pixels under left and 20 on the right.
And then I'm going to say for the height do self don't view doth bounce that height.
Minus 60 this time simply because we have 40 pixels from the top and 20 at the bottom the subtotal will
be sixty.
So that's going to be my charmless then my canvas is of white background so I'm going to say Chamas
dark background color is a color that white and my actual view has a light gray background so.
So self Dadda view that gun color is you white light gray color.
So we got that part taken care of and of course we have to add the combis to our self of you.
So I'm going to say self-taught view that I view canvas so by not fire on this application we should
have the camera.
So let's go ahead and run that so I make sure that I'm not doing something terribly wrong.
So we got that part taken care of now the next thing we have to do is we have to actually make the boards
that we want to showing here and here are a few things that I know about those boards.
If I go back to the other application I know that each board should have a color chosen randomly.
Each one is going to have a certain event.
Of course everybody should have a height and every bar it has to be animated at some point.
So we have to maintain these bars within an array or some sort of a collection as well as their vits.
So we know where they are and what is there of it.
So with that in mind I'm going to go back to school.
So based on that I'm going to give this thought of with a new function.
I'm going to call it function.
Make your balls and it may make pause I need to change a few things up here in the valuables but I'm
going to get started with the make wars first and then realize what we should change.
So the first thing I'm going to do is I'm going to try to add one more I'm going to say let us call
it board that's going to be a white label and this label is going to be built by a frame and the frame
is going to have a Cjra.
They'll have to place it to somebody.
Now the question becomes where do we have to place this one where the first one going to be with the
next one is going to be so on and so forth for they could tell you are a few things one of them is that
the X is going to be zero for all of them because they are all stuck to the uttermost left side of the
canvas.
But the weather light is we need to change that.
Every time that we make a new one.
So for that one I'm going to have to actually produce in your valuable what I call their origin.
Why for instance at the very beginning I'm going to put that at zero even though that I'm going to change
as well over Origin why it becomes that.
And then we have to get it for this labor as well as a height for it's now the height of it our value
is that we have to somehow calculate the height of it.
Let me go back in here becomes a matter of finding what is the total height of the canvas and then dividing
it by the number of the bars that we have and then accounting for this little gap between them.
So in here I'm going to go ahead and say let's find out what is the total height.
I'm going to say let's just call this camis height and that becomes combis doth bounce that height and
that is the value that we have for the total combis height.
So if we get that number on I divide it by the number of the balls then I can get the size for each
bar.
And it's gap.
So the next thing becomes about how many of these bars you're going to have so I'm going to add that
one when I say let's number of balls let's say 10 to four now.
And like I said in a real life application you want to make this a dynamic thing.
But I leave it to you guys to find a way to put this as an argument for this function.
For now I'm going to assume there always is statically 10.
So now they have that I'm going to say well based on that let's highlight of each of these bars is off
the type CGU flawed become charmless heights and I have to get the camera's height and divided by the
number of the balls and keep in mind the number of the bar is an integer and we need a C.G. floor.
So we have to actually cast it into a C-g float.
So now we get the height which is the height of everything.
Essentially it is the height of the war as well as the little gap beneath it.
So we have to keep that in mind.
And also I'm going to suggest that for each of these balls you spend two thirds of the total height
to be the height of the bar and of one tared to be the height of the gap.
So essentially the height will be used as Tutera of this height.
So based on that I'm going to say height is actually this height supplied by two divided by three.
So we managed to find the exact height that we wanted and we're going to change something and that's
just a little bit of a luxury that we have.
You see up there we have a little gap if we don't have that on the origin where he's at zero.
We will get it right up there.
I want to have it a little bit lower.
And what is that lower that is essentially height one where the feet remain there for the gap and half
of that.
Let me write it down and maybe that kind of makes sense.
So this origin of why I'm going to bring it for the lower because height multiplied by 1 which is kind
of meaning that's what I'm putting it there.
Divided by 30.
So one 10 feet and that one tenth of the height on it divided by two because they want to have half
of it up then and half of them here.
If I zoom in to this you might be a little bit more expend artery that I'm trying to get this much this
time.
And that is half of the gap because the actual gap is this much.
So now that we have that I'm going to go ahead.
We also need a vet for all of our labels and the video is something that we're going to animate with
if you remember in our actual application it gets animated.
So I'm going to give it something like your five point points so at the very beginning we kind of see
them but they are not really being animated.
So I'm going to say that my view is actually five point zero.
Since each of the callers in here are actually a you or you label.
And they have a text and they have a font.
I have actually said they're fun as well as their text alignment.
So I'm going to go in here and say bar dot takes the alignment and that's going to be common.
And as this alignment center and then I'm going to go ahead and say bar that font and that's going to
be a fun dot system font of size.
Actually not this one.
I have to use the system fond of size.
Let's give you the numbers such as Torak of various small number actually I could actually trying this
down all the way to zero.
And then when the animation is running I'm going to crank it up to a number maybe 15 or 18.
I'm also going to go ahead and say Ball thought text color becomes color dot black.
And the only thing I still have to do is to choose a color for the background of the label.
And if you recall this column was meant to be a random color.
And if you want to be able to choose a random color each time you have to somehow store all of these
different colors somewhere preferably inside an array.
So I'm going to say I have a variable called crullers array that is going to be an array of all the
different UI colors.
And then within that I'm going to have to hide all the colors.
So I want to try to add as many of them as a child color dot of red and then I'm going to on color dot
green essentially the whole are G-B so color dot blue maybe not black because they're using like someone
else so blue.
And then I'm going to add color dot yellow and then I'm going to you or I Eldard magenta and then add
white color dot same on white color dot light gray color.
I can add a color dot gray color not green gray.
And then I'm going to add color.
Dark dark gray and maybe at the end I'm going to add white color or orange for instance.
So now we kind of have all the different colors that we could use inside an array other solution for
this would be randomly producing the colors by the R G and B values but I will leave that for another
lesson so you get familiar with all different ways.
So now every time that we make one of these balls we are actually going to give it to one of the random
colors from our callers array as well.
So I'm going to copy that come down here and say bore dot.
Background color becomes colors array and then we have to find a random index.
So I'm going to say let's run random index on that random index you have to put your see from the count
of the colors array.
So for say Arc 4 and on and on but I get an odd four random uniform with an upper bound which is you
in 32 of crullers array that count.
So we get that.
And this is going to give us a you eans 32 which is not what we want but we do want is an integer.
So I'm going to say Give me an integer of this value.
So you can look for Andong from something which is another in 32 converted to you in 32.
Give me the random result which is not an integer.
Convert it back to an integer and then give me the random index to be the color we choose from an array
and be assigned to the bar that we have.
Once we do that we actually have to add our board to there to the combis I'm going to say Come us come
us like that.
I view the board to it.
And this by now we'll add one bar to our species.
Not really what we want but we do want is doing this whole process 10 times or as many times as we have
the number of the bars.
So that's what I'm going to do next.
I'm going to say let's do this for all I mean.
I don't think if I meet the guy or not I'm not sure.
We'll see about that from 0 to number of bars.
Let's repeat this process.
So many many times or 10 times in this case.
Now I'm not using the oil in anything so I could replace it with with an underscore.
And then in here I'm going to say when you make the very first one and you place it in origin why that's
all good and well but then the next one shouldn't be built there.
So the next one should be all region wide plus equal height.
So whatever is the height that we decided which is the height of the bar as well as the gap underneath
I that to it.
So when we do this 10 times every time we add a little bit of space to it and we push one a space and
lower.
If this all works well by now we should be able to see ten little balls on the floor on the left corner
of our canvas.
So I'm going to go ahead and say make was this point in the view the pitches in here and I run the application
and now we have 10 boards that they are all only five units and they're all stuck for the left corner.
Obviously they don't animate or they don't do anything.
So the next thing we have to do is this you have to come here to make wars and say even though everybody
in here has a veto of five we actually need a bigger vet and we have to memorize that somewhere because
we need to use that to animate it.
Now for you if you were doing this as a real life exercise you would want to feed that as an argument
into your make boss function.
You would have an array that that array includes the number of the bars and for each floor would have
a certain weight.
But for me I'm going to make those values randomly essentially.
I'm going to come in here and say everything that you make fun of this was also do this say let's ball
w or bar with the same Shirdi become and viewed a random number that we have to produce from the video
of the canvas.
So I'm going to say Give me an arc for random with an upper bound of canvas canvas not bounce out of
it and I could perhaps put this in a different variable to simplify our code.
However he's is going to give us that error again saying that that is not.
And you in some way to combat that say make it that you and now part of it is not a C-g float which
is what I need.
So I'm going to say make this one a C G float C G float so convert that cost into it.
And I'm going to add a little thing to it as well just so that you know we have a bit of a safety in
here.
I don't want any of the numbers to be very small.
Let's say I don't want any number to be smaller than 50.
So I'm going to say by default at the 52 everyone and from David subtract 50.
So let me go ahead and remake this.
I'm going to write it off housewife's.
That's going to be disbarred.
You cut down pasted there and I'm going to say produce a random value from of combis minus 50 whatever
it is.
At 50 to it no matter what.
Which makes sure every bar is at least 50 points.
Now we have this far and we have the actual Boisseau we have the vets and the actual board.
And we have to somehow memorize them somewhere because we need them later on for doing the actual animation.
And here is how they're going to do it the most efficient way of doing such a thing is putting them
inside a dictionary or a separate class.
But I'm going to put it in a dictionary for now here I'm going to go ahead and say I have a valuable
that is my board a array.
It is not a dictionary it's an array of dictionary.
And that's an array of dictionary that each of those dictionaries are made of.
There's a key and a different kind of value because some of them are born which is a label.
Some of them are born of it which is a C.G. float someone to go ahead and say it's a dictionary of a
string.
That's the key and a value which I don't know what it's going to be.
Now they have the bars array.
I'm going to go ahead and say every time you're about to make the balls make it empty.
So bars are a becomes an empty new worry.
And then every time you make one of these bars and one of these bar vits you have to make a dictionary.
And I to this for array.
So I'm going to go ahead and say let's bar dictionary to be a dictionary of a string and a knee.
And that's going to have these values is going to have a value called Bar key and Boricua the bar itself.
And it has another key called bar that she just call it with a key and that's going to be bar vits.
So we placed both of our values inside a dictionary and data dictionary added 12 balls array of pens
and we are appending the bar dictionary.
So by the end of this process we should have an array that includes 10 dictionaries that the 10 dictionaries
each of them has the information about a ball of the type you label on it.
You could if you wanted to print this even though it's not very meaningful but I'm going to try that
for you in the view that lot.
Once the bars are made I'm going to say print what ever you find which is inside the bars.
Ari on this one this visually this application should be no different than what it was before.
We should still see exactly the same thing visually.
However we get this printout in here which is the law of text and maybe not very readable.
But it essentially says there is a Borachio.
Let me go in here and zoom into it.
So what are the key label so on and so forth.
Finally vate three hundred and other three oh one another with three live and some or all of the bits
are somewhere around 300.
I don't know why that is happening but we'll see that soon in action.
So we kind of have everything we needed to go ahead and get us started with animating these guys.
And from the animation of them I want to show you something just in case you didn't notice it.
When we have this final product I click some variant it starts animating it doesn't animate all of them
together it finishes one dingo's the next one then the next one then the next one.
So we kind of have a progressive animation that each of them happens after another one.
And that's something that they want to implement.
In this exercise as well.
So to do that I'm going to go ahead in here and say we have a new function called function animate and
our animation function we have to have a system that we and he made to one at a time.
And he is the system that I'm thinking in my head and maybe you have a better one but what I'm thinking
is this I wanted to run a view on your view animation on the very first the one in the array.
When it's finished go to the second one underneath.
Again when it's finish coat with head one until we finish.
So once again I want to go through the elements of the array in order there and the moment I finished
then I don't want to go there anymore.
So to do that you have to have a system that somehow counts how many of the elements of the array we
have been through to do that.
I'm going to introduce a very simple counter.
I'm going to say our counter and that begins from zero.
So this is the first time that we are going through the array and we're animating things.
So in the UI view animate I'm going to say you I view that animate.
I want an animation with completion on I'm going to go ahead and say animation duration is maybe point
2.
And the animation that you want to run is something that you have to figure out and at completion we
have to do this thing we have to say that the value counter it has to add the twe itself because it's
going back to the next one.
And then we have to do something very tricky which is saying selve got an inmate and I should have called
self in here as well.
So let's see what's happening when the first time we call animate it comes in here I mention goes to
completion adds one to itself comes back and really animates.
So it seems like this is going to continue forever because every time it finishes comes back and does
this again and again and again.
And that's something that we have to avoid.
And we have to stop and stop it.
Going to say if that counter the value that we are counting up if it's reached the array if it reached
the size of the array that means we have to return we don't need to continue anymore.
So right at the very beginning counter-IED zero bars count is 10.
So that's not the case this is going to happen the next time this is going to happen the next time it's
going to happen until the counter is nine and 9.
Is it equal to 10 No.
It is going to happen again this becomes 10 and we come back.
Is 10 equivalent to 10.
Yes 310 and don't do this anymore.
So that part is taking care of the part that we still have to do is this far.
So what are we doing when we are animating.
Actually we have to find Barlas array object that is currently counted and that needs cells and we have
to somehow animate this.
So I'm going to write this in a separate method some way to comment this out so I don't have an error
so that we know what we have to do and the function animate is going to call that are their function
and that function I'm going to call it the redraw and the reason I call it the redraw is simply because
we already have the labels inherent in our application.
You can already see them but we're redrawing them to be wider and to show us the text so we have to
redraw them.
And what are they going to redraw.
We're going to redraw an object that includes a bar and a bar of it an object that is very similar to
this guy abor dictionary.
So the input argument here is a dictionary.
So I'm going to say the input bar dictionary that's going to be a dictionary of a string and any so
if you input a bar dictionary into this function it has to redraw it for us.
The victim this time.
So the animation happens here the body of the animation happens here what it is going to do.
It happens in the reader all.
So let's go ahead and call that in here so we are done with the animate function and we only go to the
rethrow function to call it in yet it would become very simple it becomes self darte redraw.
I was asking for a dictionary of the same type.
And that's going to be Bohr's array self counted and I need a self for the borders array as well.
So they're saying every time you go in there based on the count 0 1 2 or 8 or 9 in case of my application
yours might be different.
Find one of those from the bar's array and interpret that as a dictionary which we know it is and feed
it into the redraw.
And now let's see what the redraw has to do.
Now the tree of life you have to do in here is actually very simple.
We have to find the bar inside this dictionary.
If you have to find the bar of it inside this dictionary and apply it to the width of the bar.
So let's go ahead and do all of these letters for me in football dictionary.
She and the key is called I think we typed it up here more akey and let's inferred that as a label.
And then I'm going to go ahead and say let's more of it to be in the dictionary and that's going to
be called qi and that is a C.G. float.
And once you got that Savon dot frame dot sized dot it becomes a part of it.
So every time we come in here we find the bar we find it and we apply it to the bar.
And of course I want to add two things in here as well.
One of them is that you want to change the text that the bar is showing because it's not showing anything.
I'm I to ball that text becomes whatever you have in the bar of it.
So that's easy.
And then I want to say also animate the size of its fun so that the fund becomes a fund dart system
font of size and the value of it is and I'm just going to randomly put 18 and hope there is going to
work.
So every time that the animators call it is going to go through every one in year.
One other time based on the counter.
And then I made each of them using the redraw and or match balls is being called at the end of the view
that.
I want to add something else in here that helps me rerun this animation over and over every time that
I touch.
So I'm going to go at the end of The View a lot say touches and not that touches and that nuthatches
and that I'm going to go ahead and say a few things make the balls.
That's something that we know we have to do also call the function called animate.
So I'm going to animate things on here something I'm going to give it to you for free because I know
this is going to come up but I don't want to make the video any longer.
If Fitri make the balls is going to keep adding them over the combis So you have to empty the combis.
So I'm going to say first of all do this for me in combat.
Dadds subfields for anyone in there say any doubts removed from super.
You get rid of them or so.
And here is a little thing that I want to mention is every time that we come to this animate counter
goes up.
So we have to reset the counter if you want to redo everything.
So I'm going to say counter is zero.
And I think that's all we have to do.
Let me run the application.
If it works well the way we've been hoping I'm going to do a quick recap of everything for you.
So top and they work top again it's a little bit too slow I think that number wasn't really good points
to a point the 0 7 5 would do better.
Now before I read on the animation quick recap we have an array of a dictionary of I string and anything
else because this could either be a label or could be a CGI float.
We have an idea of all the colors.
We have a canvas and we have a counter for animation.
We make our cameras programmatically it would be us similar to doing it in a storyboard.
And of course we added to our set of that view added as a sub view and then in the touches and that
this is the part that the things actually happen.
We remove everything from combis resets counter.
We make the balls again and we animate them in making the balls.
We calculated the height of each of them orange and while each of them we reset our balls and then we
go to the number of the balls and we make new UI labels in each labeled the said things that are such
as text on font and color and background color based on a random value and we exclude those values as
a ball of weight as well as the board itself within a dictionary and we apply that dictionary as a new
element to our boards array.
Everything that we want to animate the animate.
One other time when it completes we count up on the re-animate the count up on the re-animate until
we hit the end of it.
If we had the end of it we don't do anything anymore in the animation part.
We actually do this find the bar find it upright and wait till the bosh handler stuff is actually very
self-explanatory.
Let me run the application.
I was hoping they'd want to become this long but I think it became nearly about half an hour of programming
and is working exactly the way we're hoping it will work.
So I leave you with that I'm assuming the next lesson.