You welcome back.
Ladies and Gentleman Johnny B here with slopes dot com and we've got some exciting stuff that we are
going to get into in this lesson.
We are going to you know change our channel controller based on whether or not we are logged in.
So right now we can you know create an account and in the last lesson we created that notification that
is kind of like a radio signal being broadcast saying hey we changed something.
So how do we react to that notification.
Well what we've got to do is add an observer that listens for that specific notification.
OK.
So here in channel ABC is where we're going to start.
We're going to add an observer here in view to load.
So to do that like I do say notification center dot default dot and observer this is the one we want
right here.
So the observer that we are adding is self.
All right so the function that we are going to set here in the selector will create right here so we're
going to say phunk he user data did change and we are going to be accepting a notification using and
saying no tiff and notification that we go.
And remember we're also need to have that objective see here in front to expose it to the objective
see what we're going to do here.
Well first let's out here in this like to say hash tag selector and we're going to say channel Visi
dot and it's user data to change it we know the name of the notification.
So this is how we tell it exactly which notification broadband to listen to.
OK.
And so that is no if we just put it in the name of the notification that we created and the object is
no.
OK so now what we've done is we added this observer.
So whenever this note that notification is posted for instance right now we only have it in the create
account VCs when we create an account that notification is broadcast.
And here in this channel beside us with file we are listening for that notification.
And so whenever it's posted whenever it's broadcast we listen we hear it.
And based on when we hear it we then call this function here user data to change.
So this function here is going to be called every time we receive that notification.
All right.
So what do we want to do.
Well we want to update our you right here.
All right so right now all we have is this profile image and the word right here.
So when we're logged in this is going to have the users image and the users name when we're logged out
is going to be just like this.
So let's go ahead and do that.
And this is where we can get to use the is logged in Boullion.
So if if off service dot instance that is logged in.
So if we are logged in the we're going to change the name of the buttons and we do that by saying logon
button that set title OK and the title that we are going to set is we're going to string interpret.
I guess we don't need to string in her plate.
We can just say user data service that instance that name because there's already a string and then
we have to specify the state we're going to say adopt normal.
So let's say that normal or default state of the button can looks good.
Next up we're going to change the user image and say user image.
You know what I don't think we we don't have an outlet for that.
So I'm going to hold the option and click on the you may not storyboard
and just scroll on over to here with that channel Visi and grab that and the image and go control drag
over here and I'm going to use her image because that's an outlet for that image there and then go back
to Standard editor full screen and I'm going to say user image dot image is equal to UI image named
and the name is user data service that instance that avatar name can.
And then if we're not logged in if for instance this would be this notification would also be called
when we log out.
So in that case we're going to say logon button set title and the title is going to be going to set
it back to log in for control state.
Again not normal.
Now we're going to set the image back to the default I'm going to say user image.
That image is equal to UI image
named and the name of our default is menu profile icon.
And then we'll set the background color to clear so the user image the background color is equal to
your eye color dot clear.
See color.
All right I'm going to save that and let's run this and check it out.
Looks like we don't need the C.G. color here.
Just you I colored clear.
There we go.
I'm going to create a new user.
And if all goes according to plan once it's created then we should see the name and the user's avatar
right there.
Some sage honey at Shawnee at www dot com.
Password 1 2 3 4 5 6.
Choose an avatar.
Let's go with this Falcon here generate a background color and see here.
That looks kind of cool.
I say create account we get our spinner up and once it's done.
Hey there we go.
So now we are displaying the user's name and our user avatar image.
But you see here that we don't have the background color that the user selected.
So that also reminds me that we need to fix one thing here and create a counter see you see right here
that when we create generate our background color wern we forgot to set this avatar color to this new
one that we generate.
OK.
So what we're going to do is back here and create a count b c and we're going to see Avatar color is
equal to.
It's going to be a string.
We're going to have some square brackets and we need to string and interpolate the R value the G value
the B value and then just one.
OK.
And so make sure that you're double checking how this looks has got to be just like this with the it's
got to be a string with the square brackets and then the and then the comments OK.
So that's how that's how we got to save that.
So I'm going to save it and run it here.
Log in and have an account.
I'm going to say Jonie color now Chauny at color dot com.
Password 1 2 3 4 5 6.
Choose an avatar elephant.
Fine.
And I'm going to create the account.
All right so again we get the avatar image here and the color.
But what I wanted to show you with this was if we open up m lab and I refresh our users then we should
see here Johnny a colored dot com and we are saving to the database.
This array of a string array of values.
OK.
So what we need to do is we need to be able to take this string and turn it into four components that
we can use to then generate a new color.
OK.
So that's what we're going to do next and it's a bit of a challenge but we'll we'll get through it.
OK so the flow again is we are creating we create a user we generate our G-B values and we saved that
to the database in the form of that string array program.
So once we have that string array and we pull that back down as part of our process we need to turn
that string array into four actual variables that we can use to then generate a new color that we can
use to set the background color of our images.
OK.
So that's actually going to we're going to do that here in user data service and I'm going to create
a new function to do this because this bottom and pain and give them space here and I'm going to call
it phunk turn UI color because we're going to do is we're a pass into it.
The components in that string format.
And we're going to return a UI color and we're going to come back up here and copy a.
I'm just over here and am labs.
I'm copying one of these color strings so we have it as reference and I'm just going to comment that
out.
And so like I was saying we need to somehow extract from this string all of these each of these values
into our G-B and.
OK.
So what we're going to do is we're going to introduce something called a scanner.
All right.
And so let's go ahead and create that scanner variable.
We're going to take that scanner equal scanner and go ahead and initialize it with a print to see.
And we want this guy right here.
String.
All right and so the string that we are going to scan is what we pass into this function which is his
components.
OK.
So when we call this function we going to pass into the scanner this string right here.
And what does a scanner do.
Click here we can see that it says and then a scanner object interprets and converts the characters
of an endless string object into number and string values.
You assign the scanner's string on creating it and the scanner progresses through the characters of
that string from beginning to end as you request items.
And so you know you see in those sci fi movies sometimes they got those flying like little scanner things
in it.
Oh shoot out some red beams and just scan something from top to bottom.
That's what we're doing here with the scanner we are we are passing in a string and we are just going
to start from the beginning and scan through it and we can have specific rules and have it do certain
things for us.
OK.
So let's go ahead and get started.
The first thing that we want to tell it to do is tell it which characters to skip because if we start
here at the beginning you'll see that we have a square bracket.
Over here we have a comma we have some spaces and we don't care about those we only want the numerical
values that we want to end up with.
So we're going to say let skipped school and we're going to create a character set
we want characters in string right here characters in string.
So we're just going to make a string and inside of the string we're going to put a square brackets comma
and a space.
All right.
So those are the four characters that we wanted to skip and not care about.
All right the next one we're going to need.
We're going to need a variable called comma.
And so will we.
Because what we're going to do is we're going to be able to say the method that we're going to use is
who we're going to say start at the beginning and scan up to a specific character.
All right so that specific character we want to stop at is the comma because a comma is the one thing
that is common between each of these and that divides it up right.
OK.
So come on that's going to be equal to the same thing.
Characters set characters in.
But instead of all of them what we are doing is just a comma.
Then we have to actually set the characters to be skipped something to say scanner dot hopes not that
one scanner our variable scanner dot characters to be skipped and set that equal to skip but let's.
OK so now we are ready to kind of actually start scanning this so we're going to need a few variables
that we can save our G-B and a values into.
So I'm going to move r r g b and a.
And so is just a way to create multiple variables on the same line.
As long as they are the same type and these are going to be of type optional and as a string.
And it's optional and a string simply because that is what the method that we are needing is going to
be required.
All right.
And that's giving us an error because it wants you turn of a color so just get rid of the error when
to say return you eye color that red.
OK we'll fix that later.
OK so now we can actually start scanning.
So what we're gonna do is we're going to say scanner dot scan up to you and we want this one right here
we want scan up to characters.
OK.
And the character that we're going to scan up to is our comma.
And the more we're going to scan it into is our variables that we just created here.
But to make it work we got to do ampersand.
And that's just the way of saying for this function which uses auto releasing unsafe mutable pointers
and we have to have this ampersand to get it to go correctly into our variables that we just created.
OK so all we're saying is we're saying scanner go ahead and scan up to the character comma starting
at the beginning.
So we're going to start here and we're going to we told them to skip the brackets and the spaces was
going to skip.
This guy here is going to say OK here's someone is scanning and scanning up here's a comma so I'm going
to stop and then I'm going to say this variable into our right here.
OK.
So we scanned up to the comma and ignored.
We know what to ignore and then we saved the rest into our So we can do that for the rest of them.
So when they copy this and pasted a few more times because when that next line it continues where it
left off.
So then it stops right here.
It starts right here and it ignores this space and then it scans this variable and then it stops at
the next comma and it's going to say that into the G variable.
And then so on and so forth continuing from here.
Grabs this one and saves that into the B variable and lastly into the a variable.
Ok so now we have string variables saved inside of these but they're optional so we need to unwrap them.
However if the if the unwraps fails we need to still be able to return a color because this function
requires that we return a color.
So we're going to have default colors.
So I say let the default
default color call and I'm just going to say let UI color dot light gray.
That's just going to be our default color in case we fail.
So now we're going to do some guard statements to unwrap each of these variables here.
OK.
So I'm going to say guard let are on Wrapped is equal to or else return the default color.
We're just going to do that for all four of those variables.
When I say paste paste paste this is going to be that G unwrapped and be unwrapped and unwrapped.
This is going to be G.
B.
And so if any of those a fail it's just going to return our default color.
OK so now we have an unwrapped string for each of these variables but we need to them to be in the form
of C.G. floats because the initializer for a color requires them to be in C you float.
So now we got to convert the strings into C.G. floats.
But as far as I know there's not a direct conversion between the strings to C.G. floats.
There is a conversion from string to double value and then from there we can do a conversion from a
double value to a C.G. float.
So that is what I am afraid we are going to have to do something to say let our float is equal to c
float.
And then inside of there we are going to say R and rapped dobbed double value.
So we're converting these unwrapped strings to a double and converting that into a C.G. float we're
going to copy that and paste that a few times as well.
And so this is going to be float the float and float.
This is G unwrapped B unwrapped and unwrapped.
OK.
So now we finally have our C.G. foot values for R.G. B and A that we can use to finally create our New
You eye color.
So initialize and we need for this guy right here so read is our float green is g float blue is B float
b is or blue is B float.
And it is a float.
And then we are going to return this new UI color.
So a little bit complicated just to turn this string of values into actual values but I'm going to delete
this
and run through it one more time.
We created a scanner set the script and up two variables and then we actually just scan through saved
those into some variables of string and then we had to unwrap them and then convert those to C.G. float
values so that we could create our final color and return it.
I just want to say that and let's actually use this function now.
So back here in our log in not logging NBC channel ABC if we are logged in when we set the user image.
Now we can set the background image of the background color as well using that function that we just
created.
Going to say user image dot background color is equal to.
And we're going to call user data service that instance that return color.
And what we passed into it is the user data service that instance that have a tar color it's one to
save that and run it.
And fingers crossed once we log in and we dismiss it back to the channel B C we should see not only
the users name over the logging button but we should also see our avatar image with the Avatar background
color.
Suddenly click here.
Click log in see.
So we need to create the account.
Some I say coloring and color at back ground and the password is 1 2 3 4 5 6.
To create an avatar would go to the gorilla.
This time pick this color Here's something I create account and see hey there we go.
All right so now we have a way of converting our color that we generate and save to our database to
an actual color once we get it back from the database.
And so we're going to use this every time we open up our profile page if you were let's see here I can
hold up our mockups.
Yeah so we're going to call it here we call it on every single message.
And so this was an important function too for us to create right now.
And I think it's a useful tool to also know how to use that scanner.
All right.
So in this lesson we learn how to use notifications how to observe the notifications and we also learn
how to use the scanner which is a powerful tool for working with string.
Right.
So just to finish off I'm going to go ahead and commit our changes and then I will see you all in the
next one.