1
00:00:00,000 --> 00:00:11,712

2
00:00:11,712 --> 00:00:12,850
>> ROB BOWDEN: Hi.

3
00:00:12,850 --> 00:00:13,780
I'm Rob.

4
00:00:13,780 --> 00:00:19,500
And I hope you're ready to pick up what
I'm dropping off or putting down,

5
00:00:19,500 --> 00:00:22,230
or let's get started.

6
00:00:22,230 --> 00:00:25,040
So first thing we need
to do is pick up.

7
00:00:25,040 --> 00:00:29,370
Now, pick up is going to be removing the
passengers' icons from the Google

8
00:00:29,370 --> 00:00:32,759
map in the bottom right corner and from
the Google Earth in the center of

9
00:00:32,759 --> 00:00:33,970
the screen.

10
00:00:33,970 --> 00:00:37,180
So in order to remove those
icons, we need to have the

11
00:00:37,180 --> 00:00:39,040
references to them somewhere.

12
00:00:39,040 --> 00:00:43,680
But currently, the Populate function
just gets rid of them.

13
00:00:43,680 --> 00:00:48,140
So we're going to have to modify
populate to keep them around.

14
00:00:48,140 --> 00:00:53,440
>> Now first thing we'll see is that we
have a global passengers array.

15
00:00:53,440 --> 00:00:57,710
And so we're going to use that global's
passengers array in Populate.

16
00:00:57,710 --> 00:01:03,230
In Populate, we see that we're looping
over all of our passengers.

17
00:01:03,230 --> 00:01:10,420
And it's this loop that's creating the
place mark for Google Earth and the

18
00:01:10,420 --> 00:01:12,540
marker for the Google Map.

19
00:01:12,540 --> 00:01:16,420
And so now our modification
to populate is to be here.

20
00:01:16,420 --> 00:01:21,760
So we're adding on to our passengers'
array this object which is keeping

21
00:01:21,760 --> 00:01:26,480
around the marker and place mark we just
created along with the house and

22
00:01:26,480 --> 00:01:28,460
name of the passenger.

23
00:01:28,460 --> 00:01:30,560
>> So that's it for Populate.

24
00:01:30,560 --> 00:01:33,210
Now we need to look at Pick Up.

25
00:01:33,210 --> 00:01:38,540
So in Pick Up, we're once again going to
iterate over all of our passengers.

26
00:01:38,540 --> 00:01:41,340
But now it's our global
passengers array.

27
00:01:41,340 --> 00:01:46,150
And here we're seeing that well, have
we already picked up this passenger?

28
00:01:46,150 --> 00:01:50,030
Since if we have picked up this
passenger, we see in the end that

29
00:01:50,030 --> 00:01:55,240
we're going to set the marker and the
place mark to null since they're no

30
00:01:55,240 --> 00:01:56,930
longer in the Google map.

31
00:01:56,930 --> 00:02:00,920
>> So if we have already picked up this
passenger then we're just going to

32
00:02:00,920 --> 00:02:02,920
continue to the next passenger.

33
00:02:02,920 --> 00:02:07,380
Else, we check to see if this
passenger's house is inside of the

34
00:02:07,380 --> 00:02:08,590
house's array.

35
00:02:08,590 --> 00:02:11,900
This is the check we need to make sure
that we don't pick up the freshman as

36
00:02:11,900 --> 00:02:13,180
the spec says.

37
00:02:13,180 --> 00:02:15,920
So if the passenger is a freshman,
we're going to

38
00:02:15,920 --> 00:02:18,190
continue to the next passenger.

39
00:02:18,190 --> 00:02:21,720
>> Once we've verified that this is a
passenger we should be picking up,

40
00:02:21,720 --> 00:02:25,340
we're now going to check the latitude
and longitude of the passenger and see

41
00:02:25,340 --> 00:02:27,760
if that's within 15 feet
of the shuttle.

42
00:02:27,760 --> 00:02:31,720
If that's the case, we actually want
to pick up this passenger.

43
00:02:31,720 --> 00:02:35,890
So we integrate over all of the seats
in our shuttle looking to see if

44
00:02:35,890 --> 00:02:38,110
there's an available spot
for the passenger.

45
00:02:38,110 --> 00:02:41,540
If one of the seats is null,
that's an available spot.

46
00:02:41,540 --> 00:02:45,140
So we add the passenger to the seat.

47
00:02:45,140 --> 00:02:48,760
We remember that we picked up the
passenger so that in the end, we can

48
00:02:48,760 --> 00:02:52,450
announce if we actually
didn't pick anyone up.

