ScrollSketch and Menu Demo

This is a simple example that illustrates using both a Menu and ScrollSketch and how to code for scrolling. The sketch contains some text, a line (black), two rectangles (red and yellow), and an ellipse (blue), as well as a ScrollSketch, ScrollBar, Button (gray), ScrollPane (light green), DraggablePanel (aqua), Menu and MenuBar (pinkish). You need to scroll to see many of the items. The demo emphasizes standard Processing capabilities because of the special coding that is needed for them. You will need to scroll down a bit, to find the Clickable items.

ScrollSketchMenuDemo.pde
Dragger.pde
Clickable.pde

Here is the code from the Draw() method that draws the text, line, rectangles as well as the Clickable items. Note the x and y values are replaced by sX_(x) and sY_(y).

  fill(0);
  text("Scroll the window to see what is hidden.", sX_(20), sY_(35));
  line(sX_(20), sY_(30), sX_(500), sY_(350));
  fill(#FF0000);
  rect(sX_(200), sY_(40), 160, 100);
  fill(#0000FF);
  ellipse(sX_(230), sY_(200), 40, 60);
  fill(#FFFF00);
  rect(sX_(400), sY_(200), 100, 75);
  fill(#000000);
  clickGrp.display();

Here is the code for the mousePressed(), mouseDragged, and mouseReleased() methods. The first two methods are simple because all the items dragged are Draggables. (That is, we are not dragging nonDraggables like Buttons.)

void mousePressed() {
  Draggable item;
  if (drag.checkForDrag()) {
    item = (Draggable)(drag.getItemTracked());
    if (item != null) 
      item.readyForDrag(drag);
  }
}  // mousePressed

void mouseDragged() {
  Draggable item;
  if (mousePressed) {
    drag.updateDrag();
    item = (Draggable)(drag.getItemTracked());
    if (item != null) {
      item.moved(drag);
    }  
  }
}  // mouseDragged

void mouseReleased() {
  if (drag.getWasDragging())
    drag.endDrag();
  else
    clickGrp.checkForClick();
}  // mouseReleased

Return to the top of the page

Revised: 04/11/2014