Problem Set 8 : CS50 Shuttle

Hello everyone! Welcome back! This is cs50! How’s the C$50 Finance? It was fun, right? Hehe..
Umm.. well, today I’m going to write about Problem Set 8. OMG, the last!!! OK, so what it is all about? It is all about JavaScript and third-party APIs.

As always, take your time to read :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide


Getting Started

Per the instruction http://cdn.cs50.net/2014/x/psets/8/pset8/pset8.html, if you don’t have Chrome installed on your computer (not inside of the appliance), download and install the latest version of Chrome from http://www.google.com/chrome.
Then using Chrome, download and install the Google Earth Plug-in from http://www.google.com/earth/explore/products/plugin.html. Note that the plug-in requires Mac OS or Windows unfortunately. Once the plug-in installed, you may need to reload that page or restart your browser, but you should see a 3D Earth embedded the page. If unable to get Google-Earth plug-in, you may skip this problem set.
Best to minimize the number of programs and windows you have open while working on this problem set. The Google Earth Plug-in likes to consume CPU cycles and RAM. In fact, if you ever feel your computer slowing down, you might want to quit some programs or even reboot (after saving your work).
Next, start up your appliance, open a terminal window and execute :

update50

To ensure that your appliance is up-to-date!
Like Problem Set 7, this problem set comes with some distribution code that you’ll need to download before getting started. Go ahead and execute :

cd ~/vhosts/localhost/public

Then execute :

wget http://cdn.cs50.net/2013/fall/psets/8/pset8/pset8.zip

In order to download zip file of this problem set’s distro. Then execute :

ls

You should see that you now have a file called pset8.zip in your ~/vhosts/localhost/public directory. Unzip it by execute :

unzip pset8.zip

Then :

ls

You should see that you now also have a directory called pset8. You’re now welcome to delete the ZIP file with the below :

rm –f pset8.zip

If you next execute :

cd pset8

Followed by

ls

You should see that pset8 contains index.html and four directories (css, fonts, and img, and js). Ensure that all files inside of the pset8 (and its descendants) are world readable by executing :

find . – type f | xargs chmod 644

So that the appliance’s web server will be able to access your work. Then ensure that all directories inside pset8 are world-executable by executing the below :

find . – type d | xargs chmod 711

Finally, ensure that few other directories are still world-executable by executing the below :

chmod 711 ~
chmod 711 ~/vhosts
chmod 711 ~/vhosts/localhost
chmod 711 ~/vhosts/localhost/public 

If you opt to create files or any other directories for this problem set, keep in mind that :
• any files should probably be readable and writable by you but only readable by anyone else (i.e 644).
• and any directories should world-executable (i.e 711).

Unlike Problem Set 7, your code for Problem Set 8 will indeed live in a virtual host (aka vhosts) called localhost rather than one called, e.g., pset8. Using localhost will make it easier to access your code from Chrome on your own computer (outside of the appliance).

Now head to the URL below using a browser on your own computer (outside of the CS50 Appliance), where w.x.y.z is your appliance’s IP address (which should be displayed in the appliance’s bottom-right corner), and each of w, x, y, and z is thus a number between 0 and 255:

http://w.x.y.z/pset8/

You should see University Hall! If not, do double-check that you’ve not missed or mistyped a step.

Incidentally, anytime you’d like to print some debugging information to the Console tab of Chrome’s Debugging Tools during this problem set, a la printf in C, know that you can include a line like

console.log("hello, world");

in your JavaScript code. So long as Chrome’s Console is open, you’ll see that text. Just be sure to remove any such lines before submitting your work. Do keep an eye on that Console during development, too, as syntax errors and more tend to appear there in red. Alternatively, you can include a line like

alert("hello, world");

in your JavaScript code to display messages to yourself, but the pop-up that results tends to be more annoying, especially if you accidentally call alert in a loop!


Your mission of this problem set is to implement your own shuttle service that picks up passengers all over campus and drops them off at their houses. Your shuttle equipped with an engine, a steering wheel, and some seats. Assuming that you’re still at http://w.x.y.z/pset8 looking at University Hall, here’s how to drive the keyboard:

Move Forward  W
Move Backward S
Turn Left     
Turn Right    
Side Left     A
Side Right    D
Look Downward 
Look Upward  

Oops! Where did I go? I think I’ve lost my way… 😉

cs50 shuttle

OK, now open up index.html first and read over the HTML code inside :

index.html

Look at the div announcement :

announcements

Then, let’s take a peek at css/service.css :

/**
 * service.css
 *
 * Computer Science 50
 * Problem Set 8
 *
 * Global stylesheet.
 */
 
html
{
 height: 100%;
}

body
{
 font-family: sans-serif;
 height: 100%;
 margin: 0;
}

