1 00:00:08,170 --> 00:00:08,900 You welcome back. 2 00:00:08,900 --> 00:00:13,010 Ladies and Gentleman Johnny B here with slopes dot com and we've got some exciting stuff that we are 3 00:00:13,010 --> 00:00:15,350 going to get into in this lesson. 4 00:00:15,350 --> 00:00:23,300 We are going to you know change our channel controller based on whether or not we are logged in. 5 00:00:23,300 --> 00:00:30,050 So right now we can you know create an account and in the last lesson we created that notification that 6 00:00:30,050 --> 00:00:34,090 is kind of like a radio signal being broadcast saying hey we changed something. 7 00:00:34,280 --> 00:00:38,380 So how do we react to that notification. 8 00:00:38,630 --> 00:00:44,460 Well what we've got to do is add an observer that listens for that specific notification. 9 00:00:44,540 --> 00:00:44,980 OK. 10 00:00:45,230 --> 00:00:47,550 So here in channel ABC is where we're going to start. 11 00:00:47,630 --> 00:00:50,970 We're going to add an observer here in view to load. 12 00:00:50,990 --> 00:00:58,260 So to do that like I do say notification center dot default dot and observer this is the one we want 13 00:00:58,280 --> 00:00:59,260 right here. 14 00:00:59,450 --> 00:01:03,300 So the observer that we are adding is self. 15 00:01:04,620 --> 00:01:09,320 All right so the function that we are going to set here in the selector will create right here so we're 16 00:01:09,320 --> 00:01:19,700 going to say phunk he user data did change and we are going to be accepting a notification using and 17 00:01:19,720 --> 00:01:25,050 saying no tiff and notification that we go. 18 00:01:25,610 --> 00:01:32,450 And remember we're also need to have that objective see here in front to expose it to the objective 19 00:01:32,450 --> 00:01:35,980 see what we're going to do here. 20 00:01:36,080 --> 00:01:44,630 Well first let's out here in this like to say hash tag selector and we're going to say channel Visi 21 00:01:45,080 --> 00:01:51,530 dot and it's user data to change it we know the name of the notification. 22 00:01:51,530 --> 00:01:57,460 So this is how we tell it exactly which notification broadband to listen to. 23 00:01:57,530 --> 00:01:57,910 OK. 24 00:01:57,920 --> 00:02:04,880 And so that is no if we just put it in the name of the notification that we created and the object is 25 00:02:05,030 --> 00:02:05,930 no. 26 00:02:06,380 --> 00:02:10,670 OK so now what we've done is we added this observer. 27 00:02:10,730 --> 00:02:16,850 So whenever this note that notification is posted for instance right now we only have it in the create 28 00:02:16,850 --> 00:02:21,320 account VCs when we create an account that notification is broadcast. 29 00:02:21,320 --> 00:02:26,730 And here in this channel beside us with file we are listening for that notification. 30 00:02:26,750 --> 00:02:31,780 And so whenever it's posted whenever it's broadcast we listen we hear it. 31 00:02:31,940 --> 00:02:37,730 And based on when we hear it we then call this function here user data to change. 32 00:02:37,760 --> 00:02:42,900 So this function here is going to be called every time we receive that notification. 33 00:02:42,900 --> 00:02:43,130 All right. 34 00:02:43,190 --> 00:02:44,570 So what do we want to do. 35 00:02:45,050 --> 00:02:48,260 Well we want to update our you right here. 36 00:02:48,260 --> 00:02:53,300 All right so right now all we have is this profile image and the word right here. 37 00:02:53,300 --> 00:02:59,270 So when we're logged in this is going to have the users image and the users name when we're logged out 38 00:02:59,310 --> 00:03:00,890 is going to be just like this. 39 00:03:00,890 --> 00:03:02,200 So let's go ahead and do that. 40 00:03:02,330 --> 00:03:05,980 And this is where we can get to use the is logged in Boullion. 41 00:03:06,160 --> 00:03:11,810 So if if off service dot instance that is logged in. 42 00:03:11,930 --> 00:03:16,100 So if we are logged in the we're going to change the name of the buttons and we do that by saying logon 43 00:03:16,150 --> 00:03:26,190 button that set title OK and the title that we are going to set is we're going to string interpret. 44 00:03:26,500 --> 00:03:27,890 I guess we don't need to string in her plate. 45 00:03:27,890 --> 00:03:35,540 We can just say user data service that instance that name because there's already a string and then 46 00:03:35,540 --> 00:03:38,150 we have to specify the state we're going to say adopt normal. 47 00:03:38,170 --> 00:03:43,910 So let's say that normal or default state of the button can looks good. 48 00:03:43,910 --> 00:03:50,420 Next up we're going to change the user image and say user image. 49 00:03:50,600 --> 00:03:53,670 You know what I don't think we we don't have an outlet for that. 50 00:03:53,690 --> 00:03:56,480 So I'm going to hold the option and click on the you may not storyboard 51 00:04:00,650 --> 00:04:12,470 and just scroll on over to here with that channel Visi and grab that and the image and go control drag 52 00:04:12,830 --> 00:04:20,180 over here and I'm going to use her image because that's an outlet for that image there and then go back 53 00:04:20,180 --> 00:04:34,280 to Standard editor full screen and I'm going to say user image dot image is equal to UI image named 54 00:04:35,000 --> 00:04:45,870 and the name is user data service that instance that avatar name can. 55 00:04:46,400 --> 00:04:53,540 And then if we're not logged in if for instance this would be this notification would also be called 56 00:04:54,020 --> 00:04:55,510 when we log out. 57 00:04:55,550 --> 00:05:05,660 So in that case we're going to say logon button set title and the title is going to be going to set 58 00:05:05,650 --> 00:05:08,170 it back to log in for control state. 59 00:05:08,180 --> 00:05:12,230 Again not normal. 60 00:05:12,250 --> 00:05:16,730 Now we're going to set the image back to the default I'm going to say user image. 61 00:05:16,730 --> 00:05:20,660 That image is equal to UI image 62 00:05:23,180 --> 00:05:30,350 named and the name of our default is menu profile icon. 63 00:05:31,550 --> 00:05:39,830 And then we'll set the background color to clear so the user image the background color is equal to 64 00:05:41,610 --> 00:05:46,440 your eye color dot clear. 65 00:05:46,520 --> 00:05:48,490 See color. 66 00:05:49,280 --> 00:05:53,950 All right I'm going to save that and let's run this and check it out. 67 00:05:53,990 --> 00:05:56,720 Looks like we don't need the C.G. color here. 68 00:05:56,790 --> 00:05:58,150 Just you I colored clear. 69 00:05:58,160 --> 00:05:59,660 There we go. 70 00:05:59,720 --> 00:06:02,650 I'm going to create a new user. 71 00:06:02,930 --> 00:06:11,690 And if all goes according to plan once it's created then we should see the name and the user's avatar 72 00:06:11,740 --> 00:06:12,120 right there. 73 00:06:12,160 --> 00:06:16,670 Some sage honey at Shawnee at www dot com. 74 00:06:16,840 --> 00:06:19,340 Password 1 2 3 4 5 6. 75 00:06:19,460 --> 00:06:21,300 Choose an avatar. 76 00:06:21,300 --> 00:06:30,400 Let's go with this Falcon here generate a background color and see here. 77 00:06:30,670 --> 00:06:31,710 That looks kind of cool. 78 00:06:31,810 --> 00:06:35,920 I say create account we get our spinner up and once it's done. 79 00:06:35,940 --> 00:06:37,400 Hey there we go. 80 00:06:37,400 --> 00:06:45,010 So now we are displaying the user's name and our user avatar image. 81 00:06:47,210 --> 00:06:52,880 But you see here that we don't have the background color that the user selected. 82 00:06:53,090 --> 00:06:59,330 So that also reminds me that we need to fix one thing here and create a counter see you see right here 83 00:06:59,330 --> 00:07:08,540 that when we create generate our background color wern we forgot to set this avatar color to this new 84 00:07:08,540 --> 00:07:09,330 one that we generate. 85 00:07:09,330 --> 00:07:09,820 OK. 86 00:07:09,950 --> 00:07:17,180 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 87 00:07:17,210 --> 00:07:18,320 equal to. 88 00:07:18,640 --> 00:07:20,020 It's going to be a string. 89 00:07:20,080 --> 00:07:30,980 We're going to have some square brackets and we need to string and interpolate the R value the G value 90 00:07:32,360 --> 00:07:37,360 the B value and then just one. 91 00:07:37,600 --> 00:07:38,290 OK. 92 00:07:38,560 --> 00:07:44,860 And so make sure that you're double checking how this looks has got to be just like this with the it's 93 00:07:44,860 --> 00:07:51,030 got to be a string with the square brackets and then the and then the comments OK. 94 00:07:51,530 --> 00:07:55,500 So that's how that's how we got to save that. 95 00:07:55,520 --> 00:07:59,580 So I'm going to save it and run it here. 96 00:07:59,870 --> 00:08:03,100 Log in and have an account. 97 00:08:03,560 --> 00:08:12,450 I'm going to say Jonie color now Chauny at color dot com. 98 00:08:12,680 --> 00:08:15,630 Password 1 2 3 4 5 6. 99 00:08:15,710 --> 00:08:18,200 Choose an avatar elephant. 100 00:08:18,260 --> 00:08:19,160 Fine. 101 00:08:19,370 --> 00:08:23,900 And I'm going to create the account. 102 00:08:24,100 --> 00:08:28,250 All right so again we get the avatar image here and the color. 103 00:08:28,450 --> 00:08:36,580 But what I wanted to show you with this was if we open up m lab and I refresh our users then we should 104 00:08:36,580 --> 00:08:41,710 see here Johnny a colored dot com and we are saving to the database. 105 00:08:41,710 --> 00:08:46,090 This array of a string array of values. 106 00:08:46,090 --> 00:08:46,630 OK. 107 00:08:46,750 --> 00:08:54,670 So what we need to do is we need to be able to take this string and turn it into four components that 108 00:08:54,670 --> 00:08:57,870 we can use to then generate a new color. 109 00:08:57,880 --> 00:08:58,380 OK. 110 00:08:58,510 --> 00:09:03,710 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. 111 00:09:04,090 --> 00:09:12,250 OK so the flow again is we are creating we create a user we generate our G-B values and we saved that 112 00:09:12,250 --> 00:09:17,260 to the database in the form of that string array program. 113 00:09:17,290 --> 00:09:24,790 So once we have that string array and we pull that back down as part of our process we need to turn 114 00:09:24,790 --> 00:09:30,940 that string array into four actual variables that we can use to then generate a new color that we can 115 00:09:30,940 --> 00:09:33,940 use to set the background color of our images. 116 00:09:33,940 --> 00:09:34,440 OK. 117 00:09:34,720 --> 00:09:39,010 So that's actually going to we're going to do that here in user data service and I'm going to create 118 00:09:39,010 --> 00:09:46,240 a new function to do this because this bottom and pain and give them space here and I'm going to call 119 00:09:46,240 --> 00:09:53,610 it phunk turn UI color because we're going to do is we're a pass into it. 120 00:09:53,890 --> 00:09:57,000 The components in that string format. 121 00:09:57,550 --> 00:10:09,100 And we're going to return a UI color and we're going to come back up here and copy a. 122 00:10:09,640 --> 00:10:11,450 I'm just over here and am labs. 123 00:10:11,470 --> 00:10:19,510 I'm copying one of these color strings so we have it as reference and I'm just going to comment that 124 00:10:19,510 --> 00:10:20,420 out. 125 00:10:21,040 --> 00:10:29,260 And so like I was saying we need to somehow extract from this string all of these each of these values 126 00:10:29,260 --> 00:10:31,180 into our G-B and. 127 00:10:31,290 --> 00:10:31,740 OK. 128 00:10:32,140 --> 00:10:36,390 So what we're going to do is we're going to introduce something called a scanner. 129 00:10:36,430 --> 00:10:37,080 All right. 130 00:10:37,380 --> 00:10:39,460 And so let's go ahead and create that scanner variable. 131 00:10:39,460 --> 00:10:49,900 We're going to take that scanner equal scanner and go ahead and initialize it with a print to see. 132 00:10:49,900 --> 00:10:51,610 And we want this guy right here. 133 00:10:51,640 --> 00:10:52,670 String. 134 00:10:52,990 --> 00:10:58,870 All right and so the string that we are going to scan is what we pass into this function which is his 135 00:10:59,110 --> 00:11:00,060 components. 136 00:11:00,160 --> 00:11:00,780 OK. 137 00:11:01,150 --> 00:11:06,590 So when we call this function we going to pass into the scanner this string right here. 138 00:11:06,850 --> 00:11:08,200 And what does a scanner do. 139 00:11:08,200 --> 00:11:13,900 Click here we can see that it says and then a scanner object interprets and converts the characters 140 00:11:13,900 --> 00:11:17,750 of an endless string object into number and string values. 141 00:11:17,860 --> 00:11:23,590 You assign the scanner's string on creating it and the scanner progresses through the characters of 142 00:11:23,590 --> 00:11:27,800 that string from beginning to end as you request items. 143 00:11:28,150 --> 00:11:33,310 And so you know you see in those sci fi movies sometimes they got those flying like little scanner things 144 00:11:33,310 --> 00:11:33,770 in it. 145 00:11:34,050 --> 00:11:38,250 Oh shoot out some red beams and just scan something from top to bottom. 146 00:11:38,290 --> 00:11:42,880 That's what we're doing here with the scanner we are we are passing in a string and we are just going 147 00:11:42,880 --> 00:11:48,760 to start from the beginning and scan through it and we can have specific rules and have it do certain 148 00:11:48,760 --> 00:11:49,570 things for us. 149 00:11:49,570 --> 00:11:50,190 OK. 150 00:11:50,770 --> 00:11:53,260 So let's go ahead and get started. 151 00:11:53,260 --> 00:11:59,140 The first thing that we want to tell it to do is tell it which characters to skip because if we start 152 00:11:59,140 --> 00:12:04,120 here at the beginning you'll see that we have a square bracket. 153 00:12:04,120 --> 00:12:10,120 Over here we have a comma we have some spaces and we don't care about those we only want the numerical 154 00:12:10,210 --> 00:12:12,230 values that we want to end up with. 155 00:12:12,250 --> 00:12:19,060 So we're going to say let skipped school and we're going to create a character set 156 00:12:24,300 --> 00:12:28,680 we want characters in string right here characters in string. 157 00:12:29,160 --> 00:12:36,600 So we're just going to make a string and inside of the string we're going to put a square brackets comma 158 00:12:36,690 --> 00:12:38,400 and a space. 159 00:12:38,410 --> 00:12:38,650 All right. 160 00:12:38,670 --> 00:12:43,230 So those are the four characters that we wanted to skip and not care about. 161 00:12:43,690 --> 00:12:44,970 All right the next one we're going to need. 162 00:12:45,000 --> 00:12:47,880 We're going to need a variable called comma. 163 00:12:48,750 --> 00:12:49,860 And so will we. 164 00:12:49,860 --> 00:12:52,860 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 165 00:12:52,860 --> 00:12:57,760 who we're going to say start at the beginning and scan up to a specific character. 166 00:12:58,050 --> 00:13:03,930 All right so that specific character we want to stop at is the comma because a comma is the one thing 167 00:13:03,930 --> 00:13:08,470 that is common between each of these and that divides it up right. 168 00:13:08,750 --> 00:13:08,980 OK. 169 00:13:09,000 --> 00:13:12,860 So come on that's going to be equal to the same thing. 170 00:13:13,020 --> 00:13:17,180 Characters set characters in. 171 00:13:17,220 --> 00:13:21,410 But instead of all of them what we are doing is just a comma. 172 00:13:21,840 --> 00:13:28,200 Then we have to actually set the characters to be skipped something to say scanner dot hopes not that 173 00:13:28,200 --> 00:13:40,780 one scanner our variable scanner dot characters to be skipped and set that equal to skip but let's. 174 00:13:40,860 --> 00:13:49,730 OK so now we are ready to kind of actually start scanning this so we're going to need a few variables 175 00:13:49,730 --> 00:13:54,410 that we can save our G-B and a values into. 176 00:13:54,410 --> 00:13:59,920 So I'm going to move r r g b and a. 177 00:14:00,200 --> 00:14:03,720 And so is just a way to create multiple variables on the same line. 178 00:14:03,740 --> 00:14:10,460 As long as they are the same type and these are going to be of type optional and as a string. 179 00:14:11,240 --> 00:14:18,200 And it's optional and a string simply because that is what the method that we are needing is going to 180 00:14:18,200 --> 00:14:20,190 be required. 181 00:14:20,190 --> 00:14:20,940 All right. 182 00:14:21,530 --> 00:14:26,780 And that's giving us an error because it wants you turn of a color so just get rid of the error when 183 00:14:26,810 --> 00:14:31,010 to say return you eye color that red. 184 00:14:31,160 --> 00:14:34,870 OK we'll fix that later. 185 00:14:35,130 --> 00:14:38,340 OK so now we can actually start scanning. 186 00:14:38,440 --> 00:14:46,390 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 187 00:14:46,390 --> 00:14:48,900 we want scan up to characters. 188 00:14:49,100 --> 00:14:49,760 OK. 189 00:14:50,190 --> 00:14:56,170 And the character that we're going to scan up to is our comma. 190 00:14:56,740 --> 00:15:05,540 And the more we're going to scan it into is our variables that we just created here. 191 00:15:05,980 --> 00:15:10,680 But to make it work we got to do ampersand. 192 00:15:10,930 --> 00:15:18,100 And that's just the way of saying for this function which uses auto releasing unsafe mutable pointers 193 00:15:18,360 --> 00:15:24,540 and we have to have this ampersand to get it to go correctly into our variables that we just created. 194 00:15:24,850 --> 00:15:30,550 OK so all we're saying is we're saying scanner go ahead and scan up to the character comma starting 195 00:15:30,550 --> 00:15:31,470 at the beginning. 196 00:15:31,780 --> 00:15:37,990 So we're going to start here and we're going to we told them to skip the brackets and the spaces was 197 00:15:37,990 --> 00:15:38,500 going to skip. 198 00:15:38,500 --> 00:15:44,590 This guy here is going to say OK here's someone is scanning and scanning up here's a comma so I'm going 199 00:15:44,590 --> 00:15:50,120 to stop and then I'm going to say this variable into our right here. 200 00:15:50,330 --> 00:15:50,890 OK. 201 00:15:51,100 --> 00:15:54,300 So we scanned up to the comma and ignored. 202 00:15:54,490 --> 00:16:01,740 We know what to ignore and then we saved the rest into our So we can do that for the rest of them. 203 00:16:01,860 --> 00:16:08,110 So when they copy this and pasted a few more times because when that next line it continues where it 204 00:16:08,110 --> 00:16:08,680 left off. 205 00:16:08,680 --> 00:16:10,270 So then it stops right here. 206 00:16:10,270 --> 00:16:15,880 It starts right here and it ignores this space and then it scans this variable and then it stops at 207 00:16:15,880 --> 00:16:20,320 the next comma and it's going to say that into the G variable. 208 00:16:20,830 --> 00:16:23,590 And then so on and so forth continuing from here. 209 00:16:23,590 --> 00:16:31,430 Grabs this one and saves that into the B variable and lastly into the a variable. 210 00:16:31,480 --> 00:16:40,630 Ok so now we have string variables saved inside of these but they're optional so we need to unwrap them. 211 00:16:40,670 --> 00:16:48,550 However if the if the unwraps fails we need to still be able to return a color because this function 212 00:16:48,550 --> 00:16:50,860 requires that we return a color. 213 00:16:50,920 --> 00:16:52,970 So we're going to have default colors. 214 00:16:53,070 --> 00:16:55,630 So I say let the default 215 00:16:58,210 --> 00:17:05,240 default color call and I'm just going to say let UI color dot light gray. 216 00:17:05,260 --> 00:17:08,290 That's just going to be our default color in case we fail. 217 00:17:08,290 --> 00:17:13,540 So now we're going to do some guard statements to unwrap each of these variables here. 218 00:17:13,540 --> 00:17:13,970 OK. 219 00:17:14,110 --> 00:17:28,290 So I'm going to say guard let are on Wrapped is equal to or else return the default color. 220 00:17:28,810 --> 00:17:33,010 We're just going to do that for all four of those variables. 221 00:17:33,100 --> 00:17:42,490 When I say paste paste paste this is going to be that G unwrapped and be unwrapped and unwrapped. 222 00:17:42,530 --> 00:17:44,200 This is going to be G. 223 00:17:44,440 --> 00:17:44,930 B. 224 00:17:44,970 --> 00:17:52,440 And so if any of those a fail it's just going to return our default color. 225 00:17:53,020 --> 00:18:02,560 OK so now we have an unwrapped string for each of these variables but we need to them to be in the form 226 00:18:02,560 --> 00:18:07,700 of C.G. floats because the initializer for a color requires them to be in C you float. 227 00:18:07,810 --> 00:18:11,390 So now we got to convert the strings into C.G. floats. 228 00:18:11,500 --> 00:18:18,140 But as far as I know there's not a direct conversion between the strings to C.G. floats. 229 00:18:18,160 --> 00:18:23,350 There is a conversion from string to double value and then from there we can do a conversion from a 230 00:18:23,350 --> 00:18:25,270 double value to a C.G. float. 231 00:18:25,270 --> 00:18:30,910 So that is what I am afraid we are going to have to do something to say let our float is equal to c 232 00:18:31,240 --> 00:18:32,120 float. 233 00:18:32,710 --> 00:18:40,170 And then inside of there we are going to say R and rapped dobbed double value. 234 00:18:40,750 --> 00:18:47,490 So we're converting these unwrapped strings to a double and converting that into a C.G. float we're 235 00:18:47,630 --> 00:18:53,740 going to copy that and paste that a few times as well. 236 00:18:54,250 --> 00:19:02,020 And so this is going to be float the float and float. 237 00:19:02,050 --> 00:19:10,090 This is G unwrapped B unwrapped and unwrapped. 238 00:19:10,670 --> 00:19:11,150 OK. 239 00:19:11,330 --> 00:19:20,150 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 240 00:19:20,440 --> 00:19:22,490 You eye color. 241 00:19:24,980 --> 00:19:41,030 So initialize and we need for this guy right here so read is our float green is g float blue is B float 242 00:19:43,580 --> 00:19:46,380 b is or blue is B float. 243 00:19:46,490 --> 00:19:49,230 And it is a float. 244 00:19:49,910 --> 00:19:57,130 And then we are going to return this new UI color. 245 00:19:57,290 --> 00:20:07,130 So a little bit complicated just to turn this string of values into actual values but I'm going to delete 246 00:20:07,130 --> 00:20:07,780 this 247 00:20:10,980 --> 00:20:12,330 and run through it one more time. 248 00:20:12,330 --> 00:20:20,470 We created a scanner set the script and up two variables and then we actually just scan through saved 249 00:20:20,560 --> 00:20:27,280 those into some variables of string and then we had to unwrap them and then convert those to C.G. float 250 00:20:27,390 --> 00:20:32,190 values so that we could create our final color and return it. 251 00:20:32,190 --> 00:20:35,910 I just want to say that and let's actually use this function now. 252 00:20:36,180 --> 00:20:44,460 So back here in our log in not logging NBC channel ABC if we are logged in when we set the user image. 253 00:20:44,520 --> 00:20:50,220 Now we can set the background image of the background color as well using that function that we just 254 00:20:50,220 --> 00:20:50,640 created. 255 00:20:50,690 --> 00:20:58,150 Going to say user image dot background color is equal to. 256 00:20:58,230 --> 00:21:06,030 And we're going to call user data service that instance that return color. 257 00:21:06,210 --> 00:21:16,170 And what we passed into it is the user data service that instance that have a tar color it's one to 258 00:21:16,170 --> 00:21:18,880 save that and run it. 259 00:21:19,140 --> 00:21:26,010 And fingers crossed once we log in and we dismiss it back to the channel B C we should see not only 260 00:21:26,010 --> 00:21:33,420 the users name over the logging button but we should also see our avatar image with the Avatar background 261 00:21:33,420 --> 00:21:34,110 color. 262 00:21:35,780 --> 00:21:36,900 Suddenly click here. 263 00:21:36,980 --> 00:21:39,490 Click log in see. 264 00:21:40,070 --> 00:21:42,000 So we need to create the account. 265 00:21:42,230 --> 00:21:54,730 Some I say coloring and color at back ground and the password is 1 2 3 4 5 6. 266 00:21:54,780 --> 00:21:58,040 To create an avatar would go to the gorilla. 267 00:21:58,040 --> 00:22:07,100 This time pick this color Here's something I create account and see hey there we go. 268 00:22:07,100 --> 00:22:14,570 All right so now we have a way of converting our color that we generate and save to our database to 269 00:22:14,570 --> 00:22:17,420 an actual color once we get it back from the database. 270 00:22:17,420 --> 00:22:25,730 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 271 00:22:26,210 --> 00:22:27,880 hold up our mockups. 272 00:22:28,040 --> 00:22:33,630 Yeah so we're going to call it here we call it on every single message. 273 00:22:33,680 --> 00:22:38,190 And so this was an important function too for us to create right now. 274 00:22:38,420 --> 00:22:42,240 And I think it's a useful tool to also know how to use that scanner. 275 00:22:42,260 --> 00:22:42,760 All right. 276 00:22:42,920 --> 00:22:49,400 So in this lesson we learn how to use notifications how to observe the notifications and we also learn 277 00:22:49,400 --> 00:22:53,520 how to use the scanner which is a powerful tool for working with string. 278 00:22:53,570 --> 00:22:54,100 Right. 279 00:22:54,380 --> 00:23:00,440 So just to finish off I'm going to go ahead and commit our changes and then I will see you all in the 280 00:23:00,440 --> 00:23:01,170 next one.