Add the following method to the button class, to determine, for a button instance, if the mouse is currently over the area if occupies.
// Check if the mouse is currently positioned over the button
private boolean isMouseOver() {
if (mouseX >= this.btnTopX && mouseX <= this.btnTopX + this.btnWidth &&
mouseY >= this.btnTopY && mouseY <= this.btnTopY + this.btnHeight) { return true; }
else {return false; }
}
We will make use of this function as part of a new method that will check, and set, status information regarding each button.
We need to add new instance variables to hold the mouseOver status for the button.
boolean mouseOver; // Is mouse over button
In addition we need to set the default mouseOver value in the class constructor.
// The button constructor is called to create a new button
// and stores the position and size information provided
// in the instance variables of the object created
Button (int X, int Y, int W, int H)
{
.
.
.
this.mouseOver = false; // Mouse over button?
}
To make sure the mouseOver value is set we have to add a call to the checkMouse method in the draw() function before we draw the buttons. In that way we have the current status of the button before we draw it on the screen.
void draw () {
// Clear the background and set the background colour
background(128,128,128);
// Process button one
btn1.checkMouse();
btn1.drawButton();
// Process button two
btn2.checkMouse();
btn2.drawButton();
// Process button three
btn3.checkMouse();
btn3.drawButton();
}The code changes we have made have now visible effect on the buttons, but we can build on the changes to enable us to change the colour and/or image of a button when the mouse is over it.
Define new instance variables to hold the standard button colour and image, and also the colour and image to be displayed when the mouse is over the button
color stdColour; // Standard Button Colour
color moverColour; // Mouse Over Button Colour
PImage stdImage; // Standard Button Image
PImage moverImage; // Mouse Over Button Image
Again we need to set the default values in the class constructor.
// The button constructor is called to create a new button
// and stores the position and size information provided
// in the instance variables of the object created
Button (int X, int Y, int W, int H)
{
.
.
.
this.stdColour = 128; // Standard Button Colour
this.moverColour = -1; // Mouse Over Button Colour
this.stdImage = null; // Standard Button Image
this.moverImage = null; // Mouse Over Button Image
this.btnColour = -1; // Button Colour
}
Notice that we have also changed the default value and comment for the btnColour instance variable as this will now be used to store the current colour for the button.
We need to allow the user to specify the button colours and images so we will need to create some new setter methods, and adjust the existing ones for the new instance variables.
// Set the Button Colour
public void setButtonColour(int colourValue)
{
this.stdColour = colourValue;
this.btnColour = colourValue;
}
// Set the Button Image
public void setButtonImage(String imageValue)
{
this.stdImage = loadImage(imageValue);
this.btnImage = this.stdImage;
}
// Set the MouseOver Button Colour
public void setMouseOverColour(int colourValue)
{
this.moverColour = colourValue;
}
// Set the MouseOver Button Image
public void setMouseOverImage(String imageValue)
{
this.moverImage = loadImage(imageValue);
}
Finally, add code to the checkMouse() method to set the values in btnImage and btnColour depending on mouseOver, and change the calls in setup() to set the new instances and define the mouseOver values if required.
// Check the location of the mouse in relation to the
// button and set instance variables accordingly
private void checkMouse()
{
// Check if the mouse is over the button
boolean mOver = this.isMouseOver();
// Mark the button to indicate if the mouse is over it
this.mouseOver = mOver;
// If the mouse is over the button and we have a mouse over
// image defined, set the button image accordingly.
// Otherwise set to the standard image
if (this.mouseOver && this.moverImage != null)
{
this.btnImage = this.moverImage;
}
else
{
this.btnImage = this.stdImage;
}
// If the mouse is over the button and we have a mouse over
// colour defined, set the button colour accordingly.
// Otherwise set to the standard colour
if (this.mouseOver && this.moverColour != -1)
{
this.btnColour = this.moverColour;
}
else
{
this.btnColour = this.stdColour;
}
}
void setup() {
size(400,400); // Set screen size
smooth(); // Anti-aliased (smooth) edges
// Load the font we want to use on the buttons
btnFont=loadFont("Verdana-Bold-12.vlw");
// Create a new button and set the colour and label
btn1 = new Button(10,365,100,25);
btn1.setButtonColour(color(128,128,255));
btn1.setMouseOverColour(color(128,128,128));
btn1.setButtonLabel("On");
// Create a new button and set the colour and label
btn2 = new Button(120,365,100,25);
btn2.setButtonColour(color(128,128,255));
btn2.setMouseOverColour(color(128,128,128));
btn2.setButtonLabel("Off");
// Create a new button and set the colour and image
btn3 = new Button(230,359,17,33);
btn3.setButtonColour(color(128,128,255));
btn3.setButtonImage("tab-unsel-menu.gif");
btn3.setMouseOverImage("tab-sel-menu.gif");
}
When we run our program now and move the mouse pointer over the buttons from left to right we get the results as shown in figures 4.0, 4.1, and 4.2.
Figure 4.0 Mouse Over the On Button
Figure 4.1 Mouse Over the Off Button
Figure 4.2 Mouse Over the Menu Button
// Button Class
// Development of a button class - Stage 4 of 5
// 2009 Nigel Parker
Button btn1; // On Button
Button btn2; // Off Button
Button btn3; // Image Button
PFont btnFont;
void setup() {
size(400,400); // Set screen size
smooth(); // Anti-aliased (smooth) edges
// Load the font we want to use on the buttons
btnFont=loadFont("Verdana-Bold-12.vlw");
// Create a new button and set the colour and label
btn1 = new Button(10,365,100,25);
btn1.setButtonColour(color(128,128,255));
btn1.setMouseOverColour(color(128,128,128));
btn1.setButtonLabel("On");
// Create a new button and set the colour and label
btn2 = new Button(120,365,100,25);
btn2.setButtonColour(color(128,128,255));
btn2.setMouseOverColour(color(128,128,128));
btn2.setButtonLabel("Off");
// Create a new button and set the colour and image
btn3 = new Button(230,359,17,33);
btn3.setButtonColour(color(128,128,255));
btn3.setButtonImage("tab-unsel-menu.gif");
btn3.setMouseOverImage("tab-sel-menu.gif");
}
void draw () {
// Clear the background and set the background colour
background(128,128,128);
// Process button one
btn1.checkMouse();
btn1.drawButton();
// Process button two
btn2.checkMouse();
btn2.drawButton();
// Process button three
btn3.checkMouse();
btn3.drawButton();
}
// Definition of a Button class that will allow us to
// create and use buttons within our processing code
class Button {
// Button Position and Size Properties
int btnTopX; // Button Top X Coordinate
int btnTopY; // Button Top Y Coordinate
int btnWidth; // Button Width
int btnHeight; // Button Height
color btnColour; // Button Colour
String btnText; // Button Label Text
PImage btnImage; // Button Image
boolean mouseOver; // Is mouse over button
color stdColour; // Standard Button Colour
color moverColour; // Mouse Over Button Colour
PImage stdImage; // Standard Button Image
PImage moverImage; // Mouse Over Button Image
// The button constructor is called to create a new button
// and stores the position and size information provided
// in the instance variables of the object creaetd
Button (int X, int Y, int W, int H)
{
this.btnTopX = X; // Set Button Top X Coordinate
this.btnTopY = Y; // Set Button Top Y Coordinate
this.btnWidth = W; // Set Button Width
this.btnHeight = H; // Set Button Height
this.btnColour = -1; // Button Colour
this.btnText = ""; // Default Button Label Text
this.btnImage = null; // Button Image
this.mouseOver = false; // Mouse over button?
this.stdColour = 128; // Standard Button Colour
this.moverColour = -1; // Mouse Over Button Colour
this.stdImage = null; // Standard Button Image
this.moverImage = null; // Mouse Over Button Image
}
// Setter Methods - Methods that can be used by an
// application to set instance variables within an
// instance of the button class
// Set the Button Label Text
public void setButtonLabel(String labelText)
{
this.btnText = labelText;
}
// Set the Button Colour
public void setButtonColour(int colourValue)
{
this.stdColour = colourValue;
this.btnColour = colourValue;
}
// Set the Button Image
public void setButtonImage(String imageValue)
{
this.stdImage = loadImage(imageValue);
this.btnImage = this.stdImage;
}
// Set the MouseOver Button Colour
public void setMouseOverColour(int colourValue)
{
this.moverColour = colourValue;
}
// Set the MouseOver Button Image
public void setMouseOverImage(String imageValue)
{
this.moverImage = loadImage(imageValue);
}
// Draw the button on the screen
public void drawButton()
{
// Set the button colour
fill(this.btnColour);
// Draw the button
rect(this.btnTopX, this.btnTopY, this.btnWidth, this.btnHeight);
// Draw the button image
if (this.btnImage != null)
{
image(this.btnImage, this.btnTopX, this.btnTopY);
}
// Draw the button label if the text is defined (not blank)
if (! this.btnText.equals(""))
{
// Select the font for the text
textFont(btnFont,12);
// Set the colour to white
fill(255);
// Calculate the horizontal centre of the button, then subtract half
// the width of the button label to find the starting position
float textX = (this.btnTopX + this.btnWidth / 2) - (textWidth(this.btnText) / 2);
// Calculate the vertical centre of the button
float textY = (this.btnTopY + this.btnHeight / 2) + 6;
// Output the text
text(this.btnText, textX, textY);
}
}
// Check if the mouse is currently positioned over the button
private boolean isMouseOver() {
if (mouseX >= this.btnTopX && mouseX <= this.btnTopX + this.btnWidth &&
mouseY >= this.btnTopY && mouseY <= this.btnTopY + this.btnHeight) {
return true;
}
else {
return false;
}
}
// Check the location of the mouse in relation to the
// button and set instance variables accordingly
private void checkMouse()
{
// Check if the mouse is over the button
boolean mOver = this.isMouseOver();
// Mark the button to indicate if the mouse is over it
this.mouseOver = mOver;
// If the mouse is over the button and we have a mouse over
// image defined, set the button image accordingly.
// Otherwise set to the standard image
if (this.mouseOver && this.moverImage != null)
{
this.btnImage = this.moverImage;
}
else
{
this.btnImage = this.stdImage;
}
// If the mouse is over the button and we have a mouse over
// colour defined, set the button colour accordingly.
// Otherwise set to the standard colour
if (this.mouseOver && this.moverColour != -1)
{
this.btnColour = this.moverColour;
}
else
{
this.btnColour = this.stdColour;
}
}
}
No comments:
Post a Comment