Pixlet

Note

This fork of Pixlet includes an API option that can be used to manage applets and serve them in base64 format, and was developed to work with an ESP32 and RGB LED Matrix 64x32 panel using panel-led-mqtt

---

Pixlet is an app runtime and UX toolkit for highly-constrained displays. We use Pixlet to develop applets for Tidbyt, which has a 64x32 RGB LED matrix display:

Apps developed with Pixlet can be served in a browser, rendered as WebP or GIF animations, or pushed to a physical Tidbyt device.

Documentation

• Getting started
• How it works
• In-depth tutorial
• Widget reference
• Modules reference
• Notes on the available fonts

Getting started

Install on macOS

brew install tidbyt/tidbyt/pixlet

Install on Linux

Download the pixlet binary from the latest release.

Alternatively you can build from source.

Hello, World!

Pixlet applets are written in a simple, Python-like language called Starlark. Here's the venerable Hello World program:

load("render.star", "render")
def main():
    return render.Root(
        child = render.Text("Hello, World!")
    )

Render and serve it with:

curl https://raw.githubusercontent.com/tidbyt/pixlet/main/examples/hello_world.star | \
  pixlet serve /dev/stdin

You can view the result by navigating to http://localhost:8080:

How it works

Pixlet scripts are written in a simple, Python-like language called Starlark. The scripts can retrieve data over HTTP, transform it and use a collection of Widgets to describe how the data should be presented visually.

The Pixlet CLI runs these scripts and renders the result as a WebP or GIF animation. You can view the animation in your browser, save it, or even push it to a Tidbyt device with pixlet push.

Example: A Clock App

This applet accepts a timezone parameter and produces a two frame animation displaying the current time with a blinking ':' separator between the hour and minute components.

load("render.star", "render")
load("time.star", "time")

def main(config):
    timezone = config.get("timezone") or "America/New_York"
    now = time.now().in_location(timezone)

    return render.Root(
        delay = 500,
        child = render.Box(
            child = render.Animation(
                children = [
                    render.Text(
                        content = now.format("3:04 PM"),
                        font = "6x13",
                    ),
                    render.Text(
                        content = now.format("3 04 PM"),
                        font = "6x13",
                    ),
                ],
            ),
        ),
    )

Here's the resulting image:

Example: A Bitcoin Tracker

Applets can get information from external data sources. For example, here is a Bitcoin price tracker:

Read the in-depth tutorial to learn how to make an applet like this.

Push to a Tidbyt

If you have a Tidbyt, pixlet can push apps directly to it. For example, to show the Bitcoin tracker on your Tidbyt:

pixlet render examples/bitcoin.star
pixlet push --api-token <YOUR API TOKEN> <YOUR DEVICE ID> examples/bitcoin.webp

To get the ID and API key for a device, open the settings for the device in the Tidbyt app on your phone, and tap Get API key.

If all goes well, you should see the Bitcoin tracker appear on your Tidbyt: