Dynamically Updating Your Tidbyt Display with REST API Data

Last time, I walked through building a simple "Hello World" app for my Tidbyt, the retro LED display screen that now sits on my desk in our Living Room.

This time, I was curious if I could use a REST API to dynamically update the Tidbyt's display.

For example, it would be pretty cool if it could display a "Good Morning" greeting in different languages each day (using GreetingsAPI.com) or a joke (using https://api.chucknorris.io).

The Quest

The mission is simple: Fetch a "Good Morning" greeting and its language from GreetingsAPI.com and display it on my Tidbyt using the http.star module for HTTP requests.

Pre-requisite

Before we dive in, make sure you've installed Pixlet on your machine. This tool is essential for serving, rendering, and pushing the app to your Tidbyt device.

If you're new to this or need a refresher, check out my previous post on Building a Hello World App for Tidbyt Retro Style Display.

Let’s Get Started

First, fire up your favorite IDE and create a new file called greetings.star. Then, paste the code below into it.

greetings.star

# Import the required libraries
load("render.star", "render")
load("http.star", "http")

# Define API URLs for Chuck Norris Jokes and Greetings
GREETINGS_API_URL = "https://www.greetingsapi.com/random"
CHUCK_NORRIS_JOKE_URL = "https://api.chucknorris.io/jokes/random"

# Fetch a random greeting from Greetings API
def get_greeting():
    rep = http.get(GREETINGS_API_URL)  # Make the HTTP GET request
    if rep.status_code != 200:  # Check if the request was successful
        fail("Greetings API request failed with status %d", rep.status_code)
    print(rep.json())  # Debug print the response
    return rep.json()  # Return the JSON response

# Fetch a random joke from Chuck Norris API
def get_joke():
    rep = http.get(CHUCK_NORRIS_JOKE_URL)  # Make the HTTP GET request
    if rep.status_code != 200:  # Check if the request was successful
        fail("Chuck Norris API request failed with status %d", rep.status_code)
    return rep.json()  # Return the JSON response

# Main function to render the Tidbyt app
def main(config):
    greeting = get_greeting()  # Get random greeting
    joke = get_joke()  # Get random joke

    # Get font from config or default to "tb-8"
    font = config.get("font", "tb-8")
    print("Using font: '{}'".format(font))  # Debug print the font being used

    # Build the render tree
    return render.Root(
        child = render.Column(
            cross_align="center",
            children = [
                # Create a horizontal colored box
                render.Box(
                    width = 64,
                    height = 1,
                    color = "#78DECC",
                    padding = 10
                ),
                # Display the greeting text
                render.Text("%s" % greeting["greeting"], font = font, color = "#FF0000"),
                # Another horizontal colored box
                render.Box(
                    width = 64,
                    height = 1,
                    color = "#78DECC",
                ),
                # Scrolling marquee text to display the greeting in its native language
                render.Marquee(
                    width = 64,
                    child = render.Text("Good Morning in %s" % greeting["language"], font = font)
                ),
                # Final horizontal colored box
                render.Box(
                    width = 64,
                    height = 1,
                    color = "#78DECC",
                ),
            ],
        ),
    )

Key points to remember

1. http.star Module: We use http.star module to interact with REST APIs. This module is part of the Starlark standard library and allows us to make HTTP requests.

2. render.Root and render.Column: To display the fetched data on the Tidbyt, we use render.Root to set up the root layout and render.Column to vertically arrange the display elements.

Serving the App

To preview the app, open your terminal and run:

pixlet serve greetings.star

This will start a local server and you'll get a URL to preview your app.

Rendering the Content

Run the following command:

pixlet render greetings.star

This will create a .webp file named greetings.webp in your current directory.

Pushing to Your Tidbyt

Finally, to see your work come to life on your Tidbyt device, you'll need to push the generated .webp file to it using its device id. Run the following command:

pixlet push <YOUR_DEVICE_ID> greetings.webp

This will display your app on your Tidbyt device.

And there you have it! You should now be able to display greetings from around the world on your Tidbyt.