We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Syntax Questions › Problems with buttons
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Problems with buttons (Read 454 times)
lookoutforthatcow
Problems with buttons
Mar 19th, 2009, 6:58pm  
Hey folks, first time posting here so be patient if i do something stupid lol
Basically, i am creating a simple drawing tool for a uni project. The idea is that it should a simple interface with buttons that change the colour of the pen and the user should be able to clear the screen.
The problems i have are;
1. the pen tool draws over the buttons
2. the buttons are not highlighting when the mouse rolls over them
3. when i clear the screen, the buttons disappear.

Also i want to import an image to use as a placeholder, so to speak, that will frame the screen and include instructions etc. Is this possible to do done so that its "behind" buttons but the pen tool doesn't draw over it?

The code is included below



I have created another piece of code using classes to determine the buttons etc and they are working with the highlight etc but it wont let me add the drawing tool or anything else.

Any help would be appreciated. and if my code is bad feel free to tell me!
Thanks
Back to top
 
 
lookoutforthatcow
Re: Problems with buttons
Reply #1 - Mar 19th, 2009, 6:58pm  
This is the code guys

int redX, redY; //position of red button
int blueX, blueY; //position of blue button
int greenX, greenY; //position of green button
int eraseX, eraseY; //position of erase button
int whiteX, whiteY; //position of white button
int blueSize = 25; //diamater of blue button
int redSize = 25; //diamater of red button
int greenSize = 25; //diamater of green button
int eraseSize = 25; //diameter of green button
int whiteSize = 25; //diameter of a green button
int y = mouseY;
int x = mouseX;

color redColour, blueColour, greenColour;
color whiteColour, whiteHighlight;
color redHighlight, blueHighlight, greenHighlight;
color penColour, eraseColour, eraseHighlight;
boolean redOver = false;
boolean greenOver = false;
boolean blueOver = false;
boolean eraseOver = false;
boolean whiteOver = false;

void setup()
{ background(255);
 size(768,520);
 smooth();

 redColour = color(180,0,0);
 greenColour = color(0,180,0);
 blueColour = color(0,0,180);
 whiteColour = color(255);
 eraseColour = color(0);
 eraseHighlight = color(100);
 redHighlight = color(100);
 greenHighlight = color(100);
 blueHighlight = color(100);
 whiteHighlight = color(100);
 penColour = color(0);
 redX = 20;
 redY = 480;
 greenX = 55;
 greenY = 480;
 blueX = 90;
 blueY = 480;
 eraseX = 125;
 eraseY = 480;
 whiteX = 160;
 whiteY = 480;
 
 //red button
 if(redOver) {
  fill(redHighlight);
} else {
  fill(redColour);
}
rect(redX,redY,redSize,redSize);
stroke(2);


//green button
if(greenOver) {
  fill(greenHighlight);
} else {
  fill(greenColour);
}
rect(greenX,greenY,greenSize,greenSize);
stroke(2);




//blue button
if(blueOver) {
  fill(blueHighlight);
} else {
  fill(blueColour);
}
rect(blueX,blueY,blueSize,blueSize);
stroke(2);


//black button
if(eraseOver) {
  fill(eraseHighlight);
} else {
  fill(eraseColour);
}
rect(eraseX,eraseY,eraseSize,eraseSize);
stroke(2);


//whitebutton
if(whiteOver) {
 fill(whiteHighlight);
} else {
 fill(whiteColour);
}
rect(whiteX,whiteY,whiteSize,whiteSize);
stroke(2);
}

