New Bus Icons in Go Transit App

I just released version 1.6.1 of Montclair for all the Go Transit cities. This includes a minor visual change of a new icon for the bus.

Previously, I was using Availtec’s Icon Factory, which lets you specify a color and heading, and it generates a .png image of that color with an arrow indicating the direction the bus is going. It has worked well, and looks nice enough, but I don’t like depending upon a 3rd party service, especially for cities that don’t use Availtec.

After some deliberation, I decided I wanted to do everything client side. I would have a single SVG icon that the client would load in javascript and would manipulate the stroke/fill colors and rotate the arrow to the heading. This works quite well, and the result is a nice clear image that we only have to load once!

This code works by loading the SVG through the DOMParser, then modifying attributes, reserializing it, then returning it as a data: url that is base64 encoded.

// load the svg
let xml = new DOMParser().parseFromString(svg.data, 'image/svg+xml');
// update the attributes //

// 1. the gradient
// stop1
let stop1 = xml.querySelector('#stop958');
stop1.style.stopColor = '#' + this.color;

...

// 5. The bearing, set its rotation
let bearing = xml.querySelector('#bearing');
bearing.setAttribute('transform', `rotate(${this.heading}, 250, 190)`);

// 6. Serialize and generate a data url with base64 encoded data
let serialized = new XMLSerializer().serializeToString(xml);
const url = 'data:image/svg+xml;base64,' + btoa(serialized);

Here’s the result:

New Bus Icons using custom Icon Factory

Go Transit App Updates

I have released a new version of the Montclair software, 1.6.0, that includes some major improvements to seeing estimated arrivals of buses at stops.

When selecting a stop, the app now goes into a full screen split mode with the estimated arrivals and the map. Clicking on one of the estimated arrivals will show you where that specific bus relative to your stop and will track the bus until it arrives. This makes seeing your next bus super simple!

This version will automatically roll out to your favorite “Go Transit” city app!

Go Tuscaloosa

I have added support for Tuscaloosa, Alabama’s transit system as part of my Go Transit series of apps. You can view Go Tuscaloosa in your browser or install it in the Apple or Google app stores.

‎Go Tuscaloosa
‎Go Tuscaloosa
Developer: Marcus Dillavou
Price: Free
Go Tuscaloosa
Go Tuscaloosa
Developer: line72
Price: Free

For a full list of cities and features, see the Go Transit App website.

Go Memphis and Go Nashville

I have added two more cities to the Go Transit Apps series, Go Memphis and Go Nashville. Both are available through the web, or in the Android Play Store and Apple App Store.

Go Memphis

‎Go Memphis
‎Go Memphis
Developer: Marcus Dillavou
Price: Free
Go Memphis
Go Memphis
Developer: line72
Price: Free

Go Nashville

‎Go Nashville
‎Go Nashville
Developer: Marcus Dillavou
Price: Free
Go Nashville
Go Nashville
Developer: line72
Price: Free

For a full list of cities and features, see the Go Transit App website.

More cities supported by Go Transit

I have been working on adding support for more cities. The following new cities now have Go Transit Apps:

Go Akron, OH

‎Go Akron
‎Go Akron
Developer: Marcus Dillavou
Price: Free
Go Akron
Go Akron
Developer: line72
Price: Free

Go Athens, GA

‎Go Athens, GA
‎Go Athens, GA
Developer: Marcus Dillavou
Price: Free
Go Athens, GA
Go Athens, GA
Developer: line72
Price: Free

Go Grand Rapids, MI

‎Go Grand Rapids
‎Go Grand Rapids
Developer: Marcus Dillavou
Price: Free
Go Grand Rapids
Go Grand Rapids
Developer: line72
Price: Free

Go Huntsville, Alabama

‎Go Huntsville
‎Go Huntsville
Developer: Marcus Dillavou
Price: Free
Go Huntsville
Go Huntsville
Developer: line72
Price: Free

Go Montgomery, AL

‎Go Montgomery, AL
‎Go Montgomery, AL
Developer: Marcus Dillavou
Price: Free
Go Montgomery, AL
Go Montgomery, AL
Developer: line72
Price: Free

You can also find all of these in the Google Play Store or the Apple App Store.

For a full list of cities and features, see the Go Transit App website.

See Stops and Arrival Estimates in Go Transit Apps

I have been making several improvements to the montclair code base, which is the software that powers all the Go Transit apps.

Go Transit now shows the stops of the selected route
See the stops for the Highland #12

First, for the selected routes, you can now see where all the stops are. This helps people who are unfamiliar with the system know where to pick up a bus that is near by.

See the arrival times of buses for the selected stop
Stop Arrival Times

