# Confused with Slider up/down - PGraphics

**URL:** https://discourse.processing.org/t/confused-with-slider-up-down-pgraphics/28665
**Category:** Coding Questions
**Created:** [March 19, 2021, 8:52pm UTC](https://discourse.processing.org/t/confused-with-slider-up-down-pgraphics/28665 "2021-03-19T20:52:16Z")
**Posts on this page:** 4
**Page:** 1

<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: [March 19, 2021, 8:52pm UTC](https://discourse.processing.org/t/confused-with-slider-up-down-pgraphics/28665/1 "2021-03-19T20:52:16Z")

</div>

Hello all,

let’s say I have a graphical editor to place icons underneath each other.  
I want to complete this with a vertical slider.

1. 

I want to make sure that outside the Editor Rectangle no icon is shown. So when the list of icons is much longer than my Editor Rectangle / Box, I need to **cut** it.  
Can I use a PGraphics to provide the means to draw the icons and let them cut off? How?

1. 

How do I place the icons on the PGraphics when I drag the slider, is there a formula?

1. 

When the PGraphics shows another area of the entire graphical list of icons (I scrolled down with the slider), and I click the mouse, The mouseY is still the same. How can I calculate the offset to get the icon that is actually (because of the slider) underneath the mouse?

I know, this is a little generic but the project is much too big to post here.

Thank you all!

Warm regards,

Chrisir

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [March 19, 2021, 9:31pm UTC](https://discourse.processing.org/t/confused-with-slider-up-down-pgraphics/28665/2 "2021-03-19T21:31:07Z")

</div>

maybe this useful

https://www.youtube.com/embed/hVXjbhx-1fI?feature=oembed&wmode=opaque&list=PL-gMbU2fEAAtP3nbomp01wRFIbVY_9HUs

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [March 19, 2021, 11:41pm UTC](https://discourse.processing.org/t/confused-with-slider-up-down-pgraphics/28665/3 "2021-03-19T23:41:13Z")

</div>

I’ll answer question 3. You can solve this with a backup to your location values. In my library class I created tab with no overflow and the icons can be scrolled left or right.

here is my drawMenu code in the tab class

```auto
for (int i=0; i<menus.size(); i++) {
      
      Menu m = menus.get(i);
      
      //m.setParentCanvas(canvas);
      if(scrollable&&vscroll)m.y = m.by - sliderv.value;
      if(scrollable&&hscroll)m.x = m.bx - sliderh.value;
      m.mouse = getMouse();
      // if(parentTab==null)m.mouse = getMouse();
      // else m.mouse = getMouse(mouse);
      m.draw(canvas);
    }

```

where bx is a backup of the original position and ideally should be static or private …

not sure what you mean for part two. Are the icons visible only once the slider is pressed?

for part one providing that you are drawing to your PGraphics the cutoff should be done automatically in fact im not sure how to allow overflow on a PGraphics.

Do bear in mind that i’m not sure how dynamic the size of the PGraphics are, ie if you can change them after they are initialised.

here is how I draw to the PGraphics, note canvas is a PGraphics variable in my tab class;

```auto
void displayTab() {
    fill(255);
    tab t = states.get(state);
    //println(t.menus.size());
    if (toggle&&visible&&canvas!=null) {
      if(!parentCanvas){
        t.mouse = getMouse();
        mouse = getMouse();
      }
      else{
        t.mouse = getMouse();
        mouse = getMouse();
      }
      canvas.beginDraw();
      //canvas.background(50);
      logic();
      t.drawBorder();
      t.boundingBox();
      t.drawButtons();
      t.drawMenus();
      t.drawTextboxes();
      t.drawTextareas();
      t.drawSliderBoxes();
      t.drawToggleMenus();
      t.drawTextBlocks();
      if(t.title!=null&&t.visible){
        if(!toggle)t.title.toggle=1;
        t.drawTitle();
        t.drawBorder();
        t.drawDmenu();
      }
      //t.drawWindows();
      if(t.scrollable)t.drawSlider();
      // if(docked){
      // canvas.fill(0);
      // canvas.rect(0,0,w,h);
      // }
      canvas.endDraw();
      image(canvas,x,y);
    }
  };

```

I had to add a new draw Method for all the classes though to pass the canvas.

Honestly the part I found the hardest was keeping a track of the mouse. Because now your mouse coordinates will all be offset to be the tab or menu position plus the position of the item you are drawing, as you are not relying on the original canvas positions anymore and this can cause issues with any collision detection.

So I added a getMouse method in the tab class

```auto
PVector getMouse(){
    return new PVector(mouseX-x,mouseY-y);
  };

```

and if you wanted to specifiy you were drawing the an alternative canvas to the main canvas then.

```auto
void displayTabs(PGraphics scene) {
    
    tab t = states.get(state);
    
    if (toggle&&t!=null&&canvas!=null) {
      t.mouse = mouse2;
      mouse = mouse2;
      
      canvas.beginDraw();
      
      for(int i=0;i<states.size();i++){
      tab t1 = states.get(i);
      
      if(i!=state&&toggle){
        // t1.toggle = false;
        // t1.visible = false;
        // if(t1.title!=null)t1.title.toggle=1;
      }else t1.toggle=true;}
      t.logic();
      t.boundingBox();
      t.drawButtons();
      t.drawMenus();
      t.drawTextboxes();
      t.drawTextareas();
      t.drawTable_s();
      //t.displayInnerTabs();
      t.drawText();
      t.drawTitle();
      t.drawBorder();
      t.drawDmenu();
      t.drawSliderBoxes();
      t.drawTextBlocks();
    if (t!=null&&t.scrollable&&t.toggle)t.drawSlider();
    
      canvas.endDraw();
      scene.image(canvas,x,y);
      
    }
  };

```

where scene is the PGraphics Object you are drawing your menu onto, and canvas is the PGraphics object of the menu

Anyways hope that helps

---

<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: [March 22, 2021, 8:29pm UTC](https://discourse.processing.org/t/confused-with-slider-up-down-pgraphics/28665/4 "2021-03-22T20:29:53Z")

</div>

Thank you so much for this brilliant explanation!

That’s a great help!