D
Deno

help

deno_tui Label-class

DDNA9/8/2023
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.
BBeast9/8/2023
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.
DDNA9/8/2023
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?
BBeast9/8/2023
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
BBeast9/8/2023
No description
BBeast9/8/2023
essentially you could just convert the texture into a string and pass it to the label my brain isn't braining
DDNA9/8/2023
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
BBeast9/8/2023
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
DDNA9/8/2023
Lmao Me being braindead Sorry I didnt want to waste your time
BBeast9/8/2023
you didn't tui definitely needs better docs
DDNA9/8/2023
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,
});
DDNA9/8/2023
The outcome in terminal:
No description
DDNA9/8/2023
When i manually print the text (textures.stone) reading it from the file:
No description
BBeast9/9/2023
Okay, I think I know what's going wrong here, could you file an issue about it please?
BBeast9/9/2023
thanks, I'll look at it ASAP im in bed rn so I will probably take a look at it tommorow/after tommorow
DDNA9/9/2023
Np np Thank you so much for even creating such an impressive tool in the first place
BBeast9/9/2023
@realdna Feel free to update to 2.1.2 it should work just fine now, simply set multiCodePointSupport to true in LabelOptions
DDNA9/9/2023
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
DDNA9/9/2023
After updating to 2.1.2:
No description
BBeast9/9/2023
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)
DDNA9/9/2023
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,
});
BBeast9/9/2023
it still works fine in my case?
DDNA9/9/2023
No description
DDNA9/9/2023
I cant even compile a new version because the check fails
BBeast9/9/2023
what is your deno version?
DDNA9/9/2023
deno 1.36.4 (release, x86_64-pc-windows-msvc) v8 11.6.189.12 typescript 5.1.6
BBeast9/9/2023
wtf
DDNA9/9/2023
No description
BBeast9/9/2023
why does it work for me and not for you then?
DDNA9/9/2023
Idk tbh
BBeast9/9/2023
are you sure the only thing you changed is this? try running it with the -r flag, maybe your cache got fucked up
DDNA9/9/2023
Same issue with -r
BBeast9/9/2023
its definitely not deno_tui's issue I don't know...
DDNA9/9/2023
DDNA9/9/2023
Thats literally all i did
BBeast9/9/2023
No description
BBeast9/9/2023
you didn't update other imports...
DDNA9/9/2023
Imma kms Im done Naw cry now Im so sorry for wasting your time this bad
BBeast9/9/2023
thats fine :p
DDNA9/9/2023
It works now
No description
BBeast9/9/2023
great to see 😄
DDNA9/9/2023
If youre alreadyhere , is it possible to get the current fps? Like not what its supposed to be, but the actual current fps?
BBeast9/9/2023
after I'll rework DrawObject to TextPainter's I'll make sure that the styles will work fine even without multiCodePointSupport
DDNA9/9/2023
Nice
BBeast9/9/2023
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);
});
DDNA9/9/2023
Oh ok Thank you
BBeast9/9/2023
np
DDNA9/9/2023
Hey New problem
DDNA9/9/2023
When changing the text via Signal/Computed afterwards, this is the outcome
No description
DDNA9/9/2023
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)
BBeast9/9/2023
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
DDNA9/11/2023
Oh ok Have you already worked on this?
BBeast9/11/2023
oh, sorry I forgot yes I did, I actually fixed it but didn't push it yet gimme a sec released 2.1.3
DDNA9/11/2023
Ok np Another thing, how can i have, for example a rectangle completely transparent?
BBeast9/11/2023
what do you mean by transparent do you want to just hide a component?
DDNA9/11/2023
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
BBeast9/11/2023
that's impossible in terminal
DDNA9/11/2023
Lemme try to explain this better
BBeast9/11/2023
if you don't want Tui to have a background by default (so default terminal background color) just don't set tui.style property
BBeast9/11/2023
just remove style here
No description
DDNA9/11/2023
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
DDNA9/11/2023
No description
DDNA9/11/2023
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,
});
BBeast9/11/2023
do you mean "no background" here as "its supposed to be blue" or "its supposed to be default terminal background color"
DDNA9/11/2023
Just a transparent background In this case blue then
BBeast9/11/2023
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
DDNA9/11/2023
No other way then? Sadge cry
BBeast9/11/2023
No description
BBeast9/11/2023
not really
DDNA9/11/2023
Ok Thank you very much
BBeast9/11/2023
np

Looking for more? Join the community!

Recommended Posts
Cannot read file "src/deno.json": not implemented on jsHey @Deno AI Helper ! I'm having a bit of trouble, I'm trying to use `deno.land/x/import` to use nonError running Apollo example (on latest version)Hi. When I run this example with the latest version of apollo from npm I get errors: https://deno.Example Question for the Deno AI BotHey there - this is an example question for the Deno AI bot. How would I write a regular expression Does Deno support `export type` statements?Hello, we are using Deno + TS and I am getting the following error if I try to export a type from anHow can one patch a Deno dependency?Hello, We're used to working with node and using `patch-package` to override and fix packages fairlyError running program that uses `fp-ts` from npm (`Is a directory (os error 21)`)https://github.com/Industrial/test-fp-ls/blob/main/mod.ts When I run `deno run -A mod.ts` I get: `Can't "Sign in" to deno deployHi There, I can't sign in to deno deploy. The first time I try it works, and it sets up the GitHub ADoes Deno NPM support other registries like github npm registry?Does Deno NPM support other registeries like github and if so, does it support private registeries?Piping streams through a shell program (ffmpeg) and writing the output to a fileI've been trying to use `ffmpeg` on the backend of my super simple audio-uploading app. I can save tUsing Deno to run JavaScript from GolangI just started looking into this, but I'm looking for something like rogchap.com/v8go but it would bRust compile deno_runtime errorHi <:ferrisUpsideDown:920769146399100958> I've been this error when I'm compiling my code that uselsp bug?Is there any reason why intellisense would identify the type correctly, but after completion it woulConvert m3u8 stream to mp4?Hey. Whats the best /fastest way to convert a m3u8 stream (all files are in a local folder) to a norGetting error trying to download NPM package``` Download https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.6.0.tgz D`deno check` error: Cannot find name 'Deno'`In my project, `deno check` has started producing the error `TS2304 [ERROR]: Cannot find name 'Deno'Read CSV files inside zip file using the web streams APII need to read a number of csv files inside a zip file. The basic example I've got working so far isUnable to find local file with installed deno moduleI am working on porting the 'octoherd/cli' to Deno. One of the things it does is load a script modulImporting NPM packages with `npm:` where package has `@` in the nameI want to import the package `@hono/zod-openapi`, version `0.30` I tried to add to my `deno.json` lHow to use KV Connect?Hello there <:HelloThere:730465880991072285> Is there any plan an making an STD module for creatindlopen() from web urlHey, is it possible to provide a url to the dll file from a cdn server? For example if I want to d