Creating GUI using G4P GUI builder

Sheldon96

I have recently create GUI using the GUI builder, but cant seem to know how to make the buttons to work, for example: a play button that wont play, slider that cant control the volume, stop and play button. How do I make the buttons to work? I'm using g4p and minim libraries. Below is my code

import g4p_controls.*;
import ddf.minim.*;
import ddf.minim.analysis.*; 


Minim minim;
AudioPlayer groove;
AudioMetaData meta;
BeatDetect beat;
float yoff = 0.0;
float slowChange1;
float slowChange2;
int screen=0;

void setup() 
{
  createGUI();
  customGUI();
  selectInput("Select a file to process:", "fileSelected");
  size(640, 360, P3D);
  ellipseMode(CENTER);
}

void fileSelected(File selection) {
  if (selection == null) {
    println("Window was closed or the user hit cancel.");
    screen = 1;
  } else {
    println("User selected " + selection.getAbsolutePath());
    minim = new Minim(this);
    groove = minim.loadFile(selection.getAbsolutePath(), 2048);
    groove.play();
    beat = new BeatDetect();
    screen = 2;
  }
}

void draw() 
{
  if (screen ==2)
  {
      background(#7A9EB9);
      fill(#FFA00F);
      ellipse(320, 180, 300, 300);
      beat.detect(groove.mix);
      stroke(#40FAFF);
      strokeWeight(2);

        if(beat.isOnset()==true)
        {
           fill(#FF0808);
           ellipse(270, 120, 60, 60);

          fill(#2CE823);
          ellipse(370, 120, 90, 90);

        }
        else
        {
           fill(#3B0D37);
            ellipse(270, 120, 60, 60);

          fill(#2754CB);
          ellipse(370, 120, 90, 90);

        }

        if(keyPressed)
        {
          //sad
            noFill();
           for(int i = 0; i < groove.bufferSize() - 2; i++){
             slowChange1 = lerp(slowChange1, groove.left.get(i), 0.2);
             slowChange2 = lerp(slowChange2, groove.right.get(i), 0.2);
             //Left right, up down, (how high)
             arc(310, 320 + (30 * slowChange1), 100, 300, PI+QUARTER_PI, TWO_PI, OPEN);
           }
        }
        else //happy
       {
             noFill();
            for(int i = 0; i < groove.bufferSize() - 2; i++){
                 slowChange1 = lerp(slowChange1, groove.left.get(i), 0.1);
                 slowChange2 = lerp(slowChange2, groove.right.get(i), 0.1);
               arc(320, 180 + (50 * slowChange2), 300, 200, 0, PI, OPEN);
            }
       }



    fill(#0220D8);
    beginShape();
     float xoff = 0;
      for (float x = 0; x <= width; x += 10) {
        float y = map(noise(xoff, yoff), 10, 1, 0, 300);
        vertex(x, y); 
        xoff += 0.10;
      }
      yoff += 0.10;
      vertex(width, height);
      vertex(0, height);
      endShape(CLOSE);
    }
    else
    {
      rect(10,50,60,20);
    }
  }
  void customGUI() {
  }

//////////////////////////

/* ========================================================= * ==== WARNING === * ========================================================= * The code in this tab has been generated from the GUI form * designer and care should be taken when editing this file. * Only add/edit code inside the event handlers i.e. only * use lines between the matching comment tags. e.g.

 void myBtnEvents(GButton button) { //_CODE_:button1:12356:
     // It is safe to enter your event code here  
 } //_CODE_:button1:12356:

 * Do not rename this tab!
 * =========================================================
 */

public void slider1_change1(GSlider source, GEvent event) { //_CODE_:slider1:950990:
  println("slider1 - GSlider >> GEvent." + event + " @ " + millis());
} //_CODE_:slider1:950990:

public void imgButton1_click1(GImageButton source, GEvent event) { //_CODE_:imgButton1:626084:
  println("imgButton1 - GImageButton >> GEvent." + event + " @ " + millis());
} //_CODE_:imgButton1:626084:



// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI(){
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.CYAN_SCHEME);
  G4P.setCursor(ARROW);
  surface.setTitle("Sketch Window");
  slider1 = new GSlider(this, 40, 10, 170, 40, 10.0);
  slider1.setLimits(0.5, 0.0, 1.0);
  slider1.setNumberFormat(G4P.DECIMAL, 2);
  slider1.setLocalColorScheme(GCScheme.GOLD_SCHEME);
  slider1.setOpaque(false);
  slider1.addEventHandler(this, "slider1_change1");
  imgButton1 = new GImageButton(this, 260, 170, 100, 60, new String[] { "playz.png", "play1.png", "playz.png" } );
  imgButton1.addEventHandler(this, "imgButton1_click1");
}

// Variable declarations 
// autogenerated do not edit
GSlider slider1; 
GImageButton imgButton1; 

quark

In your code you should have the statement size(640, 360, P3D); as the first line inside setup. Also move the statement minim = new Minim(this); to inside the setup method as it should only be created once, not every time you load a file.

The code below is a modified version of the 'Play a File' example that comes with minim to work with G4P. Notice that I use setGain to control the volume because setVolume does not work in minim

Main sketch code tab

/**
 * This sketch demonstrates how to play a file with Minim using an AudioPlayer. <br />
 * It's also a good example of how to draw the waveform of the audio. Full documentation 
 * for AudioPlayer can be found at http://code.compartmental.net/minim/audioplayer_class_audioplayer.html
 * <p>
 * For more information about Minim and additional features, 
 * visit http://code.compartmental.net/minim/
 */

import ddf.minim.*;
import g4p_controls.*;

Minim minim;
AudioPlayer player;

void setup()
{
  size(512, 250, P2D);
  createGUI();
  // we pass this to Minim so that it can load files from the data directory
  minim = new Minim(this);

  // loadFile will look in all the same places as loadImage does.
  // this means you can find files that are in the data folder and the 
  // sketch folder. you can also pass an absolute path, or a URL.
  player = minim.loadFile("groove.mp3");
}

void draw()
{
  background(0);
  stroke(255);

  // draw the waveforms
  // the values returned by left.get() and right.get() will be between -1 and 1,
  // so we need to scale them up to see the waveform
  // note that if the file is MONO, left.get() and right.get() will return the same value
  for (int i = 0; i < player.bufferSize() - 1; i++) {
    float x1 = map( i, 0, player.bufferSize(), 0, width );
    float x2 = map( i+1, 0, player.bufferSize(), 0, width );
    line( x1, 50 + player.left.get(i)*50, x2, 50 + player.left.get(i+1)*50 );
    line( x1, 150 + player.right.get(i)*50, x2, 150 + player.right.get(i+1)*50 );
  }
  // draw a line to show where in the song playback is currently located
  float posx = map(player.position(), 0, player.length(), 0, width);
  stroke(0, 200, 0);
  line(posx, 0, posx, 200);
  // Background for controls
  noStroke();
  fill(200, 200, 255);
  rect(0, height - 50, width, 100);
}

gui.pde tab

/* ============================================
 * ====                   WARNING                        ===
 * ============================================
 * The code in this tab has been generated from the GUI form
 * designer and care should be taken when editing this file.
 * Only add/edit code inside the event handlers i.e. only
 * use lines between the matching comment tags. e.g.

 void myBtnEvents(GButton button) { //_CODE_:button1:12356:
     // It is safe to enter your event code here  
 } //_CODE_:button1:12356:

 * Do not rename this tab!
 * ============================================
 */

public void play_click(GButton source, GEvent event) { //_CODE_:btnPlay:699610:
    player.rewind();
    player.play();
} //_CODE_:btnPlay:699610:

public void pause_click(GButton source, GEvent event) { //_CODE_:btnPause:314474:
  if ( player.isPlaying() ) {
    source.setText("START");
    player.pause();
  }
  else {
    source.setText("PAUSE");
    player.play();
  }
} //_CODE_:btnPause:314474:

public void custom_slider1_change1(GCustomSlider source, GEvent event) { //_CODE_:custom_slider1:410248:
  player.setGain(source.getValueF());
} //_CODE_:custom_slider1:410248:


// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI(){
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
  G4P.setCursor(ARROW);
  surface.setTitle("Sketch Window");
  btnPlay = new GButton(this, 10, 210, 80, 30);
  btnPlay.setText("PLAY ALL");
  btnPlay.addEventHandler(this, "play_click");
  btnPause = new GButton(this, 100, 210, 80, 30);
  btnPause.setText("PAUSE");
  btnPause.addEventHandler(this, "pause_click");
  custom_slider1 = new GCustomSlider(this, 270, 200, 180, 40, "grey_blue");
  custom_slider1.setShowLimits(true);
  custom_slider1.setLimits(-10.0, -25.0, -10.0);
  custom_slider1.setNumberFormat(G4P.DECIMAL, 1);
  custom_slider1.setOpaque(false);
  custom_slider1.addEventHandler(this, "custom_slider1_change1");
  label1 = new GLabel(this, 450, 210, 60, 30);
  label1.setTextAlign(GAlign.CENTER, GAlign.MIDDLE);
  label1.setText("GAIN");
  label1.setOpaque(false);
}

// Variable declarations 
// autogenerated do not edit
GButton btnPlay; 
GButton btnPause; 
GCustomSlider custom_slider1; 
GLabel label1; 

Sheldon96

Thanks for your help! But it says getValueF()): does not exist?

quark

But it says getValueF()): does not exist?

That is strange because the code I posted was from a working sketch. :-? Can you post the actual error message here?

Sheldon96

It doesnt display the error now, but the slider wont work I dunno why

quark

t doesnt display the error now,

Did you have to modify the code to fix it or did it magically start working?

Sheldon96

It magically start working

quark

In that case there is not much I can suggest. Perhaps the slider will start working of its own accord ;)

Sheldon96

It is still not working until now..