I Built a Tidbyt App - Melbourne Trains

Image of Tidbyt Logo
Image Credits: Tidbyt

# Contents

TLDR
What is Tidbyt?
The Idea
The Building Experience
The Publishing Experience
The Design
Wrap Up

# TLDR

GitHub: Melbourne Trains App

# What is Tidbyt?

Image of Tidbyt device
Image Credits: Tidbyt

Tidbyt is a retro-style RGB LED matrix display, measuring 64x32 pixels, and serves as an IoT device designed to keep you updated with a variety of information, whether it's the news, some cool art, or just simply the time. It is a highly customisable device and it is controlled via Tidbyt's mobile app (iOS / Android) or API.

Unlike typical displays, the Tidbyt operates in a unique manner. It's essentially a projector, but instead of films, its main job is to bring static and animated WebP format images to life. The device is designed to cycle through a list of images, ensuring that information is constantly updated and displayed throughout the day.

These images however are not generated on the device itself; instead, they are generated on external servers — either by Tidbyt or on your own personal server — and the output image is then pushed to your device remotely. The code used to generate these images is what's known as a Tidbyt App.

What truly sets the Tidbyt apart from other rival pixel displays is the vibrant ecosystem its creators have established. They've created a public Tidbyt App Store that encourages open source collaboration and enables anyone to contribute to building and sharing apps with the wider community.

Similar to other app stores, the only limit to what you can create is your imagination. To give you a taste and feel for what's possible, below are some of my favourite Tidbyt Apps available in the Tidbyt App Store.

Tidbyt App - Tetris Clock
Tetris Clock
Tidbyt App - Spotify
Spotify
Tidbyt App - Duolingo
Duolingo
Tidbyt App - Stocks
Stocks
Tidbyt App - Crypto
Crypto
Tidbyt App - Time Until
Time Until
Tidbyt App - GitHub
GitHub
Tidbyt App - Leetcode Stats
Leetcode Stats

# The Idea

One of the most highlighted categories in the Tidbyt App Store has to be the Public Transport-related apps. Since every transit system in the world differs and their APIs vary, it has become a common theme to create a separate Tidbyt Transit App for each region.

When I was planning to try my hand at creating an app, I noticed Melbourne, Australia didn't have a transit app yet, and since I live in Melbourne, it just seemed like the perfect first Tidbyt App to build. So, that's where the idea for the Melbourne Trains app came from.

# The Building Experience

Tidbyt Apps are written using the Starlark programming language; it was my first time using it, and for the most part, the experience was very similar to using Python. The Tidbyt Apps also heavily rely on a rendering library created by the Tidbyt team, called Pixlet. However, the documentation for these two technologies is pretty bare-bones — you won't find too much detail by browsing the developer documentation or even asking ChatGPT. As a result, I found completing the final 5% and getting it working exactly the way I wanted quite challenging.

However, the open-source nature of the Tidbyt App Store made for a great developer experience because I could easily reference the code others had used to create their apps. This allowed me to speed up the process when creating mine, making the first 95% quite enjoyable.

The live data used in the Melbourne Trains Tidbyt App is sourced from the Public Transport Victoria API (v3). The structure of this API is much more granular than that of other transit APIs I've encountered. The data is highly fragmented, requiring multiple API calls to determine a train's departure time from a given station. To reduce the number of API calls and mitigate the risk of being rate-limited or blocked by the Public Transport Victoria, I decided to hardcode a lot of the data that seemed likely to remain static for the life of this version of the API, thus reducing it to a single API call. Additionally, each request is configured to be cached every 60 seconds.

# The Publishing Experience

To get your Tidbyt App published, it's as simple as getting your changes added to the community repository.

To do so, follow the simple steps below:

1. Create a fork from the community repository.
2. Create a feature branch from the forked repository.
3. Apply your code changes.
4. Raise a pull request to merge into the upstream repository.

Once you have raised your pull request, a Continuous Integration (CI) process will commence. This triggers a series of GitHub action runners to perform checks on aspects such as linting and errors. Additionally, a preview of your app will be generated.

For the pull request to be merged, all CI checks must pass, and a Tidbyt admin must review and approve the changes.

However, there is one issue with the CI process concerning Tidbyt apps that rely on encrypted secret values, such as an API key. The GitHub action runner cannot decrypt these encrypted values in order to retrieve them. As a result, the generated preview might not accurately reflect your expectations, potentially leading to a misleading representation of the state of your Tidbyt app.

Once your pull request has been merged, you'll see your published app listed in Tidbyt's mobile app, making it accessible to all Tidbyt users worldwide. 🎉

# The Design

The design for the Melbourne Trains Tidbyt App was largely inspired by an existing transit app called NYC Bus. Among all the transit apps I encountered in the Tidbyt App Store, the design of NYC Bus stood out to me as very elegant. Therefore, I used it as a major reference with a few additional tweaks.

Below is a list of features that the Melbourne Trains app offers.

  • Support: Metropolitan train lines only at this stage
  • Colour Coded Train Lines (Matches train network maps)
  • Platform Number (e.g Platform 3)
  • Departure Time Remaining (e.g. 5 minutes)
  • Departure Station (e.g Richmond Station)
  • Departure Direction (e.g. Inbound to City / Outbound to Pakenham)

Below are a few samples of how the app would appear on a Tidbyt device.

Tidbyt App - Melbourne Trains - Pakenham Line
Pakenham Line
Tidbyt App - Melbourne Trains - Glen Waverley Line
Glen Waverley Line
Tidbyt App - Melbourne Trains - Hustbridge Line
Hustbridge Line
Tidbyt App - Melbourne Trains - Sandringham Line
Sandringham Line
Tidbyt App - Melbourne Trains - Sunbury Line
Sunbury Line
Tidbyt App - Melbourne Trains - Stony Point
Stony Point Line
Tidbyt App - Melbourne Trains - Werribee Line
Werribee Line

# Wrap Up

To close out this blog post, the experience I had building my first Tidbyt app was very fun and enjoyable. I would definitely like to build more apps in the future when cool ideas that haven't been done yet pop up in my mind.

I also think the Tidbyt device has been such an amazing purchase for me personally. It has re-engaged me with technology and made it feel more fun again, as opposed to more serious, as it tends to feel in a corporate setting. I highly encourage anyone out there who's feeling a little low on inspiration to try it out for themselves and see if it makes a difference in their lives as it has for mine.

Ben Diep

Software Engineer