# Scrollbars up and down to change the positions of the text

**URL:** <https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521>\
**Category:** Processing for Android\
**Created:** [August 21, 2019, 1:11pm UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521 "2019-08-21T13:11:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sajeel1995](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sajeel1995](https://discourse.processing.org/u/Sajeel1995)\
**Post date:** [August 21, 2019, 1:11pm UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/1 "2019-08-21T13:11:14Z")

</div>

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](https://processing.org/examples/scrollbar.html)) but it does not work for me.  
I am waiting for a response.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [August 21, 2019, 4:27pm UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/2 "2019-08-21T16:27:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sajeel1995](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sajeel1995](https://discourse.processing.org/u/Sajeel1995)\
**Post date:** [August 22, 2019, 5:21am UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/3 "2019-08-22T05:21:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sajeel1995](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sajeel1995](https://discourse.processing.org/u/Sajeel1995)\
**Post date:** [August 22, 2019, 6:04am UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/4 "2019-08-22T06:04:05Z")

</div>

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.

 ![screen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/ddc4562bbd2bea1701551fee003a02368033c128.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 22, 2019, 9:24am UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/5 "2019-08-22T09:24:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sajeel1995](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sajeel1995](https://discourse.processing.org/u/Sajeel1995)\
**Post date:** [August 22, 2019, 9:41am UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/6 "2019-08-22T09:41:17Z")

</div>

I want in android processing.

---

<div class="post-metadata">

**Author:** ![akenaton](https://avatars.discourse-cdn.com/v4/letter/a/a88e4f/32.png) [@akenaton](https://discourse.processing.org/u/akenaton)\
**Post date:** [August 23, 2019, 9:22am UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/7 "2019-08-23T09:22:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sajeel1995](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sajeel1995](https://discourse.processing.org/u/Sajeel1995)\
**Post date:** [August 23, 2019, 3:57pm UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/8 "2019-08-23T15:57:21Z")

</div>

thanks for answering me.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 23, 2019, 7:34pm UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/9 "2019-08-23T19:34:03Z")

</div>

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:

```auto
translate (0, img1Pos);

text( „Hello“, 22, 100);

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 5, 2019, 5:40pm UTC](https://discourse.processing.org/t/scrollbars-up-and-down-to-change-the-positions-of-the-text/13521/10 "2019-09-05T17:40:07Z")

</div>

here is a JAVA processing example

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

```