5. November 2010

In dieser Lektion sollten wir den bestehenden Code (Slider) verändern, sodass der horizontale Slider nun vertikal gestellt ist. Zusätzlich sollten wir eine Checkbox einrichten welche beim Aktivieren ein Kreuz oder Punkt darstellt. Besonders Mühe hatte ich in dieser Aufgabe, das Programmieren der Checkbox. Ausgangslage: Mein Resultat: Code:

Slider sliderR = null;
Slider sliderG = null;
Slider sliderB = null;
Checkbox cbox = null;


void setup()
{
  size(400, 400);
  PFont font;
  font = loadFont("Futura-Medium-20.vlw");
  textFont(font, 15);
  smooth();
  sliderR = new Slider(100,50,200,20,.5);
  sliderG = new Slider(100,100,200,20,.5);
  sliderB = new Slider(100,150,200,20,.5);
  
  cbox = new Checkbox(200, 100, 15, 15, false);
}

void draw()
{
float R = sliderR.pos() * 255;
float G = sliderG.pos() * 255;
float B = sliderB.pos() * 255;

  background(R,G,B);

  sliderR.draw();
  sliderG.draw();
  sliderB.draw();
  cbox.draw();
}

void mousePressed()
{
  sliderR.mousePos(mouseX,mouseY,true);
  sliderG.mousePos(mouseX,mouseY,true);
  sliderB.mousePos(mouseX,mouseY,true);
  cbox.mousePos(mouseX,mouseY,true);
}

void mouseDragged()
{
  sliderR.mousePos(mouseX,mouseY,true);
  sliderG.mousePos(mouseX,mouseY,true);
  sliderB.mousePos(mouseX,mouseY,true);
}



<strong>GUI Slider</strong>



class Slider
{
  PVector _p1;
  PVector _p2;

  int     _h;
  float   _pos;

  Slider(int x,int y,int w,int h,float pos)
  {
    _p1 = new PVector(x,y + h *.5);
    _p2 = new PVector(x+w,y + h *.5);

    _h = h;

    _pos = pos;
    if(_pos > 1.0)
      _pos = 1.0;
    else if(_pos < 0.0)
      _pos = 0.0;
  }

  float pos()
  {
    return (1-_pos);
  }

  boolean isHit(int x,int y)
  {
    if(x > _p1.x && x < _p2.x &&
       y > _p1.y - 5 && y < _p1.y + 5)
      return true;
    else
      return false;
  }

  void draw()
  {
    pushStyle();
     drawSlider();
     drawKnob();
    popStyle();
  }

  void drawSlider()
  {
    stroke(230);
    pushStyle();
    strokeWeight(5);
    strokeCap(SQUARE);
    line(_p1.y,_p1.x,_p2.y,_p2.x);
    popStyle();
    line(_p1.y + _h * .5,_p1.x,_p1.y - _h * .5,_p1.x);
    line(_p1.y + _h * .5,_p2.x,_p1.y - _h * .5,_p2.x);
    
    String  Werte = str(round ((1-_pos) * 255));
    text(Werte,_p1.y-10,_p1.x-5);
  }

  void drawKnob()
  {
    stroke(0);
    fill(21,175,255);
    PVector dir = PVector.sub(_p2,_p1);
    PVector pos = PVector.add( _p1 , PVector.mult(dir,_pos));

    ellipse(pos.y,pos.x,10,10);
    

  }

  void mousePos(int y,int x,boolean pressed)
  {
    if(pressed)
    {
      if(isHit(x,y))
      {  // move knob
        PVector dir = PVector.sub(_p1,_p2);
        _pos = 1.0 / dir.mag() * (x - _p1.x);

      }
    }
    else
    {  // mouse over

    }  
  }

}


<strong>GUI checkbox</strong>



class Checkbox
{
  int _x;
  int _y;
  int _w;
  int _h;
  boolean _checked;

  Checkbox(int x,int y,int w,int h,boolean checked) {
    _x = x;
    _y = y;
    _w = w;
    _h = h;
    _checked = checked;
  }
  
  void draw()
  {
    strokeWeight(1);
    rect(_x,_y,_w,_h);
    
    if (_checked) 
    {
      pushStyle();
      fill(255,0,0);
      ellipse(_x+7.5,_y+7.5,_w-2,_h-2);
      popStyle();
    }
  }

  boolean isHit(int x,int y)
  {
    if(x > _x && x < _x+_w &&
       y > _y && y < _y+_h)
      return true;
    else
      return false;
  }

    void mousePos(int x,int y,boolean pressed)
  {
    if(pressed)
    {
      if(isHit(x,y))
      {  // move knob
       if(_checked)
       {
        _checked = false;
       }
       else
       {
         _checked = true;
       }
      }
    }
    else
    {  // mouse over

    }  
  }  
  

  }