How to Animate a Line about terminal-kit HOT 15 CLOSED

@niemes Hi! If you don't have any background, you should clear your viewport first (viewport.clear() or viewport.fill()). The spaceship demo doesn't clear because of the background buffer that ensure that all cells will be redrawn.

ScreenBuffers doesn't manage animation, they are just like surfaces in 2D rendering. You should clear the buffer used to render (here viewport) and you should draw in the correct order. Basically:

• clear the viewport
• draw all sprites (to the viewport)
• draw the viewport (to the terminal)

So here a potential modification of your function:

function drawBuffers(objectArray) { // draw a list of buffers
  viewport.clear(); // always come first
  objectArray.forEach( object => object.draw() );
  viewport.draw(); // always come last
}

Hope it helps! ;)

from terminal-kit.

It works great ! thx you for your quick answer @cronvel :D.

Does buffer have a built-in method to be delete ? Because .clear() doesnt delete the buffer object. If I want to delete the buffer ? Do i only need to stop draw() ?

something like that :

function drawBuffers() { // draw a list of buffers
  viewport.clear(); // always come first
  lines.forEach(object => {
    if (object.x < canvasWidth) {
      object.draw();
      object.x++;
    } else delete object ; ??
  });
  viewport.draw(); // always come last
}

After some test... Using the same logic this didn't work.

function createLineBuffer(line, mot, y) {
  line = termkit.ScreenBuffer.create({
    dst: viewport,
    width: term.width - 5,
    height: 1,
    x: 1,
    y: y
  });

  line.put({
    x: 1,
    attr: {
      color: 'brightMagenta',
      bgColor: "black"
    }
  }, mot);
  lines.push(line)
}


function drawBuffers() { // draw a list of buffers
  viewport.clear(); // always come first
  lines.forEach(object => {
    object.draw();
    object.x++;
  });
  viewport.draw(); // always come last
}
for (var i = 0; i < mots.length; i++) {
  createLineBuffer(mots[i],mots[i], rand.Y(canvasHeight));
}

Viewport is not cleared :/.

ps: Can we talk in french if its okay for you ? ^^ thx @cronvel !

from terminal-kit.

@niemes Désolé, je me suis trompé avec la méthode clear/fill, j'oublie à chaque fois qu'elle met par défaut l'attribut transparent sur le buffer ^^

Du coup au lieu de viewport.clear(), il faut utiliser viewport.fill( { char:' ' } ).

Ce code fonctionne (testé):

var termkit = require( 'terminal-kit' ) ;
var term = termkit.terminal ;

term.clear() ;

var lines = [] ;


viewport = termkit.ScreenBuffer.create({
  dst: term,
  width: term.width - 5,
  height: term.height
});


function createLineBuffer(mot, y) {
  line = termkit.ScreenBuffer.create({
    dst: viewport,
    width: mot.length,
    height: 1,
    x: 5,
    y: y
  });

  line.put({
    x: 0,
    attr: {
      color: 'brightMagenta',
      bgColor: "black"
    }
  }, mot);
  lines.push(line)
}


function drawBuffers() { // draw a list of buffers
  viewport.fill( { char: ' ' } ); // always come first
  lines.forEach(object => {
    object.draw();
    object.x++;
  });
  viewport.draw(); // always come last
}

mots = [ 'one' , 'two' , 'three' ] ;

for (var i = 0; i < mots.length; i++) {
  createLineBuffer(mots[i], Math.floor( Math.random() * 20 ) );
}


function animate() {
  setInterval(drawBuffers, 1000);
}

animate();

Petit détail: un terminal commence avec 1,1 en haut à gauche, mais un ScreenBuffer commence plus logiquement en 0,0 en haut à gauche (cf corrections faites sur ton code).

Tu remarqueras que les buffers de lignes sont créés avec juste la largeur qu'il faut.

from terminal-kit.

Super ! Vraiment merci @cronvel , je saignais des yeux à force d'être bloqué sur çà, j'ajoutais aussi l'espace avant le string mais je pensais que c'était une solution pas vraiment propre pour régler l'animation du buffer.

Merci pour les petites astuces, je ne suis pas familier du fonctionnement général des buffers...

Connais tu une manière effective pour cibler les buffers de ligne créaient dynamiquement ? J'aimerais pouvoir les cibler facilement pour les supprimer par la suite.

Plus simplement, je cherche comment supprimer un buffer selon la valeur qu'il contient ^^.

je te remercie pour tes réponses éclairantes !

from terminal-kit.

@niemes de rien! ;) En revanche je n'ai pas compris ta dernière question... Tu veux faire quoi concrètement?

from terminal-kit.

Eh bien, je souhaite faire deux chose au point ou j'en suis.

• 1. Pouvoir mettre différent interval d'apparition pour chaque mots/buffer de ligne.
• 2. Pouvoir supprimer le buffer si je tape un des mots contenu dans un des buffers de ligne en cours. Et pouvoir cibler ce buffer pour le supprimer instantanément a ayant sa position.

Pour la première question dans mon prototype j'utilise un petit système de setTimeout pour écrire avec process.stdout.write + cursorTo mais plusieurs problèmes se pose par ce que chaque mots/lignes sont écrits indépendamment et la vitesse d'écriture de process.stdout est rapidement submergés...

