Displaying Images Using Pixlet

Developers
1

Hey there! I just got my Tidbyt and I’m super excited to try out the app idea I’ve had marinating for months now. Part of it involves displaying an image. I’ve read the bitcoin tutorial and looked at a few apps that other people have written, but they all seem to create images by pre-emptively encoding the image and hardcoding it into the app. Under the image widget reference, pixlet says that it supports pngs, though.

Can someone write out a minimal pixlet code for loading and displaying an image from a url, or from a local file? Thanks!

2

here’s example getting an image from an http request and rendering it in a box

load("render.star", "render")
load("http.star", "http")
load("encoding/base64.star", "base64")

def main(config):
    img = http.get('https://cdn2.vectorstock.com/i/1000x1000/50/81/spectrum-pixel-ethereum-crystal-icon-vector-20845081.jpg').body()
    return render.Root(
        delay = 500,
        child = render.Box(
            child = render.Animation(
                children = [
                    render.Image(
                        src = img,
                        width = 20,
                        height = 40,
                    ),
                ],
            ),
        ),
    )
3

Yes! My hero! Thank you so much. I had the URL, but I wasn’t using http.get to make it happen.

2610×1300 174 KB

The random pictures to make me happy plan continues apace.

4

Have you had any luck getting a png file to work? I can get it to work if I convert it myself but not using an http request

5

The example he gave worked for me. Unless by “png file” you mean a local one rather than one hosted on a URL?

imgSrc = http.get(url).body()

...

render.Image (
    src = imgSrc
)
6

I had tried with a url to a png file and couldnt get it work, it worked fine with a jpg like in the example, maybe I need to try a couple other png files

7

I just checked, and all the images from reddit and imgur that I’m loading are .jpg. So I manually loaded in this url: https://images.ctfassets.net/440y9b545yd9/7jnBjgsgS8KFPqMZ9KW2lG/3ec550bbe9bbc1010b022c869b537074/cat-banner.png

and it seemed to work. Maybe there’s something different about your images vs. that one? Can you post your code?

8

I was trying to use an image from a repo on github, after trying the image you used and having some luck i found out I wasnt quite getting the right link. I needed “?raw=true” on the end and I got it working. Thanks for the help

9

If you have a .png locally can display the image from your computer?