>> ROB BOWDEN: Hi.
I'm Rob.
And I hope you're ready to pick up what I'm dropping off or putting down,
or let's get started.
So first thing we need to do is pick up.
Now, pick up is going to be removing the passengers' icons from the Google
map in the bottom right corner and from the Google Earth in the center of
the screen.
So in order to remove those icons, we need to have the
references to them somewhere.
But currently, the Populate function just gets rid of them.
So we're going to have to modify populate to keep them around.
>> Now first thing we'll see is that we have a global passengers array.
And so we're going to use that global's passengers array in Populate.
In Populate, we see that we're looping over all of our passengers.
And it's this loop that's creating the place mark for Google Earth and the
marker for the Google Map.
And so now our modification to populate is to be here.
So we're adding on to our passengers' array this object which is keeping
around the marker and place mark we just created along with the house and
name of the passenger.
>> So that's it for Populate.
Now we need to look at Pick Up.
So in Pick Up, we're once again going to iterate over all of our passengers.
But now it's our global passengers array.
And here we're seeing that well, have we already picked up this passenger?
Since if we have picked up this passenger, we see in the end that
we're going to set the marker and the place mark to null since they're no
longer in the Google map.
>> So if we have already picked up this passenger then we're just going to
continue to the next passenger.
Else, we check to see if this passenger's house is inside of the
house's array.
This is the check we need to make sure that we don't pick up the freshman as
the spec says.
So if the passenger is a freshman, we're going to
continue to the next passenger.
>> Once we've verified that this is a passenger we should be picking up,
we're now going to check the latitude and longitude of the passenger and see
if that's within 15 feet of the shuttle.
If that's the case, we actually want to pick up this passenger.
So we integrate over all of the seats in our shuttle looking to see if
there's an available spot for the passenger.
If one of the seats is null, that's an available spot.
So we add the passenger to the seat.
We remember that we picked up the passenger so that in the end, we can
announce if we actually didn't pick anyone up.
We remember that we seated this passenger since if we manage to get
through the entire shuttle without seating the passenger, then we need to
announce that we're out of seats.
>> Then we remove their place mark from Google Earth.
We remove their marker from Google Maps, set inside of our passengers'
array place mark and marker to null as we said before.
And then that's it.
The passenger has been seated.
Once we've done that for all passengers within 15 feet of the
shuttle, we need to rechart.
>> So Chart is what's going to display the passengers in the seats over here.
So now, let's look at Chart.
Inside of Chart, we're going to be constructing the HTML for the chart.
So the chart is going to be an ordered list.
Then we'll iterate over all of the seats in our shuttle.
So if this particular seat is null, that means we want a List item that
indicates that it's an empty easy.
Else, if it was not null, then we want a List item that is going to display
the name of the passenger and the house of the passenger
that's in this seat.
>> Once we've iterated over all of the seats then we close our ordered list
and use jQuery to select the chart div and replace it's HTML with our new
ordered list.
And that's it for Chart.
>> So last thing is drop off.
Now drop off is going to be pretty similar to pick up.
Instead of looping over all of the passengers, we're going to loop over
all of the shuttle seats.
So looping over the shuttle seats, we see is this particular shuttle seat
not null, in which case there's a passenger in this seat.
If that's the case, we want to grab the latitude and
longitude of this passenger.
>> So using the house's array, we're going to grab the house of the
passenger in this seat and then grab the latitude of that particular house
and similarly for longitude.
Now, we once again use distance to see in that house is within 30 feet of us.
If that's the case, they want to set this seat to null, since the passenger
was dropped off, and increment that a passenger was dropped off.
So that in the end, if no one was dropped off, we announce that no one
wants to be dropped off here.
>> Finally, we need to rechart so that we display new, empty seats.
Now, you just need to implement some extra features.
Now, there's plenty you could have chosen from.
But in our case we implemented teleport, flying, and speeding up, and
speeding down.
So let's look at those.
First, let's take a look at the speeding up feature.
So in our case, in the keystroke function, where we're already handling
all of these keys, we're also going to recognize X and Z. Which we specify
that these characters are going to cause the shuttle's velocity to
increase and decrease.
>> So notice that we put a bound on how high and on how a low the velocity can
actually go since we don't want the shuttle to be too fast.
And we also don't want the shuttle's velocity to go to zero or possibly
even negative which will result in some strange behavior.
And that's it for speeding up and slowing down.
>> Now, let's take a look at flying.
So remember that the flying feature requires you to enter the Konami Code.
So up at the top, we see we have some global variables, Konami Code which is
a array that's just keeping track of the keys that need to be entered for
the Konami Code.
There's a Bool which just indicates whether the Konami Code has already
been entered.
And then there's the index into the Konami Code array that
we're currently at.
>> So if the user has already entered three characters of the Konami Code
then the index is going to point to the fourth thing in the array, the
third index.
Using that, once again we'll look at key stroke.
And in key stroke we see here that if the Konami Code has not already been
entered, then we want to see is the key that was entered what we're
currently expecting from the Konami Code array.
If that's the case, then we increment our index.
>> If the user types Up then index is going to go to one.
Then the user will type up again, the index goes to two.
Then they'll type down, it will go to three.
If they type Q, it'll reset to zero since they did not match
the expected value.
Now, if they manage to get through the entire array then they've entered the
Konami Code.
In which case, now that Konami entered is true, we see down here that if
Konami was entered, we accept two new keys, C and E. Which all those will do
is set the flying downward and flying upward states in the shuttle.
So already exist for you.
You just need to take advantage of them.
And that's it for flying.
>> Last, we have teleport.
So inside of the HTML, we see that we've added an input box and a
teleport button.
The box has ID address, and the button has an ID teleport button.
Now one annoying little detail is that if we don't do anything with event
handlers then when we try to type something like A into the input box,
instead of actually tying A, our Google Earth is going to move to the
left since A is already registered to handle moving to the left.
>> So the annoying detail here is that when we have a key down or key up
event inside of the input box, we want to event.stop propagation which is
just going to prevent the sliding of the shuttle.
Once that's handled, we also want to add a handler to the teleport button.
When we click the teleport button, we grab the address, which is the current
value in the input box, and then we call this teleport function.
>> So what does the teleport function look like?
Well, first thing we see is we're using geocoder. geocode.
So what is that?
Well, if we look at the top, we see that we have a new
global variable, geocoder.
And this is a global reference to a geocoding service.
Now what does that do for us?
Well, in the input box, I'm going to be entering something like 33 Oxford
Street Cambridge, Massachusetts.
But we can't really do anything with that.
We want to convert that to latitude and longitude.
And that's what the geocoding service is going to do for us.
At the bottom of initcb, we see that we have geocoder equals new
google.maps.geocoder which initializes this variable for us.
>> So back to teleport.
We see we're using the geocoder.
We're geocoding the address that was passed to the teleport function which
was grabbed from the input box.
And we're passing it a call back which takes results and status.
So first thing we need to check per the API document of google.maps.
GeocodingService.
Maps
>> So we have to check the status to see if it returned.
google.maps.GeocoderStatus.OK which indicates that we have a valid result.
If we don't, then we get, no can do.
This might be an invalid address.
Or the API service might be down or who knows?
Assuming we have a success result then we're going to grab the location from
the result.
And we're going to set the Google Map in the bottom right corner to be
centered at that location and update the bus on the map to that location.
>> And now we need to update the Google Earth plug-in.
So we update the latitude and longitude of the shuttle.
And we also need to update shuttle.localAnchorCartesian since if
you look at shuttle.js, you'll see that that also keeps track of latitude
and longitude.
So if we don't update that, we have the original latitude and longitude
stored hidden somewhere.
So updating that now, we call shuttle.updateCamera to refresh the
screen and show us our new location.
And that's it.
My name is Rob.
And this was Shuttle.