DNA•15mo ago

deno_tui Label-class

Hello. I just started testing around with deno_tui and found the DrawObject-Class. How do i actually use this class? Afaik there is no proper documentation to deno_tui at all and especially not for this class specifically.

72 Replies

Beast•15mo ago

DrawObject doesn't do that much by itself, it's used to create TextDrawObject and BoxDrawObject which then are used in components to render on the canvas. To build Tui you probably want to use components instead, if you want to create your own components and use them you can take a look at any of the components in src/components, keep in mind that I'm planning on replacing DrawObjects in the future, I have PR open to do it, will try to finish it as soon as I will have some spare time.

DNAOP•15mo ago

My problem is just, that i dont know, what i need to use for achieving my goal. Basically, i want to have blocks which consist of 16x16 pixel (16 rows, 32 columns) to display textures. The texture of each "block" has to be adjustable. Is there a component that does this?

Beast•15mo ago

there's a way to workaround this using styles, but that's not good DX at all, it seems like your usecase is actually in need of custom DrawObject I was planning on implementing ShapePainter in my PR which is essentially what you need, but I didn't even start working on it :/ @realdna it totally escaped my head 🤦‍♂️ you could just use Label component for that

Beast•15mo ago

Beast•15mo ago

essentially you could just convert the texture into a string and pass it to the label ~~my brain isn't braining~~

DNAOP•15mo ago

I tried that but with a textbox and it didnt work And i gave up I think the label is gonna work Let me try in a few minutes

Beast•15mo ago

https://deno.land/x/tui@2.1.1/src/components/mod.ts you should check that for simple component descriptions textbox is a multiline text input :p

DNAOP•15mo ago

Lmao Me being braindead Sorry I didnt want to waste your time

Beast•15mo ago

you didn't tui definitely needs better docs

DNAOP•15mo ago

I just tried that method, but it doesnt seem to work properly for me This is my code:

new Label({
    parent: tui,
    rectangle: {
        column: 0,
        row: 0
    },
    text: textures.stone,
    theme: {
        base(text) {
            return text;
        },
    },
    zIndex: 1,
});

new Label({
    parent: tui,
    rectangle: {
        column: 0,
        row: 0
    },
    text: textures.stone,
    theme: {
        base(text) {
            return text;
        },
    },
    zIndex: 1,
});

DNAOP•15mo ago

The outcome in terminal:

DNAOP•15mo ago

When i manually print the text (textures.stone) reading it from the file:

DNAOP•15mo ago

t.txt

Beast•15mo ago

Okay, I think I know what's going wrong here, could you file an issue about it please?

DNAOP•15mo ago

Just created the issue: https://github.com/Im-Beast/deno_tui/issues/31

Beast•15mo ago

thanks, I'll look at it ASAP im in bed rn so I will probably take a look at it tommorow/after tommorow

DNAOP•15mo ago

Np np Thank you so much for even creating such an impressive tool in the first place

Beast•15mo ago

@realdna Feel free to update to 2.1.2 it should work just fine now, simply set multiCodePointSupport to true in LabelOptions

DNAOP•15mo ago

I just updated 2.1.2 and i think you might have broken a few things Code:

import {crayon} from "https://deno.land/x/crayon@3.3.3/mod.ts";
import {Canvas, Computed, Signal, Tui, handleInput, handleKeyboardControls, handleMouseControls} from "https://deno.land/x/tui@2.1.1/mod.ts";
import {Button, Text, Label} from "https://deno.land/x/tui@2.1.1/src/components/mod.ts";
import {createCanvas, loadImage} from "https://deno.land/x/canvas@v1.4.1/mod.ts";

const canvas = new Canvas({size: {rows: 128, columns: 512}, stdout: Deno.stdout});
const debug = new Signal("Nothing to see here!");
let output = "";

const textures: Record<string, string> = {
    stone: "",
    wood: "",
    grass: "",
    iron_ore: "",
    iron_ingot: "",
};