#announcements
{
 font-size: smaller;
 margin: 5px;
 text-align: center;
}

Then, open up building.js, you should see the below :

/**
 * buildings.js
 *
 * Computer Science 50
 * Problem Set 8
 *
 * Buildings on campus.
 */

var BUILDINGS = [
 {
 root: "04558",
 name: "1 Bow Street",
 address: "1238 Massachusetts Ave",
 lat: 42.372341075,
 lng: -71.116148412
 },
……………etc
];

Now, turn to passengers.js sneak peek :

var PASSENGERS = [
 {
 username: "abuchholtzau",
 name: "Allison Buchholtz-Au",
 house: "Adams House"
 },
………….etc
];

Then you’ll want to check houses.js. You can see the coordinates which are the official coordinates for the passengers destinations.

var HOUSES = 
{
 "Adams House": {lat: 42.37189, lng: -71.11639},
 …..etc
};

If you’d like to look up where some building is on campus, feel free to search for it at http://maps.cs50.net/

Ok, let’s take a peek at js/shuttle.js. You don’t need to understand this file entirely, but know that inside of a Shuttle there are two properties : position, which encapsulates a shuttle’s position(including latitude and longitude)

// shuttle's position
 this.position = {
 altitude: 0,
 heading: config.heading,
 latitude: config.latitude,
 longitude: config.longitude
 };

and states which encapsulates a shuttle’s various states.

// shuttle's states
 this.states = {
 flyingUpward: false,
 flyingDownward: false,
 movingBackward: false,
 movingForward: false,
 slidingLeftward: false,
…etc
};

OK, now pay your attention at js/service.js when you’ll most do your work here. You may modify any of this problem set’s files except for js/math3d.jd, js/building.js, js/houses.js, and js/passengers.js.

Anyway, inside of js/service.js you should do the below:

  1. Pickup chart
  2. Dropoff
  3. Extra features

PICKUP CHART

It’s time start picking the passengers up. Recall from index.html that when the button labeled Pick Up clicked, the function called pickup is js/service.js is called. How to do it? Well, it’s part of challenge. Implement pickup as follows :

  • If the button is clicked when and the shuttle is within 15.0 meters of a passenger and at least one seat is empty, the passenger should be given a seat on a shuttle and removed from both 2D and 3D earth.
  • If the shuttle is not within 15.0 meters of any passenger, make an announcement to the effect.
  • If the shuttle is within range of some passengers but no seats are free, make an announcmement to that effect (and don’t pick up the passenger).
    By the way you’ll want to read :
    Google Maps JavaScript API v3 https://developers.google.com/maps/documentation/javascript/tutorial
    Google Earth API https://developers.google.com/earth/documentation/

Hints to get you started on picks-up :
1. To calculate the shuttle’s distance, “d“, from some point (lat, lng), you’ll probably  want something like :

var d = shuttle.distance(lat, lng);

2. To remove a placemark, “p“, from 3D earth, you’ll probably want something like

var features = earth.getFeatures();
features.removeChild(p);

3. To remove marker, m, from the 2D map, you’ll probably want something like :

m.setMap(null);

4. Then, you’ll want to update shuttle.seats to give the passenger a seat, be sure not to add extra seats.

Incidentally, be sure not to pick up any freshmen (i.e anyone whose home isn’t in js/houses.js).
Take a look at the pseudocode below to get you done the pickup function.

Pseudocode :

1. detect passenger(s) in range –> loop through all passengers
2. add passenger(s) to shuttle
3. remove placemark from the 3D Earth
4. remove marker from 2D map
5. display passenger(s) in shuttle

DROPOFF

Now, implement drop-offs! Recall from js/building.js, that each passenger live in a house. And recall from index.html, that, when the button labelled Drop Off is clicked, the function called dropoff in js/service.js is called. Implement drop-offs as follow :

  • If the button is clicked when the shuttle is within 30.0 meters of an aon-board passenger’s house, that passenger should be dropped of by emptying their seat.
  • If the shuttle is not within 30.0 meters of any passenger’s house, you should make an announcement to that effect. You should make an announcement.
  • No need to re-plant a placemark or marker for dropped-off passangers. Be sure not to make them change seats just because some other seat is now empty.

Take a look at the pseudocode below to get you done the pickup function.
Pseudocode :
1. check if in range of any houses –> loop through houses
2. remove passengers from shuttle

EXTRA FEATURES

Per the spec: http://cdn.cs50.net/2014/x/psets/8/pset8/pset8.html#_extra_features you’ll need to implement any three of the features as the spec says.

Once you’re done with that, you’ve completed CS50 Shuttle! Congrats! 😉
This was Problem Set 8. Your last!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s