49
00:02:52,450 --> 00:02:56,140
We remember that we seated this
passenger since if we manage to get

50
00:02:56,140 --> 00:02:59,320
through the entire shuttle without
seating the passenger, then we need to

51
00:02:59,320 --> 00:03:00,885
announce that we're out of seats.

52
00:03:00,885 --> 00:03:03,760

53
00:03:03,760 --> 00:03:06,885
>> Then we remove their place
mark from Google Earth.

54
00:03:06,885 --> 00:03:11,310
We remove their marker from Google Maps,
set inside of our passengers'

55
00:03:11,310 --> 00:03:14,830
array place mark and marker
to null as we said before.

56
00:03:14,830 --> 00:03:16,035
And then that's it.

57
00:03:16,035 --> 00:03:17,050
The passenger has been seated.

58
00:03:17,050 --> 00:03:19,570
Once we've done that for all passengers
within 15 feet of the

59
00:03:19,570 --> 00:03:23,250
shuttle, we need to rechart.

60
00:03:23,250 --> 00:03:30,270
>> So Chart is what's going to display the
passengers in the seats over here.

61
00:03:30,270 --> 00:03:32,760
So now, let's look at Chart.

62
00:03:32,760 --> 00:03:37,960
Inside of Chart, we're going to be
constructing the HTML for the chart.

63
00:03:37,960 --> 00:03:41,160
So the chart is going to
be an ordered list.

64
00:03:41,160 --> 00:03:44,300
Then we'll iterate over all of
the seats in our shuttle.

65
00:03:44,300 --> 00:03:48,450
So if this particular seat is null, that
means we want a List item that

66
00:03:48,450 --> 00:03:50,800
indicates that it's an empty easy.

67
00:03:50,800 --> 00:03:55,650
Else, if it was not null, then we want
a List item that is going to display

68
00:03:55,650 --> 00:03:58,660
the name of the passenger and
the house of the passenger

69
00:03:58,660 --> 00:04:00,420
that's in this seat.

70
00:04:00,420 --> 00:04:04,620
>> Once we've iterated over all of the
seats then we close our ordered list

71
00:04:04,620 --> 00:04:09,410
and use jQuery to select the chart div
and replace it's HTML with our new

72
00:04:09,410 --> 00:04:10,550
ordered list.

73
00:04:10,550 --> 00:04:12,090
And that's it for Chart.

74
00:04:12,090 --> 00:04:15,170
>> So last thing is drop off.

75
00:04:15,170 --> 00:04:20,860
Now drop off is going to be
pretty similar to pick up.

76
00:04:20,860 --> 00:04:24,150
Instead of looping over all of the
passengers, we're going to loop over

77
00:04:24,150 --> 00:04:25,780
all of the shuttle seats.

78
00:04:25,780 --> 00:04:29,720
So looping over the shuttle seats, we
see is this particular shuttle seat

79
00:04:29,720 --> 00:04:32,850
not null, in which case there's
a passenger in this seat.

80
00:04:32,850 --> 00:04:35,380
If that's the case, we want
to grab the latitude and

81
00:04:35,380 --> 00:04:37,030
longitude of this passenger.

82
00:04:37,030 --> 00:04:42,110
>> So using the house's array, we're
going to grab the house of the

83
00:04:42,110 --> 00:04:46,990
passenger in this seat and then grab the
latitude of that particular house

84
00:04:46,990 --> 00:04:49,070
and similarly for longitude.

85
00:04:49,070 --> 00:04:54,270
Now, we once again use distance to see
in that house is within 30 feet of us.

86
00:04:54,270 --> 00:04:58,320
If that's the case, they want to set
this seat to null, since the passenger

87
00:04:58,320 --> 00:05:01,760
was dropped off, and increment that
a passenger was dropped off.

88
00:05:01,760 --> 00:05:05,910
So that in the end, if no one was
dropped off, we announce that no one

89
00:05:05,910 --> 00:05:07,600
wants to be dropped off here.

90
00:05:07,600 --> 00:05:12,510
>> Finally, we need to rechart so that
we display new, empty seats.

91
00:05:12,510 --> 00:05:15,770
Now, you just need to implement
some extra features.

92
00:05:15,770 --> 00:05:17,680
Now, there's plenty you could
have chosen from.

93
00:05:17,680 --> 00:05:21,630
But in our case we implemented teleport,
flying, and speeding up, and

94
00:05:21,630 --> 00:05:22,770
speeding down.

95
00:05:22,770 --> 00:05:25,100
So let's look at those.

96
00:05:25,100 --> 00:05:27,830
First, let's take a look at
the speeding up feature.