Selecting a stop on the map will show you the estimated arrival time of buses for that stop! This is a live view that is continuously updated as the arrival estimates change.

If multiple buses use this stop, view all their arrival times
Arrival Times of a Stop with Multiple Buses

If multiple buses go through the same stop, then the app will show the arrival estimates for all the buses. This is especially useful in cases where routes overlap and you have multiple options.

All of these changes have already been pushed out, and any apps you have should automatically update!

Announcing the Go Transit Apps

During a recent visit to Steamboat Springs, Colorado, I quickly became frustrated with the app for the free bus system. I thought to myself that it would be really nice to have my Montclair app available for other cities. With that, the Go Transit series of apps were born.

I started off building out github actions for the montclair, montclair-pwa-android, and montclair-pwa-ios projects. The github actions will automatically generate a compiled build when the repository is tagged.

The next step was to build a transmogrifier. The transmogrifier takes a configuration, then pulls down a specific version of montclair, montclair-pwa-android, and montclair-pwa-ios, and replaces all the necessary names, strings, icons, and other information. The new versions are then pushed to their own repositories and tagged, which automatically kicks off the white labeled builds.

All that is left it to create a custom configuration (see Steamboat for an example). The assets projects all have github actions too, and each time a commit is pushed, it will then run the transmogrifier.

When all the builds are done, they can be uploaded to my website hosting provider, the Google Play Store, and the Apple App Store.

So far I have created white label builds for:

Go Birmingham, AL

‎Go Birmingham
‎Go Birmingham
Developer: Marcus Dillavou
Price: Free
Go Birmingham
Go Birmingham
Developer: line72
Price: Free

Go Mobile, AL

‎Go Mobile, AL
‎Go Mobile, AL
Developer: Marcus Dillavou
Price: Free
Go Mobile
Go Mobile
Developer: line72
Price: Free

Go Steamboat Springs, CO

‎Go Steamboat
‎Go Steamboat
Developer: Marcus Dillavou
Price: Free
Go Steamboat
Go Steamboat
Developer: line72
Price: Free

Go Indianapolis, IN

‎Go Indianapolis
‎Go Indianapolis
Developer: Marcus Dillavou
Price: Free
Go Indianapolis
Go Indianapolis
Developer: line72
Price: Free

Go Raleigh, NC

‎Go Raleigh
‎Go Raleigh
Developer: Marcus Dillavou
Price: Free
Go Raleigh
Go Raleigh
Developer: line72
Price: Free

For more information, see the Go Transit App website.

Validating Availtec’s Bus Arrival Estimates

In my last post, I created a dashboard that shows the estimated arrival time of buses at specific stops. After using it, I was curious to see how accurate those estimates are.

So I have created a new project:

availtec-estimate-validation

As always, everything is opensource and available on my github page.

This project consists of two parts:

  1. A capture script that queries Availtec’s API every 30 seconds for the estimated arrival time and stores them in a local database
  2. A graph script that generates pretty visualizations from the captured data.

Here is an example of the Route 44 Inbound at St. Vincents Hospital for Birmingham, AL’s transit system.

Route 44 Estimates

Each “block” is a bus trip throughout the day. The dark black line represents the actual time the bus arrived at this stop. The dark blue line shows when Availtec estimated the bus would arrive at that specific time.

Ideally, the dark blue line would be as close as possible to the dark black line.

From the image above, we can see that the 4th trip, from 10:44:17 to 10:46:17 had the best estimate. From 10:00am to 10:50am, Availtec estimated the bus would arrive ±30 seconds from when it actually did.

We can also see that the trip after it, had the worst estimate. From the time the trip started, just before 10:50, until around 11:20, Availtec was estimating the bus would arrive at 11:32, when it actually came at 11:38. It wasn’t until about 11:25, that the system suddenly corrected and started estimating a more realistic time.

This project works with any bus system that utilizes Availtec for real time tracking. You can leave the capturer program running in the background for days, then generate graphs based on that historical data. The graphing script allows you to specify which stops, routes, and days to plot.

Announcing Montclair for iOS and Android

I have taken my Montclair bus tracking web site and created an App for both Android and iOS that you can download for free in their app stores.

Montclair
Montclair
Developer: Marcus Dillavou
Price: Free

Montclair
Montclair
Developer: line72
Price: Free

This came about because I have been unhappy about how iOS handles progressive web apps. Every time the app is brought to the foreground, iOS does a full reload, which can be slow and annoying. The native app handles this much nicer, and doesn’t ever have to reload the state.

To build the native apps, I used this handy tool: Progress Web App Builder. It takes your website, wraps it using Cordova, and generates both an iOS and an Android project. With only a few tweaks, I was able to get them submitted to the app store.