Chunk 85 - Advanced Buttons 2 (Part 3)

...... Now we have the ability to create buttons of any size, set the colour and the text of the button, but in many applications buttons do not have text, they use images or icons to convey their purpose. So now we will add the ability to define buttons that use images.

For the purposes of this example I will be using two images taken from the processing lib/themes directory. These images ‘tab-unsel-menu.gif’ and ‘tab-sel-menu.gif’ need to be placed in the data directory of the processing project.

We need to add new instance variables to hold the name of the image to be shown on the standard button.

PImage  btnImage;        // Button Image

In addition we need to set the default image value in the class constructor, and create a setter method to allow our application to specify the image to use.

// 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.btnImage        = null; // Default Button Image
}

// Set the Button Image 
public void setButtonImage(String imageValue)
{
  this.btnImage  = loadImage(imageValue);
}

And add the following code to the drawButton() method, after we have drawn the button and before we add the text.

// Draw the button image  
if (this.btnImage != null)
{
  image(this.btnImage, this.btnTopX, this.btnTopY); 
}

Finally we can add the definition of this new button in the setup() function and then add it to the draw() function to ensure it is drawn on the screen.

Button btn1;
Button btn2;
Button btn3;

void setup() {
  size(400,400);
  smooth();
  
  .
  .
  .

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

void draw () {

  // Clear the background and set the background colour
  background(128,128,128);

  // Process button one
  btn1.drawButton();

  // Process button two
  btn2.drawButton();

  // Process button three
  btn3.drawButton();

}

When we run our program now we get a screen with three buttons as shown in figure 3.0

Figure 3.0 Colours, Labels and Images

---

// Button Class
// Development of a button class - Stage 3 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.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");

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

}

void draw () {

  // Clear the background and set the background colour
  background(128,128,128);

  // Process button one
  btn1.drawButton();

  // Process button two
  btn2.drawButton();

  // Process button three
  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
  
  
  // 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
      this.btnImage        = null; // Default 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.btnColour = colourValue;
  }

  // Set the Button Image 
  public void setButtonImage(String imageValue)
  {
    this.btnImage  = 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); 
   }
  }
  
  
}