In processing, how to add a scroll bar to the window ?

Happier

Hello, processing community, I create a piece of code, I need the window to be as large as 1920*1080, but it cannot be fully displayed on the computer screen, so I want to know how to create a window scroll bar so that I can see I need , look forward to your reply, thank you :)

Happier

Just like the scroll bar when browsing the web, at the far right of the window, I can pull down to scroll through the window to see the following content. :-*

Chrisir

Did you google it in the forum?

Let’s say you use fullscreen(); then the window is as big as the screen, not bigger. But your scene that you draw is bigger than the screen (longer).

A rect on the right side of the screen

let’s start with a rect on the right side of the screen

You can drag it with the mouse up and down (mouseY)

Its x is fixed

You need to program this.

Using the scroll bar for the scene

Now use its y value and use translate (0, newYValue); to translate your entire graphic except the rectangle (use pushMatrix and popMatrix to isolate it as usual)

Calculate newYValue As

newYValue=map(rectPosY,0,height-rectHeight,
0, -1000);

Do some thinking what value -1000 must be. Definitely negative and pretty high.

Could be the realHeight of your scene minus screenHeight (height) or so

Chrisir

kfrajer

https://forum.processing.org/two/discussion/comment/86915#Comment_86915

https://forum.processing.org/two/discussion/24488/having-issues-with-dragging-when-creating-a-map#latest

https://forum.processing.org/two/discussion/comment/85620/#Comment_85620

https://forum.processing.org/two/discussion/22527/simple-scrollable-textbox-is-there-such-a-thing#latest

Other keyword to use in the forum: Panning

Kf

Chrisir

here is the sketch I was suggesting above

ScrollRect scrollRect;        // the vertical scroll bar
float heightOfCanvas = 3000;  // realHeight of the entire scene  

void setup() {
  size(1280, 720);
  scrollRect = new ScrollRect();
  background(90);
}

void draw() {
  background(90); 
  scene();
  scrollRect.display();
  scrollRect.update();
}

// --------------------------------------------------------------

void scene() {
  pushMatrix();

  // reading scroll bar 
  float newYValue = scrollRect.scrollValue();  
  translate (0, newYValue);

  // The scene :
  stroke(255);  
  rect( 66, height/2, 
    110, 2100);
  ellipse(372, height-55, 
    260, 260);
  ellipse(472, height+855, 
    260, 260);

  fill(255, 2, 2); //red
  ellipse(372, heightOfCanvas-6, 
    6, 6);  
  text("End of virtual canvas", 380, heightOfCanvas-16);    
  fill(122); 
  popMatrix();
}

// --------------------------------------------------------------

void mousePressed() {
  scrollRect.mousePressedRect();
}

void mouseReleased() {
  scrollRect.mouseReleasedRect();
}

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

class ScrollRect {

  float rectPosX=0;
  float rectPosY=0;
  float rectWidth=14; 
  float rectHeight=30;

  boolean holdScrollRect=false; 

  float offsetMouseY; 

  //constr
  ScrollRect() {
    // you have to make a scrollRect in setup after size()
    rectPosX=width-rectWidth-1;
  }//constr

  void display() {
    fill(122);
    stroke(0);
    line (rectPosX-1, 0, 
      rectPosX-1, height);
    rect(rectPosX, rectPosY, 
      rectWidth, rectHeight);

    // Three small lines in the center   
    centerLine(-3); 
    centerLine(0);
    centerLine(3);
  }

  void centerLine(float offset) {
    line(rectPosX+3, rectPosY+rectHeight/2+offset, 
      rectPosX+rectWidth-3, rectPosY+rectHeight/2+offset);
  }

  void mousePressedRect() {
    if (mouseOver()) {
      holdScrollRect=true;
      offsetMouseY=mouseY-rectPosY;
    }
  }

  void mouseReleasedRect() {
    scrollRect.holdScrollRect=false;
  }

  void update() {
    // dragging of the mouse 
    if (holdScrollRect) {
      rectPosY=mouseY-offsetMouseY;
      if (rectPosY<0)
        rectPosY=0;
      if (rectPosY+rectHeight>height-1)
        rectPosY=height-rectHeight-1;
    }
  }

  float scrollValue() {
    return 
      map(rectPosY, 
      0, height-rectHeight, 
      0, - (heightOfCanvas - height));
  }

  boolean mouseOver() {
    return mouseX>rectPosX&&
      mouseX<rectPosX+rectWidth&&
      mouseY>rectPosY&&
      mouseY<rectPosY+rectHeight;
  }//function 
  //
}//class 
//

jeremydouglass

If you do not want to create your own GUI you could also create a slider / scrollbar element using one of the Processing GUI libraries -- e.g. G4P or ControlP5.

Update a variable with the slider, then use that variable as an argument to translate() at the top of your draw. Now moving the bar translates the screen contents.