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

edited April 2018 in How To...

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 :)

Tagged:

Answers

  • 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. :-*

  • edited April 2018 Answer ✓

    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

  • edited April 2018 Answer ✓

    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 
    //
    
  • 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.

Sign In or Register to comment.