Processing - How to move the extended class to the group

Question

The ColorPicker from cp5 is hardcoded and I can not resize the shapes of the sliders. So I extended the ColorPicker class and made a new one called MyColorPicker.

I have several groups and I want to add my new class to one of them. Earlier, I could do it by cp5.addColorPicker("") .moveTo("") But in this case there is a new class and I couldn't move it to the group. Here is the code pieces:

import controlP5.*;
ControlP5 cp5;
 
MyColorPicker cp;
 
void setup() {
  size(500, 300);
  noStroke();
  cp5 = new ControlP5(this);
  cp = new MyColorPicker(cp5, "MYPICKER");
  cp.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));

  Group SetupGroup = cp5.addGroup("SETUP")
    .setPosition(90,100)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2);
    background(0); //For transparency
    noStroke();
  ;

    Group ColorGroup = cp5.addGroup("COLOR-BRIGHTNESS")
    .setPosition(30,240)
    .setWidth(300)
    .setHeight(30)
    .setFont(font2)
    .moveTo(SetupGroup);
    background(0);
    noStroke();
    ;

//I want to move my own color picker to the colorGroup instead of this one.
/*
    cp5.addColorPicker("PICKER")
    .setPosition(40, 10)
    .moveTo(ColorGroup);
    ; */
.
.
.
.
.
.
.}

class MyColorPicker extends ColorPicker {
  MyColorPicker(ControlP5 cp5, String theName) {
    super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
  }
 
  void setItemSize(int w, int h) {
    sliderRed.setSize(w, h);
    sliderGreen.setSize(w, h);
    sliderBlue.setSize(w, h);
    sliderAlpha.setSize(w, h);
   
    sliderRed.setPosition(10,10);
    sliderGreen.setPosition(10,100);
    sliderBlue.setPosition(10,180);
    sliderAlpha.setPosition(10,260);
  }
}

Answer 1

I would recommend fixing syntax errors before posting and also removing any code that may not be related to the issue. Trying to cleanup / minimise code that way made the solution obvious for me so many times in the past.

I'm not sure you can group groups within groups. I might be wrong and hopefully someone more experienced with cp5 can correct me if I'm wrong.

If you use a single group and fix the syntax errors you could run something like this:

import controlP5.*;
ControlP5 cp5;
 
MyColorPicker cp;
 
PFont font, font2; 
 
void setup() {
  size(500, 300);
  noStroke();
  
  font = createFont ("Georgia Bold", 20);
  font2 = createFont ("Georgia Bold",15);
  
  cp5 = new ControlP5(this);
  
  Group SetupGroup = cp5.addGroup("SETUP")
    .setPosition(90,100)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2);

  cp = new MyColorPicker(cp5, "MYPICKER");
  cp.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
  cp.moveTo(SetupGroup);
}

void draw(){
  background(0);
}

class MyColorPicker extends ColorPicker {
  MyColorPicker(ControlP5 cp5, String theName) {
    super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
  }
 
  void setItemSize(int w, int h) {
    sliderRed.setSize(w, h);
    sliderGreen.setSize(w, h);
    sliderBlue.setSize(w, h);
    sliderAlpha.setSize(w, h);
   
    sliderRed.setPosition(10,10);
    sliderGreen.setPosition(10,100);
    sliderBlue.setPosition(10,180);
    sliderAlpha.setPosition(10,260);
  }
}

Well done on extending the colour picker, not noobie after all ;)

If you want two colour pickers for two LED rings but not display both at the same time perhaps you could use an accordion ?

import controlP5.*;
ControlP5 cp5;
 
MyColorPicker cp1, cp2;
 
PFont font, font2; 
 
void setup() {
  size(500, 300);
  noStroke();
  
  font = createFont ("Georgia Bold", 20);
  font2 = createFont ("Georgia Bold",15);
  
  cp5 = new ControlP5(this);
  
  Group ring1Group = cp5.addGroup("ring 1")
    .setPosition(90,100)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2);
    
  cp1 = new MyColorPicker(cp5, "ring 1 picker");
  cp1.setPosition(50, 50).setColorValue(color(255, 000, 000, 255));
  cp1.moveTo(ring1Group);
  
  Group ring2Group = cp5.addGroup("ring 2")
    .setPosition(90,240)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2);
    
  cp2 = new MyColorPicker(cp5, "ring 2 picker");
  cp2.setPosition(50, 50).setColorValue(color(000, 255, 000, 255));
  cp2.moveTo(ring2Group);
  
  cp5.addAccordion("ring colors")
     .setPosition(40,40)
     .setWidth(200)
     .addItem(ring1Group)
     .addItem(ring2Group)
     ;
}

void draw(){
  background(0);
}

class MyColorPicker extends ColorPicker {
  MyColorPicker(ControlP5 cp5, String theName) {
    super(cp5, cp5.getTab("default"), theName, 0, 0, 100, 10);
  }
 
  void setItemSize(int w, int h) {
    sliderRed.setSize(w, h);
    sliderGreen.setSize(w, h);
    sliderBlue.setSize(w, h);
    sliderAlpha.setSize(w, h);
   
    sliderRed.setPosition(10,10);
    sliderGreen.setPosition(10,100);
    sliderBlue.setPosition(10,180);
    sliderAlpha.setPosition(10,260);
  }
}

I'm not sure multiple nested levels a supported with the accordion component either. I would expect it to support a flat hierarchy.