for (const textureName in textures) {
    const textureImage = await loadImage(`assets/${textureName}.png`);

    const textureCanvas = createCanvas(16, 16);
    const textureContext = textureCanvas.getContext("2d");
    textureContext.drawImage(textureImage, 0, 0);

    for (let row = 0; row < textureImage.height(); row++) {
        for (let column = 0; column < textureImage.width(); column++) {
            const imageData = textureContext.getImageData(column, row, 1, 1);
            const pixel = imageData.data;
            textures[textureName] += `\x1b[48;2;${pixel[0]};${pixel[1]};${pixel[2]}m  \x1b[0m`;
        }
        textures[textureName] += "\n";
    }

    Deno.writeTextFileSync(`temp\\${textureName}`, textures[textureName]);
}

const blocks = [
    {
        id: "stone",
        position: {
            x: 2,
            y: 0,
        },
    },
    {
        id: "stone",
        position: {
            x: 2,
            y: 1,
        },
    },
    {
        id: "stone",
        position: {
            x: 1,
            y: 2,
        },
    },
    {
        id: "stone",
        position: {
            x: 2,
            y: 2,
        },
    },
    {
        id: "stone",
        position: {
            x: 3,
            y: 2,
        },
    },
];

output = "";

for (const block of blocks) {
    output += `[${block.position.y * 16}d[${block.position.x * 16}G${textures.stone}`;
}

const tui = new Tui({
    canvas: canvas,
    refreshRate: 1000 / 60,
    style: crayon.bgRgb(0, 127, 127),
});

tui.dispatch();

handleInput(tui);
handleMouseControls(tui);
handleKeyboardControls(tui);

new Text({
    parent: tui,
    text: new Computed(() => {
        return debug.value;
    }),
    rectangle: {column: 40, row: 1, width: 50},
    theme: {active: crayon.bgRgb(0, 127, 127), base: crayon.bgRgb(0, 127, 127)},
    zIndex: 128,
});

new Label({
    parent: tui,
    rectangle: {
        column: 0,
        row: 0,
    },
    text: textures.stone,
    theme: {
        base(text) {
            return text;
        },
    },
    zIndex: 1,
});

for (let row = 0; row < 8; row++)
    for (let column = 0; column < 16; column++) {
        const button = new Button({
            parent: tui,
            rectangle: {column: column * 32, row: row * 16, width: 32, height: 16},
            theme: {active: crayon.bgRgb(0, 127, 127), base: crayon.bgRgb(0, 127, 255)},
            zIndex: 0,
        });

        button.on("mousePress", (_event) => {
            debug.value = `Mouse Press: r${row}c${column}`;
        });
    }

tui.run();

import {crayon} from "https://deno.land/x/crayon@3.3.3/mod.ts";
import {Canvas, Computed, Signal, Tui, handleInput, handleKeyboardControls, handleMouseControls} from "https://deno.land/x/tui@2.1.1/mod.ts";
import {Button, Text, Label} from "https://deno.land/x/tui@2.1.1/src/components/mod.ts";
import {createCanvas, loadImage} from "https://deno.land/x/canvas@v1.4.1/mod.ts";

const canvas = new Canvas({size: {rows: 128, columns: 512}, stdout: Deno.stdout});
const debug = new Signal("Nothing to see here!");
let output = "";

const textures: Record<string, string> = {
    stone: "",
    wood: "",
    grass: "",
    iron_ore: "",
    iron_ingot: "",
};

for (const textureName in textures) {
    const textureImage = await loadImage(`assets/${textureName}.png`);

    const textureCanvas = createCanvas(16, 16);
    const textureContext = textureCanvas.getContext("2d");
    textureContext.drawImage(textureImage, 0, 0);

    for (let row = 0; row < textureImage.height(); row++) {
        for (let column = 0; column < textureImage.width(); column++) {
            const imageData = textureContext.getImageData(column, row, 1, 1);
            const pixel = imageData.data;
            textures[textureName] += `\x1b[48;2;${pixel[0]};${pixel[1]};${pixel[2]}m  \x1b[0m`;
        }
        textures[textureName] += "\n";
    }

    Deno.writeTextFileSync(`temp\\${textureName}`, textures[textureName]);
}

