ControlP5 - Problems creating a Toggle Controller with custom images on a second tab

lpelletier

Windows 7, Processing 2.1.1

I'm creating a GUI using the ControlP5 library. I am using two tabs, TAB 1 and TAB 2. I have made 2 custom toggle buttons, Toggle1 and Toggle2. The only difference between Toggle1 and Toggle2 is that Toggle2 has been moved to TAB 2 using .moveTo("TAB 2"). The resulting problem is that Toggle2 does not display the custom images, and just shows up as a white box that does not update its visual mode when clicked. Has anyone encountered this before? Here is my code:

import controlP5.*;

PImage offPic, onPic;
ControlP5 cp5;

void setup() {
    size(600, 800);
    offPic = loadImage("images/white_unselected.png");
    onPic  = loadImage("images/white_selected.png");

    cp5 = new ControlP5(this);

    cp5.getTab("default")
       .activateEvent(true)
       .setLabel("TAB 1")
       .setId(1);

    cp5.addTab("TAB 2")
       .activateEvent(true)
       .setId(2);

    cp5.addToggle("Toggle1")
       .setPosition(20, 20)
       .setImages(offPic, onPic, onPic)
       .updateSize();

    cp5.addToggle("Toggle2")
       .setPosition(100, 100)
       .setImages(offPic, onPic, onPic)
       .updateSize()
       .moveTo("TAB 2");
}

void draw() {
    background(0);
}

colouredmirrorball

Yes, I encountered something like that as well. I haven't filed a bug report though, maybe that's a good idea to do. (Edit) Where do you file a bug report for ControlP5? :P

I believe my solution was to use a button instead, and set it so it acted like a toggle using .setSwitch(true) in the setup. The weird thing is, the image does get loaded, as the white square has the same size as the image, it just isn't being displayed.

lpelletier

Thanks, at least I know I'm not crazy :) I have submitted a bug report at https://code.google.com/p/controlp5/issues/list

sojamo

thanks for the bug report, the best option would be to go with colouredmirrorball's suggestion to use a button and .setSwitch(true), here an example:

import controlP5.*;

ControlP5 cp5;

boolean toggle;

void setup() {
  size(400,400);
  cp5 = new ControlP5(this);
  final Button b = cp5.addButton("myToggle").setSize(100,100).setSwitch(true).setOff();
  // use a ControlListener to change the state of variable toggle 
  b.addListener(new ControlListener() {
    public void controlEvent(ControlEvent theEvent){
      toggle = b.isOn();
    }
  });
}

void draw(){
    background(toggle ? 255:0);
}