97
00:05:27,830 --> 00:05:32,720
So in our case, in the keystroke
function, where we're already handling

98
00:05:32,720 --> 00:05:39,900
all of these keys, we're also going to
recognize X and Z. Which we specify

99
00:05:39,900 --> 00:05:43,720
that these characters are going to
cause the shuttle's velocity to

100
00:05:43,720 --> 00:05:46,530
increase and decrease.

101
00:05:46,530 --> 00:05:50,940
>> So notice that we put a bound on how
high and on how a low the velocity can

102
00:05:50,940 --> 00:05:55,030
actually go since we don't want
the shuttle to be too fast.

103
00:05:55,030 --> 00:05:58,180
And we also don't want the shuttle's
velocity to go to zero or possibly

104
00:05:58,180 --> 00:06:01,480
even negative which will result
in some strange behavior.

105
00:06:01,480 --> 00:06:03,890
And that's it for speeding
up and slowing down.

106
00:06:03,890 --> 00:06:05,980
>> Now, let's take a look at flying.

107
00:06:05,980 --> 00:06:11,370
So remember that the flying feature
requires you to enter the Konami Code.

108
00:06:11,370 --> 00:06:18,070
So up at the top, we see we have some
global variables, Konami Code which is

109
00:06:18,070 --> 00:06:20,975
a array that's just keeping track of the
keys that need to be entered for

110
00:06:20,975 --> 00:06:22,600
the Konami Code.

111
00:06:22,600 --> 00:06:26,340
There's a Bool which just indicates
whether the Konami Code has already

112
00:06:26,340 --> 00:06:27,660
been entered.

113
00:06:27,660 --> 00:06:30,430
And then there's the index into
the Konami Code array that

114
00:06:30,430 --> 00:06:31,770
we're currently at.

115
00:06:31,770 --> 00:06:36,020
>> So if the user has already entered three
characters of the Konami Code

116
00:06:36,020 --> 00:06:40,530
then the index is going to point to
the fourth thing in the array, the

117
00:06:40,530 --> 00:06:42,150
third index.

118
00:06:42,150 --> 00:06:44,630
Using that, once again we'll
look at key stroke.

119
00:06:44,630 --> 00:06:48,040

120
00:06:48,040 --> 00:06:51,910
And in key stroke we see here that if
the Konami Code has not already been

121
00:06:51,910 --> 00:06:58,410
entered, then we want to see is the
key that was entered what we're

122
00:06:58,410 --> 00:07:01,250
currently expecting from
the Konami Code array.

123
00:07:01,250 --> 00:07:04,350
If that's the case, then
we increment our index.

124
00:07:04,350 --> 00:07:07,660
>> If the user types Up then index
is going to go to one.

125
00:07:07,660 --> 00:07:10,280
Then the user will type up again,
the index goes to two.

126
00:07:10,280 --> 00:07:12,150
Then they'll type down,
it will go to three.

127
00:07:12,150 --> 00:07:17,320
If they type Q, it'll reset to
zero since they did not match

128
00:07:17,320 --> 00:07:20,140
the expected value.

129
00:07:20,140 --> 00:07:24,810
Now, if they manage to get through the
entire array then they've entered the

130
00:07:24,810 --> 00:07:26,280
Konami Code.

131
00:07:26,280 --> 00:07:33,960
In which case, now that Konami entered
is true, we see down here that if

132
00:07:33,960 --> 00:07:40,460
Konami was entered, we accept two new
keys, C and E. Which all those will do

133
00:07:40,460 --> 00:07:45,800
is set the flying downward and flying
upward states in the shuttle.

134
00:07:45,800 --> 00:07:48,530
So already exist for you.

135
00:07:48,530 --> 00:07:51,190
You just need to take
advantage of them.

136
00:07:51,190 --> 00:07:52,890
And that's it for flying.

137
00:07:52,890 --> 00:07:54,680
>> Last, we have teleport.

138
00:07:54,680 --> 00:08:00,710
So inside of the HTML, we see that
we've added an input box and a

139
00:08:00,710 --> 00:08:02,270
teleport button.

140
00:08:02,270 --> 00:08:08,300
The box has ID address, and the button
has an ID teleport button.

141
00:08:08,300 --> 00:08:13,970
Now one annoying little detail is that
if we don't do anything with event

142
00:08:13,970 --> 00:08:19,210
handlers then when we try to type
something like A into the input box,

143
00:08:19,210 --> 00:08:25,250
instead of actually tying A, our Google
Earth is going to move to the

144
00:08:25,250 --> 00:08:30,040
left since A is already registered
to handle moving to the left.

145
00:08:30,040 --> 00:08:35,100
>> So the annoying detail here is that
when we have a key down or key up

