Auto adjusting list

I’m trying to make a game kill feed in processing.
It would have rectangles with text coming in from the top, every new rectangle would push down all the rectangles under it to make space.
How should I go about making this ?

2 Likes

It depends from your skill level

When you know OOP make.a class BoxWithText with position and size and text and colors movement (yadd = 5)

Make an Arraylist of this class

Now insert a new Box inside the ArrayList and let it drop

When a collision with a previous box occurs, it’s not clear for me, what you want to achieve.

The previous box would move down?

Welcome to the forum!

Regards,

Chrisir


As an example take overwatch’s killfeed. When somebody is killed it shows up in a box, if somebody else also dies a new block shows up where the previous was. It pushes the previous block down the list.

1 Like

Hey There !

Taking an OOP approach where you define your own text box and just use that ever new entry uses /n which will push it on a new line.

1 Like

Hey it’s me again !

Here’s a little class to showcase it:

TextBoxChat c1;
String text[]={"abc", "HelloPineapples", "ThisIsNice", "VeryCool"};
int i;
void setup() {
  size(600, 480);
  c1 = new TextBoxChat(width/2, height/2, 20, 25);
  i = 0;
}
void draw() {
  background(0);
  c1.show();
}
void keyPressed() {
  c1.addText(text[i%text.length]);
  if (keyCode == UP) c1.clearText();  
  i++;
}

public class TextBoxChat {
  PVector pos;
  int size;
  int textSize;
  String text;
  TextBoxChat(float x, float y, int size, int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
    text = "";
  }
  void show() {
    textSize(textSize);
    fill(255, 0, 0);
    text(text, pos.x, pos.y);
  }
  void addText(String pushText) {
    text = pushText+"\n"+text;
  }
  void clearText(){
    text = "";  
  }
}

Edit: Here’s a little update so the most recent item gets pushed to top rather than downwards.

2 Likes

It’s called a toast and a list of toasts

1 Like

Wow this works great but i don’t understand witch part of the code is doing the pushing

1 Like

The method addText

It places the text before the older text

\n means line break

Chrisir

It might be easier if i give you the code I currently have. I’m reading from a txt file with a bunch of names. I’m trying to animate it so I save every added block to an image file. I’d love it to work like you did, adding every block on top and pushing the rest down

float xPos, yPos;
String[] lines;
String getSize, frost;
PGraphics pg;

void setup() {
frameRate(30);
size(400, 6000);
xPos= 100;
yPos= 30;

lines = loadStrings(“People.txt”);

pg = createGraphics(2000, 6000, JAVA2D);
rectMode(CORNER);
textAlign(LEFT);

frost = "Frost eliminated ";
}

