Displaying .PNG from URL using Pixlet

Developers
1

Hey Everyone

Just got my Tidbyt installed and deployed yesterday and want to develop some super simple apps just for fun. FWIW, I’ve completed the Pixlet tutorial using VS Code and I’ve been rendering them locally through my browser on “http://127.0.0.1:8080/“ .

I tried some code below that I found on the forums to display a .png file and render it in my local browser but I’m receiving the following error:

“This won’t fit in 64 pixels # Controls vertical alignment.”

This shouldn’t be the case since I’m explicitly providing the dimensions to render.

My question is whether this is a browser thing which would work “normally” on my Tidbyt (haven’t gotten that far yet).

My end goal here is to display a super basic png/jpg with a scrolling marquee/text of my choice.

On a different note, there are Tidbyt apps that do exactly what I want, I realize the Tidbyt only truly displays images but is the app source available on GitHub generally? Also, I’m not seeing much, if any documentation on the Pixlet language. Is this hiding somewhere on the dark web or are these discussion groups how people are figuring out how to use the language? I’m not trying to do anything more complicated than what I’m seeing on “Reddit Images” . All I want to do is display an image and a marquee. Any help greatly appreciated!

Here’s the code:

load(“render.star”, “render”)
load(“http.star”, “http”)
load(“encoding/base64.star”, “base64”)

def main(config):
img = http.get(‘https://art.pixilart.com/a72d2ef88ded5fd.png’).body()
return render.Root(
delay = 500,
child = render.Box(
child = render.Animation(
children = [
render.Image(
src = img,
width = 20,
height = 20,
),
],
),
),
)

2

I’m not getting that error when running your code.
moon

Here is the code i’m using. When pasting code make you sure you use the </> icon in the editor so that it doesn’t put those special quotes in there. very annoying to replace when trying to run the code.

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

def main(config):
    img = http.get('https://art.pixilart.com/a72d2ef88ded5fd.png').body()
    return render.Root(
        delay = 500,
        child = render.Box(
            child = render.Animation(
                children = [
                    render.Image(
                        src = img,
                        height = 20,
                        width = 20,
                    ),
                ],
            ),
        ),
    )
1 Like
3

Thanks for the response, Tavis! Strange. I’m not sure what’s going on but I “reran” my code and it worked in my browser. Changed absolutely nothing codewise. Now having issues with the vscode starlark extension but running the pixlet commands directly in the terminal are working for the moment.

I’ll keep looking for some documentation online on the render.() but next up on the list is how to display the picture at certain coordinates.

My goal here is to just display a picture and have some scrolling text above or on the right side of the picture. Nothing super fancy.

4

Laying out the elements is the worst part of pixlet. It’s not intuitive at all. I always eggs up nesting rows and columns like crazy. But to position an image by coordinates I think you would use the render.Box and render.Image inside off that. Good luck.