const blocks = [
    {
        id: "stone",
        position: {
            x: 2,
            y: 0,
        },
    },
    {
        id: "stone",
        position: {
            x: 2,
            y: 1,
        },
    },
    {
        id: "stone",
        position: {
            x: 1,
            y: 2,
        },
    },
    {
        id: "stone",
        position: {
            x: 2,
            y: 2,
        },
    },
    {
        id: "stone",
        position: {
            x: 3,
            y: 2,
        },
    },
];

output = "";

for (const block of blocks) {
    output += `[${block.position.y * 16}d[${block.position.x * 16}G${textures.stone}`;
}

const tui = new Tui({
    canvas: canvas,
    refreshRate: 1000 / 60,
    style: crayon.bgRgb(0, 127, 127),
});

tui.dispatch();

handleInput(tui);
handleMouseControls(tui);
handleKeyboardControls(tui);

new Text({
    parent: tui,
    text: new Computed(() => {
        return debug.value;
    }),
    rectangle: {column: 40, row: 1, width: 50},
    theme: {active: crayon.bgRgb(0, 127, 127), base: crayon.bgRgb(0, 127, 127)},
    zIndex: 128,
});

new Label({
    parent: tui,
    rectangle: {
        column: 0,
        row: 0,
    },
    text: textures.stone,
    theme: {
        base(text) {
            return text;
        },
    },
    zIndex: 1,
});

for (let row = 0; row < 8; row++)
    for (let column = 0; column < 16; column++) {
        const button = new Button({
            parent: tui,
            rectangle: {column: column * 32, row: row * 16, width: 32, height: 16},
            theme: {active: crayon.bgRgb(0, 127, 127), base: crayon.bgRgb(0, 127, 255)},
            zIndex: 0,
        });

        button.on("mousePress", (_event) => {
            debug.value = `Mouse Press: r${row}c${column}`;
        });
    }

tui.run();

With 2.1.1 i have no errors at all

DNAOP•15mo ago

After updating to 2.1.2:

Beast•15mo ago

the code you just posted has tui@2.1.1 and even then, it works fine for me (even after I updated it to 2.1.2)

DNAOP•15mo ago

Oopsie I forgot to add the second code block Sorry The only thing i changed though was just the import version and this code block, where the only change is multiCodePointSupport is set true

new Label({
    parent: tui,
    rectangle: {
        column: 0,
        row: 0,
    },
    text: textures.stone,
    theme: {
        base(text) {
            return text;
        },
    },
    zIndex: 1,
    multiCodePointSupport: true,
});

new Label({
    parent: tui,
    rectangle: {
        column: 0,
        row: 0,
    },
    text: textures.stone,
    theme: {
        base(text) {
            return text;
        },
    },
    zIndex: 1,
    multiCodePointSupport: true,
});

Beast•15mo ago

it still works fine in my case?

DNAOP•15mo ago

I cant even compile a new version because the check fails

Beast•15mo ago

what is your deno version?

DNAOP•15mo ago

deno 1.36.4 (release, x86_64-pc-windows-msvc) v8 11.6.189.12 typescript 5.1.6

Beast•15mo ago

wtf

DNAOP•15mo ago

Beast•15mo ago

why does it work for me and not for you then?

DNAOP•15mo ago

Idk tbh

Beast•15mo ago

are you sure the only thing you changed is this? try running it with the -r flag, maybe your cache got fucked up

DNAOP•15mo ago

Same issue with -r

Beast•15mo ago

its definitely not deno_tui's issue I don't know...

DNAOP•15mo ago

Thats literally all i did

Beast•15mo ago

you didn't update other imports...

DNAOP•15mo ago

Imma kms Im done Naw cry

now Im so sorry for wasting your time this bad

Beast•15mo ago

thats fine :p

DNAOP•15mo ago

It works now

Beast•15mo ago

great to see 😄

DNAOP•15mo ago

If youre alreadyhere , is it possible to get the current fps? Like not what its supposed to be, but the actual current fps?

Beast•15mo ago

