UdK - Principles of computational design
   
     
 

Simple GUI

Two simple classes for buttons and sliders.

// UdK Computational design
// Marius Watz 2003
// http://www.evolutionzone.com/udk/
//
// udk_05_gui_01
//
// Simple GUI classes - button and slider


int buttonNum,sliderNum;
Button[] buttons;
Slider[] sliders;

void setup() {
  size(400,400);
  background(255);
  ellipseMode(CENTER_DIAMETER);
  
  colorMode(RGB,255);
  color test=color(200,200,200);
  
  
  buttonNum=2;
  buttons=new Button[buttonNum];
  buttons[0]=new Button(20,360,20,20);
  buttons[1]=new Button(60,360,20,20);
  for(int i=0; i<buttonNum; i++) buttons[i].setColor(200,0,0, 200,200,200);

  sliderNum=2;
  sliders=new Slider[sliderNum];
  sliders[0]=new Slider(20,340,340,10, 0,300,50, false);
  sliders[1]=new Slider(370,20,300,10, 0,300,50, true);
  for(int i=0; isliderNum; i++) sliders[i].setColor(200,0,0, 200,200,200);
}

void loop() {
  noStroke();
  for(int i=0; i<buttonNum; i++) buttons[i].draw();
  for(int i=0; isliderNum; i++) sliders[i].draw();
  
  if(buttons[0].state==buttons[0].ON) stroke(200,0,0);
  else noStroke();
  if(buttons[1].state==buttons[1].ON) fill(100,100,100);
  else fill(220,220,200);
  
  ellipse(width/2,height/2,sliders[0].val,sliders[1].val);
}

void mousePressed() {
  for(int i=0; i<buttonNum; i++) buttons[i].check(mouseX,mouseY);
  for(int i=0; isliderNum; i++) sliders[i].check(mouseX,mouseY);
}

void mouseDragged() {
  for(int i=0; i<sliderNum; i++) sliders[i].check(mouseX,mouseY);
}

// General class for buttons
class Button {
  int x,y,w,h;
  int state,OFF=-1,ON=1;
  color activeCol,inactiveCol;
  
  Button(int _x,int _y,int _w,int _h) {
    x=_x;
    y=_y;
    w=_w;
    h=_h;
    state=OFF;
  }

  void setColor(int r1,int g1,int b1, int r2,int g2,int b2) {
    activeCol=color(r1,g1,b1);
    inactiveCol=color(r2,g2,b2);
  }
    
  void draw() {
    fill(activeCol);
    rect(x,y,w,h);
    
    if(state==OFF) {
      fill(inactiveCol);
      rect(x+1,y+1,w-2,h-2);
    }
  }
  
  void check(int mx,int my) {
    if(mx>=x && mx<=x+w && my>=y && my<=my+h) state=-state;
  }  
}

// General class for sliders
class Slider {
  int x,y,w,h;
  float minVal,maxVal,val;
  boolean vertical;
  color activeCol,inactiveCol;
    
  Slider(int _x,int _y,int _w,int _h,float _minVal,float _maxVal,
    float _val,boolean _vertical) {
    x=_x;
    y=_y;
    w=_w;
    h=_h;
    minVal=_minVal;
    maxVal=_maxVal;
    val=_val;
    vertical=_vertical;
  }

  void setColor(int r1,int g1,int b1, int r2,int g2,int b2) {
    activeCol=color(r1,g1,b1);
    inactiveCol=color(r2,g2,b2);
  }
  
  void check(int mx,int my) {
    if(vertical && mx>=x && mx<=x+h && my>=y && my<=y+w) {
      val=float(my-y)/w;
      val*=(maxVal-minVal);
      val+=minVal;
    }
    else if(mx>=x && mx<=x+w && my>=y && my<=y+h) {
      val=float(mx-x)/w;
      val*=(maxVal-minVal);
      val+=minVal;
    }
  }  
  
  void draw() {
    float valOffs;
    
    noFill();
    stroke(inactiveCol);
    if(vertical) line(x+h/2,y,x+h/2,y+w);
    else line(x,y+h/2,x+w,y+h/2);
    
    valOffs=(val-minVal)/(maxVal-minVal);
    valOffs*=w;
    noStroke();
    fill(activeCol);
    if(vertical) rect(x,y+valOffs-2, h,4);
    else rect(x+valOffs-2,y, 4,h);
  }  
}
Universität der Künste, Berlin 2003 - Marius Watz