Dynamically Updating Your Tidbyt Display with REST API Data
Published: 2023-09-21 18:23:21

---
title: Dynamically Updating Your Tidbyt Display with REST API Data
published: true
date: 2023-09-21 16:40:19 UTC
tags: 
canonical_url: https://curiousmints.com/dynamically-updating-your-tidbyt-display-with-rest-api-data
---

Last time, [I walked through building a simple "Hello World" app for my Tidbyt](https://dev.to/ajot/building-a-hello-world-app-for-tidbyt-retro-style-display-4e8k-temp-slug-4342514), 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](http://greetingsapi.com)) or a joke (using [https://api.chucknorris.io](https://api.chucknorris.io)).

### The Quest

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695311558803/87b40a08-b408-47d8-8f40-343cc8d48b51.gif)

### **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](https://dev.to/ajot/building-a-hello-world-app-for-tidbyt-retro-style-display-4e8k-temp-slug-4342514).

## **Lets Get Started**

First, fire up your favorite IDE and create a new file called [`greetings.star`](http://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",
                ),
            ],
        ),
    )

```

💡

We're not using Chuck Norris this time, but hey, it's good to have options :-)

### **Key points to remember**

1. [`http.star`](http://http.star) **Module** : We use [`http.star`](http://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

💡

**Note:** Make sure you have your Device ID handy for this step. See [Get Device ID](https://curiousmints.com/building-a-hello-world-app-for-tidbyt-retro-style-display#heading-get-device-id).

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.

💡

**Pro Tip:** To make your app a part of the regular app rotation and have it show up on your iOS app, you'll need to install it permanently. See [Installing the App Permanently](https://curiousmints.com/building-a-hello-world-app-for-tidbyt-retro-style-display#heading-installing-the-app-permanently)