Simple scrollable textbox ...is there such a thing?

mala

I'm trying to make a simple scrollable text box and can only find a few rather complex examples, that tbh I'm finding hard to understand and don't want to use off the shelf GUI libraries.

The textBox will be used to display simple short&fixed size messages, being fixed max length I do not need wrapping, can just make sure the width of textbox and the textsize are set to fit max message length. Every new message will be on a new line and once there are more lines than the height of the box will allow, the lines should all move up and make room for the next incoming message below.

I need to be able to scroll back up the list of messages in order to check back on messages....the hard part I think.

Have looked at StringList which looks best to store(append) the incoming messages and be able to clear them all when I need to.

I'm totally lost with where to start on the scrolling though, can anyone point me in the right direction ?

kfrajer

Try this post: https://forum.processing.org/two/discussion/20277/scrollable-text

Kf

mala

Thanks @kfrajer, that's one of the examples I found and was struggling with, though to be fair I had jumped straight to the full class example rather than the basic first one... having gone back and looked again I have hacked something together and am now looking at the HammerTime example to try and figure calculating line height..as it goes at the moment, I can't touch this ;)

jeremydouglass

@mala -- the block of code that you want from the HammerTime sketch ( https://www.openprocessing.org/sketch/96700 ) is class Tex -- which is a "class for getting text height".

Paste the Tex class code into your sketch, then create a Tex and check .totalHeight or .getHeight(), like this:

void setup() {
  size(400,400);
  String s = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
  int wTextBox = 270; // text box width
  int hLeading = 16; // line leading
  Tex tex = new Tex(s, wTextBox, hLeading); // create model
  float h = tex.totalHeight; // get text box height based on width, leading
  text(s, 10, 10, wTextBox, h); // draw text inside correct-height box area
  noFill();
  rect(10, 10, wTextBox, h); // trace a line around the text area
}

Now the scrolling....

mala

@jeremydouglass thanks, yeah that is kinda of what I looked at, here's what I came up with by mixing it altogether:

//**SIMPLE MESSAGE DISPLAY BOX WITH SCROLLING LIST ONCE BOX OVERFLOWS
//DOES NOT PERFORM WRAPPING, PRESUMES FIXED MESSAGE LENGTH IS NOT BIGGER THAN BOX WIDTH
//--->>> Press the 'x' key to add a message line when running
PGraphics textBox = new PGraphics();
PVector textBoxPos = new PVector(20, 20);
float textX = 0;
float textY = 0;
float scroll = 0;
float textHeight = 20;
float textLeading = 20;
StringList messages;
String displayText = "";

void setup()
{
  size(420, 420, P2D);
  textBox = createGraphics(380, 380, P2D);
  messages = new StringList();
}

void draw()
{
  background(255);
  textBox.beginDraw();
  textBox.background(0, 0, 0, 0);  // Transparent background but you could have it coloured.
  textBox.stroke(0, 0, 0);
  textBox.fill(0, 0, 0, 0);
  textBox.rect(0, 0, textBox.width-1, textBox.height-1);  // Black rectangle around the outside.
  textBox.textSize(textHeight);
  textBox.fill(0);
  textBox.textAlign(LEFT, TOP);
  textBox.textLeading(textLeading);
  textBox.text(displayText, textX, textY+scroll);
  textBox.endDraw();

  image(textBox, textBoxPos.x, textBoxPos.y);
}

void mouseWheel(MouseEvent event)
{
  scroll -= event.getCount()*4;  //add mouse wheel with a bit of gearing
  scroll = constrain(scroll, 0, -textY);
}

void keyPressed() {   // PROXY FOR INCOMING MESSAGES
  if (key =='x') {
    messages.append("ARE WE NEARLY THERE YET?...."+messages.size());  // add new message line (with line number)
    displayText = displayText+messages.get(messages.size()-1) +"\n"; // display the updated messages
    //--->> SHIFT LINES UP IF MORE LINES THAN BOX
    if (messages.size()>(textBox.height/textLeading)) {
      textY -= textLeading;
    }
  }
}

kfrajer

Great, thxs for sharing your implementation.

Kf