ControlP5 DropdownList not working

SimplyEnvision

Hi there everyone,

I'm trying to add a dropdown list to my sketch to be able to change a parameter. I took the example code for ControlP5's DropdownList and added it to my code as closely as possible. The code runs, but I can't interact with the dropdown list. It doesn't respond to mouse over or clicking.

This is the relevant code I have written:

import ddf.minim.analysis.*;
import ddf.minim.*;
import controlP5.*;

Minim minim;
AudioInput in;
FFT fft;
BeatDetect beat;
Filter filter;
FreqAndNote freqAndNote;
FreqAndColour freqAndColour;

ControlP5 cp5;
DropdownList dropDownList;

int w;
int time = 0;
int radius = 0; 

float eRadius;

PImage fade;

int runMode = 0;
int menu = 0;

int bands = 0;

void setup(){

  size(1280, 720, P3D);
  smooth();

  minim = new Minim(this);
  in = minim.getLineIn(Minim.STEREO, 512);
  fft = new FFT(in.bufferSize(), in.sampleRate());
  fft.logAverages(60, 7);


  filter = new Filter();
  freqAndNote = new FreqAndNote();
  freqAndColour = new FreqAndColour();


  // A beat detection object song SOUND_ENERGY mode with a sensitivity of 10 milliseconds
  beat = new BeatDetect();


  eRadius = 20;


  cp5 = new ControlP5(this);
  // create a DropdownList
  dropDownList = cp5.addDropdownList("myList").setPosition(-630, -330);

  customize(dropDownList); // customize the first list

}

void draw(){  

  background(0); 
  translate(width/2, height/2);

  fft.forward(in.mix);
  //colorMode(RGB, 255);
  filter.run(fft, runMode, bands);

  colorMode(HSB, 100);

}
  void customize(DropdownList ddl) {
    // a convenience function to customize a DropdownList
    ddl.setBackgroundColor(color(190));
    ddl.setItemHeight(20);
    ddl.setBarHeight(15);
    ddl.captionLabel().set("dropdown");
    ddl.captionLabel().style().marginTop = 3;
    ddl.captionLabel().style().marginLeft = 3;
    ddl.valueLabel().style().marginTop = 3;

    //Adding modes to list
    ddl.addItem("circles", 0);
    ddl.addItem("equalizer", 1);
    ddl.addItem("beatcircles", 2);
    ddl.addItem("notefrequency", 3);


    //ddl.scroll(0);
    ddl.setColorBackground(color(60));
    ddl.setColorActive(color(255, 128));
}

  void controlEvent(ControlEvent theEvent) {
    // DropdownList is of type ControlGroup.
    // A controlEvent will be triggered from inside the ControlGroup class.
    // therefore you need to check the originator of the Event with
    // if (theEvent.isGroup())
    // to avoid an error message thrown by controlP5.

    if (theEvent.isGroup()) {
      // check if the Event was triggered from a ControlGroup
      println("event from group : "+theEvent.getGroup().getValue()+" from "+theEvent.getGroup());
      runMode = int(theEvent.getGroup().getValue() + 1);
    } 
    else if (theEvent.isController()) {
      println("event from controller : "+theEvent.getController().getValue()+" from "+theEvent.getController());
    }
  }

SimplyEnvision

I asked around on the IRC channel and got some help. Turns out that the dropdown list doesn't work well with the translate().

sojamo

hi, use pushMatrix(); before translate inside draw and popMatrix(); at the bottom of the draw function to prevent the controllers to be translated together with your drawing routines. Otherwise the rendering of the controls and the mouse events dont match and cause the behavior you are encountering.