Confused with Slider up/down - PGraphics

Processing Coding Questions
1

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.

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?

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

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

1 Like
2

maybe this useful

3

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

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;

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

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.

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

4 Likes
4

Thank you so much for this brilliant explanation!

That’s a great help!

1 Like