Path train schedule App

My final project is translating the time schedule of NJ path train to an animated offline phone application that can show the position of every train in realtime based on its time schedule. I believe it can help easy the anxious when people are waiting for the train without internet connection.

Because of the time limitation, I scaled down the project and focused on one train line, which is 33rd street to Journel Square. The code link is here.

Data source

Although I downloaded the data from path train official website, the data is not an API but a bunch of files linked with each other in GTFS format, which is not readable very well. So I manually inputed the time table to a .csv file.


I drew the train map in Illustrator and imported as an .png background. The size is based on iPhone screen. 

Code organization

The data.js is including all the function of data processing. The trainStation.js is including each station's x and y positions in the canvas. The train.js is for all the train moving function. In the code, I get the time at the moment and search it in the time table data, then calculate and map the position of the train on the canvas.

Phone app translation

I used the PhoneGap and Cordova to translate the web application to an iOS app. And adjusted the html and css to fit the iPhone screen perfectly.

Summery and problems

1) The train is not moving smoothly as an animation because the smallest unite of time in this application is one minute, that is almost the whole time of the train from one station to another.

2) I can not make the train move as a curve which is showing on the official map.

3) The real time schedule has lots of spacial setting such as different time table on weekends, which are too complicate for this time, so the train schedule in this application is not the true schedule.

After this final project, I realized that the development of a full functional problem solving application is not easy and need more thoughtful design and organization. Also I'm not very familia with javascript yet. But I think this realtime train moving App is useful and worth exploring more.

Final project proposal

Everyday I need to take the path trains. There is no internet connection in the train station so I can not know when the train will come. This is really annoying to me. My old solution is take a picture of the brochure below and save it in my Iphone.

But a photo is not cool enough in ITP, right? So I'm thinking about make it a offline realtime animation that can show me where are all the trains and how they are moving on their lines. 

Then I found the open data of this brochure on the official site of the path train, and they are data sheets in .txt files connecting with each other. But it is easy to translate these files to excel files.

Synthesis workshop: balloon

Lin and I did this on the workshop. We spent some times to figure out "don't open web editor and arduino serial monitor at the same time" and "keep the p5.serialcontrol open". The only problem was that we were so frustrated with the web editor then.

Sketch of week 2

  • The circle controlled by the mouse.
  • The background shapes flash over time, independently of the mouse.
  • The background color is different every time you click.

My screen drawing

This is my evil p5.js monster.

I used Adobe Illustrator to draw the sketch First. Because at the end, it will look clean and have all the coordinate informations I needed when I put the mouse point on each shape points. However, typing in all these coordinates into p5.js is still annoying.

I found out that the "arc" function is very hard to use, since the reference is not that clear and make me confuse. I checked the original code in javascript to understand the "PI" and angle things.