Scrollable Text

stirfry

Does anyone know how to make scrollable box of text? Thanks

San

You can override the mouseWheel function.

@Override
void mouseWheel(MouseEvent event)
{

}

https://processing.org/reference/mouseWheel_.html

event.getCount() will give you how many scrolls there where, if it's positive they weren down scrolls, if it's negative they were up scrolls.

You can then set your text position based on this and that should help you get start with the scrolling.

As for making it not visible outside of a box, I'm not sure of the best way, but you could do it by using a PGraphics as a text box.

https://processing.org/reference/PGraphics.html

A PGraphics can be drawn to in the same way that you can normally draw. So for PGraphics p you can do p.rect or p.scale or p.text or p.fill etc. (Using the global fill won't work for drawing to it).

You set one with createGraphics which takes the same parameters as size. Give it the size you want the text box to be.

Then you can draw it as an image with image().

https://processing.org/reference/image_.html

You can also make text wrap (go to new lines automatically from text length) by passing it a width and height like text(message, x, y, width, height). https://processing.org/reference/text_.html

So probably something like this will work:

PGraphics textBox = new PGraphics();
PVector textBoxPos = new PVector(20,20);
float scroll = 0;

void setup()
{
  size(1280, 720, P2D);
  textBox = createGraphics(200, 400, P2D);
}

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(24);
    textBox.fill(0);
    textBox.textAlign(LEFT, TOP);
    textBox.text("Hello this is a text box and it should have lots of lines hopefully if I keep writing for long enough.  Words words words words words.", 0, scroll, textBox.width, textBox.height);
  textBox.endDraw();

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

void mouseWheel(MouseEvent event)
{
  scroll -= event.getCount()*10;
}

San

Probably better in the end up to make textBox a class which stores the PGraphics, its own position, its own scroll, its own text, and give the class a draw function.

If you want more than one, you probably want to check whether the mouse is over a textBox before scrolling it.

stirfry

@san thanks ill try it

San

I made a class here you can use:

http://pastebin.com/CWwe5iRm

You can't resize them after initial sizing and the transparency works a little iffiliy (transparency interpolation of PGraphics is a bit off), but other than that it's fine.

You can set a border colour, backound colour, text colour and font, text, position, and then just call the draw function on the text box in your draw function.

For the scrolling you need to use the mouseWheel method, I have an example of two different TextBoxes being used here: http://pastebin.com/jis0b1nr

They only scroll when the mouse is over them.

stirfry

Thanks for all the help @san :D really appreciate it.

jeremydouglass

Nice scrolling textbox implementation, @San !

One tricky thing is that most scrollboxes do not allow scrolling past the last line of the text content (or else past the last line plus one blank box minus one line). This TextBox class allows infinite scrolling down into whitespace, which may be surprising -- if you scroll too far down you then have to scroll and scroll up through blankness to get back to the text.

In order to fix this you need to limit the maximum TextBox.scroll() by the height of the text contents -- but (I believe!) Processing does not provide a concise way to get the height of a line-wrapped text object. However, you can implement this by hand. Here is one example of a Text class with a getHeight method:

• https://www.openprocessing.org/sketch/96700