Simple UI

AnotherExample.pde

/*
Using it with some proportional changes on buttons according to screen-size
*/

UI ui;

PImage bg;
void setup() {
  size(800, 800);
  ui = new UI(this);
  bg = loadImage("bg.png");
  float buttonHeight = 200;
  float buttonWidth = 292;
  float ratio = (height / 4) / buttonHeight;
  ui.add("testButton", "drawing0.svg", 0, 0, buttonWidth * ratio, buttonHeight * ratio);
  ui.add("testButton2", "drawing1.svg", 0, height * 0.25, buttonWidth * ratio, buttonHeight * ratio);
  ui.add("testButton", "drawing2.svg", 0, height * 0.5, buttonWidth * ratio, buttonHeight * ratio);
  ui.add("testButton", "drawing3.svg", 0, height * 0.75, buttonWidth * ratio, buttonHeight * ratio);
}

boolean checked = false;
void testButton2(UI.Button e, int event, int x, int y) {
  switch(event) {
  case UI.RELEASE:
    checked = !checked;
    if (checked) {
      e.setImage("drawing1.svg");
    } else {
     e.setImage("drawing1b.svg"); 
    }
    //e.hide();
    break;
  }
}


void testButton(UI.Button e, int event, int x, int y) {
  switch(event) {
  case UI.CLICK:

    //e.hide();
    break;
  case UI.PRESS:
    break;
  case UI.DRAG:
    //* if you want to implement dragging use this formula
    e.x += mouseX -pmouseX;
    e.y += mouseY -pmouseY;
    println("dragging" + millis());
    //*/
    break;
  case UI.RELEASE:
    break;
  }
}
void displayBackground() {
 for (int i = 0; i < width + bg.width; i += bg.width) {
   for (int j = 0; j < height + bg.height; j += bg.height) {
     image(bg, i, j);
   }
 }
}

void draw() {
  displayBackground();
  ui.display();
}

Example.pde

/**
 
 UI = new UI(this);
 
 ui.add() to add buttons
 ui.display() to display buttons in the draw() method of your sketch
 
 
 **/

UI ui;

void setup() {
  size(640, 480);
  ui = new UI(this); //istance of the "ui manager"
  // ui.add(methodName,image/shapeSVG filename, x, y); 
  // this method returns a UI.Button object created
  ui.add("test", "metalPanel_redCorner.png", 10, 10);
  ui.add("hideWhenInPosition", "metalPanel_yellowCorner.png", 120, 10);
  ui.add("destroyOnClick", "metalPanel_blueCorner.png", 10, 120);
}

void draw() {
  background(0);
  fill(255, 0, 0);
  rect(width / 2, 0, width / 2, height);
  ui.display();
}

void destroyOnClick(UI.Button button, int eventType, int x, int y) {
  button.destroy();
}

void hideWhenInPosition(UI.Button button, int eventType, int x, int y) {
  if (eventType == UI.RELEASE && mouseX > width / 2) {
    button.hide();
  } else if (eventType == UI.DRAG) {
    button.x += mouseX - pmouseX; //increment x and y of the button by mouse position's deltas
    button.y += mouseY - pmouseY;
  }
}

void test(UI.Button button, int eventType, int x, int y) {
  switch(eventType) {
  case UI.PRESS:
    println("PRESSED!!!");
    break;
  case UI.RELEASE:
    println("RELEASED!!!");
    break;
  case UI.DRAG:
    println("DRAGGED!!!");
    button.x += mouseX - pmouseX; //increment x and y of the button by mouse position's deltas
    button.y += mouseY - pmouseY;
    break;
  }
}

UI.pde

import java.lang.reflect.Method;
import processing.core.*;
import processing.event.MouseEvent;
import java.util.ArrayList;

/**
  Created by Massimo Avvisati <[email protected]>
  GPL ver. 3 licensed.
**/

public class UI {
  public static final int RELEASE = MouseEvent.RELEASE;
  public static final int PRESS = MouseEvent.PRESS;
  public static final int CLICK = MouseEvent.CLICK;
  public static final int DRAG = MouseEvent.DRAG;
  ArrayList<Button> elements = new ArrayList<Button>();
  PApplet parent;
  UI(PApplet parent) {
    this.parent = parent;
    parent.registerMethod("mouseEvent", this);
    //parent.registerMethod("draw", this);
  }


  public void display() {

    //parent.hint(parent.DISABLE_DEPTH_TEST);
    for (Button element : elements) {
      element.display(parent.g);
    }
    prune();
  }
  
