Difference between revisions of "P5Button"

Latest revision as of 19:56, 4 March 2018

// Button Example

var mouseUp = 1;
var bFunction = -1;
var frame = 0;

function setup() {
  	createCanvas(windowWidth, windowHeight);
}

function draw() {
	p5ButtonSetup();
 
 	background(255);

	textSize(14);
	textAlign(LEFT);
  	text("Frame " + frame, 5, 20);

  	if(frame == 0){
  		// code for frame 0 ...	
  	}

  	if(frame == 1){
  		// code for frame 1 ...	
  	}
  	

  	p5Button(width/2, height/ 7, 180, 40, 24, "Save", 0);
  	p5Button(width/2, height/ 7*2, 180, 40, 24, "New Scan", 1);
}

function p5ButtonSetup(){
	if(!mouseIsPressed){
		mouseUp = 0;
	}
}

// x, y, width, width, textSize, text, p5ButtonFunction-Number (starts with 0)
function p5Button(bx, by, bw, bh, bts, bt, bN){

  if(mouseIsPressed){

    if ( (mouseX>bx-bw/2)&&(mouseX<bx+bw/2)&&(mouseY>by-bh/2)&&(mouseY<by+bh/2) ) {
    	if(mouseUp == 0) {
      	mouseUp = 1;
    		if(bN == 0) frame = 9;
        if(bN == 1) frame = 0;
      }
      fill(155);
    }else{
    	fill(255);

    }
  }else{
  	fill(255);
  }

  rectMode(CENTER);
  stroke(180);
  rect(bx, by, bw, bh, 5);

  if(bt != ""){
	  textAlign(CENTER);
	  textSize(bts);
	  noStroke();
	  fill(20);
	  text(bt, bx, by + (bts / 3) );
  }
}