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.
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.
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.