after I'll rework DrawObject to TextPainter's I'll make sure that the styles will work fine even without multiCodePointSupport

DNAOP•15mo ago

Nice

Beast•15mo ago

to get the actual actual fps you'd need to use external program to see terminal's refreshrate to see how fast tui's drawing frames you can calculate that by using tui.canvas.on("render") you can go to https://deno.land/x/tui/examples/demo.ts to see how it can be done basically

const fps = new Signal(60);
let lastRender = 0;

const performanceStats = new Text({
  parent: tui,
  rectangle: { column: 0, row: 0 },
  theme: ...,
  text: new Computed(() => `FPS: ${fps.value.toFixed(2)`),
  zIndex: 0,
});

tui.canvas.on("render", () => {
  fps.value = 1000 / (performance.now() - lastRender);
});

const fps = new Signal(60);
let lastRender = 0;

const performanceStats = new Text({
  parent: tui,
  rectangle: { column: 0, row: 0 },
  theme: ...,
  text: new Computed(() => `FPS: ${fps.value.toFixed(2)`),
  zIndex: 0,
});

tui.canvas.on("render", () => {
  fps.value = 1000 / (performance.now() - lastRender);
});

DNAOP•15mo ago

Oh ok Thank you

Beast•15mo ago

DNAOP•15mo ago

Hey New problem

DNAOP•15mo ago

When changing the text via Signal/Computed afterwards, this is the outcome

DNAOP•15mo ago

The before texture and the newly set textures are both completely fine by themselves But when changing via signal, it doesnt work until the windows has been resized or something like that

const texture = new Signal(textures.stone);
setTimeout(() => texture.value = textures.wood, 1000)

const texture = new Signal(textures.stone);
setTimeout(() => texture.value = textures.wood, 1000)

Beast•15mo ago

holy shit, that's a strange bug most likely I will take a swing at this in monday, I won't be home for a long time tommorow as a work around you could probably create multiple labels and toggle visible property on components

DNAOP•15mo ago

Oh ok Have you already worked on this?

Beast•15mo ago

oh, sorry I forgot yes I did, I actually fixed it but didn't push it yet gimme a sec released 2.1.3

DNAOP•15mo ago

Ok np Another thing, how can i have, for example a rectangle completely transparent?

Beast•15mo ago

what do you mean by transparent do you want to just hide a component?

DNAOP•15mo ago

No I mean actually transparent Like this

new Box({
    theme: {
        base: crayon.bgRgb(0, 0, 0),
    }
})

new Box({
    theme: {
        base: crayon.bgRgb(0, 0, 0),
    }
})

But transparent Like No background color

Beast•15mo ago

that's impossible in terminal

DNAOP•15mo ago

Lemme try to explain this better

Beast•15mo ago

if you don't want Tui to have a background by default (so default terminal background color) just don't set tui.style property

Beast•15mo ago

just remove style here

DNAOP•15mo ago

When i have two elements, where one has zIndex 0 and theme.base crayon.blue, while the second is a Text and has zIndex 1 but its supposed to have no background To prevent something like this

DNAOP•15mo ago

new Text({
    parent: tui,
    text: new Computed(() => {
        return debug.value;
    }),
    rectangle: {column: 40, row: 1, width: 50},
    theme: {
        base: crayon.bgBlack,
    },
    zIndex: 128,
});

new Text({
    parent: tui,
    text: new Computed(() => {
        return debug.value;
    }),
    rectangle: {column: 40, row: 1, width: 50},
    theme: {
        base: crayon.bgBlack,
    },
    zIndex: 128,
});

Beast•15mo ago

do you mean "no background" here as "its supposed to be blue" or "its supposed to be default terminal background color"

DNAOP•15mo ago

Just a transparent background In this case blue then

Beast•15mo ago

there's no concept of transparency in a terminal you can assign a theme you used for the box to the text so they'll share their background color

DNAOP•15mo ago

No other way then? Sadge cry

Beast•15mo ago

not really

DNAOP•15mo ago

Ok Thank you very much

Beast•15mo ago