  private void prune() {
    for (int i = elements.size() -1; i >= 0; i--) {
     Button element = elements.get(i);
     if (element.dead)
       elements.remove(i);
    }
  }
  Button add(String methodBaseName, String filename, float x, float y) {
    return add( methodBaseName, x, y, 1, 1).setImage(filename, true);
  }
  Button add(String methodBaseName, String filename, float x, float y, float w, float h) {
    return add( methodBaseName, x, y, w, h).setImage(filename, false);
  }

  Button add(String methodBaseName, float x, float y, float w, float h) {
    Button element = new Button(parent, methodBaseName, (int) x, (int) y, (int) w, (int) h);
    elements.add(element);
    return element;
  }
  Button dragged = null;
  public void mouseEvent(MouseEvent event) {
    int x = event.getX();
    int y = event.getY();


    switch (event.getAction()) {

    case MouseEvent.RELEASE:
    case MouseEvent.PRESS:
    case MouseEvent.CLICK:
    dragged = null;
    boolean eventCatched = false;
      for (int i = elements.size () -1; i >= 0; i--) {
        Button element = elements.get(i);
//(element.commandMethod != null)
        if (!eventCatched && element.visible && element.isInside(x, y)) {
          eventCatched = true;
          if (dragged == null && event.getAction() == MouseEvent.PRESS)
            dragged = element;
            
          try {
            element.commandMethod.invoke(parent, element, event.getAction(), x - element.x, y - element.y);
            
          } 
          catch (Exception ex) {
          }
          
        }
      }

      break;

    case MouseEvent.DRAG:
      if (dragged != null && dragged.visible)
      try {
        dragged.commandMethod.invoke(parent, dragged, event.getAction(), x - dragged.x, y - dragged.y);
      } 
      catch (Exception ex) {
      }
      break;
    case MouseEvent.MOVE:
      // umm... forgot

      break;
    }
  }

  public class Button {
    int x, y, w, h;
    Method commandMethod;
    public int buttonColor = 255;
    PShape buttonShape;
    PImage buttonImage;
    boolean dead = false;
    

    protected Button(PApplet sketch, String method, int x, int y, int w, int h) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      setMethod(method, sketch);
    }
    
    public void destroy() {
     dead = true; 
      
    }

    public boolean isInside(int _x, int _y) {
      return ( _x > x && _x < x + w && _y > y && _y < y + h);
    }
    private void setMethod(String method, PApplet sketch) {
      try {
        commandMethod = sketch.getClass().getMethod(method, //questo definisce il metodo necessario nello sketch
        new Class[] { 
          Button.class, 
          int.class, 
          int.class, 
          int.class
        }
        );
      } 
      catch (Exception ex) {
        // no such method, or an error.. which is fine, just ignore
        commandMethod = null;
        PApplet.println(ex + "\nPlease implement a " + method + " method in your main sketch if you want to be informed");
      }
    }


    Button setImage(String filename) {
      return setImage(filename, false);
    }
    Button setImage(String filename, boolean resize) {
      if (filename.indexOf(".svg") > 0) {
        buttonShape = parent.loadShape(filename);
        if (resize) {
          w = (int) buttonShape.width;
          h = (int) buttonShape.height;
        }
      } else {
        buttonImage = parent.loadImage(filename);
        if (resize) {
          w = (int) buttonImage.width;
          h = (int) buttonImage.height;
        }
      }
      return this;
    }
    private int alignment = PApplet.LEFT;
    void setAlign(int alignment) {
      if (this.alignment == alignment)
        return;
      if (this.alignment == PApplet.LEFT && alignment == PApplet.CENTER)
        x -= w/ 2;
      else if (this.alignment == PApplet.LEFT && alignment == PApplet.RIGHT)
        x -= w;
      else if (this.alignment == PApplet.CENTER && alignment == PApplet.LEFT)
        x += w / 2;
      else if (this.alignment == PApplet.CENTER && alignment == PApplet.RIGHT)
        x -= w / 2;
      else if (this.alignment == PApplet.RIGHT && alignment == PApplet.LEFT)
        x += w;
      else if (this.alignment == PApplet.RIGHT && alignment == PApplet.CENTER)
        x += w / 2;

      this.alignment = alignment;
    }

    boolean visible = true; 
    public void hide() {
      visible = false;
    }

    public void show() {
      visible = true;
    }

    void display(PGraphics pg) {
      if (!visible)
        return;
      if (buttonImage != null) {
        pg.image(buttonImage, x, y, w, h);
      } else if (buttonShape == null) {
        pg.noStroke();
        pg.fill(buttonColor);
        pg.rect(x, y, w, h);
      } else {
        pg.shape(buttonShape, x, y, w, h);
      }
    }
  }
}