Observer Pattern in User Interface Class

Timo

Hi to all,

I am trying to implement a User Interface on a canvas. On a mouseClick and mouseDrag there should be created an Object (either Cube or Object). Regarding code readability and design I made a UI-Object to include all the UI-stuff. The coordinates of my mouseInteraction is forwarded to the UI-class. Now I found out that I (obviously) have to implement an Observer-Pattern to pass the coordinates to the right Cube- or Object-Object and therewith creating it.

I paste here the partial code of my "Main"-class and the UI-class. You can find the whole project on github.com/timokramer/dgc:

Cube cube;
UI UI;
Vertex click, drag;
void setup() {
  translate(0, 0);
  background(255);
  size(800, 600, P3D);
  UI = new UI();
  stroke(#000000);
  strokeWeight(1);
  frameRate(60);
  translate(300, 200, -500);
  // create Cube-Object
  cube = new Cube();
  // create custom Object
  //object = new Object();
  //object.display();
  click = new Vertex(0, 0, 0, 0);
  drag = new Vertex(0, 0, 0, 0);
}

void draw() {
  background(#FFFFFF);
  UI = new UI();
  UI.setMouseInput(click.x, click.y, drag.x - click.x, drag.y - click.y);
  translate(300, 200, -500);
  stroke(#000000);
  UI.buttonChecker();
}

void mousePressed() {
  click.set(mouseX, mouseY, 0, 0);
  drag.set(mouseX, mouseY, 0, 0);
  //UI.MI.x1 = mouseX;
  //UI.MI.x1 = mouseY;
}

void mouseDragged() {
  drag.set(mouseX, mouseY, 0, 0);
}

class UI {

  Button button1 = new Button(670, 10, 110, 30, "createCube");
  Button button2 = new Button(670, 60, 110, 30, "transfCube");
  Button button3 = new Button(670, 110, 110, 30, "createObject");
  Button button4 = new Button(670, 160, 110, 30, "transfObject");
  Button button5 = new Button(670, 210, 110, 30, "clear");
  int modus = 0;
  mouseInteraction MI = new mouseInteraction(0,0,0,0);

  UI() {
    stroke(#FF0000);
    line(375, 300, 425, 300);
    line(400, 275, 400, 325);
  }

  void buttonChecker() {
    if (mousePressed && (mouseButton == LEFT)) {
      if ((mouseX>=this.button1.x && mouseX<=this.button1.x+this.button1.w) 
        && (mouseY>=this.button1.y && mouseY<=this.button1.y+this.button1.h)) {
        println("clickedButton1");
        modus = 1;
      }
      if ((mouseX>=this.button2.x && mouseX<=this.button2.x+this.button2.w) 
        && (mouseY>=this.button2.y && mouseY<=this.button2.y+this.button2.h)) {
        println("clickedButton2");
        modus = 2;
      }
      if ((mouseX>=this.button3.x && mouseX<=this.button3.x+this.button3.w) 
        && (mouseY>=this.button3.y && mouseY<=this.button3.y+this.button3.h)) {
        println("clickedButton3");
        modus = 3;
      }
      if ((mouseX>=this.button4.x && mouseX<=this.button4.x+this.button4.w) 
        && (mouseY>=this.button4.y && mouseY<=this.button4.y+this.button4.h)) {
        println("clickedButton4");
        modus = 4;
      }
      if ((mouseX>=this.button5.x && mouseX<=this.button5.x+this.button5.w) 
        && (mouseY>=this.button5.y && mouseY<=this.button5.y+this.button5.h)) {
        println("clickedButton5");
        modus = 5;
      }
    } 
  }

  void setMouseInput(float clickX, float clickY, float dragX, float dragY) {
    println(clickX, clickY, dragX, dragY);
    println(this.modus);
    if(this.modus == 1){
      println("Cube!!!");
      //cube = new Cube();
      //cube.createArrayFromMouseInput(clickX, clickY, dragX, dragY);
      //cube.createLineArray();
      //cube.display();
    }
  }

  class mouseInteraction {

    public int x1, y1, x2, y2;

    mouseInteraction(int x1, int y1, int x2, int y2) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
    }

    void actionDistributor(int x1, int y1, int x2, int y2) {
      if (modus == 1) {
        println("There will be a rectangle");
      }
      if (modus == 2) {
        println("There will be a transformation");
      }
      if (modus == 3) {
        println("There will be an Object");
      }
      if (modus == 4) {
        println("There will be a transformation");
      }
    }
  }

  class Button {

    int x, y, w, h;
    String string;

    Button(int x, int y, int w, int h, String string) {
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
      this.string = string;
      fill(255, 255, 255);
      stroke(#000000);
      rect(x, y, w, h);
      textSize(15);
      fill(0, 102, 153);
      text(string, x+5, y+25);     
    }
  }

}

The basic question is: What is the best way to implement mouse interaction to create an Object? -> How do I implement an Observer without a Main-Object (it's Processing)?

Another question: How can I redraw the canvas every frame without creating the UI-Object new everytime? It stores the modus-variable, that is important to know what function is called on mouseclick or mousedraw.

Thanks for the help, it is my first Design-Pattern^^

Timo

Sorry but I didnot recognize that it is already posted...by the way the forum software had problems taking my tags. complained about some xml-validation-error

PhiLho

The XML validation error comes up a lot lately, it is not related to your tags.

"without creating the UI-Object new everytime"
Well, you don't have to, since it is a global object. Just create it once in setup().

Some remarks: by convention, class names start with a capital letter (you should have a MouseInteraction instead), and variable names (non-constant) start with a lowercase letter. Having a declaration like UI UI; might be legal in Java, but is confusing (even more as some methods can be called statically, without instance of the class).

You can break the rules, but you should be at least consistent in your own conventions... ;-)

PhiLho

More remarks:

• About buttonChecker(): each button should be the responsible for checking if a coordinate fits within the bounds of the button. It would make your UI class much more scalable (easier to manage if you add buttons).
• About your buttons: see From several variables to arrays. The Observer pattern is easier to use if you have a list of observable objects.
• "How do I implement an Observer without a Main-Object" I don't understand this question, actually.