146
00:08:35,100 --> 00:08:40,789
event inside of the input box, we want
to event.stop propagation which is

147
00:08:40,789 --> 00:08:43,830
just going to prevent the
sliding of the shuttle.

148
00:08:43,830 --> 00:08:48,510
Once that's handled, we also want to add
a handler to the teleport button.

149
00:08:48,510 --> 00:08:52,880
When we click the teleport button, we
grab the address, which is the current

150
00:08:52,880 --> 00:08:57,580
value in the input box, and then
we call this teleport function.

151
00:08:57,580 --> 00:09:00,910
>> So what does the teleport
function look like?

152
00:09:00,910 --> 00:09:04,840
Well, first thing we see is we're
using geocoder. geocode.

153
00:09:04,840 --> 00:09:06,940
So what is that?

154
00:09:06,940 --> 00:09:10,330
Well, if we look at the top,
we see that we have a new

155
00:09:10,330 --> 00:09:13,860
global variable, geocoder.

156
00:09:13,860 --> 00:09:17,500
And this is a global reference
to a geocoding service.

157
00:09:17,500 --> 00:09:19,380
Now what does that do for us?

158
00:09:19,380 --> 00:09:23,810
Well, in the input box, I'm going to be
entering something like 33 Oxford

159
00:09:23,810 --> 00:09:26,040
Street Cambridge, Massachusetts.

160
00:09:26,040 --> 00:09:28,580
But we can't really do
anything with that.

161
00:09:28,580 --> 00:09:31,760
We want to convert that to
latitude and longitude.

162
00:09:31,760 --> 00:09:34,940
And that's what the geocoding service
is going to do for us.

163
00:09:34,940 --> 00:09:40,630
At the bottom of initcb, we see that
we have geocoder equals new

164
00:09:40,630 --> 00:09:45,830
google.maps.geocoder which initializes
this variable for us.

165
00:09:45,830 --> 00:09:47,930
>> So back to teleport.

166
00:09:47,930 --> 00:09:51,240
We see we're using the geocoder.

167
00:09:51,240 --> 00:09:54,970
We're geocoding the address that was
passed to the teleport function which

168
00:09:54,970 --> 00:09:57,450
was grabbed from the input box.

169
00:09:57,450 --> 00:10:02,020
And we're passing it a call back
which takes results and status.

170
00:10:02,020 --> 00:10:05,905
So first thing we need to check per
the API document of google.maps.

171
00:10:05,905 --> 00:10:06,130
GeocodingService.

172
00:10:06,130 --> 00:10:08,330
Maps

173
00:10:08,330 --> 00:10:11,550
>> So we have to check the status
to see if it returned.

174
00:10:11,550 --> 00:10:16,820
google.maps.GeocoderStatus.OK which
indicates that we have a valid result.

175
00:10:16,820 --> 00:10:19,310
If we don't, then we get, no can do.

176
00:10:19,310 --> 00:10:20,990
This might be an invalid address.

177
00:10:20,990 --> 00:10:24,630
Or the API service might
be down or who knows?

178
00:10:24,630 --> 00:10:29,980
Assuming we have a success result then
we're going to grab the location from

179
00:10:29,980 --> 00:10:30,790
the result.

180
00:10:30,790 --> 00:10:34,220
And we're going to set the Google Map
in the bottom right corner to be

181
00:10:34,220 --> 00:10:38,870
centered at that location and update the
bus on the map to that location.

182
00:10:38,870 --> 00:10:41,620
>> And now we need to update the
Google Earth plug-in.

183
00:10:41,620 --> 00:10:45,340
So we update the latitude and
longitude of the shuttle.

184
00:10:45,340 --> 00:10:50,570
And we also need to update
shuttle.localAnchorCartesian since if

185
00:10:50,570 --> 00:10:55,250
you look at shuttle.js, you'll see that
that also keeps track of latitude

186
00:10:55,250 --> 00:10:56,310
and longitude.

187
00:10:56,310 --> 00:10:59,490
So if we don't update that, we have the
original latitude and longitude

188
00:10:59,490 --> 00:11:01,330
stored hidden somewhere.

189
00:11:01,330 --> 00:11:06,490
So updating that now, we call
shuttle.updateCamera to refresh the

190
00:11:06,490 --> 00:11:09,070
screen and show us our new location.

191
00:11:09,070 --> 00:11:10,380
And that's it.

192
00:11:10,380 --> 00:11:11,500
My name is Rob.

193
00:11:11,500 --> 00:11:12,750
And this was Shuttle.

194
00:11:12,750 --> 00:11:18,080