Scrollbars up and down to change the positions of the text

Kindly tell me how I can make scrollbars up and down to change the positions of the text. I am using this link (https://processing.org/examples/scrollbar.html) but it does not work for me.
I am waiting for a response.

Does the answer by Phironn at https://forum.processing.org/one/topic/vertical-scrollbar.html work for you?

its not working in my project because I need a text which is able to scroll up and down. This example use two scroll and two images. but I need one scroll and text.

see the image 1, 2, 3 texts is not moving vertically. I want its move vertical. The second issue is scroll display in all screen but I need it only in one screen (see images). I am using Yet Another GUI Library (YAGUIL) for screen designs.

1 Like

Do you want this in java processing or in Android?

I wouldn’t recommend to scroll within a screen button. That would be bad GUI design.

1 Like

I want in android processing.

@Sajeel1995 ===
I do agree with @Chrisir : adding scroll to a button is not the good solution; you have to create a TextView or a WebView or a ScrollView then add to it the scroll; choosing one or other depends of your goal

TextView v = the TextView you created (new instance of…)
////adding scroll
v.setMovementMethod(new ScrollingMovementMethod());

1 Like

thanks for answering me.

From the example you need to init the class and display the scroll bar

This is the core line:

// Get the position of the img1 scrollbar
// and convert to a value to display the img1 image
float img1Pos = hs1.getPos()-width/2;

When you say println(img1Pos); you will see the values

Now use this value before text() command:

translate (0, img1Pos);

text( „Hello“, 22, 100);

here is a JAVA processing example

// Move the scrollbars left and right to change the positions of the images.


HScrollbar hs1;  //  scrollbar


String s1 = "1Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n"   
  +"2Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n"   
  +"3Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.\n"   
  +"4Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.\n";


void setup() {
  size(640, 360);
  noStroke();

  s1=s1+"\n"+s1+"\n"+s1+"\n"+s1+"\n"+s1+"\n"+s1+"\n"+s1+"\n\n\n\n";

  hs1 = new HScrollbar(0, height-11, 
    width, 16, 
    16);
}

void draw() {
  background(255);

  // Get the position of the scrollbar
  float pos1 = hs1.getPos();

  pushMatrix();
  fill(0); 
  translate(0, -map(pos1, 0, width, 0, 2000));// position of the scrollbar
  text(s1, 
    14, 14, 
    width-30, 99999); 
  popMatrix(); 

  hs1.update();
  hs1.display();
}

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

class HScrollbar {

  int swidth, sheight;    // width and height of bar
  float xpos, ypos;       // x and y position of bar

  float spos, newspos;    // x position of slider
  float sposMin, sposMax; // max and min values of slider
  int loose;              // how loose/heavy
  boolean over;           // is the mouse over the slider?
  boolean locked;
  float ratio;

  HScrollbar (float xp, float yp, // position 
    int sw, int sh, // size  
    int l) {            

    swidth = sw;
    sheight = sh;

    int widthtoheight = sw - sh;
    ratio = (float)sw / (float)widthtoheight;
    xpos = xp;
    ypos = yp-sheight/2;
    spos = xpos + swidth/2 - sheight/2;
    newspos = 0; // spos;
    sposMin = xpos;
    sposMax = xpos + swidth - sheight;
    loose = l;
  }

  void update() {
    if (overEvent()) {
      over = true;
    } else {
      over = false;
    }
    if (mousePressed && over) {
      locked = true;
    }
    if (!mousePressed) {
      locked = false;
    }
    if (locked) {
      newspos = constrain(mouseX-sheight/2, sposMin, sposMax);
    }
    if (abs(newspos - spos) > 1) {
      spos = spos + (newspos-spos)/loose;
    }
  }

  float constrain(float val, float minv, float maxv) {
    return min(max(val, minv), maxv);
  }

  boolean overEvent() {
    if (mouseX > xpos && mouseX < xpos+swidth &&
      mouseY > ypos && mouseY < ypos+sheight) {
      return true;
    } else {
      return false;
    }
  }

  void display() {
    noStroke();
    fill(204);
    rect(xpos, ypos, swidth, sheight);
    if (over || locked) {
      fill(0, 0, 0);
    } else {
      fill(102, 102, 102);
    }
    rect(spos, ypos, sheight, sheight);
  }

  float getPos() {
    // Convert spos to be values between
    // 0 and the total width of the scrollbar
    return spos * ratio;
  }
}//class
//
3 Likes