Creating GUI using G4P GUI builder

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; 

Answers

  • Answer ✓

    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; 
    
  • Thanks for your help! But it says getValueF()): does not exist?

  • 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?

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

  • t doesnt display the error now,

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

  • It magically start working

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

  • It is still not working until now..

Sign In or Register to comment.