Pour la seconde question dans mon prototype( sans terminal-kit) j'utilise des objects pour chaques mots puis je print dans la console, cela me permet de connaitre le string printed pour pouvoir le supprimer mais le mot que je passe dans le buffer est encodé non ? Je ne sais pas comment retrouvé le bon buffer selon le mot qu'il contient.

Je cherche donc A savoir comment supprimer un buffer puis comment cibler un buffer selon sa valeur(string/mot qu'il contient).

from terminal-kit.

@niemes Ok, je vois, donc:

• pour supprimer un buffer, c'est comme partout ailleurs en JS, il suffit de déréférencer l'objet, le garbage collector fera ce qu'il faut tout seul. Si tu maintiens un tableau de sprites, supprime simplement l'élément du tableau avec un array.splice().
• effectivement, c'est pas évident de récupérer le mot rentré dans un screenBuffer, la solution la plus simple serait de stocker tes sprites dans un objet au lieu d'un tableau. Tu itèrerais sur un objet à la place d'un tableau. Ca simplifie aussi la destruction avec un simple delete sprites[ mot ] ;. Après c'est pas les solutions qui manquent, tu peux conserver le tableau et encapsuler le screenBuffer dans un objet approprié à ton usage, avec éventuellement les timers, etc...
• Concernant les intervalles des timers qui divergent, je te conseillerais donc de séparer d'une part les timers qui modifient les coordonnées, qui ont tous des valeurs disparates, et d'autre part d'avoir un seul et unique timer de redraw. C'est une technique qui permet d'économiser le nombre d'opération. Il y en a d'autres, chacune étant optimisée pour un usage. En fait, c'est même possible, si le nombre de ligne n'est pas trop dynamique, d'avoir un buffer par ligne et un par mot, ça éviterait d'avoir à rafraîchir tout l'écran.
• Bien garder en tête que les terminaux, c'est lent. Même si ton programme Node.js a la patate, jète un oeil au CPU utilisé par ton terminal quand tu rafraîchis des grosses zones de l'écran... Mieux vaut rafraîchir le moins souvent possible et des surfaces les plus petites possible. Le screenBuffer optimise sa sortie pour n'écrire que le minimum possible, ça économise déjà pas mal d'écriture...

from terminal-kit.

@cronvel La suppression par le delete line[mot] marche super bien ! , tout marche parfaitement bien :D !

Pour les Intervales, pour l'instant j'utilise le x en négatif en attendant de créer une fonction propre et modulable !
Merci pour tes conseils qui sont mon unique aide avec la doc de ta librairie ! ^^, j'apprécie beaucoup l'esthétique du terminal ahah et terminal-kit simplifie pas mal de chose ! :D.

J'ai remarqué que lorsqu'on essaye de modifier les attribus d'un buffer cela pose problème.

par exemple :

de base pour le mot "corn":

lines[mot].put({
    x: 0,
    attr: {
      color: 'brightMagenta',
      bgColor: "black"
    }
  }, mot);

puis dans une autre fonction :

  lines[mot].put({
    attr: {
      color: 'Red',
      bgColor: "black",
      bold: true,
      inverse: true,
      strike: true
    }
  },"..,:-'`*`'-:,.." );

Les changements sont partiels :

Peut on changer la valeur du buffer avec un autre string et changer aussi le style à la volet ?

Pardon pour toutes ces questions mais cela donne vraiment envie de coder plein de projets terminal-kit ^^!

from terminal-kit.

@niemes Quelle est la taille du screenBuffer? Les screenBuffer ont une notion de curseur, quand dans un .put() les coordonnées x,y ne sont pas données, c'est la valeur du curseur en cours qui est utilisé. Le curseur se place toujours sur la cellule qui suit la dernière écriture.

from terminal-kit.

@cronvel la taille du screenbuffer est la taille du mot, mot.length.

Donc la logique serait :

• modifier la taille du buffer. // comment ?
• placer le curseur au début du screenbuffer.
• exécuter le .put avec les différents paramètres.
• changer la valeur du buffer.

?
edit : Apres un test cela marche bien, la modification de la taille par contre ne marche pas.

from terminal-kit.

Pour modifier la taille, il faut faire un screenBuffer.resize().

from terminal-kit.

Cela marche parfaitement, merci @cronvel !

Une petite question concernant le .gridMenu, comment supprimer cette erreur/event :

je ne sais pas d'ou vient le message, il s'affiche lors du print du gridMenu...

from terminal-kit.

@niemes Je ne vois pas non plus pourquoi ça écrirait ça... c'est quoi le code qui l'utilise?

from terminal-kit.

var items = ["START", "QUIT"];

term.gridMenu(items, {
  y: term.height - 2,
  x: term.width / 2,
  style: term.bold.inverse.colorRgb(61, 55, 91).bgColorRgb(23, 18, 25)
}, function(error, response) {
  if (response.selectedText == "QUIT") {
    terminate();
  }
  if (response.selectedText == "START") {
    start();
  }
});

Simplement cette partie de mon code, le grid menu sert a démarrer le programme, l'erreur s'affiche puis si j'utilise les flèches le menu overwrite la partie gauche de l'erreur.

EDIT: okay, j'ai trouvé... -_-, je suis passé a coté de çà :

term.on('terminal', function(name, data) {
  console.log("'terminal' event:", name, data);
});

Ahah désolé, @cronvel :). J'vais arrêter de flood et chercher un peu plus avant de poster :/ !

from terminal-kit.

@niemes ^^

from terminal-kit.