Before we start the development, however, a quick recap on the purpose of a class would be useful.
A class is used to define the common attributes and behavior of an object, so by defining a class for buttons every object we describe as a button will inherit the attributes and the methods we have specified for that class, the beauty of this in practice is that we only have to write the code for one ‘generic’ button and every button we define after that will work in the same way, for free, without any additional code changes.
This class can then be copied and reused in every processing application where we need buttons without having to develop the same functionality again, which gives us more time on the exciting bits!
This chapter will deal with the creation and development of a class for buttons, and will concentrate on the common features of a button without examining the specific function of each button.
We will start by defining the class for buttons, with some of the instance properties we will need to draw the button on the screen, such as the size and position of the button.
We need to know details of where the button should be positioned on the screen, and the most logical method of doing this is to adopt the default co-ordinate system used within the processing language where we specify the top left x and y coordinates of the object. In addition to this we need to know the width and height of the button.
// 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
}
Now we need to add some code to this class that will allow us to create a new button and define the initial values, this constructor code is the code that will be run when we define a new button.
// 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
// 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
}
}
The code we have just developed will allow us to construct a new button, and define the top left x and y positions along with the height and width, but it will not draw the image of the button on the screen. To do that we need to add a method to the class, that we will call drawButton().
// Draw the button on the screen
public void drawButton()
{
// Select a colour for the button
fill(100, 100, 100);
// Draw the button
rect(this.btnTopX, this.btnTopY, this.btnWidth, this.btnHeight);
}
We could simply have added this code to the constructor method but in reality we want to be able to define all our buttons and draw them when required, so it is better to create a separate method for drawing the buttons.
In order to make use of this class we have defined we need to add the setup and draw functions as described below.
Button btn1; // On Button
Button btn2; // Off Button
void setup() {
size(400,400); // Set screen size
smooth(); // Anti-aliased (smooth) edges
// Create a new button
btn1 = new Button(10,565,100,25);
// Create a new button
btn2 = new Button(120,565,100,25);
}
void draw () {
// Clear the background and set the background colour
background(128,128,128);
// Process button one
btn1.drawButton();
// Process button two
btn2.drawButton();
}
The code we have developed so far gives us a screen with two buttons along the bottom, as shown in Figure 1.0. Now we have the basics of the button class, or at least the methods that allow us to draw the basic button shape on the screen, we can start to add functionality to our class.
Figure 1.0 Two Button Shapes
The complete code for Stage 1:
// Button Class
// Development of a button class - Stage 1 of 5
// 2009 Nigel Parker
Button btn1; // On Button
Button btn2; // Off Button
void setup() {
size(400,400); // Set screen size
smooth(); // Anti-aliased (smooth) edges
// Create a new button
btn1 = new Button(10,365,100,25);
// Create a new button
btn2 = new Button(120,365,100,25);
}
void draw () {
// Clear the background and set the background colour
background(128,128,128);
// Process button one
btn1.drawButton();
// Process button two
btn2.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
// 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.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
}
// Draw the button on the screen
public void drawButton()
{
// Set the button colour
fill(128,128,255);
// Draw the button
rect(this.btnTopX, this.btnTopY, this.btnWidth, this.btnHeight);
}
}
No comments:
Post a Comment