Chunk 85 - Advanced Buttons 2 (Part 2)

...... Let’s start by adding the ability to change the colour of a button, and to give the button a label so that anyone using our application knows the purpose of the button.

We will need to add two more instance properties, under the ones for position and size, in order to store details of the colour and button text.

// 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

We also need to change the constructor method to set default values for these new variables.

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       = 128; // Default Colour
    this.btnText         = "";  // Default Button Label Text
}

In order for our application to set these values we have to create some ‘setter’ methods in the button class, which allow us to specify values for the text label and colour of the button. These setter methods appear within the class definition for a button, immediately after the constructor method.

// 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.btnColour = colourValue;
}

Now we need to amend the drawButton() method to use the colour defined for the button, and to draw the button label if it is defined.

// 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 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); 
 }
}

You will notice that we have replaced the fill statement in the drawButton method with a fill statement using the colour attribute variable defined for the button being drawn. We have also added a check to see if the button has a text label variable defined for it, and if it does we set the colour to white and output the label text on the button.

In order to make the button look as good as possible we should position the button label so it is centered, to do this we calculate the starting X position for the text as being the X position of the button (this.btnTopX) plus half the width of the button (this.btnWidth / 2) minus half the pixel length of the button label (textWidth(this.btnText) / 2). The starting Y position is calculated as the Y position of the button (this.btnTopY) plus half the height of the button (this.btnHeight / 2) plus half the size of the font being used for the text.

Finally we can change the setup procedure to load the font we want to use, and specify our additional instance properties for our buttons.

Button btn1;
Button btn2;
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
  btn1 = new Button(10,365,100,25);
  btn1.setButtonColour(color(128,128,255));
  btn1.setButtonLabel("On");
  
  // Create a new button
  btn2 = new Button(120,365,100,25);
  btn2.setButtonColour(color(128,128,255));
  btn2.setButtonLabel("Off");

}

When we run our program now we get a screen with two buttons as shown in figure 2.0

Figure 2.0 Colours and Labels

---

// Button Class
// Development of a button class - Stage 2 of 5
// 2009 Nigel Parker

Button btn1;         // On Button
Button btn2;         // Off 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.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.setButtonLabel("Off");

}

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
  color   btnColour;       // Button Colour
  String  btnText;         // Button Label Text  
  
  // 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       = 128; // Default Colour
      this.btnText         = "";  // Default Button Label Text
  }
    
  // 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.btnColour = colourValue;
  }

  // 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 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); 
   }
  }
}

Chunk 85 - Advanced Buttons 2 (Part 1)

As we have seen from the previous two chapters, adding buttons to an application does not involve very complex coding, but it is a time consuming process with many lines of code being generated. Much of this code is duplicated for each button, so the obvious way to simplify this process and make it more elegant would be to develop a class for buttons. The development of such a class is covered in this chapter.

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);  
   
  }
  
}

Rotating Blocks

Still waiting for my book to arrive, but in the mean time I have been busy reading the information on the Processing Web Site.

I was recently discussing this project with a friend, and he suggested I may be interested in some computer generated art he had seen recently on the Krazydad blog and one particular piece by Daniel Piker inspired me to write my first Processing code showing some Rotating Blocks.

/**
 * Rotating Blocks
 * by Nigel Parker
 * 
 * Each column of blocks rotates at a different rate with the centre 
 * column remaining static and the left an right sides rotating in 
 * a different direction
 */
 
int [] r    =  new int[6];
int [] rVal =  new int[6];

void setup() {

  // Set up initial rotation speeds
  rVal[0]=5;
  rVal[1]=4;
  rVal[2]=3;
  rVal[3]=2;
  rVal[4]=1;
  rVal[5]=0;

  // Set the initial screen size etc  
  size(640,640); 
  smooth(); 
  noStroke();
  
}

void draw() 
{

    background(0);
    
    for(int i=0;i<6;i++)
    {
        int xxLeft  = 65  + (50 * i);
        int xxRight = 565 - (50 * i);
        
        // We will be drawing 11 boxes in a line
        for(int j=0;j<11;j++)
        {
          int yy = 65 + (50 * j);
          drawBox(xxLeft,yy,30,30,radians(r[i]));
          
          // Don't need to draw the centre column twice
          if (i < 5) 
          {
            drawBox(xxRight,yy,30,30,radians((-1 * r[i])));
          }
        }  
        r[i] = (r[i] + rVal[i]) % 360;        
    }

}

void drawBox(int x, int y, int w, int h, float rot)
{
  fill(0,148,255);
  
  // Move the origin of the co-ordinate system to be the
  // centre of the box we are going to draw
  translate(x,y); 
  
  // Rotate the co-ordinate system by the required amount
  rotate(rot);
  
  // Draw the rectangle based around the centre co-ordinates
  rectMode(CENTER);
  rect(0,0,w,h);  
  
  // Rotate the co-ordinate system back by the required amount  
  // We have to do this as rotate is cumulative
  rotate((rot * -1));  
  
  // Move the origin of the co-ordinate system back to 
  // its original position
  // We have to do this as translate is cumulative
  translate(-x,-y);  
}

A book buyer's tale ...

At the weekend I decided to get the processing book. I’m a bit impatient and didn’t want to wait for an online delivery so I phoned my local Waterstones store to check they had one in stock before going in to town. A very helpful member of staff checked on their computer system but unfortunately neither of the two stores in my nearest town had the book in stock, she also checked two other stores in neighbouring towns with the same result. I do live in the country so I thought maybe it is not the kind of book they get a lot of call for, but since I work in London I also asked if she could check the Ealing branch, same result. I thanked her for her efforts and decided to buy on line, I checked with Amazon, out of stock, before finally placing an order with Waterstones on line.

I have just received an email from Waterstones and they too are out of stock and will have to place another order with the publishers ….. This book must be in demand for some reason!

Initial thoughts

I have been writing software for a long time now, initially self taught during the early days of the BBC Model B; I subsequently studied computer science to degree level and made it my career. I guess after spending so much time in the business of writing software it is quite easy to become a bit jaded, to find it all a bit repetitive, but about a year ago I started studying and using Java and I have become such a fan of the language it has given me a new enthusiasm for programming, so when I heard about the Mass Writing Project with the Open University I just had to get involved ….