void draw() {

pg.smooth();
pg.beginDraw();

for (int i=0; i < lines.length; i++) {
getSize = frost + lines[i];
pg.fill(0, 0, 0, 50);
pg.noStroke();
pg.rect(xPos-8, yPos-16, textWidth(getSize)+2, 25);
pg.fill(255);
pg.text(frost, xPos, yPos);
pg.fill(#FF7E7E);
pg.text(lines[i], xPos + textWidth(frost)-8, yPos);

pg.save("Frame"+ i +".png");

yPos += 30;

}
noLoop();
}

1 Like

Isn’t the string pushText empty ?
Could you break down what’s going on when being run ?

1 Like

That won’t work because you’re using a for loop in draw ()

Remember that draw() updates the screen only once at its end

All animation in between gets lost.

Instead, get rid of the for loop and say frameRate(4); in setup () and just add one item in draw ()

Increase i in draw()

Combine it with klls code

You can do it.

I see, the for loop is redundant.
I’ll try to combine it but classes make my brain boil.
thanks for your help

1 Like

I can help later but classes are great




// showing a TextBoxChat with full pg usage


TextBoxChat textBoxChat;

String[] lines={
  "Anna", "Tom", "Mary", "Lynn", "Oliver"
};

PGraphics pg;
int i=0; 

void setup() {
  size(400, 600);
  background(111);

  textBoxChat = new TextBoxChat(width/2-120, 33, 
    20, 
    25);

  frameRate(4);

  //lines = loadStrings("People.txt");  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  String[] frost = new String[1];  
  frost[0]="Frost eliminated ";
  lines = concat(frost, lines); 

  pg = createGraphics(2000, 6000, JAVA2D);
  rectMode(CORNER);
  textAlign(LEFT);
}

void draw() {

  if (i<lines.length) {
    makePG();
    textBoxChat.addText(lines[i]);
    i++;
  }

  image(pg, 0, 0);
}

void makePG() {
  pg = createGraphics(400, 600, JAVA2D);
  pg.beginDraw();
  pg.background(111);
  pg.smooth();
  pg.noStroke();
  pg.fill(255);
  pg.fill(#FF7E7E);
  textBoxChat.show();
  pg.endDraw();
  pg.save("Frame"+ i +".png");
}

// ============================================================================================

class TextBoxChat {

  PVector pos;
  int size;
  int textSize;
  String text="";

  // constr 
  TextBoxChat(float x, float y, 
    int size, 
    int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
  }// constr 

  void show() {
    pg.textSize(textSize);
    pg.fill(255, 0, 0);
    pg.text(text, 
      pos.x, pos.y);
  }

  void addText(String pushText) {
    text = pushText
      +"\n"
      +text;
  }

  void clearText() {
    text = "";
  }
  //
}//class 
//
2 Likes

No, not at all.

He is giving a text from the array lines as a parameter to the function addText():

  • Calling: c1.addText(text[i%text.length]);

  • The parameter: text[i%text.length]

  • and the function in the class: void addText(String pushText) {

  • It receives this as a parameter: pushText

  • In setup() the object c1 is made from the class (cookie and cookie maker, see tutorial objects)

  • In draw() c1 text is shown (all text is in ONE String but separated by line breaks \n)

  • In keyPressed() we add to the text in the class (see above)

Chrisir

1 Like

I have so much trouble tracking what classes do in my head.
The code works great thanks a whole bunch ^^

here is a version with boxes around the lines.

By the way

By the way, this is not the initial suggestion of a class BoxWithText (that probably would have meant only one line, at least that was the way I was thinking of it)

Instead this class TextBoxChat is the outer box containing all lines

Chrisir


// showing a TextBoxChat with full pg usage


TextBoxChat textBoxChat;

String[] lines={
  "Anna", "Tom", "Mary", "Lynn", "Oliver"
};

PGraphics pg;
int i=0; 

void setup() {
  size(400, 600);
  background(111);

  textBoxChat = new TextBoxChat(width/2-120, 33, 
    20, 
    25);

  frameRate(4);

  //lines = loadStrings("People.txt");  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  String[] frost = new String[1];  
  frost[0]="Frost eliminated ";
  lines = concat(frost, lines); 

  pg = createGraphics(2000, 6000, JAVA2D);
  rectMode(CORNER);
  textAlign(LEFT);
}

void draw() {

  if (i < lines.length) {
    textBoxChat.addText(lines[i]);
    makePG();
    i++;
  }

  image(pg, 0, 0);
}

void makePG() {
  pg = createGraphics(400, 600, JAVA2D);
  pg.beginDraw();
  pg.background(111);
  pg.smooth();
  pg.fill(255);
  pg.fill(#FF7E7E);
  textBoxChat.show();
  pg.endDraw();
  pg.save("Frame"+ i +".png");
}

// ============================================================================================

class TextBoxChat {

  PVector pos;
  int size;
  int textSize;
  String text="";

  // constr 
  TextBoxChat( float x, float y, 
    int size, 
    int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
  }// constr 

  void show() {
    String[] textSplitUp=split(text, "\n"); 
    println(textSplitUp);

    int i_textSplitUp=0; 
    for (String s : textSplitUp) {

      if (s.equals("")) 
        continue; 

      //rect
      pg.stroke(0);
      pg.fill( 30 );
      pg.rect(pos.x-8, pos.y + i_textSplitUp * (textSize+21), 
        250, textSize+12, 
        9); 

      // text 
      pg.noStroke();
      pg.textSize(textSize);
      pg.fill(255, 0, 0);
      pg.text(s, 
        pos.x, pos.y+ i_textSplitUp * (textSize+21) + 27);

      i_textSplitUp++;
    } //for
  } //func 

  void addText(String pushText) {
    text = pushText
      +"\n"
      +text;
  }

  void clearText() {
    text = "";
  }
  //
}//class 
//
1 Like

Look at the tutorial objects

or read this: Object Oriented Programming · Kango/Processing-snippets Wiki · GitHub

By the way

By the way, I don’t understand

  • why you write everything in a pg
  • that you also save (!!!)

Remark

Also, you could get rid of this line: frameRate(4); and use a timer instead

Chrisir

2 Likes

Thanks, I was trying to save every frame creating a new block to later animate it as a png sequence. Apparently I needed pg. in front of stuff to save with an alpha channel.

1 Like

here is a version without pg

// showing a TextBoxChat 

TextBoxChat textBoxChat;

String[] lines={
  "Anna", "Tom", "Mary", "Lynn", "Oliver"
};

int i=0; 

void setup() {
  size(400, 600);
  background(111);

  textBoxChat = new TextBoxChat(width/2-120, 33, 
    20, 
    25);

  frameRate(3);

  //lines = loadStrings("People.txt");  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  String[] frost = new String[1];  
  frost[0]="Frost eliminated ";
  lines = concat(frost, lines); 

  rectMode(CORNER);
  textAlign(LEFT);
}

void draw() {
  background(111);
  if (i < lines.length) {
    textBoxChat.addText(lines[i]);
    i++;
  }
  textBoxChat.show();
}

// ============================================================================================

class TextBoxChat {

  PVector pos;
  int size;
  int textSize;
  String text="";

  // constr 
  TextBoxChat(float x, float y, 
    int size, 
    int textSize) {
    pos = new PVector(x, y);
    this.size = size;
    this.textSize = textSize;
  }// constr 

  void show() {
    String[] textSplitUp=split(text, "\n"); 

    // loop over all lines in text
    int i_textSplitUp=0; 
    for (String s : textSplitUp) {

      if (s.equals("")) 
        continue; // go on 

      //rect
      stroke(0);
      fill(30);
      rect(pos.x-8, pos.y + i_textSplitUp * (textSize+21), 
        250, textSize+12, 
        9); 

      // text 
      textSize(textSize);
      fill(255, 0, 0);
      text(s, 
        pos.x, pos.y+ i_textSplitUp * (textSize+21) + 27);

      i_textSplitUp++;
    } //for
  } //func 

  void addText(String pushText) {
    // add new text before the old text with a line break 
    text = pushText
      +"\n"
      +text;
  }

  void clearText() {
    text = "";
  }
  //
}//class 
//
1 Like