Auto adjusting list

TrustyFox · July 31, 2019, 11:58am

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 ?

Chrisir · July 31, 2019, 12:11pm

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

TrustyFox · July 31, 2019, 12:17pm

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.

InferNova · July 31, 2019, 12:26pm

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.

InferNova · July 31, 2019, 2:18pm

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.

Chrisir · July 31, 2019, 3:07pm

It’s called a toast and a list of toasts

TrustyFox · July 31, 2019, 3:30pm

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

Chrisir · July 31, 2019, 3:36pm

The method addText

It places the text before the older text

\n means line break

Chrisir

TrustyFox · July 31, 2019, 3:41pm

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();
}

TrustyFox · July 31, 2019, 3:46pm

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

Chrisir · July 31, 2019, 3:48pm

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.

TrustyFox · July 31, 2019, 3:55pm

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

Chrisir · July 31, 2019, 3:56pm

I can help later but classes are great

Chrisir · July 31, 2019, 4:56pm




// 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 
//

Chrisir · July 31, 2019, 5:00pm

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

TrustyFox · July 31, 2019, 5:21pm

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

Chrisir · July 31, 2019, 5:27pm

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 
//

Chrisir · July 31, 2019, 5:36pm

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

TrustyFox · July 31, 2019, 5:56pm

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.

Chrisir · July 31, 2019, 6:08pm

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 
//

Topic		Replies	Views
Hitbox and death counter Coding Questions	5	1124	July 17, 2019
Aim Game coding help Coding Questions	1	1313	November 15, 2018
ArrayList Processing Coding Questions homework	6	844	May 27, 2018
A game where there are circles and you press on them and they dissapear in processing Coding Questions	6	320	November 26, 2020
Help With My New Game Coding Questions	3	355	July 22, 2018

Auto adjusting list

Related Topics