CS 106 Winter 2018

Lab 10: Trees

Question 1 Room Schedule

The University of Waterloo's Open Data API makes it possible to look up the weekly schedule of classes held in any given classroom. The API returns a JSON object containing a list of each course scheduled in the room, along with the days of the week and times of day that the course is held. We can use that information to figure out when the room is available and when it's free.

In this lab you will process a JSON object stored in a downloaded text file, containing the full schedule information for STC 0040, where CS 106 is held. In a first step, you will print out text information about all scheduled courses in the room. Solving this step along will earn you 70% of the marks for the lab. For the remaining marks, you must produce a visualization of the weekly schedule in a standard calendar arrangement.

  1. Download the file classroom.json, which was acquired using the UW API. Look through the file using a text editor, to a get a sense of how the data is laid out. You can also look at the example at the bottom of the online documentation for this API call.

  2. In a folder called L10, create a new sketch called Schedule. Add classroom.json to the sketch.

  3. Add a setup() function to the sketch that loads the JSON file into Processing, storing it as a value of type JSONObject.

  4. Iterate over all of the individual course offerings in the JSON file. For each one, print out (to the console) the subject and catalog number of the course, followed by the weekdays and start and end times. Format all this information on a single line. The first part of your output should look like this:

    AFM 131: TTh, 14:30-15:50
CS 106: MW, 08:30-09:50
CS 106: MW, 11:30-12:50
CS 136: TTh, 08:30-09:50
...

    To complete this step, you'll need to "drill down" into the JSON, using a combination of JSON get methods, local variables, and a loop over a JSON array. Every line in the output will rely on accessing five fields stored inside the information about a single course: subject, catalog_number, weekdays, start_time, and end_time.

Completing Steps 1–4 will earn you 70% of the marks available for this lab. If you want to earn all the marks, you'll need to do more:

  1. You'll need a helper function that can take as an argument a string describing weekdays, like "MWF" or "TTh", and determine which of the five weekdays are actually in that string. Ideally, the function will return an array of five boolean values, one for each weekday that appears in the passed-in string. This function is a bit fussy to write so here it is. Add it to the sketch.

    boolean[] getDays( String str )
{
  boolean[] res = { false, false, false, false, false };

  int idx = 0;
  while ( idx < str.length() ) {
    char c = str.charAt( idx );
    if ( c == 'M' ) {
      res[0] = true;
    } else if ( c == 'W' ) {
      res[2] = true;
    } else if ( c == 'F' ) {
      res[4] = true;
    } else if ( c == 'T' ) {
      if ( (idx < str.length() - 1) && (str.charAt( idx + 1 ) == 'h') ) {
        res[3] = true;
        ++idx;
      } else {
        res[1] = true;
      }
    }
    ++idx;
  }
  return res;
}

    You'll use this function by giving it the contents of the weekdays fields inside the JSON file. So, for example, getDays( "MWF" ) would return the array { true, false, true, false, true }.

  2. You'll also want a helper function that takes a string representing a time of day as an argument, and turns it into an integer representing the number of minutes from midnight until that time. Call the function getTime(). So, for example, getTime( "08:30" ) should return 8×60+30 = 510, and getTime( "14:20" ) should return 14×60+20 = 860. Use your text processing skills to write this function.

  3. Every course in the JSON file is held at certain times on certain days. Create a visualization of a weekly calendar grid showing the use of the room. Set the size of the sketch window to be at least 600×400, and choose colours for the background, the schedule blocks, and text. Now, for every course, extract its name, along with the weekdays and start and end times. Use getDays() to figure out which days the course is held, and use getTime() to parse the start and end times into minutes since midnight. For each day that the course is held, draw a rectangle. The rectangle's horizontal position in the sketch window is determined by the weekday (so the visualization should have five columns). Vertically, the rectangle should start at the class's start time and run until its end time. Use map() to fit a reasonable portion of the day (say, 8:00am to 10:00pm) into the sketch window's height. Put the subject and catalog number of the course inside the rectangle. When you're done, the grid for STC 0040 should look something like this:


    Note that the gaps between consecutive classes are correct: they reflect the 10-minute class change breaks in the schedule. Also, CS 458 isn't drawn even though it's in the JSON file. That's because it's held at the same time as CS 658, in the same room, so the CS 658 rectangle is simply drawn right on top of the CS 458 rectangle.

    If you implement this step, you can comment out or delete Step 4, which prints the information out to the console—the grid visualization supersedes it.

Of course, you can experiment with all sorts of enhancements to this visualization. Try using different colours for different courses. Try popping up more information about a course when the user hovers over one of the boxes in the schedule. For a serious challenge, when multiple courses are held simultaneously (as with CS 458 and CS 658), find a way to display both sets of information together.

You can also experiment with showing grids for other rooms. If you want, download the sketch GetClassroom and follow the instructions there in order to obtain a new classroom.txt for that room. We may test your sketch on multiple different classrooms.

The natural extension of this idea is to combine these sketches, and to create a version of Schedule that has a ControlP5 textfield. When you type the name of a room into the textfield, the sketch uses the UW API to find out the information about that room on the fly, and immediately visualizes the result. If you experiment with that, please make sure you don't use loadJSONObject() too often! Use it only when the user requests a new room, and definitely not every frame.

Save your work in a sketch titled Schedule.

Submission

When you are ready to submit, please follow these steps.

  1. If necessary, review the Code Style Guide and use Processing's built-in auto format tool. You do not need to use the precise coding style outlined in the guide, but whatever style you use, your code must be clear, concise, consistent, and commented.

  2. If necessary, review the How To Submit document for a reminder on how to submit to LEARN.

  3. Make sure to include a comment at the top of all source files containing your name and student ID number.

  4. Create a zip file called L10.zip containing the entire L10 folder and its subfolder Schedule.

  5. Upload L10.zip to LEARN. Remember that you can (and should!) submit as many times as you like. That way, if there's a catastrophe, you and the course staff will still have access to a recent version of your code.

  6. If LEARN isn't working, and only if LEARN isn't working, please email your ZIP file to the course account (see the course home page for the address). In this case, you must mail your ZIP file before the deadline. Please use this only for emergencies, not "just in case". Submissions received after the deadline may receive feedback, but their marks will not count.