void draw()
{  

// draw if mouse pressed
if (mousePressed) {
  line(pmouseX, pmouseY, mouseX, mouseY);
  stroke(penColour);
  strokeWeight(3);
} else if (y > 480) {
  strokeWeight(0);
}

//large colours
 if (mouseButton == RIGHT){
    stroke(random(255),random(255),random(255));
    strokeWeight(20);
 }
 
if(keyPressed){
 if(key=='c' || key == 'C'){
background(255);
}
}


  if( redOver(redX,redY,redSize, redSize)) {
    redOver = true;
   blueOver = false;
   greenOver = false;
   eraseOver = false;
   whiteOver = false;
  } else if ( blueOver(blueX,blueY,blueSize,blueSize)) {
    blueOver = true;
   redOver = false;
   greenOver = false;
   eraseOver = false;
   whiteOver = false;
 } else if ( greenOver(greenX,greenY,greenSize,greenSize)) {
     greenOver = true;
   blueOver = false;
   redOver = false;
   eraseOver = false;
   whiteOver = false;
 } else if ( eraseOver(eraseX,eraseY,eraseSize,eraseSize)) {
   eraseOver = true;
   blueOver = false;
   greenOver = false;
   redOver = false;
   whiteOver = false;
 } else if ( whiteOver(whiteX,whiteY,whiteSize,whiteSize)) {
   eraseOver = false;
   blueOver = false;
   greenOver = false;
   redOver = false;
   whiteOver = true;
 } else {
   redOver = greenOver = blueOver = eraseOver = false;
 }
}

boolean redOver(int x, int y, int width, int height)
{
 if (mouseX >= 25 && mouseX <= 50 &&
     mouseY >= 480 && mouseY <= 505) {
   return true;
 } else {
   return false;
 }
}

boolean greenOver(int x, int y, int width, int height)
{
 if (mouseX >= x && mouseX <= x+width &&
     mouseY >= y && mouseY <= y+height) {
   return true;
 } else {
   return false;
 }
}

boolean blueOver(int x, int y, int width, int height)
{
 if (mouseX >= x && mouseX <= x+width &&
     mouseY >= y && mouseY <= y+height) {
   return true;
 } else {
   return false;
 }
}
 
 boolean eraseOver(int x, int y, int width, int height)
{
 if (mouseX >= x && mouseX <= x+width &&
     mouseY >= y && mouseY <= y+height) {
   return true;
 } else {
   return false;
 }}
 
   boolean whiteOver(int x, int y, int width, int height)
{
 if (mouseX >= x && mouseX <= x+width &&
     mouseY >= y && mouseY <= y+height) {
   return true;
 } else {
   return false;
 }
}

void mousePressed()
{
 if(redOver) {
   penColour = redColour;
 }
 if(greenOver) {
   penColour = greenColour;
 }
 if(blueOver) {
   penColour = blueColour;
 }
 if (eraseOver) {
   penColour = eraseColour;
 }
 if (whiteOver) {
   penColour = whiteColour;
 }
}
Back to top
 
 
PhiLho 
Re: Problems with buttons
Reply #2 - Mar 19th, 2009, 7:39pm  
A possible way to solve your problem is to create a PGraphics of same size, and do all user drawing there.
Then the draw() routine will just image() the graphics then the buttons: no drawing over the buttons, no clearing of the buttons, and you can even save to disk a clean version (no buttons) of the drawing.
Back to top
 
WWW  
lookoutforthatcow
Re: Problems with buttons
Reply #3 - Mar 25th, 2009, 6:09pm  
okay what would be the best way to do that then. I am still picking all this up lol
I understand what you are saying just dont know the correct syntax to use
Back to top
 
 
cloister
Re: Problems with buttons
Reply #4 - Mar 25th, 2009, 8:29pm  
PhiLo's saying that you want to have a PImage object to draw on:

PGraphics canvas = null;
setup(){
// etc...

canvas = new PGraphics(width,height);

// etc...
}

PGraphics is the underlying class that Processing uses to encapsulate all the drawing capabilities that Processing implements.  So if you have your own PGraphics object you're working with, you can call all the usual drawing methods on that, instead of on the default PGraphics (which corresponds to the screen):

canvas.ellipse(...);
canvas.line(...);

and so forth.  Basically, define a canvas as shown, and draw on it like this:

canvas.beginDraw();
canvas.line(pmouseX, pmouseY, mouseX, mouseY);
canvas.endDraw();

Presto, you're drawing to an in-memory buffer rather than directly to the screen.  Note that if you need to, you can put as much stuff as you want between the beginDraw and endDraw calls.  Then, in your draw routine, you'd do:

void draw() {
// draw the background image:
image(background,0,0);

// show the results of the user's drawing:
image(canvas,0,0);

// show the buttons:
drawButtons(); // I'll assume you know how to put that code in its own function
}
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›